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 Context,
  type Dataset,
  type FormulaColumn,
  type FormulaExpression,
  type SavedFormulaDefinition,
  type Metric,
  type Preferences,
  type Session,
} from "./types";

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

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,
  onClose,
  onApply,
}: {
  ds: Dataset;
  ctx: Context;
  ai: boolean;
  onClose: () => void;
  onApply: (reply: { context: Context; intent: { action: string } }) => void;
}) {
  const [question, setQuestion] = useState(""),
    [consent, setConsent] = useState(false),
    [useModel, setUseModel] = useState(false),
    [answer, setAnswer] = useState(""),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setError("");
    try {
      const r = await api<{
        answer: string;
        context: Context;
        intent: { action: string };
      }>(`/datasets/${ds.id}/assistant`, "POST", {
        question,
        context: ctx,
        use_model: useModel,
        consent,
      });
      setAnswer(r.answer);
      onApply(r);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <aside className="copilot">
      <header>
        <strong>财务分析助手</strong>
        <button className="icon" aria-label="关闭" onClick={onClose}>
          <X />
        </button>
      </header>
      <div className="context-tag">
        当前范围：{Object.values(ctx.filters).join(" / ") || "全部"} · {ds.name}
      </div>
      <div className="chat-messages" aria-live="polite">
        {answer && <p className="message">{answer}</p>}
        {error && (
          <p role="alert" className="error">
            {error}
          </p>
        )}
      </div>
      <form onSubmit={submit}>
        <label>
          描述要分析的问题
          <textarea
            required
            maxLength={2000}
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
          />
        </label>
        {ai && (
          <>
            <label className="check">
              <input
                type="checkbox"
                checked={useModel}
                onChange={(e) => setUseModel(e.target.checked)}
              />
              使用已配置的 AI 模型理解问题
            </label>
            {useModel && (
              <label className="check">
                <input
                  type="checkbox"
                  checked={consent}
                  onChange={(e) => setConsent(e.target.checked)}
                />
                同意发送问题和筛选上下文
              </label>
            )}
          </>
        )}
        <button
          className="primary"
          disabled={busy || !question.trim() || (useModel && !consent)}
        >
          {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>
  );
}