import type { CompoundExample, Robustness, TermRow } from "../types";

const W = 660;
const H = 266;
// Left and bottom carry a tick column plus an axis title.
const PAD = { l: 64, r: 16, t: 16, b: 58 };
const AXIS = "rgba(9,15,21,.55)";

/** Recall against description coverage. CLAP is flat; it never read the text. */
function RecallChart({
  points,
  clap,
  chance,
}: {
  points: { setting: number; names: boolean; recall: number }[];
  clap: number;
  chance: number;
}) {
  const max = Math.max(clap, ...points.map((p) => p.recall)) * 1.3;
  const x = (i: number) => PAD.l + (i * (W - PAD.l - PAD.r)) / (points.length - 1);
  const y = (v: number) => H - PAD.b - (v / max) * (H - PAD.t - PAD.b);
  const bm = points.map((p, i) => `${i ? "L" : "M"}${x(i)},${y(p.recall)}`).join(" ");

  return (
    <figure style={{ margin: "18px 0 0" }}>
      <svg viewBox={`0 0 ${W} ${H}`} className="scatter" role="img"
           aria-label="recall against description coverage">
        {[0, 0.25, 0.5, 0.75, 1].map((f) => (
          <g key={f}>
            <line x1={PAD.l} x2={W - PAD.r} y1={y(max * f)} y2={y(max * f)}
                  stroke="#ebe8e4" strokeWidth={1} />
            <text x={PAD.l - 8} y={y(max * f) + 3} textAnchor="end" fontSize="10"
                  fontFamily="Geist Mono, monospace" fill="rgba(9,15,21,.35)">
              {(max * f).toFixed(2)}
            </text>
          </g>
        ))}
        <line x1={PAD.l} x2={W - PAD.r} y1={y(chance)} y2={y(chance)}
              stroke="rgba(9,15,21,.3)" strokeWidth={1} strokeDasharray="4 4" />
        <text x={W - PAD.r} y={y(chance) - 5} textAnchor="end" fontSize="10"
              fontFamily="Inter, sans-serif" fill="rgba(9,15,21,.4)">chance</text>
        <path d={`M${x(0)},${y(clap)} L${x(points.length - 1)},${y(clap)}`}
              stroke="#090f15" strokeWidth={2.5} fill="none" />
        <path d={bm} stroke="#fa675b" strokeWidth={2.5} fill="none" />
        {points.map((p, i) => (
          <circle key={i} cx={x(i)} cy={y(p.recall)} r={4} fill="#fa675b" />
        ))}
        <circle cx={x(0)} cy={y(clap)} r={4} fill="#090f15" />
        <circle cx={x(points.length - 1)} cy={y(clap)} r={4} fill="#090f15" />
        {points.map((p, i) => (
          <text key={`${p.setting}-${p.names}`} x={x(i)} y={H - PAD.b + 20}
                textAnchor="middle" fontSize="11" fontFamily="Inter, sans-serif"
                fill="rgba(9,15,21,.5)">
            {Math.round(p.setting * 100)}%{p.names ? "" : " ✂"}
          </text>
        ))}
        <text x={(PAD.l + W - PAD.r) / 2} y={H - 8} textAnchor="middle" fontSize="11"
              fontFamily="Inter, sans-serif" fill={AXIS}>
          description metadata remaining
        </text>
        <text transform={`translate(14 ${(PAD.t + H - PAD.b) / 2}) rotate(-90)`}
              textAnchor="middle" fontSize="11" fontFamily="Inter, sans-serif"
              fill={AXIS}>
          recall — share of the 205 matches found
        </text>
      </svg>
      <figcaption className="legend" style={{ marginTop: 10 }}>
        <span style={{ width: "100%", color: "var(--ink-50)" }}>
          ✂ marks the stages where names are deleted too, not just descriptions
        </span>
        <span>
          <i className="swatch" style={{ background: "#090f15" }} />
          CLAP
        </span>
        <span>
          <i className="swatch" style={{ background: "#fa675b" }} />
          BM25
        </span>
      </figcaption>
    </figure>
  );
}

/** P@10 per query term, against the prevalence of the label it asks for. */
function Terms({ rows }: { rows: TermRow[] }) {
  return (
    <div className="tablewrap">
      <table>
        <thead>
          <tr>
            <th>query term</th>
            <th>ground-truth</th>
            <th>CLAP</th>
            <th>BM25</th>
            <th>prevalence</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const joint = r.truth === "conjunction";
            return (
              <tr key={r.term}
                  style={{ opacity: r.truth ? 1 : 0.5,
                           fontWeight: joint ? 600 : undefined,
                           borderTop: joint ? "1px solid var(--line)" : undefined }}>
                <td>{r.term}</td>
                <td className={r.truth ? "mono" : undefined}>
                  {r.truth ?? "no label"}
                </td>
                <td className="num">
                  {r.clap === undefined ? "—" : r.clap.toFixed(2)}
                </td>
                <td className="num">
                  {r.bm25 === undefined ? "—" : r.bm25.toFixed(2)}
                </td>
                <td className="num">
                  {r.prevalence === undefined ? "—" : r.prevalence.toFixed(3)}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function Examples({ rows }: { rows: CompoundExample[] }) {
  return (
    <div className="tablewrap">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>voice</th>
            <th>gender</th>
            <th>age</th>
            <th>use case</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((e) => (
            <tr key={e.name} style={{ opacity: e.match ? 1 : 0.55 }}>
              <td className={`lift ${e.match ? "up" : "down"}`}>{e.match ? "✓" : "✗"}</td>
              <td>{e.name}</td>
              <td>{e.gender}</td>
              <td>{(e.age ?? "").replace(/_/g, " ")}</td>
              <td>{(e.use_case ?? "").replace(/_/g, " ")}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function CompoundCard({ data }: { data: Robustness["compound"] }) {
  if (!data) return null;

  return (
    <div className="card">
      <h2>Comparison with BM25 under metadata ablation</h2>
      <p className="sub">
        Vector search (CLAP) is compared against text-based BM25 search. Query: “{data.query}”.
        BM25 degrades as descriptions are deleted first, then names.
      </p>

      <h2 style={{ marginTop: 26 }}>Precision@10, term by term</h2>
      <p className="sub">
        The conjunction is{" "}
        {(data.clap.p10 / data.chance).toFixed(1)}× chance.
      </p>
      <Terms rows={data.terms} />

      <h2 style={{ marginTop: 26 }}>Recall as metadata is deleted</h2>
      <RecallChart points={data.coverage} clap={data.clap.recall} chance={data.chance} />

      <p className="note">
        Vector search is stable even when metadata is sparse.
      </p>

      <h2 style={{ marginTop: 26 }}>What each returns</h2>
      <p className="sub">CLAP</p>
      <Examples rows={data.examples.clap} />
      <p className="sub" style={{ marginTop: 18 }}>BM25, descriptions deleted</p>
      <Examples rows={data.examples.bm25_names} />

      <p className="note">
        With descriptions gone, BM25 returns voices with <em>narrator</em> or{" "}
        <em>audiobook</em> in their title.
      </p>

      <p className="sub" style={{ marginTop: 18 }}>
        BM25, descriptions and names deleted
      </p>
      <Examples rows={data.examples.bm25_nothing} />

      <p className="note">
        Nothing left to match on: every score is zero.
      </p>
    </div>
  );
}