import { useEffect, useRef, useState } from "react";
import {
  ChevronLeft,
  ChevronRight,
  Download,
  Save,
  Trash2,
  X,
} from "lucide-react";
import { api } from "./api";
import {
  labels,
  roleLabels,
  type AIConfig,
  type AssistantDesign,
  type AssistantMessage,
  type AssistantMode,
  type AssistantReply,
  type Context,
  type Dataset,
  type FormulaColumn,
  type FormulaExpression,
  type SavedFormulaDefinition,
  type Metric,
  type Preferences,
  type Session,
} from "./types";

type User = NonNullable<Session["user"]>;

interface ChatMessage {
  role: "user" | "assistant";
  content: string;
  history?: string;
  source?: "model" | "rules";
  model?: string | null;
}

const navigationActions = new Set([
  "overview",
  "anomalies",
  "drill",
  "evidence",
]);

function scopeKeyOf(ds: Dataset, ctx: Context) {
  return [
    ds.id,
    ds.version,
    ctx.start,
    ctx.end,
    ctx.baseline_end || "",
    ctx.comparison,
    ctx.group,
    ctx.metric,
    JSON.stringify(Object.entries(ctx.filters || {}).sort()),
  ].join("|");
}

// 只提交已完成的 user→assistant 轮次，最多 5 轮，当前问题不进入 history。
function completedHistory(messages: ChatMessage[]): AssistantMessage[] {
  const history: AssistantMessage[] = [];
  for (let index = 0; index + 1 < messages.length; index += 2) {
    const user = messages[index];
    const assistant = messages[index + 1];
    if (user.role === "user" && assistant.role === "assistant")
      history.push(
        { role: "user", content: user.content },
        {
          role: "assistant",
          content: assistant.history || assistant.content,
        },
      );
  }
  return history.slice(-10);
}

function replyContent(reply: AssistantReply) {
  const answer = (reply.answer || "").trim();
  if (reply.kind !== "column_design") return answer || "本轮没有返回内容。";
  const questions = (reply.design?.questions || [])
    .map((question) => question.trim())
    .filter(Boolean);
  if (
    questions.length &&
    !questions.every((question) => answer.includes(question))
  )
    return [answer, questions.join("\n")].filter(Boolean).join("\n");
  return answer || "请补充列名、计算含义和适用范围。";
}

function describeExpression(expression: FormulaExpression): string {
  if ("metric" in expression) return labels[expression.metric];
  if ("number" in expression) return String(expression.number);
  const operators = { add: "+", subtract: "−", multiply: "×", divide: "÷" };
  return `(${describeExpression(expression.left)} ${operators[expression.operator]} ${describeExpression(expression.right)})`;
}

export function Modal({
  title,
  onClose,
  wide = false,
  children,
}: {
  title: string;
  onClose: () => void;
  wide?: boolean;
  children: React.ReactNode;
}) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => {
    const dialog = ref.current;
    if (!dialog) return;
    dialog.showModal();
    return () => dialog.close();
  }, []);
  return (
    <dialog ref={ref} className={wide ? "wide" : ""} aria-label={title}>
      <header>
        <h2>{title}</h2>
        <button className="icon" aria-label="关闭" onClick={onClose}>
          <X />
        </button>
      </header>
      {children}
    </dialog>
  );
}

export function ImportDialog({
  ds,
  onClose,
  onDone,
}: {
  ds: Dataset;
  onClose: () => void;
  onDone: () => void;
}) {
  const [mapping, setMapping] = useState(ds.mapping),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  async function submit() {
    setBusy(true);
    setError("");
    try {
      await api(`/datasets/${ds.id}/mapping`, "POST", mapping);
      onDone();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  function update(
    index: number,
    patch: Partial<(typeof mapping.columns)[number]>,
  ) {
    setMapping({
      ...mapping,
      columns: mapping.columns.map((c) =>
        c.index === index ? { ...c, ...patch } : c,
      ),
    });
  }
  return (
    <Modal title="确认导入字段" onClose={onClose} wide>
      <div className="dialog-body">
        <p>{ds.name} · 检查识别字段及财务口径后确认导入。</p>
        <label>
          工作表
          <select
            value={mapping.sheet}
            onChange={(e) => setMapping({ ...mapping, sheet: e.target.value })}
          >
            {ds.profile?.sheets.map((s) => (
              <option key={s.name}>{s.name}</option>
            ))}
          </select>
        </label>
        <label>
          ROI 口径
          <select
            value={mapping.roi_formula}
            onChange={(e) =>
              setMapping({ ...mapping, roi_formula: e.target.value })
            }
          >
            <option value="profit_over_cost">（收入 - 成本）/ 成本</option>
            <option value="gross_less_cost_over_cost">
              （毛利贡献 - 成本）/ 成本
            </option>
          </select>
        </label>
        <div className="table-scroll">
          <table>
            <thead>
              <tr>
                <th>源字段</th>
                <th>角色</th>
                <th>维度键</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              {mapping.columns.map((c) => (
                <tr key={c.index}>
                  <td>{c.name}</td>
                  <td>
                    <select
                      value={c.role}
                      onChange={(e) =>
                        update(c.index, { role: e.target.value })
                      }
                    >
                      {[
                        "period",
                        "year",
                        "month",
                        "revenue",
                        "cost",
                        "gross",
                        "quantity",
                        "list_amount",
                        "discount",
                        "customer",
                        "dimension",
                        "ignore",
                      ].map((r) => (
                        <option key={r} value={r}>
                          {roleLabels[r] || r}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td>
                    {c.role === "dimension" && (
                      <input
                        value={c.key}
                        onChange={(e) =>
                          update(c.index, { key: e.target.value })
                        }
                      />
                    )}
                  </td>
                  <td>
                    <input
                      value={c.description}
                      onChange={(e) =>
                        update(c.index, { description: e.target.value })
                      }
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
        <footer>
          <span>导入后该版本映射将锁定。</span>
          <button onClick={onClose}>取消</button>
          <button className="primary" disabled={busy} onClick={submit}>
            {busy ? "提交中…" : "确认并导入"}
          </button>
        </footer>
      </div>
    </Modal>
  );
}

export function SettingsDialog({
  ds,
  onClose,
  onSave,
}: {
  ds: Dataset;
  onClose: () => void;
  onSave: (value: Preferences, revision: number) => void;
}) {
  const [value, setValue] = useState(ds.preferences),
    [revision, setRevision] = useState(ds.revision || 0),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  useEffect(() => {
    api<{ value: Preferences; revision: number }>(`/datasets/${ds.id}/settings`)
      .then((r) => {
        setValue(r.value);
        setRevision(r.revision);
      })
      .catch((e) => setError(e.message));
  }, [ds.id]);
  async function save() {
    setBusy(true);
    setError("");
    try {
      const result = await api<{ value: Preferences; revision: number }>(
        `/datasets/${ds.id}/settings`,
        "PUT",
        { value, revision },
      );
      onSave(result.value, result.revision);
      onClose();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <Modal title="分析设置" onClose={onClose} wide>
      <div className="dialog-body">
        <label>
          默认比较
          <select
            value={value.comparison}
            onChange={(e) =>
              setValue({
                ...value,
                comparison: e.target.value as Preferences["comparison"],
              })
            }
          >
            <option value="yoy">同比</option>
            <option value="mom">环比</option>
          </select>
        </label>
        <label>
          默认指标
          <select
            value={value.metric}
            onChange={(e) =>
              setValue({ ...value, metric: e.target.value as Metric })
            }
          >
            {Object.entries(labels).map(([k, v]) => (
              <option key={k} value={k}>
                {v}
              </option>
            ))}
          </select>
        </label>
        <label>
          异常阈值
          <input
            type="number"
            min="0"
            max="10"
            step="0.01"
            value={value.threshold}
            onChange={(e) =>
              setValue({ ...value, threshold: Number(e.target.value) })
            }
          />
        </label>
        <label>
          最小影响额
          <input
            type="number"
            min="0"
            value={value.min_impact}
            onChange={(e) =>
              setValue({ ...value, min_impact: Number(e.target.value) })
            }
          />
        </label>
        <label>
          最小样本数
          <input
            type="number"
            min="1"
            value={value.min_samples}
            onChange={(e) =>
              setValue({ ...value, min_samples: Number(e.target.value) })
            }
          />
        </label>
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
        <footer>
          <button onClick={onClose}>取消</button>
          <button className="primary" disabled={busy} onClick={save}>
            {busy ? "保存中…" : "保存设置"}
          </button>
        </footer>
      </div>
    </Modal>
  );
}

export function EvidenceDialog({
  ds,
  ctx,
  user,
  onClose,
}: {
  ds: Dataset;
  ctx: Context;
  user: NonNullable<Session["user"]>;
  onClose: () => void;
}) {
  const pageSize = 50;
  const [result, setResult] = useState<{
      rows: Record<string, unknown>[];
      total: number;
      sheet: string;
    }>(),
    [side, setSide] = useState<"current" | "baseline">("current"),
    [page, setPage] = useState(0),
    [error, setError] = useState("");
  useEffect(() => {
    let active = true;
    setResult(undefined);
    setError("");
    api<{ rows: Record<string, unknown>[]; total: number; sheet: string }>(
      `/datasets/${ds.id}/evidence`,
      "POST",
      { ...ctx, side, offset: page * pageSize, limit: pageSize },
    )
      .then((value) => active && setResult(value))
      .catch((e) => active && setError(e.message));
    return () => {
      active = false;
    };
  }, [ds.id, ctx, side, page]);
  function selectSide(value: "current" | "baseline") {
    if (value === side && page === 0) return;
    setResult(undefined);
    setPage(0);
    setSide(value);
  }
  function selectPage(value: number) {
    setResult(undefined);
    setPage(value);
  }
  const first = result?.total ? page * pageSize + 1 : 0;
  const last = result ? Math.min((page + 1) * pageSize, result.total) : 0;
  return (
    <Modal title="证据明细" onClose={onClose} wide>
      <div className="dialog-body">
        <div className="segmented" role="group" aria-label="证据期间">
          <button
            className={side === "current" ? "active" : ""}
            aria-pressed={side === "current"}
            onClick={() => selectSide("current")}
          >
            本期
          </button>
          <button
            className={side === "baseline" ? "active" : ""}
            aria-pressed={side === "baseline"}
            onClick={() => selectSide("baseline")}
          >
            基期
          </button>
        </div>
        <p>
          来源工作表：{result?.sheet || "加载中"} · {result?.total ?? 0} 条
        </p>
        {user.role !== "admin" && <p>客户原始标识不包含在明细中。</p>}
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
        <div className="table-scroll">
          <table className="evidence-table">
            <thead>
              <tr>
                <th>来源行</th>
                <th>期间</th>
                {ds.dimensions.map((d) => (
                  <th key={d.key}>{d.name}</th>
                ))}
                <th>收入</th>
                <th>成本</th>
                <th>毛利</th>
              </tr>
            </thead>
            <tbody>
              {result?.rows.map((r, i) => (
                <tr key={i}>
                  <td>{String(r.source_row)}</td>
                  <td>{String(r.period)}</td>
                  {ds.dimensions.map((d) => (
                    <td key={d.key}>
                      {String(
                        (r.dimensions as Record<string, string>)[d.key] || "",
                      )}
                    </td>
                  ))}
                  <td>{String(r.revenue)}</td>
                  <td>{String(r.cost ?? "")}</td>
                  <td>{String(r.gross ?? "")}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <footer>
          <span>
            {result
              ? `第 ${first}-${last} 条，共 ${result.total} 条`
              : error
                ? "加载失败"
                : "加载中"}
          </span>
          <button
            className="icon"
            aria-label="上一页"
            title="上一页"
            disabled={!result || page === 0}
            onClick={() => selectPage(page - 1)}
          >
            <ChevronLeft />
          </button>
          <button
            className="icon"
            aria-label="下一页"
            title="下一页"
            disabled={!result || (page + 1) * pageSize >= result.total}
            onClick={() => selectPage(page + 1)}
          >
            <ChevronRight />
          </button>
          <button onClick={onClose}>关闭</button>
        </footer>
      </div>
    </Modal>
  );
}

export function AIConfigDialog({
  onClose,
  onSaved,
}: {
  onClose: () => void;
  onSaved: (config: AIConfig) => void;
}) {
  const [value, setValue] = useState<AIConfig>({
      enabled: false,
      provider: "local",
      base_url: "",
      model: "",
      api_key_set: false,
      updated_at: null,
    }),
    [savedConfig, setSavedConfig] = useState<AIConfig | null>(null),
    [key, setKey] = useState(""),
    [models, setModels] = useState<string[]>([]),
    [error, setError] = useState(""),
    [message, setMessage] = useState(""),
    [modelsError, setModelsError] = useState(""),
    [loading, setLoading] = useState(true),
    [busy, setBusy] = useState(false),
    [listing, setListing] = useState(false);
  const modelRequest = useRef(0);
  const connectionChanged = Boolean(
    savedConfig &&
    (value.provider !== savedConfig.provider ||
      value.base_url !== savedConfig.base_url ||
      key),
  );
  const availableModels = [
    ...new Set([savedConfig?.model || "", ...models]),
  ].filter(Boolean);
  const canListModels = Boolean(
    savedConfig?.updated_at &&
    (savedConfig.base_url || savedConfig.provider === "openai"),
  );
  useEffect(() => {
    let active = true;
    api<AIConfig>("/ai-config")
      .then((r) => {
        if (!active) return;
        setValue(r);
        setSavedConfig(r);
        if (r.updated_at && (r.base_url || r.provider === "openai"))
          void fetchModels();
      })
      .catch((e) => {
        if (active)
          setError(`加载配置失败：${(e as Error).message}，请关闭后重试。`);
      })
      .finally(() => {
        if (active) setLoading(false);
      });
    return () => {
      active = false;
      modelRequest.current++;
    };
  }, []);
  function updateValue(patch: Partial<AIConfig>) {
    setValue((v) => ({ ...v, ...patch }));
    setMessage("");
    setError("");
  }
  async function fetchModels() {
    const ticket = ++modelRequest.current;
    setListing(true);
    setModelsError("");
    try {
      const r = await api<{ items: string[] }>("/ai-models");
      if (ticket !== modelRequest.current) return;
      setModels(r.items);
    } catch (e) {
      if (ticket === modelRequest.current)
        setModelsError(
          `获取模型列表失败：${(e as Error).message}。已保存的配置不受影响，可重试或手动填写模型名。`,
        );
    } finally {
      if (ticket === modelRequest.current) setListing(false);
    }
  }
  async function save() {
    setBusy(true);
    setError("");
    setMessage("");
    try {
      const config = await api<AIConfig>("/ai-config", "PUT", {
        enabled: value.enabled,
        provider: value.provider,
        base_url: value.base_url,
        model: value.model,
        api_key: key,
      });
      setValue(config);
      setSavedConfig(config);
      setKey("");
      setMessage("配置已保存");
      onSaved(config);
      modelRequest.current++;
      setListing(false);
      setModelsError("");
      if (connectionChanged) setModels([]);
      if (config.base_url || config.provider === "openai") void fetchModels();
    } catch (e) {
      setError(`保存失败：${(e as Error).message}`);
    } finally {
      setBusy(false);
    }
  }
  return (
    <Modal title="AI 模型配置" onClose={onClose} wide>
      <div className="dialog-body">
        <p className="muted">
          配置财务分析助手使用的模型服务。数据库配置优先；未配置时回退到部署环境变量。
        </p>
        {loading && <p className="muted">正在加载已保存配置…</p>}
        <fieldset className="ai-config-fields" disabled={!savedConfig || busy}>
          <label className="check">
            <input
              type="checkbox"
              checked={value.enabled}
              onChange={(e) => updateValue({ enabled: e.target.checked })}
            />
            启用 AI 模型理解问题
          </label>
          <label>
            服务商
            <select
              value={value.provider}
              onChange={(e) =>
                updateValue({
                  provider: e.target.value as AIConfig["provider"],
                })
              }
            >
              <option value="openai">OpenAI</option>
              <option value="local">
                本地 OpenAI 兼容服务（Ollama / LM Studio / vLLM）
              </option>
            </select>
          </label>
          <label>
            Base URL
            <input
              value={value.base_url}
              placeholder={
                value.provider === "local"
                  ? "http://127.0.0.1:11434/v1"
                  : "https://api.openai.com/v1"
              }
              onChange={(e) => updateValue({ base_url: e.target.value })}
            />
          </label>
          <label>
            API Key
            <input
              type="password"
              value={key}
              placeholder={
                value.api_key_set
                  ? "已配置，留空保持不变"
                  : "本地服务通常可留空"
              }
              onChange={(e) => {
                setKey(e.target.value);
                setMessage("");
                setError("");
              }}
            />
          </label>
          <label>
            模型
            <input
              value={value.model}
              placeholder="模型名，如 qwen2.5:7b"
              onChange={(e) => updateValue({ model: e.target.value })}
            />
          </label>
        </fieldset>
        {savedConfig && (
          <>
            <section className="ai-config-summary" aria-label="已保存的配置">
              <h3>已保存的配置</h3>
              {savedConfig.updated_at ? (
                <>
                  <p>
                    {savedConfig.enabled
                      ? "当前使用的模型："
                      : "已保存的模型："}
                    <strong>{savedConfig.model || "尚未选择"}</strong>
                    <span className="tag">
                      {savedConfig.enabled ? "已启用" : "未启用"}
                    </span>
                  </p>
                  <p className="muted">
                    {savedConfig.provider === "openai"
                      ? "OpenAI"
                      : "OpenAI 兼容服务"}
                    {" · "}
                    {savedConfig.base_url ||
                      (savedConfig.provider === "openai"
                        ? "https://api.openai.com/v1"
                        : "未设置地址")}
                    {" · "}API Key{" "}
                    {savedConfig.api_key_set ? "已配置" : "未配置"}
                  </p>
                </>
              ) : (
                <p className="muted">
                  尚未保存配置。请先保存服务地址和 API Key，再选择模型并启用。
                </p>
              )}
            </section>
            <section className="ai-models" aria-label="可选模型">
              <div className="ai-models-heading">
                <h3>可选模型</h3>
                <button
                  type="button"
                  disabled={
                    listing || busy || connectionChanged || !canListModels
                  }
                  onClick={() => void fetchModels()}
                >
                  {listing ? "获取中…" : "获取可用模型"}
                </button>
              </div>
              <p className="muted">
                选择后点击“保存配置”生效；也可以在上方手动填写模型名。
              </p>
              {connectionChanged ? (
                <p className="muted">
                  服务配置已修改，请先保存后获取可选模型。
                </p>
              ) : (
                <>
                  {listing && <p className="muted">正在获取可用模型…</p>}
                  {modelsError && (
                    <p role="alert" className="error">
                      {modelsError}
                    </p>
                  )}
                  {!listing &&
                    !modelsError &&
                    !models.length &&
                    canListModels && (
                      <p className="muted">
                        该服务没有返回可用模型，可重试或手动填写模型名。
                      </p>
                    )}
                  {savedConfig.updated_at && !canListModels && (
                    <p className="muted">
                      填写并保存 Base URL 后可获取模型列表。
                    </p>
                  )}
                  <div className="ai-model-options">
                    {availableModels.map((model) => (
                      <label key={model} className="ai-model-option">
                        <input
                          type="radio"
                          name="ai-model"
                          aria-label={model}
                          value={model}
                          checked={value.model === model}
                          disabled={busy}
                          onChange={() => updateValue({ model })}
                        />
                        <span>{model}</span>
                        {savedConfig.model === model && (
                          <span className="tag">
                            {savedConfig.enabled ? "当前使用" : "已保存"}
                          </span>
                        )}
                        {value.model === model &&
                          value.model !== savedConfig.model && (
                            <span className="tag">待保存</span>
                          )}
                      </label>
                    ))}
                  </div>
                </>
              )}
              {value.model !== savedConfig.model && (
                <p>
                  待保存的模型：<strong>{value.model || "尚未选择"}</strong>
                </p>
              )}
            </section>
          </>
        )}
        <p className="muted">
          只向模型服务发送问题与维度/当前筛选，原始数据行不出服务器；密钥仅保存在后端，
          配置修改会记入操作审计。
        </p>
        <footer className="ai-config-footer">
          <div className="ai-config-feedback">
            {message && (
              <p role="status" className="ai-config-success">
                {message}
              </p>
            )}
            {error && (
              <p role="alert" className="error">
                {error}
              </p>
            )}
          </div>
          <button onClick={onClose}>关闭</button>
          <button
            className="primary"
            disabled={!savedConfig || busy}
            onClick={save}
          >
            {busy ? "保存中…" : "保存配置"}
          </button>
        </footer>
      </div>
    </Modal>
  );
}

export function Copilot({
  ds,
  ctx,
  ai,
  canDesign,
  onClose,
  onApply,
  onColumnsApplied,
}: {
  ds: Dataset;
  ctx: Context;
  ai: boolean;
  canDesign: boolean;
  onClose: () => void;
  onApply: (reply: AssistantReply) => void;
  onColumnsApplied: (columns: FormulaColumn[]) => void;
}) {
  const [question, setQuestion] = useState(""),
    [consent, setConsent] = useState(false),
    [useModel, setUseModel] = useState(false),
    [mode, setMode] = useState<AssistantMode>("auto"),
    [messages, setMessages] = useState<ChatMessage[]>([]),
    [inFlight, setInFlight] = useState<string>(""),
    [design, setDesign] = useState<AssistantDesign | null>(null),
    [notice, setNotice] = useState(""),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false),
    [saving, setSaving] = useState(false);
  const epoch = useRef(0);
  const savingRef = useRef(false);
  const scopeRef = useRef<string | null>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const currentScope = scopeKeyOf(ds, ctx);
  const completedTurns = messages.filter((item) => item.role === "user").length;
  const limitReached = completedTurns >= 6;
  const canSend =
    !busy &&
    !saving &&
    !!question.trim() &&
    !limitReached &&
    (!useModel || consent) &&
    (mode !== "column_design" || (useModel && consent));

  useEffect(() => {
    if (scopeRef.current === currentScope) return;
    const initial = scopeRef.current === null;
    scopeRef.current = currentScope;
    if (initial) return;
    // 数据/范围/映射版本变化：历史与待确认定义立即失效，迟到响应按 epoch 丢弃。
    epoch.current += 1;
    savingRef.current = false;
    setBusy(false);
    setSaving(false);
    setInFlight("");
    setMessages([]);
    setDesign(null);
    setMode("auto");
    setError("");
    setNotice("数据范围已变更，已开始新的对话。");
  }, [currentScope]);

  useEffect(() => {
    const list = listRef.current;
    if (list) list.scrollTop = list.scrollHeight;
  }, [messages, inFlight, design, notice, error]);

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    const text = question.trim();
    if (!canSend) return;
    const nextMode: AssistantMode = useModel ? mode : "auto";
    const history = completedHistory(messages);
    const ticket = ++epoch.current;
    setBusy(true);
    setError("");
    setNotice("");
    // 新消息立即让旧预览失效。
    setDesign(null);
    setInFlight(text);
    try {
      const reply = await api<AssistantReply>(
        `/datasets/${ds.id}/assistant`,
        "POST",
        {
          question: text,
          context: ctx,
          use_model: useModel,
          consent,
          history,
          mode: nextMode,
        },
      );
      if (ticket !== epoch.current) return;
      const assistantContent = replyContent(reply);
      // 完整列定义进入后续对话历史，便于“继续修改”沿用上一版口径。
      const historyContent =
        reply.kind === "column_design" && reply.design?.column
          ? `${assistantContent}\n列定义：${JSON.stringify(reply.design.column)}`
          : undefined;
      setMessages((items) => [
        ...items,
        { role: "user", content: text },
        {
          role: "assistant",
          content: assistantContent,
          history: historyContent,
          source: reply.source,
          model: reply.model,
        },
      ]);
      if (reply.kind === "column_design") {
        setMode("column_design");
        setDesign(reply.design || null);
        if (!reply.design)
          setNotice("列设计未返回可用预览，请补充描述后重试。");
      } else {
        setMode(nextMode === "column_design" ? "auto" : mode);
        setDesign(null);
      }
      setQuestion((current) => (current === text ? "" : current));
      if (
        navigationActions.has(reply.intent?.action) &&
        reply.context &&
        scopeKeyOf(ds, reply.context) !== currentScope
      ) {
        // 本轮由助手主动更新范围，保留刚生成的回答；页面变化由 App 应用。
        scopeRef.current = scopeKeyOf(ds, reply.context);
      }
      onApply(reply);
    } catch (e) {
      if (ticket === epoch.current) setError((e as Error).message);
    } finally {
      if (ticket === epoch.current) {
        setBusy(false);
        setInFlight("");
      }
    }
  }

  function newConversation() {
    epoch.current += 1;
    savingRef.current = false;
    setMessages([]);
    setDesign(null);
    setInFlight("");
    setMode("auto");
    setBusy(false);
    setSaving(false);
    setError("");
    setNotice("已开始新对话。");
  }

  function exitDesign() {
    setMode("auto");
    setDesign(null);
    setNotice("已退出列设计，可继续普通问答。");
    inputRef.current?.focus();
  }

  function continueEditing() {
    setDesign(null);
    setNotice("请补充或修改列定义后重新发送。");
    inputRef.current?.focus();
  }

  async function confirmDesign() {
    const column = design?.complete ? design.column : null;
    if (!column || !canDesign || savingRef.current || busy) return;
    const nameKey = column.name.trim().toLowerCase();
    const columns = ctx.custom_columns || [];
    const position = columns.findIndex(
      (item) => item.name.trim().toLowerCase() === nameKey,
    );
    if (position < 0 && columns.length >= 10) {
      setError("当前已有 10 个分析列，请先移除一列后再添加。");
      return;
    }
    const ticket = epoch.current;
    savingRef.current = true;
    setSaving(true);
    setError("");
    setNotice("");
    try {
      let definitions: SavedFormulaDefinition[];
      try {
        definitions = (
          await api<{ items: SavedFormulaDefinition[] }>(
            `/datasets/${ds.id}/formula-definitions`,
          )
        ).items;
      } catch (e) {
        if (ticket === epoch.current)
          setError(`无法读取已保存定义：${(e as Error).message}`);
        return;
      }
      if (ticket !== epoch.current) return;
      const duplicates = definitions.filter(
        (item) => item.definition.name.trim().toLowerCase() === nameKey,
      );
      const shared = duplicates.find((item) => !item.owned);
      if (shared) {
        if (ticket === epoch.current)
          setError(
            `已存在由 ${shared.owner} 共享的同名列「${shared.definition.name}」，请先更换列名。`,
          );
        return;
      }
      const owned = duplicates.find((item) => item.owned);
      const saved = await api<SavedFormulaDefinition>(
        `/datasets/${ds.id}/formula-definitions`,
        "POST",
        {
          definition: column,
          ...(owned ? { revision: owned.revision } : {}),
        },
      );
      if (ticket !== epoch.current) return;
      const latest = ctx.custom_columns || [];
      const index = latest.findIndex(
        (item) => item.name.trim().toLowerCase() === nameKey,
      );
      if (index < 0 && latest.length >= 10) {
        setError(
          `已保存定义「${saved.definition.name}」，但当前分析列已达 10 列，请先移除一列后再确认。`,
        );
        return;
      }
      const next =
        index >= 0
          ? latest.map((item, i) => (i === index ? saved.definition : item))
          : [...latest, saved.definition];
      onColumnsApplied(next);
      setDesign(null);
      setMode("auto");
      setNotice(`已添加分析列：${saved.definition.name}，分析结果已刷新。`);
    } catch (e) {
      if (ticket === epoch.current)
        setError(`保存定义失败：${(e as Error).message}`);
    } finally {
      if (ticket === epoch.current) {
        savingRef.current = false;
        setSaving(false);
      }
    }
  }

  return (
    <aside className="copilot" aria-label="财务分析助手">
      <header>
        <div className="copilot-title">
          <strong>财务分析助手</strong>
          <small>
            {mode === "column_design" ? "列设计模式" : "普通问答"} · 已完成{" "}
            {completedTurns}/6 轮
          </small>
        </div>
        <div className="copilot-actions">
          <button className="ghost" onClick={newConversation}>
            新对话
          </button>
          {mode === "column_design" && (
            <button className="ghost" disabled={saving} onClick={exitDesign}>
              退出列设计
            </button>
          )}
          <button className="icon" aria-label="关闭" onClick={onClose}>
            <X />
          </button>
        </div>
      </header>
      <div className="context-tag">
        当前范围：{Object.values(ctx.filters).join(" / ") || "全部"} · {ds.name}
      </div>
      <div className="chat-messages" aria-live="polite" ref={listRef}>
        {!messages.length && !inFlight && !design && (
          <p className="muted">
            可以询问当前范围的经营问题，或描述要新增的分析列。
          </p>
        )}
        {messages.map((message, index) => (
          <div
            key={index}
            className={message.role === "user" ? "message-user" : "message assistant"}
          >
            <strong>{message.role === "user" ? "我" : "助手"}</strong>
            <p className={message.role === "user" ? "question" : undefined}>
              {message.content}
            </p>
            {message.role === "assistant" && message.source && (
              <span className="message-source">
                来源：
                {message.source === "model"
                  ? `模型回答 · ${message.model || "未命名模型"}`
                  : "规则摘要"}
              </span>
            )}
          </div>
        ))}
        {inFlight && (
          <div className="message-user pending">
            <strong>我</strong>
            <p className="question">{inFlight}</p>
            <span className="message-source">发送中…</span>
          </div>
        )}
        {design && (
          <section className="design-preview" aria-label="列定义预览">
            {design.complete && design.column ? (
              <>
                <h3>{design.column.name}</h3>
                <p>{design.column.meaning}</p>
                <dl>
                  <dt>计算表达式</dt>
                  <dd>
                    {describeExpression(
                      design.column.expression as FormulaExpression,
                    )}
                  </dd>
                  <dt>适用范围</dt>
                  <dd>{design.column.scope}</dd>
                  <dt>缺失/零分母</dt>
                  <dd>{design.column.missing}</dd>
                </dl>
                <div className="design-actions">
                  {canDesign ? (
                    <button
                      className="primary"
                      disabled={saving || busy}
                      onClick={confirmDesign}
                    >
                      {saving ? "添加中…" : "确认并添加分析列"}
                    </button>
                  ) : (
                    <p className="muted">
                      当前账号无列设计权限，无法添加分析列。
                    </p>
                  )}
                  <button disabled={saving || busy} onClick={continueEditing}>
                    继续修改
                  </button>
                </div>
                {saving && (
                  <p role="status" className="muted">
                    正在保存定义并刷新分析结果…
                  </p>
                )}
              </>
            ) : (
              <>
                <h3>列设计待补充</h3>
                {design.questions.length ? (
                  <ul>
                    {design.questions.map((item, index) => (
                      <li key={index}>{item}</li>
                    ))}
                  </ul>
                ) : (
                  <p>请补充列名、计算含义和适用范围。</p>
                )}
                <button disabled={saving || busy} onClick={exitDesign}>
                  退出列设计
                </button>
              </>
            )}
          </section>
        )}
        {notice && (
          <p role="status" className="notice">
            {notice}
          </p>
        )}
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
      </div>
      <form onSubmit={submit}>
        <label>
          描述要分析的问题
          <textarea
            ref={inputRef}
            required
            maxLength={2000}
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
                event.preventDefault();
                event.currentTarget.form?.requestSubmit();
              }
            }}
          />
        </label>
        {ai && (
          <>
            <label className="check">
              <input
                type="checkbox"
                checked={useModel}
                disabled={busy || saving}
                onChange={(e) => {
                  setUseModel(e.target.checked);
                  if (!e.target.checked) {
                    setMode("auto");
                    setDesign(null);
                  }
                }}
              />
              使用已配置的 AI 模型理解问题
            </label>
            {useModel && (
              <label className="check">
                <input
                  type="checkbox"
                  checked={consent}
                  disabled={busy || saving}
                  onChange={(e) => setConsent(e.target.checked)}
                />
                同意将本次对话、当前筛选、指标定义和权限范围内的汇总分析结果发送到已配置的模型服务
              </label>
            )}
          </>
        )}
        {busy && (
          <p role="status" className="copilot-status">
            正在分析…
          </p>
        )}
        {limitReached && (
          <p role="status" className="notice">
            已达到 6 轮对话上限，请开始新对话。
          </p>
        )}
        {mode === "column_design" && !(useModel && consent) && (
          <p className="notice">列设计需要启用模型并同意发送。</p>
        )}
        <button className="primary" disabled={!canSend}>
          {busy ? "发送中…" : "发送"}
        </button>
      </form>
    </aside>
  );
}

export function AdminDialog({
  mode,
  onClose,
}: {
  mode: "users" | "audit";
  onClose: () => void;
}) {
  const [items, setItems] = useState<Record<string, unknown>[]>([]),
    [error, setError] = useState("");
  useEffect(() => {
    api<{ items: Record<string, unknown>[] }>(
      mode === "users" ? "/users" : "/audit",
    )
      .then((r) => setItems(r.items))
      .catch((e) => setError(e.message));
  }, [mode]);
  return (
    <Modal
      title={mode === "users" ? "账号与权限" : "操作审计"}
      onClose={onClose}
      wide
    >
      <div className="dialog-body">
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
        <div className="table-scroll">
          <table>
            <thead>
              <tr>
                {mode === "users" ? (
                  <>
                    <th>账号</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>科室</th>
                  </>
                ) : (
                  <>
                    <th>时间</th>
                    <th>用户</th>
                    <th>操作</th>
                    <th>资源</th>
                    <th>详情</th>
                  </>
                )}
              </tr>
            </thead>
            <tbody>
              {items.map((r, i) => (
                <tr key={String(r.id ?? i)}>
                  {mode === "users" ? (
                    <>
                      <td>{String(r.username)}</td>
                      <td>{String(r.role)}</td>
                      <td>{r.active ? "启用" : "停用"}</td>
                      <td>
                        {String(
                          ((r.departments || []) as string[]).join("、") ||
                            "全部",
                        )}
                      </td>
                    </>
                  ) : (
                    <>
                      <td>{String(r.created_at)}</td>
                      <td>{String(r.user__username)}</td>
                      <td>{String(r.action)}</td>
                      <td>{String(r.resource)}</td>
                      <td>{JSON.stringify(r.details)}</td>
                    </>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <footer>
          <button onClick={onClose}>关闭</button>
        </footer>
      </div>
    </Modal>
  );
}

export function FormulaExportDialog({
  ds,
  ctx,
  onClose,
}: {
  ds: Dataset;
  ctx: Context;
  onClose: () => void;
}) {
  const [messages, setMessages] = useState<
      { role: "user" | "assistant"; content: string }[]
    >([]),
    [draft, setDraft] = useState(""),
    [column, setColumn] = useState<FormulaColumn | null>(null),
    [questions, setQuestions] = useState<string[]>([]),
    [task, setTask] = useState<{
      id: string;
      status: string;
      error?: string;
    }>(),
    [definitions, setDefinitions] = useState<SavedFormulaDefinition[]>([]),
    [selectedDefinition, setSelectedDefinition] = useState(""),
    [shared, setShared] = useState(false),
    [loadedDefinition, setLoadedDefinition] = useState<FormulaColumn | null>(null),
    [consent, setConsent] = useState(false),
    [busy, setBusy] = useState(false),
    [error, setError] = useState("");
  const draftKey = `traceiq.formula-draft.${ds.id}`;
  const [draftRestored, setDraftRestored] = useState(false);
  useEffect(() => {
    try {
      const stored = sessionStorage.getItem(draftKey);
      if (stored) {
        const saved = JSON.parse(stored);
        setDraft(saved.draft || "");
        setMessages(saved.messages || []);
        setColumn(saved.column || null);
      }
    } catch {
      sessionStorage.removeItem(draftKey);
    }
    setDraftRestored(true);
  }, [draftKey]);
  useEffect(() => {
    if (draftRestored) sessionStorage.setItem(draftKey, JSON.stringify({ draft, messages, column }));
  }, [draftKey, draftRestored, draft, messages, column]);
  useEffect(() => {
    api<{ items: SavedFormulaDefinition[] }>(
      `/datasets/${ds.id}/formula-definitions`,
    )
      .then((result) => setDefinitions(result.items))
      .catch((e) => setError(e.message));
  }, [ds.id]);
  useEffect(() => {
    if (!task || !["queued", "processing"].includes(task.status)) return;
    const timer = window.setInterval(
      () =>
        api<{ status: string; error: string }>(
          `/datasets/${ds.id}/formula-exports/${task.id}`,
        )
          .then((r) => setTask((old) => old && { ...old, ...r }))
          .catch((e) => setError(e.message)),
      1500,
    );
    return () => window.clearInterval(timer);
  }, [ds.id, task]);
  const userTurns = messages.filter(
    (message) => message.role === "user",
  ).length;
  async function send() {
    const text = draft.trim();
    if (!text || !consent || userTurns >= 6) return;
    const content = loadedDefinition
      ? `已载入的原始定义：${JSON.stringify(loadedDefinition)}\n本次补充：${text}`
      : text;
    const next = [...messages, { role: "user" as const, content }];
    setBusy(true);
    setError("");
    setQuestions([]);
    setColumn(null);
    try {
      const result = await api<{
        complete: boolean;
        questions: string[];
        column: FormulaColumn | null;
      }>(`/datasets/${ds.id}/formula-design`, "POST", {
        context: ctx,
        messages: next,
        consent: true,
      });
      setMessages([
        ...next,
        {
          role: "assistant",
          content: result.complete
            ? `已整理列定义：${String(result.column?.name)}；含义：${String(result.column?.meaning)}；适用范围：${String(result.column?.scope)}；缺失处理：${String(result.column?.missing)}；表达式：${JSON.stringify(result.column?.expression)}`
            : result.questions.join("\n"),
        },
      ]);
      setQuestions(result.questions);
      setColumn(result.column);
      setLoadedDefinition(null);
      setDraft("");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function create() {
    if (!column && !ctx.custom_columns?.length) return;
    setBusy(true);
    setError("");
    try {
      setTask(
        await api<{ id: string; status: string }>(
          `/datasets/${ds.id}/formula-exports`,
          "POST",
          {
            ...ctx,
            custom_columns: column
              ? [...(ctx.custom_columns || []).filter((item) => item.name !== column.name), column]
              : ctx.custom_columns,
          },
        ),
      );
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function saveDefinition() {
    if (!column) return;
    setBusy(true);
    setError("");
    try {
      const saved = await api<SavedFormulaDefinition>(
        `/datasets/${ds.id}/formula-definitions`,
        "POST",
        {
          definition: column,
          shared,
          revision: definitions.find(
            (item) =>
              (item.id === selectedDefinition && item.owned) ||
              (item.owned &&
              String(item.definition.name).trim().toLowerCase() ===
                String(column.name).trim().toLowerCase()),
          )?.revision,
        },
      );
      setDefinitions((items) =>
        [...items.filter((item) => item.id !== saved.id), saved].sort((a, b) =>
          String(a.definition.name).localeCompare(
            String(b.definition.name),
            "zh-CN",
          ),
        ),
      );
      setSelectedDefinition(saved.id);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  function loadDefinition(id: string) {
    setSelectedDefinition(id);
    const saved = definitions.find((item) => item.id === id);
    if (!saved) {
      setLoadedDefinition(null);
      setColumn(null);
      return;
    }
    setColumn(saved.definition);
    setShared(saved.owned && saved.shared);
    setLoadedDefinition(saved.definition);
    setMessages([]);
    setQuestions([]);
    setDraft("");
  }
  async function deleteDefinition() {
    if (!selectedDefinition) return;
    setBusy(true);
    setError("");
    try {
      await api(
        `/datasets/${ds.id}/formula-definitions/${selectedDefinition}`,
        "DELETE",
      );
      setDefinitions((items) =>
        items.filter((item) => item.id !== selectedDefinition),
      );
      setSelectedDefinition("");
      setLoadedDefinition(null);
      setColumn(null);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function getFile() {
    try {
      const link = document.createElement("a");
      link.href = `/api/datasets/${ds.id}/formula-exports/${task!.id}/download`;
      link.download = "traceiq-formula-analysis.xlsx";
      link.click();
    } catch (e) {
      setError((e as Error).message);
    }
  }
  return (
    <Modal title="生成公式工作簿" onClose={onClose} wide>
      <div className="dialog-body">
        <p>描述新列含义、计算方式、适用范围，以及缺失值或零分母处理方式。</p>
        {!column && !task && !!ctx.custom_columns?.length && (
          <button disabled={busy} onClick={create}>
            按网页已选 {ctx.custom_columns.length} 列生成工作簿
          </button>
        )}
        {definitions.length > 0 && !task && (
          <div className="form-row">
            <label>
              已保存定义
              <select
                value={selectedDefinition}
                onChange={(event) => loadDefinition(event.target.value)}
                disabled={busy}
              >
                <option value="">选择定义</option>
                {definitions.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.definition.name}{item.owned ? "" : `（${item.owner}共享）`}
                  </option>
                ))}
              </select>
            </label>
            <button
              className="icon"
              aria-label="删除所选定义"
              title="删除所选定义"
              disabled={busy || !definitions.find((item) => item.id === selectedDefinition)?.owned}
              onClick={deleteDefinition}
            >
              <Trash2 />
            </button>
          </div>
        )}
        {definitions.find((item) => item.id === selectedDefinition)?.history.length ? (
          <details>
            <summary>版本历史（最近 20 次，可载入后另存）</summary>
            {definitions.find((item) => item.id === selectedDefinition)!.history.map((version) => (
              <button key={version.revision} disabled={busy} onClick={() => {
                setColumn(version.definition);
                setLoadedDefinition(version.definition);
                setMessages([]);
              }}>
                载入版本 {version.revision} · {version.definition.meaning}
              </button>
            ))}
          </details>
        ) : null}
        <label className="check">
          <input
            type="checkbox"
            checked={consent}
            onChange={(e) => setConsent(e.target.checked)}
          />
          同意将描述、指标定义和当前筛选范围发送至已配置的外部 AI 服务
        </label>
        <div className="chat-messages" aria-live="polite">
          {messages.map((m, i) => (
            <p key={i}>
              <strong>{m.role === "user" ? "我" : "助手"}：</strong>
              {m.content}
            </p>
          ))}
        </div>
        <p className="muted">本轮描述 {userTurns}/6</p>
        {!task && (
          <>
            <textarea
              aria-label="列计算描述"
              value={draft}
              onChange={(e) => {
                setDraft(e.target.value);
              }}
              disabled={busy}
              rows={3}
              maxLength={1000}
            />
            <button disabled={busy || !consent || !draft.trim()} onClick={send}>
              {busy ? "处理中…" : userTurns >= 6 ? "已达对话上限" : "发送描述"}
            </button>
            {column && (
              <section>
                <h3>{String(column.name)}</h3>
                <p>{String(column.meaning)}</p>
                <p>
                  计算表达式：
                  {describeExpression(column.expression as FormulaExpression)}
                </p>
                <p>适用范围：{String(column.scope)}</p>
                <p>缺失/零分母：{String(column.missing)}</p>
                <label className="check">
                  <input type="checkbox" checked={shared} onChange={(event) => setShared(event.target.checked)} />
                  保存时共享给当前数据集的其他全范围分析账号
                </label>
                <button
                  disabled={busy || Boolean(draft.trim())}
                  onClick={saveDefinition}
                >
                  <Save />
                  保存到定义库
                </button>
                <button
                  disabled={busy || Boolean(draft.trim())}
                  onClick={create}
                >
                  {draft.trim() ? "先发送补充内容" : "确认并生成公式工作簿"}
                </button>
              </section>
            )}
            {questions.length > 0 && (
              <p className="notice">补充信息后再生成公式。</p>
            )}
          </>
        )}
        {task && (
          <p role="status">
            {task.status === "queued"
              ? "排队中"
              : task.status === "processing"
                ? "正在生成"
                : task.status === "succeeded"
                  ? "生成完成"
                  : `生成失败：${task.error || "请重试"}（任务编号：${task.id}）`}
          </p>
        )}
        {task?.status === "succeeded" && (
          <button onClick={getFile}>
            <Download />
            下载公式工作簿
          </button>
        )}
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
      </div>
    </Modal>
  );
}

export function FormulaColumnsDialog({
  definitions,
  selected,
  onApply,
  onClose,
}: {
  definitions: SavedFormulaDefinition[];
  selected: FormulaColumn[];
  onApply: (columns: FormulaColumn[]) => void;
  onClose: () => void;
}) {
  const selectedNames = new Set(selected.map((column) => column.name));
  const [checked, setChecked] = useState(
    () => new Set(definitions.filter((item) => selectedNames.has(item.definition.name)).map((item) => item.id)),
  );
  function toggle(id: string) {
    setChecked((current) => {
      const next = new Set(current);
      if (next.has(id)) next.delete(id);
      else if (next.size < 10) next.add(id);
      return next;
    });
  }
  return (
    <Modal title="选择网页自定义列" onClose={onClose}>
      <div className="dialog-body">
        <p>已保存定义会由服务端统一计算并显示在分析表格中，最多选择 10 列。</p>
        {!definitions.length && <p className="muted">暂无已保存定义，请先在公式工作簿中保存。</p>}
        {definitions.map((item) => (
          <label className="check" key={item.id}>
            <input
              type="checkbox"
              checked={checked.has(item.id)}
              onChange={() => toggle(item.id)}
            />
            {item.definition.name}：{item.definition.meaning}{item.owned ? "" : `（${item.owner}共享）`}
          </label>
        ))}
        <footer>
          <button onClick={onClose}>取消</button>
          <button
            className="primary"
            onClick={() => onApply(definitions.filter((item) => checked.has(item.id)).map((item) => item.definition))}
          >
            应用
          </button>
        </footer>
      </div>
    </Modal>
  );
}