import { PasswordChangeRequest, type SessionInfo, TotpCode } from "@umt/contracts";
import { KeyRound, LoaderCircle, LogOut, ShieldCheck, UserRound } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { z } from "zod";
import { useChangePassword, useLogout, useTotpAction, useTotpStatus } from "~/api/auth.ts";
import { Button } from "~/components/ui/button.tsx";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog.tsx";
import { Input } from "~/components/ui/input.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
import { errorMessage, LOGIN_PATH } from "~/lib/api.ts";
import { formatDateTime } from "~/lib/utils.ts";
import { FormField, zodFieldErrors } from "./form-field.tsx";

const PasswordForm = PasswordChangeRequest.extend({ confirm: z.string() }).refine((v) => v.newPassword === v.confirm, {
  message: "两次输入的新密码不一致",
  path: ["confirm"],
});

function ChangePasswordDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  const change = useChangePassword();
  const [form, setForm] = useState({ currentPassword: "", newPassword: "", confirm: "" });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const parsed = PasswordForm.safeParse(form);
    if (!parsed.success) {
      setErrors(zodFieldErrors(parsed.error.issues));
      return;
    }
    setErrors({});
    try {
      const r = await change.mutateAsync({ currentPassword: form.currentPassword, newPassword: form.newPassword });
      toast.success(r.revokedSessions ? `密码已修改，已注销其它 ${r.revokedSessions} 个会话` : "密码已修改");
      setForm({ currentPassword: "", newPassword: "", confirm: "" });
      onOpenChange(false);
    } catch (err) {
      const msg = errorMessage(err);
      if (/旧密码|当前密码|password/i.test(msg)) setErrors({ currentPassword: "当前密码不正确" });
      else toast.error(msg);
    }
  };

  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }));

  return (
    <Dialog open={open} onOpenChange={(o) => !change.isPending && onOpenChange(o)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>修改密码</DialogTitle>
          <DialogDescription>修改后其它设备上的会话会被注销，当前会话保留。</DialogDescription>
        </DialogHeader>
        <form id="pwd-form" onSubmit={submit} className="grid gap-1" noValidate>
          <FormField label="当前密码" htmlFor="pwd-cur" error={errors.currentPassword}>
            <Input
              id="pwd-cur"
              type="password"
              autoComplete="current-password"
              value={form.currentPassword}
              onChange={set("currentPassword")}
              aria-invalid={!!errors.currentPassword}
            />
          </FormField>
          <FormField label="新密码" htmlFor="pwd-new" error={errors.newPassword} hint="至少 10 个字符">
            <Input
              id="pwd-new"
              type="password"
              autoComplete="new-password"
              value={form.newPassword}
              onChange={set("newPassword")}
              aria-invalid={!!errors.newPassword}
            />
          </FormField>
          <FormField label="确认新密码" htmlFor="pwd-confirm" error={errors.confirm}>
            <Input
              id="pwd-confirm"
              type="password"
              autoComplete="new-password"
              value={form.confirm}
              onChange={set("confirm")}
              aria-invalid={!!errors.confirm}
            />
          </FormField>
        </form>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={change.isPending}>
            取消
          </Button>
          <Button type="submit" form="pwd-form" disabled={change.isPending}>
            {change.isPending ? <LoaderCircle className="animate-spin" /> : null}
            保存
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

/** 二次验证(TOTP):未开启 → 生成密钥 → 在验证器里添加 → 输入 6 位码确认;已开启 → 当前密码 + 验证码关闭 */
function TotpDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  const status = useTotpStatus(open);
  const action = useTotpAction();
  const [setup, setSetup] = useState<{ secret: string; uri: string } | null>(null);
  const [code, setCode] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const enabled = status.data?.enabled === true;

  const reset = () => {
    setSetup(null);
    setCode("");
    setPassword("");
    setError(null);
  };
  const close = (o: boolean) => {
    if (action.isPending) return;
    if (!o) reset();
    onOpenChange(o);
  };

  const begin = async () => {
    setError(null);
    try {
      const r = await action.mutateAsync({ action: "begin" });
      if (r.secret && r.otpauthUri) setSetup({ secret: r.secret, uri: r.otpauthUri });
    } catch (err) {
      setError(errorMessage(err));
    }
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!TotpCode.safeParse(code).success) {
      setError("验证码为 6 位数字");
      return;
    }
    setError(null);
    try {
      if (enabled) {
        if (!password) {
          setError("请输入当前密码");
          return;
        }
        await action.mutateAsync({ action: "disable", password, code });
        toast.success("已关闭二次验证");
      } else {
        await action.mutateAsync({ action: "enable", code });
        toast.success("已开启二次验证,下次登录需要输入验证码");
      }
      reset();
      onOpenChange(false);
    } catch (err) {
      setError(errorMessage(err));
    }
  };

  const grouped = setup?.secret.replace(/(.{4})/g, "$1 ").trim();

  return (
    <Dialog open={open} onOpenChange={close}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>二次验证(TOTP)</DialogTitle>
          <DialogDescription>
            {status.isLoading
              ? "读取状态…"
              : enabled
                ? "已开启:登录时需要验证器里的 6 位验证码。关闭需要当前密码和验证码。"
                : "未开启:开启后登录除密码外还需要验证器(如 1Password、Google Authenticator)里的 6 位验证码。"}
          </DialogDescription>
        </DialogHeader>
        {!enabled && !setup ? (
          <div className="grid gap-2">
            {status.data?.pending ? (
              <p className="text-meta text-muted-foreground">有一个未确认的密钥;重新生成会作废它。</p>
            ) : null}
            {error ? <p className="text-meta text-destructive">{error}</p> : null}
          </div>
        ) : (
          <form id="totp-form" onSubmit={submit} className="grid gap-1" noValidate>
            {setup ? (
              <div className="mb-2 grid gap-1.5">
                <p className="text-meta text-muted-foreground">
                  在验证器里选“手动输入密钥”,填入下面的密钥(基于时间,6 位);或把 otpauth
                  链接粘贴到支持的验证器。密钥只显示这一次。
                </p>
                <code className="rounded-md bg-muted px-2 py-1.5 font-mono text-sm break-all select-all">
                  {grouped}
                </code>
                <code className="rounded-md bg-muted px-2 py-1.5 font-mono text-meta break-all text-muted-foreground select-all">
                  {setup.uri}
                </code>
              </div>
            ) : null}
            {enabled ? (
              <FormField label="当前密码" htmlFor="totp-pwd">
                <Input
                  id="totp-pwd"
                  type="password"
                  autoComplete="current-password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </FormField>
            ) : null}
            <FormField label="验证码" htmlFor="totp-code" error={error ?? undefined}>
              <Input
                id="totp-code"
                inputMode="numeric"
                autoComplete="one-time-code"
                maxLength={6}
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
                aria-invalid={!!error}
              />
            </FormField>
          </form>
        )}
        <DialogFooter>
          <Button variant="outline" onClick={() => close(false)} disabled={action.isPending}>
            取消
          </Button>
          {!enabled && !setup ? (
            <Button onClick={begin} disabled={action.isPending || status.isLoading}>
              {action.isPending ? <LoaderCircle className="animate-spin" /> : null}
              生成密钥
            </Button>
          ) : (
            <Button
              type="submit"
              form="totp-form"
              variant={enabled ? "destructive" : "default"}
              disabled={action.isPending}
            >
              {action.isPending ? <LoaderCircle className="animate-spin" /> : null}
              {enabled ? "关闭二次验证" : "确认开启"}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

/** 右上角账户弹层:当前身份、会话到期、改密、二次验证、登出 */
export function AccountMenu({ session }: { session: SessionInfo }) {
  const [open, setOpen] = useState(false);
  const [pwdOpen, setPwdOpen] = useState(false);
  const [totpOpen, setTotpOpen] = useState(false);
  const logout = useLogout();
  const actor = session.actor;
  const isCookie = !!session.expiresAt;

  const doLogout = async () => {
    try {
      await logout.mutateAsync();
    } catch {
      // 会话已失效也照样回登录页
    }
    window.location.assign(LOGIN_PATH);
  };

  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="outline" size="sm" className="max-w-40" aria-label="账户">
            <UserRound />
            <span className="hidden truncate sm:inline">{actor?.name ?? "账户"}</span>
          </Button>
        </PopoverTrigger>
        <PopoverContent align="end" className="w-64 p-2">
          <div className="px-2 pt-1 pb-2">
            <p className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">当前账户</p>
            <p className="mt-1 truncate text-sm font-medium text-foreground">{actor?.name ?? "—"}</p>
            <p className="text-meta text-muted-foreground">
              {actor?.type === "api_key" ? "API Key 调用" : "管理员"}
              {isCookie ? ` · 会话到 ${formatDateTime(session.expiresAt)}` : ""}
            </p>
          </div>
          <div className="border-t border-border pt-1">
            {isCookie ? (
              <button
                type="button"
                onClick={() => {
                  setOpen(false);
                  setPwdOpen(true);
                }}
                className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06]"
              >
                <KeyRound className="h-4 w-4 text-muted-foreground" />
                修改密码
              </button>
            ) : null}
            {isCookie ? (
              <button
                type="button"
                onClick={() => {
                  setOpen(false);
                  setTotpOpen(true);
                }}
                className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06]"
              >
                <ShieldCheck className="h-4 w-4 text-muted-foreground" />
                二次验证
                <span className="ml-auto text-meta text-muted-foreground">
                  {session.totpEnabled ? "已开启" : "未开启"}
                </span>
              </button>
            ) : null}
            <button
              type="button"
              onClick={doLogout}
              disabled={logout.isPending}
              className="flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-2 text-left text-body text-foreground hover:bg-foreground/[0.06] disabled:opacity-50"
            >
              <LogOut className="h-4 w-4 text-muted-foreground" />
              退出登录
            </button>
          </div>
        </PopoverContent>
      </Popover>
      <ChangePasswordDialog open={pwdOpen} onOpenChange={setPwdOpen} />
      <TotpDialog open={totpOpen} onOpenChange={setTotpOpen} />
    </>
  );
}