import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { useAuth } from "../auth/AuthContext";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { markOnboardingEntryReady } from "../lib/onboardingGuide";

const PASSWORD_REQUIREMENTS = [
  "至少 12 位",
  "包含大写字母、小写字母和数字",
  "不要使用公司名、常见顺序或过于简单的组合",
];

export function ChangePasswordPage() {
  const navigate = useNavigate();
  const { changePassword } = useAuth();

  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError("");

    if (newPassword !== confirmPassword) {
      setError("两次输入的新密码不一致，请确认后再提交。");
      return;
    }

    setSubmitting(true);
    try {
      await changePassword(oldPassword, newPassword);
      markOnboardingEntryReady();
      navigate("/portal", { replace: true });
    } catch (err) {
      if (isApiError(err)) {
        setError(mapApiErrorMessage(err.code, err.details, err.message));
      } else {
        setError("修改密码失败，请稍后重试");
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="card-std space-y-6 border-primary-100 p-6">
      <div className="mb-6 space-y-2">
        <p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
        <h1 className="text-2xl font-bold text-zinc-900">修改密码</h1>
        <p className="text-sm text-secondary">
          为了账号安全，请先修改初始密码后再进入系统。
        </p>
      </div>

      <form className="space-y-4" onSubmit={handleSubmit}>
        <div className="space-y-1">
          <Label htmlFor="oldPassword">旧密码</Label>
          <Input
            autoComplete="current-password"
            data-testid="change-password-old"
            id="oldPassword"
            onChange={(event) => setOldPassword(event.target.value)}
            placeholder="请输入旧密码"
            type="password"
            value={oldPassword}
          />
        </div>

        <div className="space-y-1">
          <Label htmlFor="newPassword">新密码</Label>
          <Input
            autoComplete="new-password"
            data-testid="change-password-new"
            id="newPassword"
            onChange={(event) => setNewPassword(event.target.value)}
            placeholder="至少 12 位，建议包含大小写/数字"
            type="password"
            value={newPassword}
          />
          <p className="text-xs text-zinc-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
        </div>

        <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
          <p className="font-medium text-zinc-700">建议的新密码规则</p>
          <ul className="mt-1 list-disc space-y-1 pl-4">
            {PASSWORD_REQUIREMENTS.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>

        <div className="space-y-1">
          <Label htmlFor="confirmPassword">确认新密码</Label>
          <Input
            autoComplete="new-password"
            id="confirmPassword"
            onChange={(event) => setConfirmPassword(event.target.value)}
            placeholder="再次输入新密码"
            type="password"
            value={confirmPassword}
          />
        </div>

        {error ? (
          <p
            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
            data-testid="change-password-error"
          >
            {error}
          </p>
        ) : null}

        <Button
          data-testid="change-password-submit"
          className="w-full"
          disabled={submitting || !oldPassword.trim() || !newPassword.trim() || !confirmPassword.trim()}
          type="submit"
        >
          {submitting ? "提交中..." : "确认修改"}
        </Button>
      </form>
    </div>
  );
}