import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  Bell,
  BriefcaseBusiness,
  ChevronRight,
  CircleUserRound,
  HelpCircle,
  LogOut,
  Mail,
  MapPinned,
  Moon,
  Eye,
  EyeOff,
  Phone,
  Settings,
  Shield,
  Sun,
  User,
  X,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@/components/ThemeProvider";
import {
  clearAuth,
  getCurrentUser,
  getProfileOverview,
  updateCurrentUserProfile,
  updateCurrentUserPassword,
  type ProfileOverview,
  type UpdateCurrentUserProfilePayload,
  type UpdateCurrentUserPasswordPayload,
  type UserProfile,
} from "@/lib/auth";

type MenuItem = {
  key: "personal" | "notice" | "security" | "help";
  icon: typeof User;
  label: string;
  color: string;
  bg: string;
};

type EditableProfileForm = UpdateCurrentUserProfilePayload;

const MENU_ITEMS: MenuItem[] = [
  { key: "personal", icon: User, label: "个人资料", color: "text-blue-500 dark:text-blue-400", bg: "bg-blue-50 dark:bg-blue-500/10" },
  { key: "notice", icon: Bell, label: "消息通知", color: "text-amber-500 dark:text-amber-400", bg: "bg-amber-50 dark:bg-amber-500/10" },
  { key: "security", icon: Shield, label: "账号安全", color: "text-emerald-500 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-500/10" },
  { key: "help", icon: HelpCircle, label: "帮助中心", color: "text-violet-500 dark:text-violet-400", bg: "bg-violet-50 dark:bg-violet-500/10" },
];

const EMPTY_FORM: EditableProfileForm = {
  displayName: "",
  email: "",
  phone: "",
};

const EMPTY_PASSWORD_FORM: SecurityForm = {
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
};

type SecurityForm = UpdateCurrentUserPasswordPayload & {
  confirmPassword: string;
};

function displayText(value?: string | null) {
  return value && value.trim() ? value : "无";
}

function numericValue(value?: number | null) {
  return typeof value === "number" && Number.isFinite(value) ? value : 0;
}

function PageModal({
  title,
  subtitle,
  onClose,
  children,
  footer,
}: {
  title: string;
  subtitle?: string;
  onClose: () => void;
  children: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="fixed inset-0 z-40 bg-slate-900/25 backdrop-blur-sm dark:bg-slate-900/70"
      />
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 20 }}
        className="fixed inset-0 z-50 p-0 sm:p-6"
      >
        <div className="mx-auto h-full w-full sm:max-w-3xl">
          <div className="flex h-full flex-col overflow-hidden border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900 sm:rounded-3xl">
            <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800 sm:px-6">
              <div>
                <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
                {subtitle ? <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{subtitle}</p> : null}
              </div>
              <button
                onClick={onClose}
                className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto px-5 py-5 sm:px-6">{children}</div>
            {footer ? <div className="border-t border-slate-100 px-5 py-4 dark:border-slate-800 sm:px-6">{footer}</div> : null}
          </div>
        </div>
      </motion.div>
    </>
  );
}

export default function Profile() {
  const { theme, setTheme } = useTheme();
  const navigate = useNavigate();

  const [overview, setOverview] = useState<ProfileOverview | null>(null);
  const [currentUser, setCurrentUser] = useState<UserProfile | null>(null);
  const [profileDrawerOpen, setProfileDrawerOpen] = useState(false);
  const [securityDrawerOpen, setSecurityDrawerOpen] = useState(false);
  const [form, setForm] = useState<EditableProfileForm>(EMPTY_FORM);
  const [detailLoading, setDetailLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [securityForm, setSecurityForm] = useState<SecurityForm>(EMPTY_PASSWORD_FORM);
  const [securitySaving, setSecuritySaving] = useState(false);
  const [securityError, setSecurityError] = useState("");
  const [securitySuccess, setSecuritySuccess] = useState("");
  const [showOldPassword, setShowOldPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  useEffect(() => {
    let ignore = false;

    async function loadProfileData() {
      try {
        const me = await getCurrentUser();
        const overviewData = await getProfileOverview().catch(() => null);

        if (ignore) {
          return;
        }

        setCurrentUser(me);
        setOverview(overviewData);
      } catch {
        if (ignore) {
          return;
        }

        setOverview(null);
        setCurrentUser(null);
      }
    }

    void loadProfileData();

    return () => {
      ignore = true;
    };
  }, []);

  const handleLogout = () => {
    clearAuth();
    navigate("/login", { replace: true });
  };

  const handleOpenProfile = async () => {
    setDetailLoading(true);
    setError("");

    try {
      const me = currentUser ?? await getCurrentUser();
      const latestOverview = overview ?? await getProfileOverview().catch(() => null);

      setCurrentUser(me);
      setOverview(latestOverview);
      setForm({
        userId: me.userId,
        username: me.username,
        displayName: me.displayName || "",
        email: me.email || "",
        phone: me.phone || "",
        pwdResetRequired: me.pwdResetRequired,
        isPlatformAdmin: me.isPlatformAdmin,
        orgId: undefined,
      });
      setProfileDrawerOpen(true);
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : "获取个人资料失败");
      setProfileDrawerOpen(true);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleCloseProfile = () => {
    if (saving) {
      return;
    }

    setProfileDrawerOpen(false);
    setError("");
  };

  const handleSave = async () => {
    if (saving) {
      return;
    }

    setSaving(true);
    setError("");

    try {
      await updateCurrentUserProfile({
        ...form,
        email: form.email || undefined,
        phone: form.phone || undefined,
      });

      const me = await getCurrentUser();
      const overviewData = await getProfileOverview().catch(() => overview);

      setCurrentUser(me);
      setOverview(overviewData);
      setForm({
        userId: me.userId,
        username: me.username,
        displayName: me.displayName || "",
        email: me.email || "",
        phone: me.phone || "",
        pwdResetRequired: me.pwdResetRequired,
        isPlatformAdmin: me.isPlatformAdmin,
        orgId: undefined,
      });
      sessionStorage.setItem("userProfile", JSON.stringify(me));
      setProfileDrawerOpen(false);
    } catch (saveError) {
      setError(saveError instanceof Error ? saveError.message : "保存失败");
    } finally {
      setSaving(false);
    }
  };

  const handleOpenSecurity = () => {
    setSecurityForm(EMPTY_PASSWORD_FORM);
    setSecurityError("");
    setSecuritySuccess("");
    setShowOldPassword(false);
    setShowNewPassword(false);
    setShowConfirmPassword(false);
    setSecurityDrawerOpen(true);
  };

  const handleCloseSecurity = () => {
    if (securitySaving) {
      return;
    }
    setSecurityDrawerOpen(false);
    setSecurityError("");
    setSecuritySuccess("");
  };

  const handleUpdatePassword = async () => {
    if (securitySaving) {
      return;
    }

    if (!securityForm.oldPassword || !securityForm.newPassword || !securityForm.confirmPassword) {
      setSecurityError("请完整填写旧密码、新密码和确认密码");
      setSecuritySuccess("");
      return;
    }

    if (securityForm.newPassword !== securityForm.confirmPassword) {
      setSecurityError("两次输入的新密码不一致");
      setSecuritySuccess("");
      return;
    }

    if (securityForm.newPassword.length < 6) {
      setSecurityError("新密码长度不能少于6位");
      setSecuritySuccess("");
      return;
    }

    setSecuritySaving(true);
    setSecurityError("");
    setSecuritySuccess("");

    try {
      await updateCurrentUserPassword({
        oldPassword: securityForm.oldPassword,
        newPassword: securityForm.newPassword,
      });
      clearAuth();
      navigate("/login", { replace: true });
    } catch (saveError) {
      setSecurityError(saveError instanceof Error ? saveError.message : "密码修改失败");
    } finally {
      setSecuritySaving(false);
    }
  };

  const roleNames = displayText(overview?.jobTitle);
  const orgNames = displayText(overview?.deptName);
  const displayName = displayText(currentUser?.displayName || overview?.realName);
  const avatarText = displayName === "无" ? "无" : displayName.slice(0, 1);
  const currentEmail = displayText(currentUser?.email);
  const currentPhone = displayText(currentUser?.phone);

  return (
    <div className="space-y-5 sm:space-y-6">
      <header className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">我的</h1>
      </header>

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="rounded-2xl border border-slate-100 bg-white p-4 shadow-sm backdrop-blur-sm transition-all dark:border-slate-800 dark:bg-slate-900/50 sm:p-6"
      >
        <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex items-center gap-4">
            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-violet-100 text-2xl font-bold text-violet-600 dark:bg-violet-500/20 dark:text-violet-400">
              {avatarText}
            </div>
            <div className="min-w-0 flex-1">
              <h2 className="truncate text-xl font-bold text-slate-900 dark:text-white">{displayName}</h2>
              <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                <p>部门：{orgNames}</p>
                <p>岗位：{roleNames}</p>
              </div>
            </div>
          </div>
          <button
            onClick={() => void handleOpenProfile()}
            className="self-end rounded-full bg-slate-50 p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600 dark:bg-slate-800 dark:text-slate-500 dark:hover:bg-slate-700 dark:hover:text-slate-300 sm:self-start"
          >
            <Settings className="h-5 w-5" />
          </button>
        </div>

        <div className="mt-6 grid grid-cols-1 gap-3 border-t border-slate-50 pt-6 dark:border-slate-800/50 sm:grid-cols-3 sm:gap-0 sm:divide-x sm:divide-slate-100 dark:sm:divide-slate-800">
          <div className="rounded-2xl bg-slate-50 px-4 py-4 text-center dark:bg-slate-800/40 sm:rounded-none sm:bg-transparent sm:px-2">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">{numericValue(overview?.monthlyOpportunityCount)}</p>
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">本月商机</p>
          </div>
          <div className="rounded-2xl bg-slate-50 px-4 py-4 text-center dark:bg-slate-800/40 sm:rounded-none sm:bg-transparent sm:px-2">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">{numericValue(overview?.monthlyExpansionCount)}</p>
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">本月拓展</p>
          </div>
          <div className="rounded-2xl bg-slate-50 px-4 py-4 text-center dark:bg-slate-800/40 sm:rounded-none sm:bg-transparent sm:px-2">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">{numericValue(overview?.averageScore)}</p>
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">平均分</p>
          </div>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm backdrop-blur-sm transition-all dark:border-slate-800 dark:bg-slate-900/50"
      >
        <ul className="divide-y divide-slate-50 dark:divide-slate-800/50">
          <li>
            <button
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
              className="flex w-full items-center justify-between p-4 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50 md:hidden"
            >
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800">
                  {theme === "dark" ? <Sun className="h-5 w-5 text-amber-500" /> : <Moon className="h-5 w-5 text-indigo-500" />}
                </div>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  {theme === "dark" ? "切换亮色模式" : "切换暗色模式"}
                </span>
              </div>
              <ChevronRight className="h-5 w-5 text-slate-300 dark:text-slate-600" />
            </button>
          </li>
          {MENU_ITEMS.map((item) => (
            <li key={item.key}>
              <button
                onClick={
                  item.key === "personal"
                    ? () => void handleOpenProfile()
                    : item.key === "security"
                      ? handleOpenSecurity
                      : undefined
                }
                className="flex w-full items-center justify-between p-4 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50"
              >
                <div className="flex items-center gap-3">
                  <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${item.bg}`}>
                    <item.icon className={`h-5 w-5 ${item.color}`} />
                  </div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{item.label}</span>
                </div>
                <ChevronRight className="h-5 w-5 text-slate-300 dark:text-slate-600" />
              </button>
            </li>
          ))}
        </ul>
      </motion.div>

      <motion.button
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        onClick={handleLogout}
        className="flex w-full items-center justify-center gap-2 rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm font-semibold text-rose-600 transition-all hover:bg-rose-100 active:scale-[0.98] dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20"
      >
        <LogOut className="h-5 w-5" />
        退出登录
      </motion.button>

      <AnimatePresence>
        {profileDrawerOpen ? (
          <PageModal
            title="个人资料"
            onClose={handleCloseProfile}
            footer={(
              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button
                  onClick={handleCloseProfile}
                  className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                >
                  取消
                </button>
                <button
                  onClick={() => void handleSave()}
                  disabled={saving || detailLoading}
                  className="rounded-xl bg-violet-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {saving ? "保存中..." : "保存资料"}
                </button>
              </div>
            )}
          >
            {error && !currentUser ? (
              <div className="rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">
                {error}
              </div>
            ) : (
              <div className="space-y-6">
                <div className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/20 sm:flex-row sm:items-center">
                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-violet-100 text-2xl font-bold text-violet-600 dark:bg-violet-500/20 dark:text-violet-400">
                    {(form.displayName || currentUser?.displayName || "无").slice(0, 1)}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-lg font-semibold text-slate-900 dark:text-white">{displayText(currentUser?.displayName)}</div>
                    <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                      <p>部门：{orgNames}</p>
                      <p>岗位：{roleNames}</p>
                    </div>
                    <div className="mt-2 text-xs text-slate-400 dark:text-slate-500">账号：{displayText(currentUser?.username)}</div>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <label className="space-y-2">
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">显示名称</span>
                    <input
                      value={form.displayName || ""}
                      onChange={(event) => setForm((current) => ({ ...current, displayName: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                  </label>
                  <label className="space-y-2">
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">用户名</span>
                    <div className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-800/40 dark:text-slate-400">
                      {displayText(currentUser?.username)}
                    </div>
                  </label>
                  <label className="space-y-2">
                    <span className="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                      <Phone className="h-4 w-4 text-slate-400" />
                      手机号
                    </span>
                    <input
                      value={form.phone || ""}
                      onChange={(event) => setForm((current) => ({ ...current, phone: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                  </label>
                  <label className="space-y-2">
                    <span className="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                      <Mail className="h-4 w-4 text-slate-400" />
                      邮箱
                    </span>
                    <input
                      value={form.email || ""}
                      onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                  </label>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div className="rounded-2xl border border-slate-100 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/20">
                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <BriefcaseBusiness className="h-4 w-4 text-violet-500" />
                      岗位信息
                    </div>
                    <div className="mt-3 space-y-2 text-sm text-slate-500 dark:text-slate-400">
                      <p>岗位：{roleNames}</p>
                      <p>状态：{displayText(overview?.accountStatus)}</p>
                    </div>
                  </div>
                  <div className="rounded-2xl border border-slate-100 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/20">
                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <MapPinned className="h-4 w-4 text-emerald-500" />
                      组织信息
                    </div>
                    <div className="mt-3 space-y-2 text-sm text-slate-500 dark:text-slate-400">
                      <p>部门：{orgNames}</p>
                      <p className="flex items-center gap-2">
                        <CircleUserRound className="h-4 w-4 text-slate-400" />
                        入职天数：{numericValue(overview?.onboardingDays)}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                  <div className="rounded-xl border border-slate-100 bg-slate-50/70 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-800/20 dark:text-slate-400">
                    当前手机号：{currentPhone}
                  </div>
                  <div className="rounded-xl border border-slate-100 bg-slate-50/70 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-800/20 dark:text-slate-400">
                    当前邮箱：{currentEmail}
                  </div>
                </div>

                {detailLoading ? (
                  <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-800/40 dark:text-slate-400">
                    正在加载个人资料...
                  </div>
                ) : null}

                {error ? (
                  <div className="rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">
                    {error}
                  </div>
                ) : null}
              </div>
            )}
          </PageModal>
        ) : null}
        {securityDrawerOpen ? (
          <PageModal
            title="账号安全"
            onClose={handleCloseSecurity}
            footer={(
              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button
                  onClick={handleCloseSecurity}
                  className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                >
                  关闭
                </button>
                <button
                  onClick={() => void handleUpdatePassword()}
                  disabled={securitySaving}
                  className="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {securitySaving ? "提交中..." : "更新密码"}
                </button>
              </div>
            )}
          >
            <div className="space-y-6">
              <div className="rounded-2xl border border-slate-100 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/20">
                <p className="text-sm text-slate-600 dark:text-slate-300">
                  为了账号安全，请先输入当前密码，再设置新密码。
                </p>
              </div>

              <div className="grid grid-cols-1 gap-4">
                <label className="space-y-2">
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">当前密码</span>
                  <div className="relative">
                    <input
                      type={showOldPassword ? "text" : "password"}
                      autoComplete="current-password"
                      value={securityForm.oldPassword}
                      onChange={(event) => setSecurityForm((current) => ({ ...current, oldPassword: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 pr-12 text-sm outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                    <button
                      type="button"
                      onClick={() => setShowOldPassword((current) => !current)}
                      className="absolute inset-y-0 right-0 flex w-12 items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
                      aria-label={showOldPassword ? "隐藏当前密码" : "显示当前密码"}
                    >
                      {showOldPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                </label>

                <label className="space-y-2">
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">新密码</span>
                  <div className="relative">
                    <input
                      type={showNewPassword ? "text" : "password"}
                      autoComplete="new-password"
                      value={securityForm.newPassword}
                      onChange={(event) => setSecurityForm((current) => ({ ...current, newPassword: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 pr-12 text-sm outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                    <button
                      type="button"
                      onClick={() => setShowNewPassword((current) => !current)}
                      className="absolute inset-y-0 right-0 flex w-12 items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
                      aria-label={showNewPassword ? "隐藏新密码" : "显示新密码"}
                    >
                      {showNewPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                </label>

                <label className="space-y-2">
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">确认新密码</span>
                  <div className="relative">
                    <input
                      type={showConfirmPassword ? "text" : "password"}
                      autoComplete="new-password"
                      value={securityForm.confirmPassword}
                      onChange={(event) => setSecurityForm((current) => ({ ...current, confirmPassword: event.target.value }))}
                      className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 pr-12 text-sm outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 dark:border-slate-800 dark:bg-slate-900/50"
                    />
                    <button
                      type="button"
                      onClick={() => setShowConfirmPassword((current) => !current)}
                      className="absolute inset-y-0 right-0 flex w-12 items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
                      aria-label={showConfirmPassword ? "隐藏确认密码" : "显示确认密码"}
                    >
                      {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                </label>
              </div>

              {securityError ? (
                <div className="rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">
                  {securityError}
                </div>
              ) : null}

              {securitySuccess ? (
                <div className="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-600 dark:border-emerald-900/50 dark:bg-emerald-500/10 dark:text-emerald-300">
                  {securitySuccess}
                </div>
              ) : null}
            </div>
          </PageModal>
        ) : null}
      </AnimatePresence>
    </div>
  );
}