/* anim-finetune.jsx — Decision tree: prompt vs RAG vs fine-tune */

const FineTuneSim = () => {
  const QUESTIONS = [
    {
      id: "knowledge",
      q: "Does the answer require knowledge the base model doesn't have?",
      yes: "factuality",
      no: "behavior",
    },
    {
      id: "factuality",
      q: "Does this knowledge change frequently (docs, prices, inventory)?",
      yes: { verdict: "RAG", reason: "Retrieve fresh context at inference time." },
      no: "size",
    },
    {
      id: "size",
      q: "Is the knowledge corpus larger than ~10k tokens?",
      yes: { verdict: "RAG", reason: "Too big for the prompt; embed and retrieve." },
      no: { verdict: "PROMPT", reason: "Just paste it into the system prompt." },
    },
    {
      id: "behavior",
      q: "Do you need a specific tone, format, or domain style consistently?",
      yes: "examples",
      no: { verdict: "PROMPT", reason: "A clear instruction is usually enough." },
    },
    {
      id: "examples",
      q: "Have few-shot examples in the prompt failed to capture the style?",
      yes: { verdict: "FINE-TUNE", reason: "LoRA / QLoRA on 500–5k examples." },
      no: { verdict: "PROMPT", reason: "Few-shot is cheaper and faster to iterate." },
    },
  ];

  // We walk a fixed example path: knowledge=yes → factuality=no → size=no → PROMPT (a small static FAQ)
  // Then re-run: knowledge=yes → factuality=yes → RAG
  // Then: knowledge=no → behavior=yes → examples=yes → FINE-TUNE
  const PATHS = [
    [{ q: "knowledge", a: "yes" }, { q: "factuality", a: "yes", verdict: "RAG", reason: "Retrieve fresh context at inference time." }],
    [{ q: "knowledge", a: "no" }, { q: "behavior", a: "no", verdict: "PROMPT", reason: "A clear instruction is usually enough." }],
    [{ q: "knowledge", a: "no" }, { q: "behavior", a: "yes" }, { q: "examples", a: "yes", verdict: "FINE-TUNE", reason: "LoRA / QLoRA on 500–5k examples." }],
  ];

  const SCENARIOS = [
    { name: "Customer support bot using internal docs", path: 0 },
    { name: "Reformat any email into the company voice (no facts)", path: 1 },
    { name: "Generate code in a proprietary internal DSL", path: 2 },
  ];

  const [scenarioIdx, setScenarioIdx] = useState(0);
  const path = PATHS[SCENARIOS[scenarioIdx].path];
  const STEPS = path.length + 1; // +1 for verdict reveal

  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({ steps: STEPS, intervalMs: 1500 });

  // When scenario changes, reset
  useEffect(() => { reset(); /* eslint-disable-next-line */ }, [scenarioIdx]);

  const verdict = step >= path.length ? path[path.length - 1] : null;
  const visible = path.slice(0, step + 1);

  const colors = {
    PROMPT:    { bg: "#e3f1e8", border: "#b8dcc4", ink: "#2e7d4f" },
    RAG:       { bg: "#e8f0fe", border: "#c5d8f5", ink: "#2d5fb8" },
    "FINE-TUNE": { bg: "#ede4f7", border: "#d4c1ed", ink: "#6b3fa0" },
  };

  return (
    <div ref={containerRef}>
      <div style={{ display: "flex", gap: 6, marginBottom: 16, flexWrap: "wrap" }}>
        {SCENARIOS.map((s, i) => (
          <button key={i} onClick={() => setScenarioIdx(i)} style={{
            padding: "6px 12px",
            borderRadius: 4,
            border: "1px solid",
            borderColor: scenarioIdx === i ? "#1a1a1a" : "#e7e7e2",
            background: scenarioIdx === i ? "#1a1a1a" : "#fbfbfa",
            color: scenarioIdx === i ? "#fbfbfa" : "#3d3d3a",
            fontSize: 12, fontFamily: "Inter Tight, sans-serif",
            cursor: "pointer", transition: "all 0.2s",
          }}>
            scenario {i + 1}
          </button>
        ))}
      </div>

      <div style={{ background: "#fbfbfa", border: "1px solid #e7e7e2", borderRadius: 6, padding: "10px 14px", marginBottom: 16, fontSize: 13 }}>
        <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#6b6b66", textTransform: "uppercase", letterSpacing: "0.06em" }}>scenario · </span>
        <span style={{ color: "#1a1a1a" }}>{SCENARIOS[scenarioIdx].name}</span>
      </div>

      {/* Decision walk */}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {visible.map((node, i) => {
          const qDef = QUESTIONS.find(q => q.id === node.q);
          const isLast = i === visible.length - 1;
          return (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "1fr 80px",
              gap: 16, alignItems: "center",
              padding: "12px 16px",
              background: "#fff",
              border: "1px solid #e7e7e2",
              borderRadius: 6,
              animation: isLast ? "slideIn 0.4s" : undefined,
            }}>
              <div>
                <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "#a3a39d", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>
                  Q{i + 1}
                </div>
                <div style={{ fontSize: 14, color: "#1a1a1a" }}>{qDef.q}</div>
              </div>
              <div style={{
                padding: "6px 10px",
                borderRadius: 4,
                background: node.a === "yes" ? "#e3f1e8" : "#fbeadc",
                border: `1px solid ${node.a === "yes" ? "#b8dcc4" : "#ecd690"}`,
                color: node.a === "yes" ? "#2e7d4f" : "#c7521c",
                fontFamily: "JetBrains Mono, monospace",
                fontSize: 12, textAlign: "center", fontWeight: 600,
                textTransform: "uppercase",
              }}>
                {node.a}
              </div>
            </div>
          );
        })}
      </div>

      {/* Verdict */}
      {verdict && step >= path.length && (
        <div style={{
          marginTop: 16,
          padding: "20px 24px",
          background: colors[verdict.verdict].bg,
          border: `1px solid ${colors[verdict.verdict].border}`,
          borderRadius: 8,
          animation: "fadeIn 0.5s",
        }}>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: colors[verdict.verdict].ink, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>
            recommendation
          </div>
          <div style={{ fontFamily: "Source Serif 4, serif", fontSize: 28, fontWeight: 500, color: colors[verdict.verdict].ink, letterSpacing: "-0.01em" }}>
            {verdict.verdict}
          </div>
          <div style={{ fontSize: 14, color: "#3d3d3a", marginTop: 6 }}>
            {verdict.reason}
          </div>
        </div>
      )}
    </div>
  );
};

window.FineTuneSim = FineTuneSim;