import fs from "node:fs";
import path from "node:path";

interface SkillsGainEntry {
  framework: string;
  vanilla: number;
  curated: number;
  native: number;
  absoluteGain: number;
  normalizedGain: number;
  nativeEfficacy: number;
}

function loadSkillsGain(): SkillsGainEntry[] {
  const filePath = path.join(process.cwd(), "..", "data", "results", "skills-gain.json");

  try {
    if (fs.existsSync(filePath)) {
      const raw = fs.readFileSync(filePath, "utf-8");
      const data = JSON.parse(raw);
      if (Array.isArray(data) && data.length > 0 && "framework" in data[0]) {
        return data.map((d: Record<string, unknown>) => ({
          framework: d.framework as string,
          vanilla: d.vanilla as number,
          curated: d.curated as number,
          native: d.native as number,
          absoluteGain: d.absoluteGain as number,
          normalizedGain: d.normalizedGain as number,
          nativeEfficacy: d.nativeEfficacy as number,
        }));
      }
    }
  } catch {
    // Fall through to sample data
  }

  return [
    { framework: "OpenClaw", vanilla: 72.3, curated: 88.1, native: 91.2, absoluteGain: 15.8, normalizedGain: 0.57, nativeEfficacy: 18.9 },
    { framework: "IronClaw", vanilla: 70.5, curated: 85.7, native: 83.4, absoluteGain: 15.2, normalizedGain: 0.52, nativeEfficacy: 12.9 },
    { framework: "QClaw", vanilla: 68.2, curated: 82.5, native: 88.5, absoluteGain: 14.3, normalizedGain: 0.45, nativeEfficacy: 20.3 },
    { framework: "ZeroClaw", vanilla: 65.1, curated: 78.4, native: 74.9, absoluteGain: 13.3, normalizedGain: 0.38, nativeEfficacy: 9.8 },
    { framework: "NullClaw", vanilla: 62.8, curated: 75.2, native: 71.0, absoluteGain: 12.4, normalizedGain: 0.33, nativeEfficacy: 8.2 },
    { framework: "PicoClaw", vanilla: 58.3, curated: 72.1, native: 68.5, absoluteGain: 13.8, normalizedGain: 0.33, nativeEfficacy: 10.2 },
    { framework: "NanoBot", vanilla: 55.4, curated: 68.9, native: 65.2, absoluteGain: 13.5, normalizedGain: 0.30, nativeEfficacy: 9.8 },
  ];
}

export default function SkillsGainPage() {
  const frameworks = loadSkillsGain();

  function barWidth(value: number): string {
    return `${Math.min(100, value)}%`;
  }

  function scoreClass(score: number): string {
    if (score >= 85) return "score score-high";
    if (score >= 70) return "score score-mid";
    return "score score-low";
  }

  return (
    <>
      <header className="page-header">
        <h1>Skills Gain Analysis</h1>
        <p>
          SkillsBench 3-condition comparison isolates framework capability from ecosystem
          size. Each framework is tested in <strong>vanilla</strong> (no skills),{" "}
          <strong>curated</strong> (Claw Bench standard skills), and{" "}
          <strong>native</strong> (framework&apos;s own skills) modes.
        </p>
      </header>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
          gap: "1rem",
          marginBottom: "1.5rem",
        }}
      >
        {[
          {
            label: "Methodology",
            value: "SkillsBench 3-Condition",
            sub: "Isolate framework vs ecosystem",
          },
          {
            label: "Conditions",
            value: "3",
            sub: "Vanilla / Curated / Native",
          },
          {
            label: "Best Normalized Gain",
            value: `${Math.max(...frameworks.map((f) => f.normalizedGain)).toFixed(2)}`,
            sub: frameworks.reduce((best, f) =>
              f.normalizedGain > best.normalizedGain ? f : best
            ).framework,
          },
          {
            label: "Best Native Efficacy",
            value: `+${Math.max(...frameworks.map((f) => f.nativeEfficacy)).toFixed(1)}%`,
            sub: frameworks.reduce((best, f) =>
              f.nativeEfficacy > best.nativeEfficacy ? f : best
            ).framework,
          },
        ].map((stat) => (
          <div key={stat.label} className="card" style={{ textAlign: "center" }}>
            <div
              style={{
                fontSize: "0.75rem",
                textTransform: "uppercase",
                letterSpacing: "0.05em",
                color: "var(--text-secondary)",
                marginBottom: "0.25rem",
              }}
            >
              {stat.label}
            </div>
            <div style={{ fontSize: "1.5rem", fontWeight: 700 }}>{stat.value}</div>
            <div
              style={{
                fontSize: "0.8rem",
                color: "var(--text-secondary)",
                marginTop: "0.15rem",
              }}
            >
              {stat.sub}
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Framework</th>
                <th>Vanilla</th>
                <th>Curated</th>
                <th>Native</th>
                <th>Absolute Gain</th>
                <th>Normalized Gain</th>
                <th>Native Efficacy</th>
              </tr>
            </thead>
            <tbody>
              {frameworks.map((fw) => (
                <tr key={fw.framework}>
                  <td style={{ fontWeight: 600 }}>{fw.framework}</td>
                  <td>
                    <span className={scoreClass(fw.vanilla)}>{fw.vanilla.toFixed(1)}</span>
                  </td>
                  <td>
                    <span className={scoreClass(fw.curated)}>{fw.curated.toFixed(1)}</span>
                  </td>
                  <td>
                    <span className={scoreClass(fw.native)}>{fw.native.toFixed(1)}</span>
                  </td>
                  <td
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontWeight: 600,
                      color: "var(--success)",
                    }}
                  >
                    +{fw.absoluteGain.toFixed(1)}
                  </td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>
                    {fw.normalizedGain.toFixed(2)}
                  </td>
                  <td
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontWeight: 600,
                      color: "var(--success)",
                    }}
                  >
                    +{fw.nativeEfficacy.toFixed(1)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card" style={{ marginTop: "1.5rem" }}>
        <h3
          style={{
            fontSize: "0.95rem",
            fontWeight: 600,
            marginBottom: "1rem",
          }}
        >
          Score Distribution by Condition
        </h3>
        {frameworks.map((fw) => (
          <div key={fw.framework} style={{ marginBottom: "1rem" }}>
            <div
              style={{
                fontWeight: 600,
                fontSize: "0.85rem",
                marginBottom: "0.35rem",
              }}
            >
              {fw.framework}
            </div>
            {[
              { label: "Vanilla", value: fw.vanilla, color: "#94a3b8" },
              { label: "Curated", value: fw.curated, color: "var(--accent)" },
              { label: "Native", value: fw.native, color: "var(--success)" },
            ].map((bar) => (
              <div
                key={bar.label}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.5rem",
                  marginBottom: "0.2rem",
                  fontSize: "0.8rem",
                }}
              >
                <div style={{ width: "55px", color: "var(--text-secondary)" }}>
                  {bar.label}
                </div>
                <div
                  style={{
                    flex: 1,
                    height: "14px",
                    borderRadius: "4px",
                    background: "var(--bg-secondary)",
                    overflow: "hidden",
                  }}
                >
                  <div
                    style={{
                      height: "100%",
                      width: barWidth(bar.value),
                      borderRadius: "4px",
                      background: bar.color,
                    }}
                  />
                </div>
                <div
                  style={{
                    width: "45px",
                    textAlign: "right",
                    fontFamily: "var(--font-mono)",
                    fontWeight: 500,
                  }}
                >
                  {bar.value.toFixed(1)}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>

      <footer
        style={{
          marginTop: "3rem",
          paddingBottom: "2rem",
          textAlign: "center",
          fontSize: "0.8rem",
          color: "var(--text-secondary)",
        }}
      >
        Run benchmarks with{" "}
        <code style={{ fontFamily: "var(--font-mono)" }}>
          claw-bench run --skills vanilla,curated,native
        </code>{" "}
        to generate real 3-condition comparisons.
      </footer>
    </>
  );
}
