/* ============================================================
   AI PAGE — Luxsin X9 AI Assistant
   - 首次进入: 中央 Logo + 建议气泡，引导用户如何提问
   - 对话中: 消息流式展示（用户气泡 / 助手气泡）
   - 底部: 输入框 + 发送按钮
   - 顶部: 标题 + 历史/新建/清除按钮
   Backend: /sse/question (SSE), /sse/messages, /sse/chats, /sse/clear
   ============================================================ */
import BottomNav from "@/components/BottomNav";
import ConnectionPlaceholder from "@/components/ConnectionPlaceholder";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useDevice } from "@/contexts/DeviceContext";
import {
  AI_SPLIT_RESTORE_PATH_KEY,
  readAndClearAiSplitRestorePath,
  useAIDrawer,
} from "@/contexts/AIDrawerContext";
import { useIsLgUp } from "@/hooks/useIsLgUp";
import {
  ChatRead,
  MessageRead,
  OptimizePeqPayload,
  ToolUseBlock,
  clearChat,
  executeFrontendTool,
  listChats,
  listMessages,
  sendToolResult,
  streamQuestion,
  updateMessageApplied,
} from "@/lib/aiApi";

import { buildPeqSvgCurveData, getFilterType, PeqBandForResponse } from "@/lib/peqAudio";
import { cn } from "@/lib/utils";
import {
  ArrowUp,
  History,
  MessageSquarePlus,
  Sparkles,
  Sliders,
  Volume2,
  Settings2,
  Wand2,
  X,
  Bot,
  Wrench,
  AlertCircle,
  GitCompare,
  Check,
  RotateCcw,
  Loader2,
  Trash2,
  Maximize2,
  ChevronsRight,
  ChevronsLeft,
} from "lucide-react";
import { useLocation } from "wouter";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Streamdown } from "streamdown";
import { toast } from "sonner";
import localeZh from "@/locales/data-zh.json";
import localeEn from "@/locales/data-en.json";
import { resolveDeviceLanguage, resolveLocalePack } from "@/locales/resolveLocale";

type AILocale = NonNullable<(typeof localeZh)["ai"]>;

function resolveAILocale(language: number | undefined): AILocale {
  return resolveLocalePack(language).ai as AILocale;
}

function formatText(template: string, vars: Record<string, string | number>): string {
  return template.replace(/\{(\w+)\}/g, (_, k) => {
    const v = vars[k];
    return v === undefined || v === null ? "" : String(v);
  });
}

type ChatUIMessage = {
  kind: "chat";
  id: string;
  role: "user" | "assistant";
  text: string;
  pending?: boolean;
  error?: boolean;
  tools?: Array<{ id: string; name: string; ok?: boolean }>;
};

type OptimizeUIMessage = {
  kind: "optimize";
  id: string;
  name: string;
  beforePeq: OptimizePeqPayload;
  afterPeq: OptimizePeqPayload;
  applied: boolean;
  appliedAt?: string | null;
};

type UIMessage = ChatUIMessage | OptimizeUIMessage;

interface Suggestion {
  icon: React.ReactNode;
  title: string;
  prompt: string;
}

// 建议气泡图标固定顺序（文案由 i18n 提供）
const SUGGESTION_ICONS: React.ReactNode[] = [
  <Wand2 key="wand" size={14} />,
  <Sliders key="sliders" size={14} />,
  <Volume2 key="vol" size={14} />,
  <Settings2 key="set" size={14} />,
];

// 将后端 DB 存的 content（可能是 JSON 文本）转为纯文本展示
function extractText(raw: string): { text: string; tools: Array<{ id: string; name: string }> } {
  const trimmed = raw?.trim?.() ?? "";
  if (!trimmed) return { text: "", tools: [] };
  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
    try {
      const arr = JSON.parse(trimmed);
      if (Array.isArray(arr)) {
        const textParts: string[] = [];
        const tools: Array<{ id: string; name: string }> = [];
        for (const block of arr) {
          if (block?.type === "text" && typeof block.text === "string") {
            textParts.push(block.text);
          } else if (block?.type === "tool_use") {
            tools.push({ id: block.id, name: block.name });
          } else if (block?.type === "tool_result") {
            // 用户侧的工具结果不直接展示
          }
        }
        return { text: textParts.join("\n").trim(), tools };
      }
    } catch {
      // fall through
    }
  }
  return { text: raw, tools: [] };
}

/**
 * 后端有时先落库 PEQ 对比行（user + before/after_peq），再落库助手文本，
 * 导致刷新后对比卡片顶在当轮对话上方。将「最后一条」对比卡片移到
 * 其后第一条助手消息（及连续助手气泡）之后，使 set_peq 当轮结尾展示对比。
 */
function moveLastOptimizeAfterAssistantReply(items: UIMessage[]): UIMessage[] {
  let lastOptIdx = -1;
  for (let i = items.length - 1; i >= 0; i--) {
    if (items[i].kind === "optimize") {
      lastOptIdx = i;
      break;
    }
  }
  if (lastOptIdx === -1) return items;

  let firstAsst = -1;
  for (let j = lastOptIdx + 1; j < items.length; j++) {
    const m = items[j];
    if (m.kind === "chat" && m.role === "assistant") {
      firstAsst = j;
      break;
    }
  }

  if (firstAsst === -1) {
    if (lastOptIdx === items.length - 1) return items;
    const opt = items[lastOptIdx];
    const rest = items.filter((_, i) => i !== lastOptIdx);
    return [...rest, opt];
  }

  let endAsst = firstAsst;
  while (endAsst + 1 < items.length) {
    const m = items[endAsst + 1];
    if (m.kind === "chat" && m.role === "assistant") endAsst++;
    else break;
  }

  if (lastOptIdx === endAsst + 1) return items;

  const opt = items[lastOptIdx];
  const next: UIMessage[] = [];
  for (let i = 0; i < items.length; i++) {
    if (i === lastOptIdx) continue;
    next.push(items[i]);
    if (i === endAsst) next.push(opt);
  }
  return next;
}

function makeId() {
  return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
}

export type AIPageVariant = "page" | "split";

export interface AIPageProps {
  variant?: AIPageVariant;
  /** Hide side panel (desktop split) */
  onClose?: () => void;
}

export default function AIPage({ variant = "page", onClose }: AIPageProps = {}) {
  const isEmbedded = variant === "split";
  const [routePath, setLocation] = useLocation();
  const isLgUp = useIsLgUp();
  const { setOpen: setAiPanelOpen } = useAIDrawer();
  const { isConnected, deviceState, api, updateSetting } = useDevice();
  const mac = deviceState?.mac ?? "";
  const language = resolveDeviceLanguage(deviceState?.language);
  const deviceName = deviceState?.device ?? "Luxsin X9";

  const aiText = useMemo(() => resolveAILocale(language), [language]);
  const promptText = useMemo(() => resolveLocalePack(language).prompt, [language]);
  const eqUi = useMemo(() => {
    const pack = resolveLocalePack(language);
    const peq = pack.peq as typeof localeZh.peq;
    return peq.eqUi ?? (localeEn.peq as typeof localeEn.peq).eqUi;
  }, [language]);

  const restoreDesktopSplit = useCallback(() => {
    const path = readAndClearAiSplitRestorePath();
    setLocation(path);
    setAiPanelOpen(true);
  }, [setLocation, setAiPanelOpen]);

  const [chatId, setChatId] = useState<string | null>(null);
  const [messages, setMessages] = useState<UIMessage[]>([]);
  const [input, setInput] = useState("");
  const [sending, setSending] = useState(false);
  const [historyOpen, setHistoryOpen] = useState(false);
  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
  const [pendingApplyMsg, setPendingApplyMsg] = useState<OptimizeUIMessage | null>(null);
  const [chats, setChats] = useState<ChatRead[]>([]);
  // 初次加载历史会话期间，避免先闪一下欢迎页再切到消息
  const [initializing, setInitializing] = useState(true);

  const scrollRef = useRef<HTMLDivElement | null>(null);
  const abortRef = useRef<AbortController | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const initialLoadRef = useRef(false);

  const isEmpty = messages.length === 0;

  // ── 自动滚动到底部 ──
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [messages, sending]);

  // ── 组件卸载时取消请求 ──
  useEffect(() => {
    return () => abortRef.current?.abort();
  }, []);

  // ── 打开历史会话 ──
  const openHistory = useCallback(async () => {
    if (!mac) {
      toast.error(aiText.deviceRequired);
      return;
    }
    setHistoryOpen(true);
    try {
      const list = await listChats(mac);
      setChats(list);
    } catch (e: any) {
      toast.error(formatText(aiText.loadHistoryFailed, { message: e?.message ?? e }));
    }
  }, [aiText, mac]);

  // ── 把后端消息行映射为 UI 消息 ──
  // 用户行且带 before_peq + after_peq → AB 对比卡片（常与 set_peq 相关）；
  // type=0 → 聊天气泡。先按 created_at 排序，再把本轮最后一条对比挪到助手回复之后。
  const mapRowsToUI = useCallback((rows: MessageRead[]): UIMessage[] => {
    const sorted = [...rows].sort((a, b) => {
      const ta = new Date(a.created_at).getTime();
      const tb = new Date(b.created_at).getTime();
      if (ta !== tb) return ta - tb;
      return String(a.id).localeCompare(String(b.id));
    });
    const result: UIMessage[] = [];
    for (const r of sorted) {
      if (r.role === "user" && r.before_peq && r.after_peq) {
        result.push({
          kind: "optimize",
          id: r.id,
          name: r.after_peq.name ?? r.before_peq.name ?? "Optimized EQ",
          beforePeq: r.before_peq,
          afterPeq: r.after_peq,
          applied: !!r.applied,
          appliedAt: r.applied_at ?? null,
        });
      } else if (r.type === 0) {
        const { text, tools } = extractText(r.content);
        if (!text && tools.length === 0) continue;
        result.push({
          kind: "chat",
          id: r.id,
          role: r.role,
          text,
          tools: tools.map((t) => ({ ...t, ok: true })),
        });
      }
    }
    return moveLastOptimizeAfterAssistantReply(result);
  }, []);

  // ── 加载指定会话的消息 ──
  const loadChat = useCallback(
    async (id: string, opts?: { closePanel?: boolean }) => {
      try {
        const rows = await listMessages(id);
        setMessages(mapRowsToUI(rows));
        setChatId(id);
        if (opts?.closePanel !== false) setHistoryOpen(false);
      } catch (e: any) {
        toast.error(formatText(aiText.loadChatFailed, { message: e?.message ?? e }));
      }
    },
    [aiText, mapRowsToUI],
  );

  // ── 进入页面时若有历史会话，自动打开最近一次 ──
  useEffect(() => {
    if (initialLoadRef.current) return;
    if (!mac) return;
    initialLoadRef.current = true;
    (async () => {
      try {
        const list = await listChats(mac);
        setChats(list);
        if (list.length === 0) return;
        const newest = list.reduce((a, b) =>
          new Date(a.updated_at) > new Date(b.updated_at) ? a : b,
        );
        await loadChat(newest.id, { closePanel: false });
      } catch {
        // 静默失败：保留欢迎页
      } finally {
        setInitializing(false);
      }
    })();
  }, [mac, loadChat]);

  // 没有 mac 时（设备未识别完毕）不应该停在 initializing；未连接时 ConnectionPlaceholder 会拦截
  useEffect(() => {
    if (!mac && initializing) {
      // 给 mac 一段缓冲期，否则即便最终没有 mac 也要释放欢迎页
      const t = setTimeout(() => setInitializing(false), 800);
      return () => clearTimeout(t);
    }
  }, [mac, initializing]);

  // ── 静默刷新当前会话（流式结束后用于拉取新增的 type=2 优化记录） ──
  const refreshCurrentChat = useCallback(
    async (id: string) => {
      try {
        const rows = await listMessages(id);
        setMessages(mapRowsToUI(rows));
      } catch {
        // 静默失败，不打扰用户
      }
    },
    [mapRowsToUI],
  );

  // ── 新建会话 ──
  const newChat = useCallback(() => {
    abortRef.current?.abort();
    setMessages([]);
    setChatId(null);
    setInput("");
    setHistoryOpen(false);
  }, []);

  // ── 清空当前会话 ──
  const clearCurrent = useCallback(async () => {
    if (!chatId) {
      newChat();
      return;
    }
    try {
      await clearChat(chatId);
      setChats((prev) => prev.filter((c) => c.id !== chatId));
      newChat();
      toast.success(aiText.cleared);
    } catch (e: any) {
      toast.error(formatText(aiText.clearFailed, { message: e?.message ?? e }));
    }
  }, [aiText, chatId, newChat]);

  // ── 历史面板里删除某条会话（确认框用 AlertDialog，WebView 不支持 window.confirm） ──
  const confirmDeleteChat = useCallback(async (id: string) => {
    try {
      await clearChat(id);
      setChats((prev) => prev.filter((c) => c.id !== id));
      if (chatId === id) {
        setChatId(null);
        setMessages([]);
      }
      toast.success(aiText.history.deleted);
    } catch (e: any) {
      toast.error(
        formatText(aiText.history.deleteFailed, { message: e?.message ?? e }),
      );
    }
  }, [aiText, chatId]);

  // ── 发送提问 ──
  const send = useCallback(
    (question: string) => {
      const trimmed = question.trim();
      if (!trimmed || sending) return;
      if (!mac || !deviceState || !api) {
        toast.error(aiText.deviceRequired);
        return;
      }

      const userMsg: ChatUIMessage = {
        kind: "chat",
        id: makeId(),
        role: "user",
        text: trimmed,
      };
      const assistantMsg: ChatUIMessage = {
        kind: "chat",
        id: makeId(),
        role: "assistant",
        text: "",
        pending: true,
        tools: [],
      };

      setMessages((prev) => [...prev, userMsg, assistantMsg]);
      setInput("");
      setSending(true);

      const assistantId = assistantMsg.id;

      const updateAssistant = (updater: (m: ChatUIMessage) => ChatUIMessage) => {
        setMessages((prev) =>
          prev.map((m) => (m.id === assistantId && m.kind === "chat" ? updater(m) : m)),
        );
      };

      // 工具执行后续调用时需要保留当前 chat_id，先捕获一下
      let currentChatId = chatId;

      // 组装新版 /sse/question 请求体
      const buildAndStream = async () => {
        let devicePeq: any;
        try {
          const peqState = await api.getPeqState();
          devicePeq = {
            peqSelect: peqState.peqSelect ?? deviceState.peqSelect ?? 0,
            peqEnable: deviceState.peqEnable ?? 1,
            peq: (peqState.peq ?? []).map((p) => ({
              name: p.name,
              brand: p.brand,
              model: p.model,
              filters: p.filters ?? [],
              preamp: p.preamp,
              canDel: p.canDel,
              autoPre: p.autoPre,
            })),
            msgCount: deviceState.msgCount ?? 0,
          };
        } catch (e: any) {
          updateAssistant((m) => ({
            ...m,
            pending: false,
            error: true,
            text: aiText.requestFailed,
          }));
          setSending(false);
          toast.error(formatText(aiText.requestFailed, { message: e?.message ?? e }));
          return;
        }

        const controller = streamQuestion(
        {
          question: trimmed,
          device_setting: { ...deviceState },
          device_peq: devicePeq,
          chat_id: currentChatId,
        },
        {
          onText: (t) => {
            updateAssistant((m) => ({
              ...m,
              text: (m.text ?? "") + t,
              pending: false,
            }));
          },
          onToolUse: async (block: ToolUseBlock) => {
            updateAssistant((m) => ({
              ...m,
              pending: false,
              tools: [...(m.tools ?? []), { id: block.id, name: block.name }],
            }));
            const result = await executeFrontendTool(block, api);
            updateAssistant((m) => ({
              ...m,
              tools: (m.tools ?? []).map((t) =>
                t.id === block.id ? { ...t, ok: result.ok } : t,
              ),
            }));
            try {
              await sendToolResult(block.id, result);
            } catch (e: any) {
              toast.error(formatText(aiText.toolResultFailed, { message: e?.message ?? e }));
            }
          },
          onError: (msg) => {
            updateAssistant((m) => ({
              ...m,
              pending: false,
              error: true,
              text: m.text || msg || aiText.requestFailed,
            }));
            setSending(false);
          },
          onDone: () => {
            setSending(false);
            updateAssistant((m) => ({ ...m, pending: false }));
            // 如果是新建会话，后端首次返回时会创建 chat_id；这里拉一次会话列表补上 id
            const resolveAndRefresh = async () => {
              let id = currentChatId;
              if (!id && mac) {
                try {
                  const list = await listChats(mac);
                  if (list.length > 0) {
                    const newest = list.reduce((a, b) =>
                      new Date(a.updated_at) > new Date(b.updated_at) ? a : b,
                    );
                    id = newest.id;
                    currentChatId = id;
                    setChatId(id);
                  }
                } catch {
                  return;
                }
              }
              if (id) await refreshCurrentChat(id);
            };
            void resolveAndRefresh();
          },
        },
      );
        abortRef.current = controller;
      };
      void buildAndStream();
    },
    [aiText, api, chatId, deviceState, mac, refreshCurrentChat, sending],
  );

  const stop = useCallback(() => {
    abortRef.current?.abort();
    setSending(false);
    setMessages((prev) =>
      prev.map((m) =>
        m.kind === "chat" && m.pending
          ? { ...m, pending: false, text: m.text || aiText.stopped }
          : m,
      ),
    );
  }, [aiText]);

  const onSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      send(input);
    },
    [input, send],
  );

  const onKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
      if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
        e.preventDefault();
        send(input);
      }
    },
    [input, send],
  );

  const onInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInput(e.target.value);
    const el = e.target;
    el.style.height = "auto";
    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
  }, []);

  // ── 优化记录：对比对话框 & 应用/回滚 ──
  const [compareMsg, setCompareMsg] = useState<OptimizeUIMessage | null>(null);
  const [applyingId, setApplyingId] = useState<string | null>(null);
  const [currentDevicePeq, setCurrentDevicePeq] = useState<OptimizePeqPayload | null>(null);

  // 拉取当前设备 PEQ，作为"当前"参考曲线与"应用/回滚"后的对比基准
  const refreshCurrentDevicePeq = useCallback(async () => {
    if (!api) return;
    try {
      const peqState = await api.getPeqState();
      const selectedIdx = peqState.peqSelect ?? 0;
      const selected = peqState.peq?.[selectedIdx];
      const selectedFilters = (() => {
        const f = selected?.filters;
        if (!f) return undefined;
        if (typeof f === "string") {
          try {
            return JSON.parse(f);
          } catch {
            return undefined;
          }
        }
        return f;
      })();
      setCurrentDevicePeq({
        name: selected?.name,
        preamp: selected?.preamp,
        canDel: selected?.canDel,
        autoPre: selected?.autoPre,
        brand: selected?.brand,
        model: selected?.model,
        filters: (selectedFilters ?? peqState.filters ?? []) as OptimizePeqPayload["filters"],
      });
    } catch {
      // 静默失败，保留上一次的值
    }
  }, [api]);

  useEffect(() => {
    if (isConnected) void refreshCurrentDevicePeq();
  }, [isConnected, refreshCurrentDevicePeq]);

  const executeApplyToggle = useCallback(
    async (msg: OptimizeUIMessage) => {
      if (!api) {
        toast.error(aiText.deviceDisconnected);
        return;
      }
      const nextApplied = !msg.applied;
      const targetPeq = nextApplied ? msg.afterPeq : msg.beforePeq;
      setApplyingId(msg.id);
      try {
        await api.upgradePeqChange({
          peqChange: {
            name: targetPeq.name ?? msg.name,
            filters: (targetPeq.filters ?? []).map((f) => ({
              type: getFilterType(f.type),
              fc: (f.fc ?? f.frequency ?? 1000) as number,
              gain: f.gain,
              q: f.q,
            })),
            autoPre: targetPeq.autoPre,
            preamp: targetPeq.preamp,
            canDel: targetPeq.canDel,
          },
        });
        await updateMessageApplied(msg.id, nextApplied);
        await api.refreshState();
        setMessages((prev) =>
          prev.map((m) =>
            m.kind === "optimize" && m.id === msg.id
              ? { ...m, applied: nextApplied, appliedAt: new Date().toISOString() }
              : m,
          ),
        );
        setCompareMsg((cur) =>
          cur && cur.id === msg.id ? { ...cur, applied: nextApplied } : cur,
        );
        void refreshCurrentDevicePeq();
        toast.success(
          nextApplied ? aiText.optimize.applySuccess : aiText.optimize.rollbackSuccess,
        );
      } catch (e: any) {
        toast.error(formatText(aiText.optimize.applyFailed, { message: e?.message ?? e }));
      } finally {
        setApplyingId(null);
      }
    },
    [aiText, api, refreshCurrentDevicePeq],
  );

  const handleApplyToggle = useCallback(
    (msg: OptimizeUIMessage) => {
      if (!api) {
        toast.error(aiText.deviceDisconnected);
        return;
      }
      if ((deviceState?.peqEnable ?? 0) !== 1) {
        setPendingApplyMsg(msg);
        return;
      }
      void executeApplyToggle(msg);
    },
    [aiText, api, deviceState?.peqEnable, executeApplyToggle],
  );

  const confirmEnableAndApply = useCallback(
    async (msg: OptimizeUIMessage) => {
      try {
        const bypassOn = (deviceState?.dsp_enable ?? 0) === 0;
        await updateSetting(bypassOn ? { peqEnable: 1, dsp_enable: 1 } : { peqEnable: 1 });
        await executeApplyToggle(msg);
      } catch (e: any) {
        toast.error(formatText(aiText.optimize.applyFailed, { message: e?.message ?? e }));
      }
    },
    [aiText, deviceState?.dsp_enable, executeApplyToggle, updateSetting],
  );

  const openCompare = useCallback(
    (m: OptimizeUIMessage) => {
      setCompareMsg(m);
      void refreshCurrentDevicePeq();
    },
    [refreshCurrentDevicePeq],
  );

  const headerTitle = aiText.title;

  if (!isConnected) return <ConnectionPlaceholder />;

  return (
    <div
      className={cn(
        "flex flex-col overflow-hidden bg-black",
        /* Same clearance as Layout/main above fixed BottomNav */
        "pb-[calc(4rem+env(safe-area-inset-bottom,0px))]",
        isEmbedded ? "h-full min-h-0" : "h-[100dvh]",
      )}
    >
      {/* ── Header ── */}
      <div className="page-header flex-shrink-0">
        <div className="flex items-center gap-2 mr-auto">
          {!isEmbedded && isLgUp && (
            <button
              type="button"
              onClick={restoreDesktopSplit}
              className="mr-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
              style={{ background: "rgba(44,44,46,0.6)" }}
              aria-label={aiText.ariaRestoreSplit}
            >
              <ChevronsLeft size={18} />
            </button>
          )}
          {isEmbedded && onClose && (
            <>
              <button
                type="button"
                onClick={onClose}
                className="mr-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
                style={{ background: "rgba(44,44,46,0.6)" }}
                aria-label={aiText.ariaHidePanel}
              >
                <ChevronsRight size={18} />
              </button>
              <button
                type="button"
                onClick={() => {
                  try {
                    sessionStorage.setItem(AI_SPLIT_RESTORE_PATH_KEY, routePath);
                  } catch {
                    /* ignore */
                  }
                  setLocation("/ai");
                  onClose();
                }}
                className="mr-1 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
                style={{ background: "rgba(44,44,46,0.6)" }}
                aria-label={aiText.ariaFullPage}
              >
                <Maximize2 size={16} />
              </button>
            </>
          )}
          <div
            className="w-7 h-7 rounded-full flex items-center justify-center"
            style={{
              background: "rgba(0,255,246,0.12)",
              border: "1px solid rgba(0,255,246,0.3)",
              boxShadow: "0 0 10px rgba(0,255,246,0.25)",
            }}
          >
            {/* <Sparkles size={14} className="text-[#00FFF6]" /> */}
            <Bot size={14} className="text-[#00FFF6]" />
          </div>
          <span className="text-[17px] font-semibold text-white">{headerTitle}</span>
        </div>
        <button
          onClick={openHistory}
          className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors mr-2"
          style={{ background: "rgba(44,44,46,0.6)" }}
          aria-label={aiText.ariaHistory}
        >
          <History size={16} />
        </button>
        <button
          onClick={newChat}
          className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
          style={{ background: "rgba(44,44,46,0.6)" }}
          aria-label={aiText.ariaNewChat}
        >
          <MessageSquarePlus size={16} />
        </button>
      </div>

      {/* ── Messages / Welcome ── */}
      <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto px-4">
        {initializing ? (
          <div className="h-full flex items-center justify-center">
            <Loader2 size={20} className="animate-spin text-white/30" />
          </div>
        ) : isEmpty ? (
          <WelcomeView
            aiText={aiText}
            deviceName={deviceName}
            onPick={(p) => {
              setInput(p);
              setTimeout(() => textareaRef.current?.focus(), 0);
            }}
          />
        ) : (
          <div className="pt-3 space-y-3 max-w-full">
            {messages.map((m) =>
              m.kind === "chat" ? (
                <MessageBubble key={m.id} aiText={aiText} msg={m} />
              ) : (
                <OptimizeCard
                  key={m.id}
                  aiText={aiText}
                  msg={m}
                  currentPeq={currentDevicePeq}
                  applying={applyingId === m.id}
                  onCompare={() => openCompare(m)}
                  onApplyToggle={() => handleApplyToggle(m)}
                />
              ),
            )}
          </div>
        )}
      </div>

      {/* ── Input bar ── */}
      <div
        className="flex-shrink-0 px-3 pt-3 pb-3"
        style={{
          background: "rgba(10,10,12,0.96)",
          borderTop: "1px solid rgba(255,255,255,0.06)",
          backdropFilter: "blur(20px) saturate(180%)",
          WebkitBackdropFilter: "blur(20px) saturate(180%)",
        }}
      >
        <form
          onSubmit={onSubmit}
          className="flex items-end gap-2 rounded-[22px] px-3 py-2 w-full"
          style={{
            background: "rgba(28,28,30,0.92)",
            border: "1px solid rgba(255,255,255,0.08)",
          }}
        >
          <textarea
            ref={textareaRef}
            value={input}
            onChange={onInputChange}
            onKeyDown={onKeyDown}
            rows={1}
            placeholder={aiText.inputPlaceholder}
            className="flex-1 bg-transparent outline-none resize-none text-[15px] text-white placeholder:text-white/35 py-1.5 px-1 max-h-40 leading-[1.4]"
          />
          {sending ? (
            <button
              type="button"
              onClick={stop}
              className="flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-all active:scale-95"
              style={{
                background: "rgba(239,68,68,0.18)",
                border: "1px solid rgba(239,68,68,0.4)",
              }}
              aria-label={aiText.ariaStop}
            >
              <span
                className="block w-3 h-3 rounded-[2px]"
                style={{ background: "#ef4444" }}
              />
            </button>
          ) : (
            <button
              type="submit"
              disabled={!input.trim()}
              className={cn(
                "flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-all active:scale-95 disabled:opacity-40",
              )}
              style={{
                background: input.trim() ? "#00FFF6" : "rgba(120,120,128,0.3)",
                boxShadow: input.trim() ? "0 0 12px rgba(0,255,246,0.45)" : "none",
              }}
              aria-label={aiText.ariaSend}
            >
              <ArrowUp
                size={18}
                className={input.trim() ? "text-black" : "text-white/50"}
                strokeWidth={2.5}
              />
            </button>
          )}
        </form>
        {chatId && messages.length > 0 && (
          <div className="flex justify-center mt-2">
            <button
              onClick={clearCurrent}
              className="text-[11px] text-white/35 active:text-white/70 transition-colors px-2"
            >
              {aiText.clearCurrent}
            </button>
          </div>
        )}
      </div>

      {/* ── History panel ── */}
      {historyOpen && (
        <HistoryPanel
          aiText={aiText}
          chats={chats}
          currentId={chatId}
          onClose={() => setHistoryOpen(false)}
          onSelect={(id) => loadChat(id)}
          onNew={newChat}
          onDelete={setPendingDeleteId}
        />
      )}

      <AlertDialog
        open={pendingDeleteId !== null}
        onOpenChange={(open) => {
          if (!open) setPendingDeleteId(null);
        }}
      >
        <AlertDialogContent className="top-[42%] z-[70] border-white/10 bg-zinc-900 text-white sm:max-w-md">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-white">
              {aiText.history.delete}
            </AlertDialogTitle>
            <AlertDialogDescription className="text-white/60">
              {aiText.history.deleteConfirm}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="border-white/20 bg-transparent text-white hover:bg-white/10">
              {promptText.cancel}
            </AlertDialogCancel>
            <AlertDialogAction
              className="bg-red-500 text-white hover:bg-red-500/90 focus-visible:ring-red-500"
              onClick={() => {
                if (pendingDeleteId) void confirmDeleteChat(pendingDeleteId);
              }}
            >
              {promptText.delete}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog
        open={pendingApplyMsg !== null}
        onOpenChange={(open) => {
          if (!open) setPendingApplyMsg(null);
        }}
      >
        <AlertDialogContent className="top-[42%] z-[70] border-white/10 bg-zinc-900 text-white sm:max-w-md">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-white">
              {eqUi.enableConfirmTitle}
            </AlertDialogTitle>
            <AlertDialogDescription className="text-white/60">
              {eqUi.enableConfirmDesc}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="border-white/20 bg-transparent text-white hover:bg-white/10">
              {eqUi.cancel}
            </AlertDialogCancel>
            <AlertDialogAction
              className="bg-[#00FFF6] text-black hover:bg-[#00FFF6]/90 focus-visible:ring-[#00FFF6]"
              onClick={() => {
                if (pendingApplyMsg) void confirmEnableAndApply(pendingApplyMsg);
              }}
            >
              {eqUi.enableConfirmOk}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* ── 对比对话框 ── */}
      {compareMsg && (
        <CompareDialog
          aiText={aiText}
          msg={compareMsg}
          currentPeq={currentDevicePeq}
          applying={applyingId === compareMsg.id}
          onClose={() => setCompareMsg(null)}
          onApplyToggle={() => handleApplyToggle(compareMsg)}
        />
      )}

      {!isEmbedded && <BottomNav />}
    </div>
  );
}

// ============================================================
// 子组件
// ============================================================

function WelcomeView({
  aiText,
  deviceName,
  onPick,
}: {
  aiText: AILocale;
  deviceName: string;
  onPick: (prompt: string) => void;
}) {
  const suggestions = (aiText.suggestions ?? []).map((s, i) => ({
    icon: SUGGESTION_ICONS[i] ?? SUGGESTION_ICONS[0],
    title: s.title,
    prompt: s.prompt,
  }));
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] pt-6">
      {/* Logo */}
      <div
        className="w-16 h-16 rounded-[22px] flex items-center justify-center mb-4"
        style={{
          background:
            "radial-gradient(circle at 30% 30%, rgba(0,255,246,0.3), rgba(0,255,246,0.08) 60%, transparent 80%)",
          border: "1px solid rgba(0,255,246,0.4)",
          boxShadow:
            "0 0 30px rgba(0,255,246,0.25), inset 0 0 20px rgba(0,255,246,0.08)",
        }}
      >
        {/* <Sparkles size={28} className="text-[#00FFF6]" /> */}
        <Bot size={28} className="text-[#00FFF6]" />
      </div>
      <h2 className="text-[22px] font-semibold text-white mb-1.5">{aiText.welcomeTitle}</h2>
      <p className="text-[13px] text-white/45 text-center leading-relaxed max-w-[280px] mb-7">
        {formatText(aiText.welcomeDescription, { device: deviceName })}
      </p>

      <div className="w-full max-w-[420px]">
        <div className="text-[11px] text-white/35 font-medium tracking-wider uppercase px-1 mb-2">
          {aiText.suggestionsLabel}
        </div>
        <div className="grid grid-cols-2 gap-2">
          {suggestions.map((s) => (
            <button
              key={s.title}
              onClick={() => onPick(s.prompt)}
              className="text-left rounded-[14px] p-3 transition-all active:scale-[0.98]"
              style={{
                background: "rgba(28,28,30,0.85)",
                border: "1px solid rgba(255,255,255,0.06)",
              }}
            >
              <div
                className="w-6 h-6 rounded-[8px] flex items-center justify-center mb-2"
                style={{
                  background: "rgba(0,255,246,0.1)",
                  border: "1px solid rgba(0,255,246,0.2)",
                  color: "#00FFF6",
                }}
              >
                {s.icon}
              </div>
              <div className="text-[13px] font-medium text-white mb-0.5">{s.title}</div>
              <div className="text-[11px] text-white/40 leading-snug line-clamp-2">
                {s.prompt}
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function MessageBubble({ aiText, msg }: { aiText: AILocale; msg: ChatUIMessage }) {
  const isUser = msg.role === "user";
  return (
    <div className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}>
      {!isUser && (
        <div
          className="w-7 h-7 rounded-full flex items-center justify-center mr-2 mt-0.5 flex-shrink-0"
          style={{
            background: "rgba(0,255,246,0.12)",
            border: "1px solid rgba(0,255,246,0.25)",
          }}
        >
          <Bot size={14} className="text-[#00FFF6]" />
        </div>
      )}
      <div
        className={cn(
          "rounded-[18px] px-3.5 py-2.5 max-w-[82%] text-[14.5px] leading-relaxed break-words",
          isUser ? "text-black" : "text-white",
        )}
        style={
          isUser
            ? {
                background: "#00FFF6",
                boxShadow: "0 0 14px rgba(0,255,246,0.25)",
                borderBottomRightRadius: 6,
              }
            : {
                background: "rgba(28,28,30,0.92)",
                border: "1px solid rgba(255,255,255,0.06)",
                borderBottomLeftRadius: 6,
              }
        }
      >
        {/* 工具调用 chips */}
        {msg.tools && msg.tools.length > 0 && (
          <div className="flex flex-wrap gap-1.5 mb-2">
            {msg.tools.map((t) => (
              <span
                key={t.id}
                className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full"
                style={{
                  background: "rgba(0,255,246,0.08)",
                  border: "1px solid rgba(0,255,246,0.22)",
                  color: "#00FFF6",
                }}
              >
                <Wrench size={10} />
                {t.name}
                {t.ok === false && <AlertCircle size={10} className="text-red-400" />}
              </span>
            ))}
          </div>
        )}
        {isUser ? (
          <div className="whitespace-pre-wrap">{msg.text}</div>
        ) : (
          <div className={cn("markdown-body", msg.error && "text-red-400")}>
            {msg.text ? (
              <Streamdown parseIncompleteMarkdown>{msg.text}</Streamdown>
            ) : msg.pending ? (
              <span className="text-white/40 italic">{aiText.thinking}</span>
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}

function HistoryPanel({
  aiText,
  chats,
  currentId,
  onClose,
  onSelect,
  onNew,
  onDelete,
}: {
  aiText: AILocale;
  chats: ChatRead[];
  currentId: string | null;
  onClose: () => void;
  onSelect: (id: string) => void;
  onNew: () => void;
  onDelete: (id: string) => void;
}) {
  return (
    <div className="fixed inset-0 z-[60] flex flex-col bg-black/70" onClick={onClose}>
      <div
        className="mt-auto rounded-t-[22px] max-h-[70vh] flex flex-col"
        style={{
          background: "rgba(18,18,20,0.98)",
          border: "1px solid rgba(255,255,255,0.08)",
          paddingBottom: "env(safe-area-inset-bottom, 0px)",
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center px-4 pt-3 pb-2">
          <span className="text-[15px] font-semibold text-white flex-1">
            {aiText.history.title}
          </span>
          <button
            onClick={onClose}
            className="w-7 h-7 rounded-full flex items-center justify-center text-white/60"
            style={{ background: "rgba(44,44,46,0.8)" }}
            aria-label={aiText.ariaClose}
          >
            <X size={14} />
          </button>
        </div>
        <div className="overflow-y-auto px-3 pb-3">
          <button
            onClick={onNew}
            className="w-full flex items-center gap-2 px-3 py-3 rounded-[12px] mb-2 text-left"
            style={{
              background: "rgba(0,255,246,0.08)",
              border: "1px dashed rgba(0,255,246,0.3)",
              color: "#00FFF6",
            }}
          >
            <MessageSquarePlus size={16} />
            <span className="text-[14px] font-medium">{aiText.history.newChat}</span>
          </button>
          {chats.length === 0 ? (
            <div className="text-center text-white/40 text-[13px] py-6">
              {aiText.history.empty}
            </div>
          ) : (
            <div className="ios-list-group">
              {chats.map((c) => (
                <div
                  key={c.id}
                  className={cn(
                    "ios-list-row w-full",
                    currentId === c.id && "bg-white/[0.04]",
                  )}
                >
                  <button
                    onClick={() => onSelect(c.id)}
                    className="flex-1 min-w-0 text-left active:opacity-60"
                  >
                    <div className="text-[15px] text-white truncate">{c.title}</div>
                    <div className="text-[11px] text-white/35 mt-0.5">
                      {new Date(c.updated_at).toLocaleString()}
                    </div>
                  </button>
                  {currentId === c.id && (
                    <span className="text-[11px] text-[#00FFF6] ml-2">
                      {aiText.history.current}
                    </span>
                  )}
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      onDelete(c.id);
                    }}
                    className="ml-2 w-8 h-8 shrink-0 rounded-full flex items-center justify-center text-white/40 hover:text-red-400 active:text-red-500 transition-colors touch-manipulation"
                    style={{ background: "rgba(44,44,46,0.6)" }}
                    aria-label={aiText.history.delete}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// OptimizeCard: type=2 的优化记录气泡
// ============================================================
function OptimizeCard({
  aiText,
  msg,
  currentPeq,
  applying,
  onCompare,
  onApplyToggle,
}: {
  aiText: AILocale;
  msg: OptimizeUIMessage;
  currentPeq: OptimizePeqPayload | null;
  applying: boolean;
  onCompare: () => void;
  onApplyToggle: () => void;
}) {
  // 当前未应用 → 目标是 after_peq（点击应用即切到 after）
  // 当前已应用 → 目标是 before_peq（点击回滚即切回 before）
  const targetPeq = msg.applied ? msg.beforePeq : msg.afterPeq;
  const filterCount = targetPeq.filters?.length ?? 0;
  const preamp = targetPeq.preamp ?? 0;
  const summary = formatText(aiText.optimize.summary, {
    count: filterCount,
    preamp: `${preamp > 0 ? "+" : ""}${preamp.toFixed(1)}`,
  });
  return (
    <div className="flex w-full justify-start">
      <div
        className="w-7 h-7 rounded-full flex items-center justify-center mr-2 mt-0.5 flex-shrink-0"
        style={{
          background: "rgba(0,255,246,0.12)",
          border: "1px solid rgba(0,255,246,0.25)",
        }}
      >
        <Wand2 size={14} className="text-[#00FFF6]" />
      </div>
      <div
        className="rounded-[18px] max-w-[82%] w-full p-3.5"
        style={{
          background: "rgba(28,28,30,0.92)",
          border: "1px solid rgba(0,255,246,0.25)",
          borderBottomLeftRadius: 6,
          boxShadow: "0 0 14px rgba(0,255,246,0.08)",
        }}
      >
        <div className="flex items-center gap-2 mb-2">
          <span
            className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full font-medium"
            style={{
              background: "rgba(0,255,246,0.1)",
              border: "1px solid rgba(0,255,246,0.3)",
              color: "#00FFF6",
            }}
          >
            <Sparkles size={10} /> {aiText.optimize.badge}
          </span>
          {msg.applied && (
            <span className="text-[10px] text-green-400/90">
              {aiText.optimize.applied}
            </span>
          )}
        </div>

        <div className="text-[14px] font-semibold text-white truncate">
          {msg.name}
        </div>
        <div className="text-[12px] text-white/45 mt-0.5">{summary}</div>

        {/* 缩略对比曲线：当前设备 vs 应用/回滚后 */}
        <ComparePreview
          currentPeq={currentPeq}
          targetPeq={targetPeq}
          width={260}
          height={70}
        />

        <div className="flex gap-2 mt-3">
          <button
            onClick={onCompare}
            className="flex-1 h-9 rounded-[10px] text-[13px] font-medium text-white flex items-center justify-center gap-1.5 active:scale-[0.98] transition-all"
            style={{
              background: "rgba(44,44,46,0.8)",
              border: "1px solid rgba(255,255,255,0.08)",
            }}
          >
            <GitCompare size={14} />
            {aiText.optimize.compare}
          </button>
          <button
            onClick={onApplyToggle}
            disabled={applying}
            className={cn(
              "flex-1 h-9 rounded-[10px] text-[13px] font-semibold flex items-center justify-center gap-1.5 active:scale-[0.98] transition-all disabled:opacity-50",
            )}
            style={
              msg.applied
                ? {
                    background: "rgba(239,68,68,0.12)",
                    border: "1px solid rgba(239,68,68,0.3)",
                    color: "#f87171",
                  }
                : {
                    background: "#00FFF6",
                    color: "#000",
                    boxShadow: "0 0 12px rgba(0,255,246,0.35)",
                  }
            }
          >
            {applying ? (
              <Loader2 size={14} className="animate-spin" />
            ) : msg.applied ? (
              <>
                <RotateCcw size={14} /> {aiText.optimize.rollback}
              </>
            ) : (
              <>
                <Check size={14} /> {aiText.optimize.apply}
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// 曲线可视化：把 PEQ 的 filters 转为 buildPeqSvgCurveData 可用的格式
// ============================================================
function peqToBands(peq: OptimizePeqPayload): PeqBandForResponse[] {
  const filters = peq.filters ?? [];
  return filters.map((f) => ({
    enabled: true,
    gain: Number(f.gain) || 0,
    freq: Number((f.fc ?? f.frequency) ?? 1000),
    q: Number(f.q) || 1,
    type: f.type,
  }));
}

const PEQ_CHART_CURVE_OPTS = { yDbMax: 20, paddingY: 6 } as const;
const PATH_D_TRANSITION = "d 0.45s cubic-bezier(0.22, 1, 0.32, 1)";

function fmtHoverFreqHz(f: number): string {
  if (!Number.isFinite(f) || f <= 0) return "—";
  if (f >= 10000) return `${Math.round(f / 1000)}k`;
  if (f >= 1000) return `${(f / 1000).toFixed(1)}k`;
  return `${Math.round(f)}`;
}

/** 沿折线在 x 上插值：频率对数插值，dB 线性插值。 */
function interpolatePeqAtMx(
  points: Array<{ x: number; y: number; gainDb: number; freq: number }>,
  mx: number,
): { freq: number; gainDb: number } | null {
  if (points.length === 0) return null;
  if (mx <= points[0].x) return { freq: points[0].freq, gainDb: points[0].gainDb };
  const last = points[points.length - 1];
  if (mx >= last.x) return { freq: last.freq, gainDb: last.gainDb };
  let lo = 0;
  let hi = points.length - 1;
  while (hi - lo > 1) {
    const mid = (lo + hi) >> 1;
    if (points[mid].x <= mx) lo = mid;
    else hi = mid;
  }
  const a = points[lo];
  const b = points[hi];
  const span = b.x - a.x || 1e-9;
  const t = (mx - a.x) / span;
  const logFa = Math.log10(Math.max(a.freq, 1e-6));
  const logFb = Math.log10(Math.max(b.freq, 1e-6));
  const freq = Math.pow(10, logFa + t * (logFb - logFa));
  const gainDb = a.gainDb + t * (b.gainDb - a.gainDb);
  return { freq, gainDb };
}

/**
 * 叠加 PEQ 幅频曲线：鼠标悬停显示频率与 dB；路径 d 带 CSS 过渡（应用/回滚后曲线平滑变化）。
 */
function PeqOverlayCompareSvg({
  currentBands,
  targetBands,
  width,
  height,
  currentStroke = "rgba(255,255,255,0.35)",
  targetStroke = "#00FFF6",
  targetFill = "rgba(0,255,246,0.08)",
}: {
  currentBands: PeqBandForResponse[];
  targetBands: PeqBandForResponse[];
  width: number;
  height: number;
  currentStroke?: string;
  targetStroke?: string;
  targetFill?: string;
}) {
  const currentData = useMemo(() => {
    if (currentBands.length === 0) return null;
    return buildPeqSvgCurveData({
      bands: currentBands,
      width,
      height,
      ...PEQ_CHART_CURVE_OPTS,
    });
  }, [currentBands, width, height]);

  const targetData = useMemo(
    () =>
      buildPeqSvgCurveData({
        bands: targetBands,
        width,
        height,
        ...PEQ_CHART_CURVE_OPTS,
      }),
    [targetBands, width, height],
  );

  const [hover, setHover] = useState<{
    mx: number;
    freq: number;
    curDb: number | null;
    tgtDb: number;
  } | null>(null);

  const onMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const el = e.currentTarget;
      const r = el.getBoundingClientRect();
      if (r.width <= 0) return;
      const mx = ((e.clientX - r.left) / r.width) * width;
      const tgt = interpolatePeqAtMx(targetData.points, mx);
      if (!tgt) return;
      const cur = currentData ? interpolatePeqAtMx(currentData.points, mx) : null;
      setHover({
        mx,
        freq: tgt.freq,
        curDb: cur?.gainDb ?? null,
        tgtDb: tgt.gainDb,
      });
    },
    [currentData, targetData, width],
  );

  const fmtDb = (v: number) => `${v >= 0 ? "+" : ""}${v.toFixed(1)} dB`;

  return (
    <div
      className="relative w-full cursor-crosshair"
      style={{ height }}
      onMouseMove={onMove}
      onMouseLeave={() => setHover(null)}
    >
      <svg
        viewBox={`0 0 ${width} ${height}`}
        width="100%"
        height={height}
        className="block"
        preserveAspectRatio="none"
      >
        <line
          x1={0}
          x2={width}
          y1={height / 2}
          y2={height / 2}
          stroke="rgba(255,255,255,0.08)"
          strokeDasharray="2 3"
        />
        {currentData && (
          <path
            d={currentData.pathD}
            fill="none"
            stroke={currentStroke}
            strokeWidth={1.5}
            vectorEffect="non-scaling-stroke"
            style={{ transition: PATH_D_TRANSITION }}
          />
        )}
        {targetData.fillD ? (
          <path
            d={targetData.fillD}
            fill={targetFill}
            stroke="none"
            style={{ transition: PATH_D_TRANSITION }}
          />
        ) : null}
        <path
          d={targetData.pathD}
          fill="none"
          stroke={targetStroke}
          strokeWidth={1.5}
          vectorEffect="non-scaling-stroke"
          style={{ transition: PATH_D_TRANSITION }}
        />
        {hover && (
          <line
            x1={hover.mx}
            x2={hover.mx}
            y1={0}
            y2={height}
            stroke="rgba(255,255,255,0.35)"
            strokeWidth={1}
            strokeDasharray="3 3"
            pointerEvents="none"
          />
        )}
      </svg>
      {hover && (
        <div
          className="pointer-events-none absolute z-10 min-w-[7.5rem] rounded-lg border border-white/10 bg-[rgba(14,14,16,0.95)] px-2 py-1.5 text-[10px] leading-snug text-white shadow-lg backdrop-blur-sm"
          style={{
            left: `${Math.min(98, Math.max(2, (hover.mx / width) * 100))}%`,
            top: 6,
            transform: "translateX(-50%)",
          }}
        >
          <div className="font-semibold text-[#00FFF6]">{fmtHoverFreqHz(hover.freq)} Hz</div>
          {hover.curDb !== null && (
            <div className="text-white/70">
              当前 <span className="font-mono text-white/90">{fmtDb(hover.curDb)}</span>
            </div>
          )}
          <div className="text-white/70">
            目标 <span className="font-mono text-[#00FFF6]">{fmtDb(hover.tgtDb)}</span>
          </div>
        </div>
      )}
    </div>
  );
}

function ComparePreview({
  currentPeq,
  targetPeq,
  width,
  height,
}: {
  currentPeq: OptimizePeqPayload | null;
  targetPeq: OptimizePeqPayload;
  width: number;
  height: number;
}) {
  const currentBands = useMemo(
    () => (currentPeq ? peqToBands(currentPeq) : []),
    [currentPeq],
  );
  const targetBands = useMemo(() => peqToBands(targetPeq), [targetPeq]);
  return (
    <div
      className="relative mt-3 rounded-[10px] overflow-hidden"
      style={{
        background: "rgba(10,10,12,0.6)",
        border: "1px solid rgba(255,255,255,0.05)",
      }}
    >
      <PeqOverlayCompareSvg
        currentBands={currentBands}
        targetBands={targetBands}
        width={width}
        height={height}
        currentStroke="rgba(255,255,255,0.35)"
      />
    </div>
  );
}

// ============================================================
// CompareDialog: 放大版的对比弹框
// ============================================================
function CompareDialog({
  aiText,
  msg,
  currentPeq,
  applying,
  onClose,
  onApplyToggle,
}: {
  aiText: AILocale;
  msg: OptimizeUIMessage;
  currentPeq: OptimizePeqPayload | null;
  applying: boolean;
  onClose: () => void;
  onApplyToggle: () => void;
}) {
  // 未应用 → 目标 = after_peq，图例右侧显示“应用后”
  // 已应用 → 目标 = before_peq，图例右侧显示“回滚后”
  const targetPeq = msg.applied ? msg.beforePeq : msg.afterPeq;
  const currentBands = useMemo(
    () => (currentPeq ? peqToBands(currentPeq) : []),
    [currentPeq],
  );
  const targetBands = useMemo(() => peqToBands(targetPeq), [targetPeq]);
  const currentLabel = aiText.compareDialog.legendCurrent;
  const targetLabel = msg.applied
    ? aiText.compareDialog.legendAfterRollback
    : aiText.compareDialog.legendAfterApply;
  const chartWidth = 340;
  const chartHeight = 160;

  return (
    <div
      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/75 px-4"
      onClick={onClose}
    >
      <div
        className="w-full max-w-[420px] rounded-[22px] overflow-hidden flex flex-col"
        style={{
          background: "rgba(18,18,20,0.98)",
          border: "1px solid rgba(255,255,255,0.08)",
          maxHeight: "85vh",
        }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center px-4 pt-4 pb-2">
          <div className="flex-1 min-w-0">
            <div className="text-[11px] text-[#00FFF6] font-medium tracking-wide">
              {aiText.compareDialog.title}
            </div>
            <div className="text-[15px] font-semibold text-white truncate mt-0.5">
              {msg.name}
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-7 h-7 rounded-full flex items-center justify-center text-white/60"
            style={{ background: "rgba(44,44,46,0.8)" }}
            aria-label={aiText.ariaClose}
          >
            <X size={14} />
          </button>
        </div>

        <div className="overflow-y-auto px-4 pb-4 flex-1">
          {/* 叠加曲线图 */}
          <div
            className="rounded-[14px] p-3 mt-1"
            style={{
              background: "rgba(10,10,12,0.7)",
              border: "1px solid rgba(255,255,255,0.06)",
            }}
          >
            <div className="flex items-center gap-3 mb-2 text-[11px]">
              <span className="inline-flex items-center gap-1.5 text-white/55">
                <span
                  className="block w-3 h-[2px] rounded"
                  style={{ background: "rgba(255,255,255,0.45)" }}
                />
                {currentLabel}
              </span>
              <span className="inline-flex items-center gap-1.5" style={{ color: "#00FFF6" }}>
                <span className="block w-3 h-[2px] rounded" style={{ background: "#00FFF6" }} />
                {targetLabel}
              </span>
            </div>
            <div className="relative" style={{ height: chartHeight }}>
              <PeqOverlayCompareSvg
                currentBands={currentBands}
                targetBands={targetBands}
                width={chartWidth}
                height={chartHeight}
                currentStroke="rgba(255,255,255,0.45)"
              />
            </div>
            {/* 频率轴标签 */}
            <div className="flex justify-between text-[10px] text-white/35 mt-1 px-0.5">
              <span>20</span>
              <span>100</span>
              <span>1K</span>
              <span>10K</span>
              <span>20K</span>
            </div>
          </div>

          {/* 参数对比表：当前设备 vs 应用/回滚后 */}
          <div className="mt-3 grid grid-cols-2 gap-2">
            <ParamCard
              aiText={aiText}
              label={currentLabel}
              peq={currentPeq}
              muted
            />
            <ParamCard
              aiText={aiText}
              label={targetLabel}
              peq={targetPeq}
              highlight
            />
          </div>
        </div>

        {/* Footer */}
        <div
          className="px-4 py-3 flex items-center gap-2"
          style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}
        >
          <button
            onClick={onClose}
            className="flex-1 h-10 rounded-[10px] text-[14px] text-white/70"
            style={{ background: "rgba(44,44,46,0.8)" }}
          >
            {aiText.compareDialog.close}
          </button>
          <button
            onClick={onApplyToggle}
            disabled={applying}
            className="flex-1 h-10 rounded-[10px] text-[14px] font-semibold flex items-center justify-center gap-1.5 active:scale-[0.98] disabled:opacity-50"
            style={
              msg.applied
                ? {
                    background: "rgba(239,68,68,0.14)",
                    border: "1px solid rgba(239,68,68,0.35)",
                    color: "#f87171",
                  }
                : {
                    background: "#00FFF6",
                    color: "#000",
                    boxShadow: "0 0 14px rgba(0,255,246,0.35)",
                  }
            }
          >
            {applying ? (
              <Loader2 size={14} className="animate-spin" />
            ) : msg.applied ? (
              <>
                <RotateCcw size={14} /> {aiText.compareDialog.rollback}
              </>
            ) : (
              <>
                <Check size={14} /> {aiText.compareDialog.apply}
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

function ParamCard({
  aiText,
  label,
  peq,
  muted,
  highlight,
}: {
  aiText: AILocale;
  label: string;
  peq: OptimizePeqPayload | null;
  muted?: boolean;
  highlight?: boolean;
}) {
  const filters = peq?.filters ?? [];
  const summary = formatText(aiText.compareDialog.paramSummary, {
    count: filters.length,
    preamp: (peq?.preamp ?? 0).toFixed(1),
  });
  return (
    <div
      className="rounded-[12px] p-2.5 text-[11px]"
      style={{
        background: highlight ? "rgba(0,255,246,0.06)" : "rgba(28,28,30,0.9)",
        border: highlight
          ? "1px solid rgba(0,255,246,0.25)"
          : "1px solid rgba(255,255,255,0.05)",
      }}
    >
      <div className={cn("font-medium mb-1", highlight ? "text-[#00FFF6]" : "text-white/50")}>
        {label}
      </div>
      <div className="text-white/70 mb-1.5">{summary}</div>
      <div className="space-y-0.5 max-h-28 overflow-y-auto pr-1">
        {filters.map((f, i) => {
          const freq = Number((f.fc ?? f.frequency) ?? 0);
          return (
            <div
              key={i}
              className={cn(
                "flex justify-between font-mono",
                muted ? "text-white/50" : "text-white/85",
              )}
            >
              <span>{freq >= 1000 ? `${(freq / 1000).toFixed(1)}K` : Math.round(freq)}Hz</span>
              <span>
                {f.gain > 0 ? "+" : ""}
                {Number(f.gain).toFixed(1)}dB
              </span>
              <span className="text-white/40">Q{Number(f.q).toFixed(1)}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}