import { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { fetchDepartments } from "../api/departments";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  batchUpdateFeatureFlags,
  fetchFeatureFlagChangelog,
  fetchFeatureFlagImpact,
  fetchFeatureFlags,
  updateFeatureFlag,
  type FeatureFlagItem,
  type FeatureFlagKey,
  type FeatureFlagOverrideMode,
  type FeatureFlagRolloutType,
  type FeatureFlagSection,
  type FeatureFlagSnapshot,
} from "../api/featureFlags";
import { isApiError } from "../api/types";
import { PageHeader } from "../components/common/PageHeader";
import { Pagination } from "../components/common/Pagination";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../components/ui/dialog";
import { Label } from "../components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

const OVERRIDE_MODE_OPTIONS: Array<{ value: FeatureFlagOverrideMode; label: string }> = [
  { value: "force_off", label: "强制关闭" },
  { value: "inherit", label: "继承 Env" },
  { value: "force_on", label: "强制开启" },
];

const ROLLOUT_TYPE_OPTIONS: Array<{ value: FeatureFlagRolloutType; label: string }> = [
  { value: "global", label: "全量" },
  { value: "department_allowlist", label: "部门白名单" },
];

function toDisplayName(flagKey: string) {
  if (flagKey === "ai_assist") return "AI 辅助";
  if (flagKey === "erp_sync") return "ERP 同步";
  if (flagKey === "invoice_verification") return "发票验真";
  if (flagKey === "leave_holiday_calendar") return "请假日历增强";
  if (flagKey === "budget_precheck_v1") return "预算预校验";
  if (flagKey === "payment_batch_v1") return "支付批次";
  if (flagKey === "portal_home_v1") return "Portal 首页";
  if (flagKey === "global_search_v1") return "全局搜索";
  if (flagKey === "announcements_v1") return "公告中心";
  if (flagKey === "workflow_definition_admin_v1") return "流程定义治理";
  if (flagKey === "cutover_console_v1") return "切换控制台";
  if (flagKey === "presence_board_v1") return "团队状态板";
  if (flagKey === "weekly_report_v1") return "周报工作台";
  if (flagKey === "employee_lifecycle_v1") return "人员生命周期";
  if (flagKey === "todo_board_v1") return "待办工作台";
  if (flagKey === "wecom_entry_v1") return "企业微信入口";
  if (flagKey === "project_domain_v1") return "项目主域";
  if (flagKey === "project_linking_v1") return "项目联动";
  if (flagKey === "project_communication_log_v1") return "项目沟通回填";
  if (flagKey === "project_closure_checklist_v1") return "项目收口清单";
  if (flagKey === "confidential_doc_refs_v1") return "涉密资料引用";
  if (flagKey === "public_security_hardening_v1") return "公网安全强化";
  return flagKey;
}

function formatOverrideModeLabel(value: FeatureFlagOverrideMode) {
  return OVERRIDE_MODE_OPTIONS.find((option) => option.value === value)?.label ?? value;
}

function formatRolloutTypeLabel(value: FeatureFlagRolloutType) {
  return ROLLOUT_TYPE_OPTIONS.find((option) => option.value === value)?.label ?? value;
}

function formatSectionLabel(value: FeatureFlagSection) {
  if (value === "main") return "主导航";
  if (value === "admin") return "管理入口";
  if (value === "backup") return "备用入口";
  return value;
}

function formatDateTime(value: string | null) {
  if (!value) return "-";
  return value.slice(0, 19).replace("T", " ");
}

function dedupeIds(items: string[]) {
  return Array.from(new Set(items.filter(Boolean)));
}

function resolveErrorMessage(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试。";
}

function summarizeSnapshot(snapshot: FeatureFlagSnapshot | null) {
  if (!snapshot) {
    return "无快照";
  }

  const parts = [
    `override：${formatOverrideModeLabel(snapshot.overrideMode)}`,
    `rollout：${formatRolloutTypeLabel(snapshot.rolloutType)}`,
    `白名单部门：${snapshot.departmentIds.length}`,
    `说明：${snapshot.note || "-"}`,
    `version：${snapshot.version}`,
  ];
  return parts.join(" | ");
}

type DraftState = {
  overrideMode: FeatureFlagOverrideMode;
  rolloutType: FeatureFlagRolloutType;
  departmentIds: string[];
  note: string;
  version: number;
};

function buildDraft(item: FeatureFlagItem): DraftState {
  return {
    overrideMode: item.overrideMode,
    rolloutType: item.rolloutType,
    departmentIds: item.departmentIds,
    note: item.note ?? "",
    version: item.version,
  };
}

export function FeatureFlagsPage() {
  const queryClient = useQueryClient();
  const [error, setError] = useState("");
  const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
  const [batchMode, setBatchMode] = useState(false);
  const [selectedFlagKeys, setSelectedFlagKeys] = useState<FeatureFlagKey[]>([]);
  const [batchAction, setBatchAction] = useState<FeatureFlagOverrideMode | null>(null);
  const [batchNote, setBatchNote] = useState("");
  const [historyFlagKey, setHistoryFlagKey] = useState<FeatureFlagKey | null>(null);
  const [historyPage, setHistoryPage] = useState(1);
  const [impactFlagKey, setImpactFlagKey] = useState<FeatureFlagKey | null>(null);

  const flagsQuery = useQuery({
    queryKey: ["feature-flags"],
    queryFn: () => fetchFeatureFlags(),
  });

  const departmentsQuery = useQuery({
    queryKey: ["departments", "feature-flags", "active"],
    queryFn: () => fetchDepartments({ includeArchived: false }),
  });

  const historyQuery = useQuery({
    enabled: Boolean(historyFlagKey),
    queryKey: ["feature-flag-changelog", historyFlagKey, historyPage],
    queryFn: () =>
      fetchFeatureFlagChangelog(historyFlagKey!, {
        page: historyPage,
        pageSize: 10,
      }),
  });

  const impactQuery = useQuery({
    enabled: Boolean(impactFlagKey),
    queryKey: ["feature-flag-impact", impactFlagKey],
    queryFn: () => fetchFeatureFlagImpact(impactFlagKey!),
  });

  const updateMutation = useMutation({
    mutationFn: async (flagKey: FeatureFlagKey) => {
      const draft = drafts[flagKey];
      if (!draft) {
        throw new Error("未找到待提交草稿");
      }

      return updateFeatureFlag(flagKey, {
        overrideMode: draft.overrideMode,
        rolloutType: draft.rolloutType,
        departmentIds:
          draft.rolloutType === "department_allowlist" ? dedupeIds(draft.departmentIds) : [],
        note: draft.note.trim(),
        expectedVersion: draft.version,
      });
    },
    onSuccess: async (result, flagKey) => {
      setDrafts((prev) => ({
        ...prev,
        [flagKey]: buildDraft(result.item),
      }));
      await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
      setError("");
      toast.success("开关已更新");
    },
    onError: (err) => {
      const message = resolveErrorMessage(err);
      setError(message);
      toast.error(message);
    },
  });

  const batchMutation = useMutation({
    mutationFn: () => {
      const selectedItems = items.filter((item) => selectedFlagKeys.includes(item.flagKey));
      if (!batchAction) {
        throw new Error("未选择批量动作");
      }
      if (!selectedItems.length || selectedItems.length !== selectedFlagKeys.length) {
        throw new Error("批量选择项已过期，请刷新后重试");
      }

      return batchUpdateFeatureFlags({
        items: selectedItems.map((item) => ({
          flagKey: item.flagKey,
          overrideMode: batchAction,
          expectedVersion: item.version,
        })),
        note: batchNote.trim(),
      });
    },
    onSuccess: async (result) => {
      setDrafts((prev) => {
        const next = { ...prev };
        for (const flagKey of selectedFlagKeys) {
          delete next[flagKey];
        }
        return next;
      });
      await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
      setError("");
      setBatchMode(false);
      setSelectedFlagKeys([]);
      setBatchAction(null);
      setBatchNote("");
      toast.success(`已批量更新 ${result.count} 个开关`);
    },
    onError: (err) => {
      const message = resolveErrorMessage(err);
      setError(message);
      toast.error(message);
    },
  });

  const departmentsById = useMemo(() => {
    const map = new Map<string, string>();
    for (const item of departmentsQuery.data?.items ?? []) {
      map.set(item.id, item.name);
    }
    return map;
  }, [departmentsQuery.data?.items]);

  const items = flagsQuery.data?.items ?? [];
  const selectedItems = useMemo(
    () => items.filter((item) => selectedFlagKeys.includes(item.flagKey)),
    [items, selectedFlagKeys],
  );
  const historyTotalPages = Math.max(
    1,
    Math.ceil((historyQuery.data?.total ?? 0) / (historyQuery.data?.pageSize ?? 10)),
  );

  const ensureDraft = (item: FeatureFlagItem) => {
    if (drafts[item.flagKey]) {
      return drafts[item.flagKey];
    }
    return buildDraft(item);
  };

  const patchDraft = (flagKey: FeatureFlagKey, updater: (prev: DraftState) => DraftState) => {
    setDrafts((prev) => {
      const base = prev[flagKey];
      const fallback = items.find((item) => item.flagKey === flagKey);
      if (!fallback) {
        return prev;
      }

      const next = updater(base ?? buildDraft(fallback));
      return {
        ...prev,
        [flagKey]: next,
      };
    });
  };

  const handleBatchModeChange = () => {
    if (batchMode) {
      setBatchMode(false);
      setSelectedFlagKeys([]);
      setBatchAction(null);
      setBatchNote("");
      return;
    }

    setBatchMode(true);
  };

  const handleBatchAction = (overrideMode: FeatureFlagOverrideMode) => {
    if (!selectedItems.length) {
      toast.error("请先选择至少一个功能开关");
      return;
    }

    setBatchAction(overrideMode);
    setBatchNote("");
  };

  return (
    <div className={batchMode ? "space-y-6 pb-32" : "space-y-6"}>
      <PageHeader
        title="功能开关"
        subtitle="统一治理外部桥接、验真与请假日历灰度。Env 仍是硬闸，在线开关用于部门级灰度。"
      />

      {error ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
      ) : null}

      <SectionPanel
        title="开关列表"
        description="单条编辑保留原能力；批量模式只统一切换 overrideMode，并要求共享变更说明。"
        actions={
          <Button
            type="button"
            variant={batchMode ? "secondary" : "default"}
            onClick={handleBatchModeChange}
          >
            {batchMode ? "退出批量" : "批量操作"}
          </Button>
        }
      >
        {flagsQuery.isLoading ? <TableSkeleton columns={batchMode ? 7 : 6} rows={4} /> : null}

        {flagsQuery.isError ? (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {resolveErrorMessage(flagsQuery.error)}
          </p>
        ) : null}

        {!flagsQuery.isLoading && !flagsQuery.isError ? (
          <div className="rounded-lg border border-zinc-200">
            <Table data-testid="feature-flags-table">
              <TableHeader>
                <tr>
                  {batchMode ? <TableHead className="w-14">选择</TableHead> : null}
                  <TableHead>功能</TableHead>
                  <TableHead>当前状态</TableHead>
                  <TableHead>覆盖策略</TableHead>
                  <TableHead>灰度范围</TableHead>
                  <TableHead>备注</TableHead>
                  <TableHead className="w-56">操作</TableHead>
                </tr>
              </TableHeader>
              <TableBody>
                {items.map((item) => {
                  const draft = ensureDraft(item);
                  const isPending = updateMutation.isPending && updateMutation.variables === item.flagKey;
                  const isSelected = selectedFlagKeys.includes(item.flagKey);
                  const singleEditDisabled = batchMode || isPending || batchMutation.isPending;

                  return (
                    <TableRow key={item.flagKey} data-testid={`feature-flag-row-${item.flagKey}`}>
                      {batchMode ? (
                        <TableCell>
                          <input
                            aria-label={`select-${item.flagKey}`}
                            checked={isSelected}
                            className="h-4 w-4 rounded border border-zinc-300"
                            onChange={(event) => {
                              setSelectedFlagKeys((prev) => {
                                if (event.target.checked) {
                                  return dedupeIds([...prev, item.flagKey]) as FeatureFlagKey[];
                                }
                                return prev.filter((value) => value !== item.flagKey);
                              });
                            }}
                            type="checkbox"
                          />
                        </TableCell>
                      ) : null}

                      <TableCell>
                        <div className="font-medium text-zinc-900">{toDisplayName(item.flagKey)}</div>
                        <div className="font-mono text-xs text-zinc-500">{item.flagKey}</div>
                      </TableCell>

                      <TableCell className="text-sm">
                        <div>
                          Env：
                          <span className={item.envEnabled ? "text-emerald-600" : "text-red-600"}>
                            {item.envEnabled ? "ON" : "OFF"}
                          </span>
                        </div>
                        <div>
                          Effective：
                          <span className={item.effectiveEnabled ? "text-emerald-600" : "text-red-600"}>
                            {item.effectiveEnabled ? "ON" : "OFF"}
                          </span>
                        </div>
                        <div className="text-xs text-zinc-500">reason: {item.effectiveReason}</div>
                      </TableCell>

                      <TableCell className="space-y-2 text-sm">
                        <div>
                          <Label className="mb-1 block text-xs text-zinc-500">override</Label>
                          <select
                            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
                            disabled={singleEditDisabled}
                            value={draft.overrideMode}
                            onChange={(event) =>
                              patchDraft(item.flagKey, (prev) => ({
                                ...prev,
                                overrideMode: event.target.value as FeatureFlagOverrideMode,
                              }))
                            }
                          >
                            {OVERRIDE_MODE_OPTIONS.map((option) => (
                              <option key={option.value} value={option.value}>
                                {option.label}
                              </option>
                            ))}
                          </select>
                        </div>

                        <div>
                          <Label className="mb-1 block text-xs text-zinc-500">rollout</Label>
                          <select
                            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
                            disabled={singleEditDisabled}
                            value={draft.rolloutType}
                            onChange={(event) =>
                              patchDraft(item.flagKey, (prev) => ({
                                ...prev,
                                rolloutType: event.target.value as FeatureFlagRolloutType,
                                departmentIds:
                                  event.target.value === "department_allowlist" ? prev.departmentIds : [],
                              }))
                            }
                          >
                            {ROLLOUT_TYPE_OPTIONS.map((option) => (
                              <option key={option.value} value={option.value}>
                                {option.label}
                              </option>
                            ))}
                          </select>
                        </div>
                      </TableCell>

                      <TableCell className="text-sm">
                        {draft.rolloutType === "department_allowlist" ? (
                          <div className="space-y-2">
                            <select
                              className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
                              disabled={singleEditDisabled}
                              value=""
                              onChange={(event) => {
                                const selected = event.target.value;
                                if (!selected) return;
                                patchDraft(item.flagKey, (prev) => ({
                                  ...prev,
                                  departmentIds: dedupeIds([...prev.departmentIds, selected]),
                                }));
                              }}
                            >
                              <option value="">添加部门</option>
                              {(departmentsQuery.data?.items ?? []).map((department) => (
                                <option key={department.id} value={department.id}>
                                  {department.name}
                                </option>
                              ))}
                            </select>

                            <div className="max-h-24 overflow-auto rounded border border-zinc-200 p-2 text-xs">
                              {draft.departmentIds.length ? (
                                draft.departmentIds.map((departmentId) => (
                                  <div
                                    key={departmentId}
                                    className="mb-1 flex items-center justify-between rounded bg-zinc-50 px-2 py-1"
                                  >
                                    <span>{departmentsById.get(departmentId) ?? departmentId}</span>
                                    <button
                                      className="text-red-600 disabled:text-zinc-400"
                                      disabled={singleEditDisabled}
                                      type="button"
                                      onClick={() =>
                                        patchDraft(item.flagKey, (prev) => ({
                                          ...prev,
                                          departmentIds: prev.departmentIds.filter((id) => id !== departmentId),
                                        }))
                                      }
                                    >
                                      移除
                                    </button>
                                  </div>
                                ))
                              ) : (
                                <p className="text-zinc-500">暂无白名单部门</p>
                              )}
                            </div>
                          </div>
                        ) : (
                          <span className="text-zinc-500">全量</span>
                        )}
                      </TableCell>

                      <TableCell>
                        <textarea
                          className="min-h-24 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500"
                          disabled={singleEditDisabled}
                          placeholder="填写本次变更说明"
                          value={draft.note}
                          onChange={(event) =>
                            patchDraft(item.flagKey, (prev) => ({
                              ...prev,
                              note: event.target.value,
                            }))
                          }
                        />
                        <p className="mt-1 text-xs text-zinc-500">version: {draft.version}</p>
                      </TableCell>

                      <TableCell>
                        <div className="flex flex-wrap gap-2">
                          <Button
                            size="sm"
                            type="button"
                            variant="secondary"
                            onClick={() => {
                              setHistoryPage(1);
                              setHistoryFlagKey(item.flagKey);
                            }}
                          >
                            变更历史
                          </Button>
                          <Button
                            size="sm"
                            type="button"
                            variant="secondary"
                            onClick={() => setImpactFlagKey(item.flagKey)}
                          >
                            影响范围
                          </Button>
                          <Button
                            data-testid={`feature-flag-save-${item.flagKey}`}
                            disabled={singleEditDisabled}
                            size="sm"
                            onClick={() => updateMutation.mutate(item.flagKey)}
                            type="button"
                          >
                            {isPending ? "保存中..." : "保存"}
                          </Button>
                          <Button
                            data-testid={`feature-flag-reset-${item.flagKey}`}
                            disabled={singleEditDisabled}
                            size="sm"
                            variant="outline"
                            type="button"
                            onClick={() =>
                              setDrafts((prev) => ({
                                ...prev,
                                [item.flagKey]: buildDraft(item),
                              }))
                            }
                          >
                            重置
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        ) : null}
      </SectionPanel>

      <Dialog
        open={Boolean(historyFlagKey)}
        onOpenChange={(open) => {
          if (!open) {
            setHistoryFlagKey(null);
            setHistoryPage(1);
          }
        }}
      >
        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>变更历史</DialogTitle>
            <DialogDescription>
              {historyFlagKey ? `${toDisplayName(historyFlagKey)} 的历史变更审计记录。` : "查看开关变更轨迹。"}
            </DialogDescription>
          </DialogHeader>

          {historyQuery.isLoading ? <TableSkeleton columns={1} rows={3} /> : null}
          {historyQuery.isError ? (
            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
              {resolveErrorMessage(historyQuery.error)}
            </p>
          ) : null}
          {!historyQuery.isLoading && !historyQuery.isError ? (
            <div className="space-y-4">
              {historyQuery.data?.items.length ? (
                historyQuery.data.items.map((item) => (
                  <div key={item.id} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <div className="text-sm font-medium text-zinc-900">
                        {item.actorName || item.actorId}
                      </div>
                      <div className="text-xs text-zinc-500">{formatDateTime(item.createdAt)}</div>
                    </div>
                    <div className="mt-3 grid gap-3 md:grid-cols-2">
                      <div className="rounded-lg border border-zinc-200 bg-white p-3">
                        <div className="mb-1 text-xs font-medium text-zinc-500">变更前</div>
                        <div className="text-sm text-zinc-700">{summarizeSnapshot(item.from)}</div>
                      </div>
                      <div className="rounded-lg border border-zinc-200 bg-white p-3">
                        <div className="mb-1 text-xs font-medium text-zinc-500">变更后</div>
                        <div className="text-sm text-zinc-700">{summarizeSnapshot(item.to)}</div>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
                  暂无变更历史。
                </div>
              )}

              {historyQuery.data && historyTotalPages > 1 ? (
                <Pagination page={historyPage} totalPages={historyTotalPages} onPageChange={setHistoryPage} />
              ) : null}
            </div>
          ) : null}
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(impactFlagKey)}
        onOpenChange={(open) => {
          if (!open) {
            setImpactFlagKey(null);
          }
        }}
      >
        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>影响范围</DialogTitle>
            <DialogDescription>
              {impactFlagKey ? `${toDisplayName(impactFlagKey)} 影响的前端导航与后端模块。` : "查看开关影响范围。"}
            </DialogDescription>
          </DialogHeader>

          {impactQuery.isLoading ? <TableSkeleton columns={1} rows={3} /> : null}
          {impactQuery.isError ? (
            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
              {resolveErrorMessage(impactQuery.error)}
            </p>
          ) : null}
          {!impactQuery.isLoading && !impactQuery.isError && impactQuery.data ? (
            <div className="space-y-6">
              <div className="space-y-3">
                <h4 className="text-sm font-semibold text-zinc-900">前端导航</h4>
                {impactQuery.data.navigationItems.length ? (
                  impactQuery.data.navigationItems.map((item) => (
                    <div key={`${item.path}-${item.section}`} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
                      <div className="font-medium text-zinc-900">{item.label}</div>
                      <div className="text-sm text-zinc-600">{item.path}</div>
                      <div className="mt-1 text-xs text-zinc-500">{formatSectionLabel(item.section)}</div>
                    </div>
                  ))
                ) : (
                  <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
                    当前没有直接受此开关控制的导航项。
                  </div>
                )}
              </div>

              <div className="space-y-3">
                <h4 className="text-sm font-semibold text-zinc-900">后端模块</h4>
                {impactQuery.data.backendModules.length ? (
                  impactQuery.data.backendModules.map((item) => (
                    <div key={item.label} className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
                      <div className="font-medium text-zinc-900">{item.label}</div>
                      <div className="mt-2 space-y-1 text-sm text-zinc-600">
                        {item.routes.map((route) => (
                          <div key={route} className="font-mono text-xs text-zinc-500">
                            {route}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))
                ) : (
                  <div className="rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-sm text-zinc-500">
                    当前没有登记在映射表中的后端模块。
                  </div>
                )}
              </div>
            </div>
          ) : null}
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(batchAction)}
        onOpenChange={(open) => {
          if (!open && !batchMutation.isPending) {
            setBatchAction(null);
            setBatchNote("");
          }
        }}
      >
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>
              {batchAction ? `${formatOverrideModeLabel(batchAction)}所选开关` : "批量更新"}
            </DialogTitle>
            <DialogDescription>确认本次批量修改的功能开关，并填写共享变更说明。</DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="max-h-48 overflow-y-auto rounded-lg border border-zinc-200 bg-zinc-50 p-3">
              {selectedItems.map((item) => (
                <div key={item.flagKey} className="mb-2 rounded-lg bg-white px-3 py-2 last:mb-0">
                  <div className="font-medium text-zinc-900">{toDisplayName(item.flagKey)}</div>
                  <div className="font-mono text-xs text-zinc-500">
                    {item.flagKey} · version {item.version}
                  </div>
                </div>
              ))}
            </div>

            <div className="space-y-2">
              <Label>变更说明</Label>
              <textarea
                className="min-h-28 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
                placeholder="填写本次批量变更说明"
                value={batchNote}
                onChange={(event) => setBatchNote(event.target.value)}
              />
            </div>
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="secondary"
              disabled={batchMutation.isPending}
              onClick={() => {
                setBatchAction(null);
                setBatchNote("");
              }}
            >
              取消
            </Button>
            <Button
              type="button"
              disabled={batchMutation.isPending || !batchNote.trim() || !selectedItems.length}
              onClick={() => batchMutation.mutate()}
            >
              {batchMutation.isPending ? "提交中..." : "确认执行"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {batchMode ? (
        <div className="fixed bottom-6 left-1/2 z-50 w-[min(960px,calc(100vw-2rem))] -translate-x-1/2 rounded-2xl border border-zinc-200 bg-white/95 p-4 shadow-xl backdrop-blur">
          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div className="text-sm text-zinc-700">
              已选择 <span className="font-semibold text-zinc-900">{selectedItems.length}</span> 个功能开关
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                size="sm"
                type="button"
                variant="secondary"
                onClick={() => setSelectedFlagKeys(items.map((item) => item.flagKey))}
              >
                全选
              </Button>
              <Button
                size="sm"
                type="button"
                variant="outline"
                onClick={() => setSelectedFlagKeys([])}
              >
                取消全选
              </Button>
              <Button
                size="sm"
                type="button"
                disabled={!selectedItems.length || batchMutation.isPending}
                onClick={() => handleBatchAction("force_on")}
              >
                批量启用
              </Button>
              <Button
                size="sm"
                type="button"
                variant="destructive"
                disabled={!selectedItems.length || batchMutation.isPending}
                onClick={() => handleBatchAction("force_off")}
              >
                批量禁用
              </Button>
              <Button
                size="sm"
                type="button"
                variant="secondary"
                disabled={!selectedItems.length || batchMutation.isPending}
                onClick={() => handleBatchAction("inherit")}
              >
                批量继承
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}