"use client";

/**
 * 策略说明卡片：一句话说明 + 计算公式 + 执行步骤 + 注意事项。
 *
 * 内容全部来自后端 describe_strategy（依 spec 真实推导）；本组件只负责呈现，
 * 并用 `RichText` 渲染后端使用的 **粗体** / `代码` 强调协议（否则星号会字面漏出）。
 * 接口不可用时**如实显示「说明暂不可用」并给出原因**，不伪造文案（AGENT §24）。
 */
import { RichText } from "@/components/RichText";
import { Card, Pill } from "@/components/ui";
import type { StrategyDoc } from "@/lib/types";

export function StrategyDocBody({ doc }: { doc: StrategyDoc }) {
  return (
    <div className="doc-block">
      <div className="doc-summary">
        <span aria-hidden>💡</span>
        <span><RichText text={doc.summary} /></span>
      </div>
      {doc.formula ? (
        <div className="doc-formula">
          <b style={{ fontSize: 13 }}>计算公式</b>
          <pre className="mono"><RichText text={doc.formula} /></pre>
        </div>
      ) : null}
      {doc.steps?.length ? (
        <div>
          <b style={{ fontSize: 13 }}>执行步骤</b>
          <ol className="doc-steps">
            {doc.steps.map((s, i) => (
              <li key={i}><RichText text={s} /></li>
            ))}
          </ol>
        </div>
      ) : null}
      {doc.warnings?.length ? (
        <div className="chips">
          {doc.warnings.map((w, i) => (
            <span className="chip" key={i} title={w}>
              <span className="tone-warn">注意</span> <RichText text={w} />
            </span>
          ))}
        </div>
      ) : null}
    </div>
  );
}

export function StrategyDocCard({
  doc,
  loading,
  error,
  title = "策略说明与计算公式",
  compact = false,
}: {
  doc: StrategyDoc | null;
  loading: boolean;
  error: string;
  title?: string;
  compact?: boolean;
}) {
  return (
    <Card
      icon="book"
      title={title}
      tools={
        loading ? (
          <Pill tone="accent" icon="spinner">
            生成中
          </Pill>
        ) : doc ? (
          <Pill tone="pos" icon="check">
            由后端依参数推导
          </Pill>
        ) : null
      }
    >
      {doc ? (
        <StrategyDocBody doc={doc} />
      ) : loading ? (
        <div className="hint">正在生成说明与公式…</div>
      ) : (
        <div className="hint">
          说明暂不可用{error ? `：${error}` : "（后端 /api/strategies/describe 未就绪）"}。
          策略仍可正常保存与运行；说明与公式由后端依 spec 推导，前端不自行拼造文案。
        </div>
      )}
      {!compact && doc && (
        <div className="hint" style={{ marginTop: 10 }}>
          <RichText text="本说明由后端 `describe_strategy` 从策略定义推导，与引擎实际执行的规则同源，" />
          因此不会出现「文档写一套、代码跑另一套」。
        </div>
      )}
    </Card>
  );
}