import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  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 { useIsMobileViewport } from "@/hooks/useIsMobileViewport";
import { useIsWecomBrowser } from "@/hooks/useIsWecomBrowser";
import {
  clearAuth,
  getCurrentUser,
  getProfileOverview,
  updateCurrentUserProfile,
  updateCurrentUserPassword,
  type ProfileOverview,
  type UpdateCurrentUserProfilePayload,
  type UpdateCurrentUserPasswordPayload,
  type UserProfile,
} from "@/lib/auth";

type MenuItem = {
  key: "personal" | "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: "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 px-0 pb-0 pt-[env(safe-area-inset-top)] sm:p-6"
      >
        <div className="mx-auto h-[calc(100dvh-env(safe-area-inset-top))] w-full sm:h-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-base font-semibold text-slate-900 dark:text-white sm:text-lg">{title}</h2>
                {subtitle ? <p className="mt-1 text-xs leading-5 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 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-4 dark:border-slate-800 sm:px-6 sm:pb-4">{footer}</div> : null}
          </div>
        </div>
      </motion.div>
    </>
  );
}

export default function Profile() {
  const { theme, setTheme } = useTheme();
  const navigate = useNavigate();
  const isMobileViewport = useIsMobileViewport();
  const isWecomBrowser = useIsWecomBrowser();
  const disableMobileMotion = isMobileViewport || isWecomBrowser;

  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 handleNavigateToMonthlyOpportunity = () => {
    navigate("/opportunities");
  };

  const handleNavigateToMonthlyExpansion = () => {
    navigate("/expansion");
  };

  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 handleOpenHelp = () => {
    window.alert("请联系系统管理员！");
  };

  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="crm-page-stack">
      <header className="crm-page-header">
        <div className="crm-page-heading">
          <h1 className="crm-page-title">我的</h1>
          <p className="crm-page-subtitle">查看个人信息、账号安全设置和本月工作概览。</p>
        </div>
      </header>

      <motion.div
        initial={disableMobileMotion ? false : { opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={disableMobileMotion ? { duration: 0 } : undefined}
        className="crm-card crm-card-pad-lg relative rounded-2xl transition-shadow transition-colors"
      >
        <button
          onClick={() => void handleOpenProfile()}
          className="absolute right-4 top-4 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:right-6 sm:top-6"
        >
          <Settings className="crm-icon-lg" />
        </button>

        <div className="flex flex-col gap-5 pr-12 sm:flex-row sm:items-start">
          <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-lg font-bold text-slate-900 dark:text-white sm:text-xl">{displayName}</h2>
              <div className="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400 sm:text-sm">
                <p>部门：{orgNames}</p>
                <p>岗位：{roleNames}</p>
              </div>
            </div>
          </div>
        </div>
      </motion.div>

      <motion.div
        initial={disableMobileMotion ? false : { opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={disableMobileMotion ? { duration: 0 } : { delay: 0.1 }}
        className="crm-card overflow-hidden rounded-2xl transition-shadow transition-colors"
      >
        <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="crm-icon-lg text-amber-500" /> : <Moon className="crm-icon-lg text-indigo-500" />}
                </div>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  {theme === "dark" ? "切换亮色模式" : "切换暗色模式"}
                </span>
              </div>
              <ChevronRight className="crm-icon-lg 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
                      : item.key === "help"
                        ? handleOpenHelp
                      : 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={`crm-icon-lg ${item.color}`} />
                  </div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{item.label}</span>
                </div>
                <ChevronRight className="crm-icon-lg text-slate-300 dark:text-slate-600" />
              </button>
            </li>
          ))}
        </ul>
      </motion.div>

      <motion.button
        initial={disableMobileMotion ? false : { opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={disableMobileMotion ? { duration: 0 } : { delay: 0.2 }}
        onClick={handleLogout}
        className="crm-btn crm-btn-danger flex w-full items-center justify-center gap-2 active:scale-100 sm:active:scale-[0.98]"
      >
        <LogOut className="crm-icon-lg" />
        退出登录
      </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="crm-btn crm-btn-secondary"
                >
                  取消
                </button>
                <button
                  onClick={() => void handleSave()}
                  disabled={saving || detailLoading}
                  className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {saving ? "保存中..." : "保存资料"}
                </button>
              </div>
            )}
          >
            {error && !currentUser ? (
              <div className="crm-alert crm-alert-error">
                {error}
              </div>
            ) : (
              <div className="crm-modal-stack">
                <div className="crm-form-section 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="crm-form-grid">
                  <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="crm-input-box crm-input-text w-full border border-slate-200 bg-white 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="crm-input-box-readonly crm-input-text w-full border border-slate-200 bg-slate-50 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="crm-icon-md text-slate-400" />
                      手机号
                    </span>
                    <input
                      value={form.phone || ""}
                      onChange={(event) => setForm((current) => ({ ...current, phone: event.target.value }))}
                      className="crm-input-box crm-input-text w-full border border-slate-200 bg-white 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="crm-icon-md text-slate-400" />
                      邮箱
                    </span>
                    <input
                      value={form.email || ""}
                      onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
                      className="crm-input-box crm-input-text w-full border border-slate-200 bg-white 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="crm-form-grid">
                  <div className="crm-form-section">
                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <BriefcaseBusiness className="crm-icon-md 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="crm-form-section">
                    <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <MapPinned className="crm-icon-md 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="crm-icon-md text-slate-400" />
                        入职天数：{numericValue(overview?.onboardingDays)}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="crm-form-grid">
                  <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="crm-alert crm-alert-info">
                    正在加载个人资料...
                  </div>
                ) : null}

                {error ? (
                  <div className="crm-alert crm-alert-error">
                    {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="crm-btn crm-btn-secondary"
                >
                  关闭
                </button>
                <button
                  onClick={() => void handleUpdatePassword()}
                  disabled={securitySaving}
                  className="crm-btn crm-btn-success disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {securitySaving ? "提交中..." : "更新密码"}
                </button>
              </div>
            )}
          >
            <div className="crm-modal-stack">
              <div className="crm-form-section">
                <p className="text-sm text-slate-600 dark:text-slate-300">
                  为了账号安全，请先输入当前密码，再设置新密码。
                </p>
              </div>

              <div className="crm-section-stack">
                <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="crm-input-box crm-input-text w-full border border-slate-200 bg-white pr-12 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="crm-icon-md" /> : <Eye className="crm-icon-md" />}
                    </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="crm-input-box crm-input-text w-full border border-slate-200 bg-white pr-12 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="crm-icon-md" /> : <Eye className="crm-icon-md" />}
                    </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="crm-input-box crm-input-text w-full border border-slate-200 bg-white pr-12 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="crm-icon-md" /> : <Eye className="crm-icon-md" />}
                    </button>
                  </div>
                </label>
              </div>

              {securityError ? (
                <div className="crm-alert crm-alert-error">
                  {securityError}
                </div>
              ) : null}

              {securitySuccess ? (
                <div className="crm-alert crm-alert-success">
                  {securitySuccess}
                </div>
              ) : null}
            </div>
          </PageModal>
        ) : null}
      </AnimatePresence>
    </div>
  );
}