"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Check } from "lucide-react";
import { apiChangePassword } from "@/lib/api";

/**
 * 修改密码表单：提交成功后后端已递增 TokenVersion 并清除全部登录 cookie，
 * 刷新 layout 使 Header 回到游客态，随后跳转登录页重新登录。
 */
export default function PasswordForm() {
  const router = useRouter();
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (newPassword.length < 6) {
      setError("新密码至少 6 位");
      return;
    }
    if (newPassword !== confirmPassword) {
      setError("两次输入的新密码不一致");
      return;
    }

    setSubmitting(true);
    try {
      const res = await apiChangePassword(oldPassword, newPassword);
      if (res.message) {
        setSuccess(true);
        router.refresh();
        setTimeout(() => router.push("/login"), 1500);
      } else {
        setError(res.error || "修改失败");
      }
    } catch {
      setError("网络错误，请重试");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="panel p-5 sm:p-6 space-y-4">
      {success && (
        <div className="alert-ok flex items-center gap-2" role="status">
          <Check size={15} /> 密码修改成功，正在跳转登录页...
        </div>
      )}
      {error && <div className="alert-error" role="alert">{error}</div>}
      <div>
        <label className="field-label" htmlFor="pwd-old">当前密码</label>
        <input
          id="pwd-old"
          type="password"
          value={oldPassword}
          onChange={(e) => setOldPassword(e.target.value)}
          required
          autoComplete="current-password"
          className="field"
        />
      </div>
      <div>
        <label className="field-label" htmlFor="pwd-new">新密码（至少 6 位）</label>
        <input
          id="pwd-new"
          type="password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
          minLength={6}
          autoComplete="new-password"
          className="field"
        />
      </div>
      <div>
        <label className="field-label" htmlFor="pwd-confirm">确认新密码</label>
        <input
          id="pwd-confirm"
          type="password"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
          required
          minLength={6}
          autoComplete="new-password"
          className="field"
        />
      </div>
      <div className="flex justify-end pt-1 border-t" style={{ borderColor: "var(--line)" }}>
        <button
          type="submit"
          disabled={submitting || success}
          className="btn btn-primary w-full sm:w-auto"
        >
          {submitting ? "提交中..." : "修改密码"}
        </button>
      </div>
    </form>
  );
}