"use client";

/**
 * 选股策略库（/strategies）—— 只管理「选股条件组合」。
 *
 * 2026-09 重构后这里**不再有回测参数**（资金/持仓/调仓/费率/区间都移到回测组合与公共配置）。
 * 每个策略只回答「怎么选」：股票池 + 因子 + 过滤条件。要验证它，去 /backtest 把它
 * （可与其他策略一起）放进一个回测组合再跑。
 */
import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { apiDelete, apiGet, apiPost, apiPut } from "@/lib/api";
import type { ConditionField, FactorMeta, ResearchCondition, SelectionStrategy } from "@/lib/types";
import { displayUnitOf, fromBase, unitScale } from "@/lib/units";
import {
  Btn,
  Banner,
  Card,
  Empty,
  Loading,
  PageHeader,
  Pill,
} from "@/components/ui";
import {
  SelectionStrategyForm,
  emptySelectionParams,
  paramsFromSelectionStrategy,
  selectionStrategyFromParams,
  validateSelectionParams,
  type SelectionStrategyParams,
} from "@/components/SelectionStrategyForm";
import { StrategyDocBody, StrategyDocCard } from "@/components/StrategyDocCard";
import { useStrategyDocById } from "@/lib/strategy";

export default function StrategiesPage() {
  const [list, setList] = useState<SelectionStrategy[] | null>(null);
  const [factors, setFactors] = useState<FactorMeta[]>([]);
  const [conditionFields, setConditionFields] = useState<ConditionField[]>([]);
  /**
   * 条件下拉用的字段表 = 字段库 + 因子目录里「字段库还没收录」的因子。
   *
   * 为什么：参数化因子（`momentum(window=90,direction=…)`）是引擎真认的过滤字段
   * （`momentum_60 > 0` 一直合法），但它们不在字段库的注册表投影里。这里按名字去重地
   * 并进来 —— 内置因子本来就在字段库的「因子」分组里，不会重复出现。
   * 依赖列之类仍由字段库提供；因子条目的单位恒为空（因子是没有单位的无量纲量）。
   */
  const filterFields = useMemo<ConditionField[]>(() => {
    const known = new Set(conditionFields.map((f) => f.name));
    const factorFields: ConditionField[] = factors
      .filter((f) => !known.has(f.name) && f.enabled !== false && f.resolvable !== false)
      .map((f) => ({
        name: f.name,
        label: f.label || f.name,
        description: `${f.description}${f.brief ? ` 用法：${f.brief}` : ""}`,
        kind: "num",
        group_name: "因子",
        unit: "",
        source: f.source === "custom" ? "custom" : "builtin",
        enabled: true,
        sort_order: 900,
        ops: ["gt", "gte", "lt", "lte", "eq", "ne"],
      }));
    return [...conditionFields, ...factorFields];
  }, [conditionFields, factors]);
  /** 字段名 → 字段库条目：卡片回显条件时据此取中文名与界面单位。 */
  const fieldByName = useMemo(
    () => new Map(filterFields.map((f) => [f.name, f])),
    [filterFields],
  );
  /** 因子名 → 目录条目：卡片/Pill 显示中文名（含参数），而不是又长又生的引擎键。 */
  const factorByKey = useMemo(() => new Map(factors.map((f) => [f.name, f])), [factors]);
  const [query, setQuery] = useState("");
  const [err, setErr] = useState("");
  const [msg, setMsg] = useState("");
  const [editing, setEditing] = useState<SelectionStrategyParams | null>(null);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [revealErrors, setRevealErrors] = useState(false);
  const [busy, setBusy] = useState(false);
  const [docId, setDocId] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      const rows = await apiGet<SelectionStrategy[]>("/strategies");
      setList(rows);
      setErr("");
    } catch (e) {
      setErr((e as Error).message);
      setList([]);
    }
  }, []);

  useEffect(() => {
    void load();
    let alive = true;
    apiGet<FactorMeta[]>("/factors")
      .then((f) => alive && setFactors(f))
      .catch(() => alive && setFactors([]));
    // 字段库只取启用项：停用的字段不该出现在条件下拉里（管理在 /fields）
    apiGet<ConditionField[]>("/condition-fields?include_disabled=false")
      .then((f) => alive && setConditionFields(f))
      .catch(() => alive && setConditionFields([]));
    return () => {
      alive = false;
    };
  }, [load]);

  const filtered = useMemo(() => {
    if (!list) return null;
    const q = query.trim().toLowerCase();
    if (!q) return list;
    return list.filter((s) => {
      const hay = [
        s.name,
        s.description,
        (s.factors ?? []).map((f) => f.name).join(" "),
        (s.conditions ?? []).map((c) => c.field).join(" "),
      ]
        .join(" ")
        .toLowerCase();
      return hay.includes(q);
    });
  }, [list, query]);

  function startCreate() {
    setEditingId(null);
    setEditing(emptySelectionParams());
    setDocId(null);
    setMsg("");
    setErr("");
    setRevealErrors(false);
  }

  function startEdit(s: SelectionStrategy) {
    setEditingId(s.id ?? null);
    setEditing(paramsFromSelectionStrategy(s));
    setDocId(s.id ?? null);
    setMsg("");
    setErr("");
    setRevealErrors(false);
  }

  async function save() {
    if (!editing) return;
    const errors = validateSelectionParams(editing);
    if (Object.keys(errors).length) {
      setErr(Object.values(errors)[0]);
      setRevealErrors(true);
      return;
    }
    setBusy(true);
    setErr("");
    try {
      const body = selectionStrategyFromParams(editing, editingId ?? undefined);
      if (editingId) {
        await apiPut<SelectionStrategy>(`/strategies/${encodeURIComponent(editingId)}`, body);
        setMsg(`已更新选股策略「${body.name}」`);
      } else {
        const saved = await apiPost<SelectionStrategy>("/strategies", body);
        setMsg(`已保存选股策略「${saved.name}」（${saved.id}）`);
      }
      setEditing(null);
      setEditingId(null);
      setDocId(null);
      await load();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  async function remove(s: SelectionStrategy) {
    if (!s.id) return;
    if (!window.confirm(`删除选股策略「${s.name}」？引用它的回测组合将无法运行。`)) return;
    setBusy(true);
    try {
      await apiDelete(`/strategies/${encodeURIComponent(s.id)}`);
      setMsg(`已删除选股策略「${s.name}」`);
      await load();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <PageHeader
        title="选股策略库"
        sub="每个策略只定义「怎么选」（股票池 + 因子 + 过滤条件）。要验证收益，去「回测组合」把它和一个或多个策略组合起来、填上回测参数再跑。"
        actions={
          <div className="row" style={{ gap: 8 }}>
            <Link href="/backtest" className="btn">
              <span>去建回测组合</span>
            </Link>
            <Btn variant="primary" icon="plus" onClick={startCreate} disabled={busy}>
              新建选股策略
            </Btn>
          </div>
        }
      />

      {err ? <Banner tone="error">{err}</Banner> : null}
      {msg ? <Banner tone="info">{msg}</Banner> : null}

      {editing ? (
        <Card
          icon={editingId ? "edit" : "plus"}
          title={editingId ? `编辑选股策略 · ${editingId}` : "新建选股策略"}
          tools={
            <div className="row" style={{ gap: 8 }}>
              <Btn onClick={() => { setEditing(null); setEditingId(null); setDocId(null); }} disabled={busy}>
                取消
              </Btn>
              <Btn variant="primary" icon="check" loading={busy} onClick={save} disabled={busy}>
                {editingId ? "保存修改" : "保存到策略库"}
              </Btn>
            </div>
          }
        >
          <SelectionStrategyForm
            value={editing}
            onChange={setEditing}
            factorOptions={factors}
            conditionFields={filterFields}
            disabled={busy}
            errors={validateSelectionParams(editing)}
            revealErrors={revealErrors}
          />
          <div className="hint" style={{ marginTop: 12 }}>
            这里<b>不填</b>资金 / 持仓数 / 持仓时间 / 调仓时机 / 费率 / 复权 / 回测区间 ——
            那些是回测时才定的，在「回测组合」里填；费率与复权在「公共配置」里设。
          </div>
        </Card>
      ) : null}

      {editing ? <EditingDoc id={editingId} /> : null}
      {docId && !editing ? <SavedDoc id={docId} onClose={() => setDocId(null)} /> : null}

      <Card
        icon="archive"
        title={`选股策略${list ? ` · ${list.length}` : ""}`}
        tools={
          <input
            className="input input--search"
            placeholder="搜索策略名 / 说明 / 因子 / 条件"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            aria-label="搜索选股策略"
          />
        }
      >
        {filtered === null ? (
          <Loading label="读取选股策略库…" />
        ) : filtered.length === 0 ? (
          <Empty
            icon="archive"
            title={list && list.length ? "没有匹配的选股策略" : "选股策略库还是空的"}
            hint={
              list && list.length
                ? "换个关键词试试。"
                : "点右上角「新建选股策略」保存第一个；定义好「怎么选」后，去回测组合里验证收益。"
            }
          />
        ) : (
          <div className="strategy-grid">
            {filtered.map((s) => (
              <StrategyCard
                key={s.id ?? s.name}
                s={s}
                busy={busy}
                fieldByName={fieldByName}
                factorByKey={factorByKey}
                onEdit={() => startEdit(s)}
                onDelete={() => remove(s)}
                onDoc={() => setDocId(s.id ?? null)}
              />
            ))}
          </div>
        )}
      </Card>
    </>
  );
}

/* ------------------------------------------------------------------ */

function EditingDoc({ id }: { id: string | null }) {
  // 编辑未保存时无法预览后端说明（需要 id）；保存后才能看
  const state = useStrategyDocById(id);
  if (!id) {
    return (
      <Card icon="book" title="策略说明与计算公式">
        <div className="hint">保存后即可在此预览后端按选股条件推导的说明与公式。</div>
      </Card>
    );
  }
  return (
    <StrategyDocCard
      doc={state.doc}
      loading={state.loading}
      error={state.error}
      title="策略说明与计算公式（后端按选股条件推导）"
    />
  );
}

function SavedDoc({ id, onClose }: { id: string; onClose: () => void }) {
  const state = useStrategyDocById(id);
  return (
    <Card
      icon="book"
      title={`策略说明 · ${id}`}
      tools={<Btn size="sm" onClick={onClose}>收起</Btn>}
    >
      {state.doc ? (
        <StrategyDocBody doc={state.doc} />
      ) : (
        <div className="hint">
          {state.loading
            ? "正在生成说明与公式…"
            : `说明暂不可用${state.error ? `：${state.error}` : "（后端 /api/strategies/{id}/describe 未就绪）"}。`}
        </div>
      )}
    </Card>
  );
}

function StrategyCard({
  s,
  busy,
  fieldByName,
  factorByKey,
  onEdit,
  onDelete,
  onDoc,
}: {
  s: SelectionStrategy;
  busy: boolean;
  fieldByName: Map<string, ConditionField>;
  factorByKey: Map<string, FactorMeta>;
  onEdit: () => void;
  onDelete: () => void;
  onDoc: () => void;
}) {
  const u = s.universe ?? {};
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div className="between">
        <div style={{ minWidth: 0 }}>
          <div className="card__title" style={{ marginBottom: 2 }}>{s.name}</div>
          <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
            <span className="mono hint">{s.id}</span>
            {s.created_at ? <span className="hint">创建 {String(s.created_at).slice(0, 10)}</span> : null}
          </div>
        </div>
        <Pill tone="violet" icon="target">
          {s.factors?.map((f) => factorLabel(factorByKey.get(f.name), f.name)).join(" + ") || "—"}
        </Pill>
      </div>

      <div className="strategy-desc">{s.description || "（无说明：建议补一句话，便于日后识别）"}</div>

      <div className="chips">
        <span className="chip">
          股票池 <b>{u.index_code ? `${u.index_code} 成分` : "全市场"}</b>
          {u.exclude_st ? " · 剔 ST" : ""}
          {u.min_listing_days ? ` · ≥${u.min_listing_days}天` : ""}
        </span>
        {(s.conditions ?? []).length ? (
          <span className="chip">
            条件{" "}
            <b>
              {(s.conditions ?? [])
                .map((c) => `${fieldByName.get(c.field)?.label ?? c.field} ${opLabel(c.op)} ${condValueText(c, fieldByName.get(c.field))}`)
                .join(" 且 ")}
            </b>
          </span>
        ) : (
          <span className="chip">无过滤条件</span>
        )}
      </div>

      <div className="strategy-actions">
        <Link href={`/backtest?strategy=${encodeURIComponent(s.id ?? "")}`} className="btn btn--sm">
          <span>加入回测组合</span>
        </Link>
        <Btn size="sm" icon="book" onClick={onDoc} disabled={busy}>
          看说明/公式
        </Btn>
        <Btn size="sm" icon="edit" onClick={onEdit} disabled={busy}>
          编辑
        </Btn>
        <Btn size="sm" variant="danger" icon="trash" onClick={onDelete} disabled={busy}>
          删除
        </Btn>
      </div>
    </div>
  );
}

/**
 * 卡片上的因子名：优先中文名（含参数，如「动量（窗口 90，越高越好）」）。
 *
 * 参数化因子的引擎键很长（`momentum(window=90,direction=higher_is_better)`），
 * 卡片上直接显示会把布局撑坏；找不到目录条目时退回键名 —— 预览不到就照实显示，
 * 不猜、不截断成看起来像另一个因子。
 */
function factorLabel(meta: FactorMeta | undefined, name: string): string {
  return meta?.label || name;
}

function opLabel(op: string): string {
  return (
    { gt: ">", gte: "≥", lt: "<", lte: "≤", eq: "=", ne: "≠", in: "属于", not_in: "不属于" }[op] ?? op
  );
}

/** 条件取值的人类可读文本：存的是**基准单位**，这里按字段库的界面单位回显。
 *
 * 卡片上必须带单位（如「≥ 5 亿元」）：引擎按基准单位比较，用户看到的若是裸数字，
 * 就会把「5 亿元」读成「5 万元」—— 这正是「单位可选」要避免的误读。
 */
function condValueText(c: ResearchCondition, meta?: ConditionField): string {
  if (c.ref) return `字段 ${c.ref}`;
  const scale = unitScale(meta);
  const unit = displayUnitOf(meta) || (meta?.base_unit ?? meta?.unit ?? "");
  const show = (x: unknown) => {
    const n = Number(x);
    return Number.isNaN(n) ? String(x ?? "") : String(fromBase(n, scale));
  };
  const body = Array.isArray(c.value) ? c.value.map(show).join("、") : show(c.value);
  return unit ? `${body} ${unit}` : body;
}