"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Alert, Button, CloseButton, Input, Label, Spinner, TextField, toast } from "@heroui/react";
import { Fingerprint, Lock, Pencil, Person, TrashBin, Xmark, Check } from "@gravity-ui/icons";
import { authClient, useSession } from "@/lib/auth-client";
import dayjs from "@/lib/dayjs";

type Passkey = {
  id: string;
  name?: string | null;
  createdAt: Date | string;
  deviceType?: string | null;
};

export default function SettingsPage() {
  const { data: session, refetch: refetchSession } = useSession();

  // ── Profile ──────────────────────────────────────────────────────────────
  const [profileName, setProfileName] = useState("");
  const [savingProfile, setSavingProfile] = useState(false);

  // sync name from session once loaded
  useEffect(() => {
    if (session?.user.name) setProfileName(session.user.name);
  }, [session?.user.name]);

  const handleSaveProfile = async () => {
    setSavingProfile(true);
    try {
      const res = await authClient.updateUser({ name: profileName.trim() });
      if (res?.error) {
        toast.danger(res.error.message ?? "保存失败");
      } else {
        toast.success("显示名称已更新");
        await refetchSession();
      }
    } catch {
      toast.danger("保存失败，请重试");
    } finally {
      setSavingProfile(false);
    }
  };

  // ── Password ─────────────────────────────────────────────────────────────
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [savingPw, setSavingPw] = useState(false);
  const [pwError, setPwError] = useState("");
  const [pwSuccess, setPwSuccess] = useState("");

  const handleChangePassword = async () => {
    setPwError("");
    setPwSuccess("");
    if (newPassword !== confirmPassword) {
      setPwError("两次输入的新密码不一致");
      return;
    }
    if (newPassword.length < 8) {
      setPwError("新密码至少需要 8 位");
      return;
    }
    setSavingPw(true);
    try {
      const res = await authClient.changePassword({
        currentPassword,
        newPassword,
        revokeOtherSessions: false,
      });
      if (res?.error) {
        setPwError(res.error.message ?? "修改密码失败");
      } else {
        setPwSuccess("密码已修改成功");
        setCurrentPassword("");
        setNewPassword("");
        setConfirmPassword("");
      }
    } catch {
      setPwError("修改密码失败，请重试");
    } finally {
      setSavingPw(false);
    }
  };

  // ── Passkey ───────────────────────────────────────────────────────────────
  const [passkeys, setPasskeys] = useState<Passkey[]>([]);
  const [loading, setLoading] = useState(true);
  const [addingName, setAddingName] = useState<string | null>(null); // null = collapsed
  const [registering, setRegistering] = useState(false);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [renamingId, setRenamingId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState("");
  const [renameSaving, setRenameSaving] = useState(false);
  const renameInputRef = useRef<HTMLInputElement>(null);

  const loadPasskeys = useCallback(async () => {
    setLoading(true);
    try {
      const res = await authClient.passkey.listUserPasskeys();
      setPasskeys((res.data as Passkey[] | null) ?? []);
    } catch {
      toast.danger("获取 Passkey 列表失败");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadPasskeys();
  }, [loadPasskeys]);

  const handleStartAdd = () => {
    setAddingName("");
  };

  const handleCancelAdd = () => setAddingName(null);

  const handleRegister = async () => {
    setRegistering(true);
    try {
      const res = await authClient.passkey.addPasskey({
        name: addingName?.trim() || undefined,
      });
      if (res?.error) {
        toast.danger(res.error.message ?? "注册 Passkey 失败");
      } else {
        toast.success("Passkey 注册成功");
        setAddingName(null);
        await loadPasskeys();
      }
    } catch {
      toast.danger("注册 Passkey 失败，请重试");
    } finally {
      setRegistering(false);
    }
  };

  const handleDelete = async (id: string) => {
    setDeletingId(id);
    try {
      const res = await authClient.passkey.deletePasskey({ id });
      if (res?.error) {
        toast.danger(res.error.message ?? "删除 Passkey 失败");
      } else {
        setPasskeys((prev) => prev.filter((p) => p.id !== id));
        toast.success("Passkey 已删除");
      }
    } catch {
      toast.danger("删除 Passkey 失败，请重试");
    } finally {
      setDeletingId(null);
    }
  };

  const startRename = (pk: Passkey) => {
    setRenamingId(pk.id);
    setRenameValue(pk.name ?? "");
    setTimeout(() => renameInputRef.current?.focus(), 50);
  };

  const cancelRename = () => {
    setRenamingId(null);
    setRenameValue("");
  };

  const handleRename = async (id: string) => {
    setRenameSaving(true);
    try {
      const res = await (authClient.passkey as any).updatePasskey({
        id,
        name: renameValue.trim() || undefined,
      });
      if (res?.error) {
        toast.danger(res.error.message ?? "重命名失败");
      } else {
        setPasskeys((prev) =>
          prev.map((p) => (p.id === id ? { ...p, name: renameValue.trim() || null } : p)),
        );
        setRenamingId(null);
      }
    } catch {
      toast.danger("重命名失败，请重试");
    } finally {
      setRenameSaving(false);
    }
  };

  return (
    <div className="mx-auto max-w-2xl space-y-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">账号设置</h1>
        <p className="mt-0.5 text-sm text-muted">管理您的个人信息和安全凭据</p>
      </div>

      {/* ── Profile section ─────────────────────────────────────────────── */}
      <div className="rounded-xl border border-border bg-surface-secondary">
        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
            <Person className="size-5 text-accent" />
          </div>
          <div>
            <p className="text-sm font-semibold text-foreground">个人信息</p>
            <p className="text-xs text-muted">修改您的显示名称</p>
          </div>
        </div>
        <div className="space-y-4 px-5 py-4">
          <TextField fullWidth>
            <Label className="text-sm font-medium">显示名称</Label>
            <Input
              placeholder="对外显示的名称"
              value={profileName}
              onChange={(e) => setProfileName(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") void handleSaveProfile();
              }}
            />
          </TextField>
          <div className="flex justify-end">
            <Button
              size="sm"
              isDisabled={
                savingProfile || !profileName.trim() || profileName === session?.user.name
              }
              onPress={handleSaveProfile}
            >
              {savingProfile ? <Spinner size="sm" color="current" /> : "保存"}
            </Button>
          </div>
        </div>
      </div>

      {/* ── Password section ─────────────────────────────────────────────── */}
      <div className="rounded-xl border border-border bg-surface-secondary">
        <div className="flex items-center gap-3 border-b border-border px-5 py-4">
          <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
            <Lock className="size-5 text-accent" />
          </div>
          <div>
            <p className="text-sm font-semibold text-foreground">修改密码</p>
            <p className="text-xs text-muted">建议定期更换密码以保护账号安全</p>
          </div>
        </div>
        <div className="space-y-4 px-5 py-4">
          <TextField fullWidth>
            <Label className="text-sm font-medium">当前密码</Label>
            <Input
              type="password"
              autoComplete="current-password"
              placeholder="输入当前密码"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
            />
          </TextField>
          <TextField fullWidth>
            <Label className="text-sm font-medium">新密码</Label>
            <Input
              type="password"
              autoComplete="new-password"
              placeholder="至少 8 位"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
          </TextField>
          <TextField fullWidth>
            <Label className="text-sm font-medium">确认新密码</Label>
            <Input
              type="password"
              autoComplete="new-password"
              placeholder="再次输入新密码"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") void handleChangePassword();
              }}
            />
          </TextField>
          {pwError && (
            <Alert status="danger">
              <Alert.Indicator />
              <Alert.Content>
                <Alert.Description>{pwError}</Alert.Description>
              </Alert.Content>
              <CloseButton onPress={() => setPwError("")} />
            </Alert>
          )}
          {pwSuccess && (
            <Alert status="success">
              <Alert.Indicator />
              <Alert.Content>
                <Alert.Description>{pwSuccess}</Alert.Description>
              </Alert.Content>
              <CloseButton onPress={() => setPwSuccess("")} />
            </Alert>
          )}
          <div className="flex justify-end">
            <Button
              size="sm"
              isDisabled={savingPw || !currentPassword || !newPassword || !confirmPassword}
              onPress={handleChangePassword}
            >
              {savingPw ? <Spinner size="sm" color="current" /> : "确认修改"}
            </Button>
          </div>
        </div>
      </div>

      {/* ── Passkey section ──────────────────────────────────────────────── */}
      <div className="rounded-xl border border-border bg-surface-secondary">
        <div className="flex items-center justify-between border-b border-border px-5 py-4">
          <div className="flex items-center gap-3">
            <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
              <Fingerprint className="size-5 text-accent" />
            </div>
            <div>
              <p className="text-sm font-semibold text-foreground">Passkey</p>
              <p className="text-xs text-muted">使用设备生物识别或 PIN 免密登录</p>
            </div>
          </div>
          {addingName === null && (
            <Button size="sm" variant="secondary" onPress={handleStartAdd}>
              添加 Passkey
            </Button>
          )}
        </div>

        {/* Inline add form */}
        {addingName !== null && (
          <div className="flex items-end gap-2 border-b border-border px-5 py-4">
            <TextField fullWidth>
              <Label className="text-sm font-medium">Passkey 名称</Label>
              <Input
                autoFocus
                placeholder="例如：MacBook Touch ID"
                value={addingName}
                onChange={(e) => setAddingName(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") void handleRegister();
                  if (e.key === "Escape") handleCancelAdd();
                }}
              />
            </TextField>
            <Button isDisabled={registering} onPress={handleRegister}>
              {registering ? <Spinner size="sm" color="current" /> : "注册"}
            </Button>
            <Button variant="ghost" isDisabled={registering} onPress={handleCancelAdd}>
              取消
            </Button>
          </div>
        )}

        {loading ? (
          <div className="flex justify-center py-8">
            <Spinner />
          </div>
        ) : passkeys.length === 0 ? (
          <div className="py-8 text-center text-sm text-muted">尚未添加任何 Passkey</div>
        ) : (
          <ul className="divide-y divide-border">
            {passkeys.map((pk) => (
              <li key={pk.id} className="group flex items-center justify-between px-5 py-3.5">
                <div className="flex min-w-0 flex-1 items-center gap-3">
                  <Fingerprint className="size-4 shrink-0 text-muted" />
                  <div className="min-w-0 flex-1">
                    {/* Name row: text+pencil or inline input */}
                    <div className="flex items-center gap-1.5">
                      {renamingId === pk.id ? (
                        <>
                          <input
                            ref={renameInputRef}
                            className="min-w-0 max-w-48 rounded-md border border-border bg-transparent px-2 py-0.5 text-sm text-foreground outline-none focus:border-accent"
                            value={renameValue}
                            onChange={(e) => setRenameValue(e.target.value)}
                            onKeyDown={(e) => {
                              if (e.key === "Enter") void handleRename(pk.id);
                              if (e.key === "Escape") cancelRename();
                            }}
                            placeholder="输入名称"
                          />
                          <button
                            type="button"
                            disabled={renameSaving}
                            className="flex size-5 items-center justify-center rounded text-accent hover:bg-accent/10 disabled:opacity-50"
                            onClick={() => void handleRename(pk.id)}
                          >
                            {renameSaving ? <Spinner size="sm" /> : <Check className="size-3" />}
                          </button>
                          <button
                            type="button"
                            disabled={renameSaving}
                            className="flex size-5 items-center justify-center rounded text-muted hover:bg-surface-tertiary disabled:opacity-50"
                            onClick={cancelRename}
                          >
                            <Xmark className="size-3" />
                          </button>
                        </>
                      ) : (
                        <>
                          <p className="text-sm font-medium text-foreground">
                            {pk.name ?? pk.deviceType ?? "Passkey"}
                          </p>
                          <button
                            type="button"
                            className="flex size-5 items-center justify-center rounded text-muted opacity-0 transition-opacity hover:bg-surface-tertiary hover:text-foreground group-hover:opacity-100"
                            onClick={() => startRename(pk)}
                          >
                            <Pencil className="size-3" />
                          </button>
                        </>
                      )}
                    </div>
                    {/* Date row: always visible */}
                    <p className="text-xs text-muted">
                      添加于{" "}
                      {dayjs(pk.createdAt).format("YYYY年M月D日")}
                    </p>
                  </div>
                </div>
                <Button
                  isIconOnly
                  size="sm"
                  variant="danger-soft"
                  isDisabled={deletingId === pk.id || renamingId === pk.id}
                  onPress={() => handleDelete(pk.id)}
                >
                  {deletingId === pk.id ? <Spinner size="sm" /> : <TrashBin className="size-4" />}
                </Button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}