import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  Bell,
  Bot,
  Check,
  ChevronDown,
  LogOut,
  Mail,
  Repeat2,
  ShieldCheck,
  SlidersHorizontal,
  UserRound,
} from "lucide-react";
import { Link } from "react-router-dom";
import {
  accountNotificationKeys,
  accountNotificationLabels,
  getAccountNotificationConsumption,
  getAccountSettings,
  updateAccountSettings,
  type AccountNotificationConsumption,
  type AccountAiPreferenceSettings,
  type AccountAnswerDepth,
  type AccountEvidenceDisplay,
  type AccountLanguage,
  type AccountNotificationEvidenceDisplay,
  type AccountNotificationKey,
  type AccountProfileSettings,
  type AccountReminderIntensity,
  type AccountSettings,
  type AccountSettingsSaveScope,
} from "@/api/accountSettings";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { MobileBottomSheet } from "@/features/pmflow-os/components/FeedbackPrimitives";
import { MobileBottomNav } from "@/features/pmflow-os/components/MobileBottomNav";
import { PMFlowBrand } from "@/features/pmflow-os/components/chrome";
import { cn } from "@/lib/utils";
import { useAuthStore } from "@/stores/auth";

type MobileSheetKey = "profile" | "ai" | "notifications" | null;

const answerDepthOptions: Array<{ value: AccountAnswerDepth; title: string; detail: string }> = [
  { value: "concise", title: "简洁", detail: "只给结论和必要依据" },
  { value: "balanced", title: "标准", detail: "结论、依据、下一步都保留" },
  { value: "deep", title: "深入", detail: "展开证据链、风险和取舍" },
];

const evidenceOptions: Array<{ value: AccountEvidenceDisplay; title: string; detail: string }> = [
  { value: "summary", title: "摘要", detail: "只展示来源摘要" },
  { value: "inline", title: "内联", detail: "关键结论旁展示证据" },
  { value: "full", title: "完整", detail: "保留来源、片段和验证状态" },
];

const languageOptions: Array<{ value: AccountLanguage; title: string; detail: string }> = [
  { value: "zh-CN", title: "中文", detail: "界面、AI 回复和通知默认中文" },
  { value: "en-US", title: "English", detail: "English replies when product context allows it" },
];

const reminderIntensityOptions: Array<{ value: AccountReminderIntensity; title: string; detail: string }> = [
  { value: "silent", title: "静默", detail: "不显示页面内提醒，业务对象和证据仍保留" },
  { value: "normal", title: "普通", detail: "在对应页面显示标准提醒" },
  { value: "prominent", title: "强提醒", detail: "用于高风险、阻塞或长时间停滞场景" },
];

const notificationEvidenceOptions: Array<{ value: AccountNotificationEvidenceDisplay; title: string; detail: string }> = [
  { value: "compact", title: "紧凑", detail: "提醒旁只显示关键证据摘要" },
  { value: "expanded", title: "展开", detail: "提醒旁展开来源、状态和审计线索" },
];

function getDisplayName(user: ReturnType<typeof useAuthStore.getState>["user"]) {
  return user?.name || user?.username || "张子墨";
}

function getDisplayRole(user: ReturnType<typeof useAuthStore.getState>["user"]) {
  if (user?.role === "admin") return "管理员";
  if (user?.role === "manager") return "项目负责人";
  return user?.role || "产品负责人";
}

function getAvatarSeed(user: ReturnType<typeof useAuthStore.getState>["user"], displayName: string) {
  return encodeURIComponent(user?.id || user?.username || displayName || "pmflow-account");
}

function formatUpdatedAt(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "尚未保存";
  return date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
}

export function AccountSettingsPanel({ onLogout }: { onLogout: () => void }) {
  const queryClient = useQueryClient();
  const user = useAuthStore((state) => state.user);
  const seed = useMemo(
    () => ({
      displayName: getDisplayName(user),
      roleTitle: getDisplayRole(user),
      email: user?.email || "",
    }),
    [user]
  );
  const settingsQuery = useQuery({
    queryKey: ["account-settings", seed.displayName, seed.roleTitle, seed.email],
    queryFn: () => getAccountSettings(seed),
  });
  const [draft, setDraft] = useState<AccountSettings | null>(null);
  const [activeSheet, setActiveSheet] = useState<MobileSheetKey>(null);

  useEffect(() => {
    if (settingsQuery.data) setDraft(settingsQuery.data);
  }, [settingsQuery.data]);

  const saveMutation = useMutation({
    mutationFn: updateAccountSettings,
    onSuccess: (saved) => {
      setDraft(saved);
      queryClient.setQueryData(["account-settings", seed.displayName, seed.roleTitle, seed.email], saved);
    },
  });

  const isDirty = Boolean(
    draft && settingsQuery.data && JSON.stringify(draft) !== JSON.stringify(settingsQuery.data)
  );
  const avatarSrc = `https://api.dicebear.com/7.x/avataaars/svg?seed=${getAvatarSeed(user, draft?.profile.displayName || seed.displayName)}`;

  const patchProfile = (patch: Partial<AccountProfileSettings>) => {
    setDraft((current) => current ? { ...current, profile: { ...current.profile, ...patch } } : current);
  };
  const patchAi = (patch: Partial<AccountAiPreferenceSettings>) => {
    setDraft((current) => current ? { ...current, aiPreferences: { ...current.aiPreferences, ...patch } } : current);
  };
  const patchNotification = (key: AccountNotificationKey, patch: Partial<AccountSettings["notifications"][AccountNotificationKey]>) => {
    setDraft((current) =>
      current
        ? {
            ...current,
            notifications: {
              ...current.notifications,
              [key]: { ...current.notifications[key], ...patch },
            },
          }
        : current
    );
  };

  const save = () => {
    if (!draft) return;
    saveMutation.mutate(draft);
  };
  const saveStatus: SaveStatus = saveMutation.isError
    ? "failed"
    : draft?.saveScope === "account"
      ? "account"
      : "local";

  if (settingsQuery.isLoading || !draft) {
    return <AccountSettingsSkeleton />;
  }

  return (
    <>
      <DesktopAccountSettings
        avatarSrc={avatarSrc}
        draft={draft}
        isDirty={isDirty}
        isSaving={saveMutation.isPending}
        saveStatus={saveStatus}
        onLogout={onLogout}
        onPatchAi={patchAi}
        onPatchNotification={patchNotification}
        onPatchProfile={patchProfile}
        onSave={save}
      />
      <MobileAccountSettings
        avatarSrc={avatarSrc}
        draft={draft}
        activeSheet={activeSheet}
        isDirty={isDirty}
        isSaving={saveMutation.isPending}
        saveStatus={saveStatus}
        onOpenSheet={setActiveSheet}
        onLogout={onLogout}
        onPatchAi={patchAi}
        onPatchNotification={patchNotification}
        onPatchProfile={patchProfile}
        onSave={save}
      />
    </>
  );
}

function DesktopAccountSettings({
  avatarSrc,
  draft,
  isDirty,
  isSaving,
  saveStatus,
  onLogout,
  onPatchAi,
  onPatchNotification,
  onPatchProfile,
  onSave,
}: {
  avatarSrc: string;
  draft: AccountSettings;
  isDirty: boolean;
  isSaving: boolean;
  saveStatus: SaveStatus;
  onLogout: () => void;
  onPatchAi: (patch: Partial<AccountAiPreferenceSettings>) => void;
  onPatchNotification: (key: AccountNotificationKey, patch: Partial<AccountSettings["notifications"][AccountNotificationKey]>) => void;
  onPatchProfile: (patch: Partial<AccountProfileSettings>) => void;
  onSave: () => void;
}) {
  return (
    <div className="hidden min-h-full bg-white md:block">
      <div className="mx-auto w-full max-w-[1180px] px-8 py-8 xl:max-w-[1320px]">
        <div className="mb-7 flex items-center justify-between gap-4">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#2463EB]">我的</p>
            <h1 className="mt-2 text-2xl font-semibold text-slate-950">个人资料与偏好</h1>
            <p className="mt-2 text-sm text-slate-500">这些设置会影响 PMFlow 的默认语言、AI 回复形态、证据展示和提醒节奏。</p>
          </div>
          <div className="flex items-center gap-3">
            <Link to="/space" className="rounded-lg border border-[#dfe7f3] px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-[#2463EB] hover:text-[#2463EB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2463EB]/30">
              返回个人空间
            </Link>
            <Button
              className="h-10 rounded-lg bg-[#2463EB] px-5 font-semibold text-white hover:bg-[#1f58d5]"
              disabled={!isDirty || isSaving}
              onClick={onSave}
            >
              {getSaveButtonLabel({ isDirty, isSaving, saveStatus })}
            </Button>
          </div>
        </div>

        <div className="grid gap-5 lg:grid-cols-[340px_minmax(0,1fr)]">
          <aside className="space-y-5">
            <ProfileSummary avatarSrc={avatarSrc} draft={draft} />
            <SaveStatusPanel saveStatus={saveStatus} />
            <section className="rounded-lg border border-[#e6edf7] bg-[#f8fbff] p-5">
              <div className="flex items-start gap-3">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white text-[#2463EB]">
                  <ShieldCheck className="h-5 w-5" />
                </span>
                <div>
                  <h2 className="text-base font-semibold text-slate-950">账户操作边界</h2>
                  <p className="mt-2 text-sm leading-6 text-slate-500">本页不修改 OAuth、JWT 或权限核心。退出登录只清理当前浏览器会话，草案、待确认和项目记忆仍按原链路保留。</p>
                </div>
              </div>
              <div className="mt-5 grid gap-2">
                <ActionButton icon={<Repeat2 className="h-4 w-4" />} label="切换账号" detail="保留当前空间上下文" />
                <ActionButton icon={<LogOut className="h-4 w-4" />} label="退出登录" detail="AI 进度与待确认项保留" danger onClick={onLogout} />
              </div>
            </section>
          </aside>

          <main className="space-y-5">
            <SettingsSection icon={<UserRound className="h-5 w-5" />} title="个人资料" detail="用于 PMFlow 内的称呼、空间标识和通知展示。">
              <ProfileFields profile={draft.profile} onPatchProfile={onPatchProfile} />
            </SettingsSection>

            <SettingsSection icon={<Bot className="h-5 w-5" />} title="AI 偏好" detail="控制默认回答深度和证据呈现，不影响运行时模型路由。">
              <AiPreferenceFields aiPreferences={draft.aiPreferences} onPatchAi={onPatchAi} />
            </SettingsSection>

            <SettingsSection icon={<Bell className="h-5 w-5" />} title="通知偏好" detail="优先覆盖需要人类拍板、执行回写、发布门禁和失败提醒。">
              <NotificationFields notifications={draft.notifications} onPatchNotification={onPatchNotification} />
            </SettingsSection>
          </main>
        </div>
      </div>
    </div>
  );
}

function MobileAccountSettings({
  avatarSrc,
  draft,
  activeSheet,
  isDirty,
  isSaving,
  saveStatus,
  onOpenSheet,
  onLogout,
  onPatchAi,
  onPatchNotification,
  onPatchProfile,
  onSave,
}: {
  avatarSrc: string;
  draft: AccountSettings;
  activeSheet: MobileSheetKey;
  isDirty: boolean;
  isSaving: boolean;
  saveStatus: SaveStatus;
  onOpenSheet: (key: MobileSheetKey) => void;
  onLogout: () => void;
  onPatchAi: (patch: Partial<AccountAiPreferenceSettings>) => void;
  onPatchNotification: (key: AccountNotificationKey, patch: Partial<AccountSettings["notifications"][AccountNotificationKey]>) => void;
  onPatchProfile: (patch: Partial<AccountProfileSettings>) => void;
  onSave: () => void;
}) {
  return (
    <div className="min-h-screen bg-white px-4 pb-32 pt-5 text-slate-950 md:hidden">
      <div className="flex items-center justify-between">
        <PMFlowBrand compact />
        <button type="button" className="rounded-lg border border-[#e6edf7] px-3 py-2 text-sm font-semibold text-slate-700">
          个人空间 <ChevronDown className="ml-1 inline h-3.5 w-3.5" />
        </button>
      </div>

      <div className="mt-7">
        <ProfileSummary avatarSrc={avatarSrc} draft={draft} mobile />
      </div>

      <div className="mt-4">
        <SaveStatusPanel saveStatus={saveStatus} mobile />
      </div>

      <MobileGroup title="设置">
        <MobileSettingRow icon={<UserRound className="h-5 w-5" />} title="个人资料" detail={`${draft.profile.displayName} · ${draft.profile.roleTitle}`} onClick={() => onOpenSheet("profile")} />
        <MobileSettingRow icon={<SlidersHorizontal className="h-5 w-5" />} title="AI 偏好" detail={`${getAnswerDepthTitle(draft.aiPreferences.answerDepth)} · ${getEvidenceTitle(draft.aiPreferences.evidenceDisplay)}`} onClick={() => onOpenSheet("ai")} />
        <MobileSettingRow icon={<Bell className="h-5 w-5" />} title="通知偏好" detail={`${getEnabledNotificationCount(draft)} 类提醒已开启 · ${getProminentNotificationCount(draft)} 类强提醒`} onClick={() => onOpenSheet("notifications")} />
      </MobileGroup>

      <MobileGroup title="账号操作">
        <MobileSettingRow icon={<Repeat2 className="h-5 w-5" />} title="切换账号" detail="保留当前空间上下文" />
        <MobileSettingRow icon={<LogOut className="h-5 w-5" />} title="退出登录" detail="草案与待确认事项保留" danger onClick={onLogout} />
      </MobileGroup>

      <div className="fixed inset-x-0 bottom-[68px] z-40 border-t border-[#e6edf7] bg-white/95 px-4 py-3 backdrop-blur md:hidden">
        <Button
          className="h-12 w-full rounded-lg bg-[#2463EB] text-base font-semibold text-white hover:bg-[#1f58d5]"
          disabled={!isDirty || isSaving}
          onClick={onSave}
        >
          {getSaveButtonLabel({ isDirty, isSaving, saveStatus })}
        </Button>
      </div>

      <MobileBottomNav />

      <MobileBottomSheet
        open={activeSheet === "profile"}
        title="个人资料"
        detail="用于空间标识、通知展示和 AI 对你的默认称呼。"
        onClose={() => onOpenSheet(null)}
      >
        <div className="mt-6 max-h-[56vh] overflow-y-auto pr-1">
          <ProfileFields profile={draft.profile} onPatchProfile={onPatchProfile} mobile />
        </div>
      </MobileBottomSheet>

      <MobileBottomSheet
        open={activeSheet === "ai"}
        title="AI 偏好"
        detail="偏好只影响 PMFlow 的默认回复形态，不改变模型路由和权限。"
        onClose={() => onOpenSheet(null)}
      >
        <div className="mt-6 max-h-[56vh] overflow-y-auto pr-1">
          <AiPreferenceFields aiPreferences={draft.aiPreferences} onPatchAi={onPatchAi} mobile />
        </div>
      </MobileBottomSheet>

      <MobileBottomSheet
        open={activeSheet === "notifications"}
        title="通知偏好"
        detail="优先处理需要你拍板、发布受阻或执行链路异常的提醒。"
        onClose={() => onOpenSheet(null)}
      >
        <div className="mt-6 max-h-[56vh] overflow-y-auto pr-1">
          <NotificationFields notifications={draft.notifications} onPatchNotification={onPatchNotification} mobile />
        </div>
      </MobileBottomSheet>
    </div>
  );
}

function ProfileSummary({ avatarSrc, draft, mobile = false }: { avatarSrc: string; draft: AccountSettings; mobile?: boolean }) {
  return (
    <section className={cn("rounded-lg border border-[#e6edf7] bg-white p-5", !mobile && "shadow-[0_12px_34px_rgba(15,23,42,0.04)]")}>
      <div className="flex items-center gap-4">
        <img src={avatarSrc} alt={`${draft.profile.displayName}头像`} className="h-16 w-16 rounded-full bg-[#eef4ff]" />
        <div className="min-w-0">
          <div className="truncate text-xl font-semibold text-slate-950">{draft.profile.displayName}</div>
          <div className="mt-1 truncate text-sm text-slate-500">{draft.profile.roleTitle} · 个人空间</div>
          <div className="mt-3 inline-flex items-center gap-1.5 rounded-full bg-[#eef4ff] px-3 py-1 text-xs font-semibold text-[#2463EB]">
            <Check className="h-3.5 w-3.5" />
            {draft.profile.defaultLanguage === "zh-CN" ? "默认中文" : "Default English"}
          </div>
        </div>
      </div>
      <div className="mt-5 border-t border-[#eef2f8] pt-4 text-xs text-slate-500">上次保存：{formatUpdatedAt(draft.updatedAt)}</div>
    </section>
  );
}

function SettingsSection({ icon, title, detail, children }: { icon: ReactNode; title: string; detail: string; children: ReactNode }) {
  return (
    <section className="rounded-lg border border-[#e6edf7] bg-white p-5 shadow-[0_12px_34px_rgba(15,23,42,0.04)]">
      <div className="mb-5 flex items-start gap-3">
        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#eef4ff] text-[#2463EB]">{icon}</span>
        <div>
          <h2 className="text-lg font-semibold text-slate-950">{title}</h2>
          <p className="mt-1 text-sm leading-6 text-slate-500">{detail}</p>
        </div>
      </div>
      {children}
    </section>
  );
}

type SaveStatus = AccountSettingsSaveScope | "failed";

function getSaveStatusCopy(saveStatus: SaveStatus): {
  title: string;
  detail: string;
  wrap: string;
  iconWrap: string;
  titleClass: string;
  Icon: ComponentType<{ className?: string }>;
} {
  if (saveStatus === "account") {
    return {
      title: "已保存到当前账号",
      detail: "这些偏好已和当前登录身份绑定，后续可由系统能力消费。",
      wrap: "border-[#cfe0ff] bg-[#eef4ff]",
      iconWrap: "bg-white text-[#2463EB]",
      titleClass: "text-[#2459d3]",
      Icon: ShieldCheck,
    };
  }
  if (saveStatus === "failed") {
    return {
      title: "保存失败",
      detail: "当前偏好还没有写入本机暂存。请重试，或检查浏览器存储权限。",
      wrap: "border-rose-100 bg-rose-50",
      iconWrap: "bg-white text-rose-600",
      titleClass: "text-rose-700",
      Icon: AlertTriangle,
    };
  }
  return {
    title: "仅本机暂存",
    detail: "当前 V1 不写云端账号设置；刷新本机浏览器会保留，换设备不会同步。",
    wrap: "border-[#e6edf7] bg-[#f8fbff]",
    iconWrap: "bg-white text-slate-500",
    titleClass: "text-slate-700",
    Icon: Check,
  };
}

function getSaveButtonLabel({
  isDirty,
  isSaving,
  saveStatus,
}: {
  isDirty: boolean;
  isSaving: boolean;
  saveStatus: SaveStatus;
}) {
  if (isSaving) return "保存中";
  if (isDirty && saveStatus === "failed") return "重试保存";
  if (isDirty) return "保存设置";
  if (saveStatus === "account") return "已保存到当前账号";
  if (saveStatus === "failed") return "保存失败";
  return "仅本机暂存";
}

function SaveStatusPanel({ saveStatus, mobile = false }: { saveStatus: SaveStatus; mobile?: boolean }) {
  const status = getSaveStatusCopy(saveStatus);
  return (
    <section className={cn("rounded-lg border px-4 py-3 text-sm", status.wrap, !mobile && "shadow-[0_12px_34px_rgba(15,23,42,0.03)]")}>
      <div className="flex items-start gap-3">
        <span className={cn("mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg", status.iconWrap)}>
          <status.Icon className="h-4 w-4" />
        </span>
        <div className="min-w-0">
          <div className={cn("font-semibold", status.titleClass)}>{status.title}</div>
          <div className="mt-1 leading-6 text-slate-500">{status.detail}</div>
        </div>
      </div>
    </section>
  );
}

function ProfileFields({
  profile,
  mobile = false,
  onPatchProfile,
}: {
  profile: AccountProfileSettings;
  mobile?: boolean;
  onPatchProfile: (patch: Partial<AccountProfileSettings>) => void;
}) {
  return (
    <div className={cn("grid gap-4", !mobile && "sm:grid-cols-2")}>
      <LabeledControl label="显示名称">
        <Input
          value={profile.displayName}
          onChange={(event) => onPatchProfile({ displayName: event.target.value })}
          className="h-11 rounded-lg border-[#dfe7f3] focus-visible:ring-[#2463EB]/30"
        />
      </LabeledControl>
      <LabeledControl label="角色称谓">
        <Input
          value={profile.roleTitle}
          onChange={(event) => onPatchProfile({ roleTitle: event.target.value })}
          className="h-11 rounded-lg border-[#dfe7f3] focus-visible:ring-[#2463EB]/30"
        />
      </LabeledControl>
      <LabeledControl label="邮箱">
        <div className="relative">
          <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <Input
            value={profile.email}
            onChange={(event) => onPatchProfile({ email: event.target.value })}
            className="h-11 rounded-lg border-[#dfe7f3] pl-9 focus-visible:ring-[#2463EB]/30"
            placeholder="用于通知摘要"
          />
        </div>
      </LabeledControl>
      <LabeledControl label="默认语言">
        <SegmentedOptions
          options={languageOptions}
          value={profile.defaultLanguage}
          onChange={(value) => onPatchProfile({ defaultLanguage: value })}
        />
      </LabeledControl>
    </div>
  );
}

function AiPreferenceFields({
  aiPreferences,
  mobile = false,
  onPatchAi,
}: {
  aiPreferences: AccountAiPreferenceSettings;
  mobile?: boolean;
  onPatchAi: (patch: Partial<AccountAiPreferenceSettings>) => void;
}) {
  return (
    <div className={cn("grid gap-5", !mobile && "xl:grid-cols-2")}>
      <LabeledControl label="AI 回答深度">
        <SegmentedOptions
          options={answerDepthOptions}
          value={aiPreferences.answerDepth}
          onChange={(value) => onPatchAi({ answerDepth: value })}
        />
      </LabeledControl>
      <LabeledControl label="证据展示偏好">
        <SegmentedOptions
          options={evidenceOptions}
          value={aiPreferences.evidenceDisplay}
          onChange={(value) => onPatchAi({ evidenceDisplay: value })}
        />
      </LabeledControl>
    </div>
  );
}

function NotificationFields({
  notifications,
  mobile = false,
  onPatchNotification,
}: {
  notifications: AccountSettings["notifications"];
  mobile?: boolean;
  onPatchNotification: (key: AccountNotificationKey, patch: Partial<AccountSettings["notifications"][AccountNotificationKey]>) => void;
}) {
  const consumption = getAccountNotificationConsumption({
    notifications,
  });
  return (
    <div className="space-y-3">
      <NotificationConsumptionPreview items={consumption} mobile={mobile} />
      {accountNotificationKeys.map((key) => {
        const item = notifications[key];
        const label = accountNotificationLabels[key];
        const reminderIntensity = item.reminderIntensity || (item.enabled ? "normal" : "silent");
        const evidenceDisplay = item.evidenceDisplay || "compact";
        return (
          <div key={key} className={cn("rounded-lg border border-[#e6edf7] bg-white p-4", mobile && "px-3")}>
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0">
                <div className="text-base font-semibold text-slate-950">{label.title}</div>
                <div className="mt-1 text-sm leading-6 text-slate-500">{label.detail}</div>
              </div>
              <Switch
                checked={reminderIntensity !== "silent" && item.enabled}
                onCheckedChange={(enabled) =>
                  onPatchNotification(key, {
                    enabled,
                    reminderIntensity: enabled ? (reminderIntensity === "silent" ? "normal" : reminderIntensity) : "silent",
                  })
                }
                className="mt-1 data-[state=checked]:bg-[#2463EB]"
              />
            </div>
            <div className="mt-4 grid gap-4 xl:grid-cols-2">
              <LabeledControl label="提醒强度">
                <SegmentedOptions
                  options={reminderIntensityOptions}
                  value={reminderIntensity}
                  onChange={(reminderIntensity) =>
                    onPatchNotification(key, {
                      reminderIntensity,
                      enabled: reminderIntensity !== "silent",
                    })
                  }
                />
              </LabeledControl>
              <LabeledControl label="证据展示">
                <SegmentedOptions
                  options={notificationEvidenceOptions}
                  value={evidenceDisplay}
                  onChange={(evidenceDisplay) => onPatchNotification(key, { evidenceDisplay })}
                />
              </LabeledControl>
            </div>
            <div className="mt-4 grid gap-2 sm:grid-cols-2">
              <ChannelToggle
                label="桌面提醒"
                checked={reminderIntensity !== "silent" && item.enabled && item.desktop}
                disabled={reminderIntensity === "silent" || !item.enabled}
                onChange={(desktop) => onPatchNotification(key, { desktop })}
              />
              <ChannelToggle
                label="邮件摘要"
                checked={reminderIntensity !== "silent" && item.enabled && item.emailDigest}
                disabled={reminderIntensity === "silent" || !item.enabled}
                onChange={(emailDigest) => onPatchNotification(key, { emailDigest })}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}

function NotificationConsumptionPreview({
  items,
  mobile = false,
}: {
  items: AccountNotificationConsumption[];
  mobile?: boolean;
}) {
  return (
    <section className={cn("rounded-lg border border-[#dbe6ff] bg-[#f8fbff] p-4", mobile && "px-3")}>
      <div className="flex items-start gap-3">
        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-[#2463EB]">
          <Bell className="h-4 w-4" />
        </span>
        <div className="min-w-0">
          <div className="text-sm font-semibold text-slate-950">页面内提醒消费说明</div>
          <p className="mt-1 text-xs leading-5 text-slate-500">
            这些偏好只控制 PMFlow 页面里的提醒强度和证据展开方式：待确认、执行回写、发布门禁和失败提醒。当前不代表系统级桌面推送、邮件推送或真实通知中心已接入。
          </p>
        </div>
      </div>
      <div className={cn("mt-4 grid gap-2", !mobile && "sm:grid-cols-2")}>
        {items.map((item) => (
          <div key={item.key} className="rounded-lg border border-[#e6edf7] bg-white px-3 py-3">
            <div className="flex items-center justify-between gap-3">
              <div className="min-w-0">
                <div className="truncate text-sm font-semibold text-slate-900">{item.productArea}</div>
                <div className="mt-1 text-xs leading-5 text-slate-500">{item.trigger}</div>
                <div className="mt-2 text-xs font-semibold text-slate-500">
                  {getReminderIntensityTitle(item.reminderIntensity || (item.enabled ? "normal" : "silent"))} · {getNotificationEvidenceTitle(item.evidenceDisplay || "compact")}
                </div>
              </div>
              <span
                className={cn(
                  "shrink-0 rounded-full px-2.5 py-1 text-[11px] font-semibold",
                  item.showProminentReminder
                    ? "bg-orange-50 text-orange-600"
                    : item.showInAppReminder
                      ? "bg-[#eef4ff] text-[#2463EB]"
                      : "bg-slate-100 text-slate-500"
                )}
              >
                {item.showProminentReminder ? "强提醒" : item.showInAppReminder ? "显示" : "静默"}
              </span>
            </div>
            <div className="mt-2 text-xs leading-5 text-slate-500">{item.detail}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ChannelToggle({
  label,
  checked,
  disabled,
  onChange,
}: {
  label: string;
  checked: boolean;
  disabled?: boolean;
  onChange: (checked: boolean) => void;
}) {
  return (
    <label className={cn("flex min-h-10 items-center justify-between rounded-lg border px-3 text-sm font-semibold", disabled ? "border-[#eef2f8] bg-slate-50 text-slate-400" : "border-[#e6edf7] bg-[#f8fbff] text-slate-700")}>
      {label}
      <Switch checked={checked} disabled={disabled} onCheckedChange={onChange} className="data-[state=checked]:bg-[#2463EB]" />
    </label>
  );
}

function SegmentedOptions<T extends string>({
  options,
  value,
  onChange,
}: {
  options: Array<{ value: T; title: string; detail: string }>;
  value: T;
  onChange: (value: T) => void;
}) {
  return (
    <div className="grid gap-2">
      {options.map((option) => {
        const selected = value === option.value;
        return (
          <button
            key={option.value}
            type="button"
            onClick={() => onChange(option.value)}
            className={cn(
              "flex min-h-[58px] w-full items-center justify-between gap-3 rounded-lg border px-4 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2463EB]/30",
              selected ? "border-[#2463EB] bg-[#eef4ff] text-[#174cba]" : "border-[#e6edf7] bg-white text-slate-700 hover:border-[#cfe0ff] hover:bg-[#f8fbff]"
            )}
          >
            <span>
              <span className="block text-sm font-semibold">{option.title}</span>
              <span className={cn("mt-1 block text-xs leading-5", selected ? "text-[#2459d3]" : "text-slate-500")}>{option.detail}</span>
            </span>
            <span className={cn("flex h-5 w-5 shrink-0 items-center justify-center rounded-full border", selected ? "border-[#2463EB] bg-[#2463EB] text-white" : "border-[#d5deea] text-transparent")}>
              <Check className="h-3.5 w-3.5" />
            </span>
          </button>
        );
      })}
    </div>
  );
}

function LabeledControl({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className="block">
      <span className="mb-2 block text-sm font-semibold text-slate-700">{label}</span>
      {children}
    </div>
  );
}

function ActionButton({
  icon,
  label,
  detail,
  danger,
  onClick,
}: {
  icon: ReactNode;
  label: string;
  detail: string;
  danger?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex w-full items-center gap-3 rounded-lg border px-3 py-3 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2463EB]/30",
        danger ? "border-rose-200 bg-rose-50 text-rose-600 hover:bg-rose-100" : "border-[#e6edf7] bg-white text-slate-800 hover:border-[#cfe0ff]"
      )}
    >
      <span className={cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", danger ? "bg-white text-rose-500" : "bg-[#eef4ff] text-[#2463EB]")}>{icon}</span>
      <span className="min-w-0">
        <span className="block text-sm font-semibold">{label}</span>
        <span className="mt-0.5 block truncate text-xs text-slate-500">{detail}</span>
      </span>
    </button>
  );
}

function MobileGroup({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="mt-7">
      <h2 className="mb-3 text-lg font-semibold text-slate-950">{title}</h2>
      <div className="space-y-3">{children}</div>
    </section>
  );
}

function MobileSettingRow({
  icon,
  title,
  detail,
  danger,
  onClick,
}: {
  icon: ReactNode;
  title: string;
  detail?: string;
  danger?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "flex min-h-[64px] w-full items-center justify-between gap-3 rounded-lg border px-4 text-left transition active:scale-[0.99]",
        danger ? "border-rose-200 bg-rose-50 text-rose-600" : "border-[#e6edf7] bg-white text-slate-900"
      )}
    >
      <span className="flex min-w-0 items-center gap-3">
        <span className={cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-lg", danger ? "bg-white text-rose-500" : "bg-[#eef4ff] text-[#2463EB]")}>{icon}</span>
        <span className="min-w-0">
          <span className="block text-base font-semibold">{title}</span>
          {detail ? <span className="mt-0.5 block truncate text-sm text-slate-500">{detail}</span> : null}
        </span>
      </span>
      <span className={danger ? "text-rose-300" : "text-slate-300"}>›</span>
    </button>
  );
}

function AccountSettingsSkeleton() {
  return (
    <div className="min-h-screen bg-white px-5 py-8">
      <div className="mx-auto max-w-[1180px] animate-pulse">
        <div className="h-8 w-48 rounded-lg bg-slate-100" />
        <div className="mt-4 h-4 w-80 max-w-full rounded bg-slate-100" />
        <div className="mt-8 grid gap-5 lg:grid-cols-[340px_minmax(0,1fr)]">
          <div className="h-56 rounded-lg bg-slate-100" />
          <div className="space-y-5">
            <div className="h-52 rounded-lg bg-slate-100" />
            <div className="h-52 rounded-lg bg-slate-100" />
          </div>
        </div>
      </div>
    </div>
  );
}

function getEnabledNotificationCount(settings: AccountSettings) {
  return accountNotificationKeys.filter((key) => settings.notifications[key].enabled).length;
}

function getProminentNotificationCount(settings: AccountSettings) {
  return accountNotificationKeys.filter((key) => settings.notifications[key].reminderIntensity === "prominent").length;
}

function getAnswerDepthTitle(value: AccountAnswerDepth) {
  return answerDepthOptions.find((option) => option.value === value)?.title || "标准";
}

function getEvidenceTitle(value: AccountEvidenceDisplay) {
  return evidenceOptions.find((option) => option.value === value)?.title || "内联";
}

function getReminderIntensityTitle(value: AccountReminderIntensity) {
  return reminderIntensityOptions.find((option) => option.value === value)?.title || "普通";
}

function getNotificationEvidenceTitle(value: AccountNotificationEvidenceDisplay) {
  return notificationEvidenceOptions.find((option) => option.value === value)?.title || "紧凑";
}