import { useEffect, useState } from "react";

import {
  AppFormDialog,
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import {
  formFieldClass,
  formHintClass,
  formInputClass,
  modalFormClass,
} from "../platform/modalUi";

type ResetPasswordDialogProps = {
  open: boolean;
  displayName: string;
  username: string;
  saving: boolean;
  onSubmit: (newPassword: string) => Promise<void>;
  onClose: () => void;
};

export function ResetPasswordDialog({
  open,
  displayName,
  username,
  saving,
  onSubmit,
  onClose,
}: ResetPasswordDialogProps) {
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!open) return;
    setPassword("");
    setConfirm("");
    setError(null);
  }, [open]);

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (password.length < 8 || password.length > 72) {
      setError("密码长度需为 8~72 字符");
      return;
    }
    if (password !== confirm) {
      setError("两次输入的密码不一致");
      return;
    }
    setError(null);
    await onSubmit(password);
  };

  return (
    <AppFormDialog
      open={open}
      onOpenChange={(nextOpen) => {
        if (!nextOpen) onClose();
      }}
      eyebrow="SECURITY"
      title="重置密码"
    >
      <form
        className={`${modalFormClass} pb-5`}
        onSubmit={(event) => void handleSubmit(event)}
      >
        <p className="mb-4 text-[12px] text-[#587087]">
          正在为 <strong className="text-[#23384e]">{displayName}</strong>
          （{username}）设置新密码。对方需使用新密码重新登录。
        </p>
        <label className={formFieldClass}>
          <span>
            新密码<span className="text-danger">*</span>
          </span>
          <Input
            className={formInputClass}
            type="password"
            autoFocus
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            autoComplete="new-password"
            placeholder="8~72 字符"
          />
        </label>
        <label className={formFieldClass}>
          <span>
            确认新密码<span className="text-danger">*</span>
          </span>
          <Input
            className={formInputClass}
            type="password"
            value={confirm}
            onChange={(event) => setConfirm(event.target.value)}
            autoComplete="new-password"
          />
          <span className={formHintClass}>重置后不会强制踢下线已有会话</span>
        </label>
        {error ? (
          <p className="mb-3 text-[11px] text-danger">{error}</p>
        ) : null}
        <div className="flex justify-end gap-2">
          <Button
            type="button"
            variant="outline"
            className={dialogSecondaryButtonClass}
            onClick={onClose}
            disabled={saving}
          >
            取消
          </Button>
          <Button
            type="submit"
            className={dialogPrimaryButtonClass}
            disabled={saving}
          >
            {saving ? "重置中…" : "确认重置"}
          </Button>
        </div>
      </form>
    </AppFormDialog>
  );
}