export default function DomainsPage() {
  // 14 domains with sample scores across top frameworks
  const domains = [
    { id: "calendar", name: "Calendar", tasks: 15, l1: 5, l2: 5, l3: 3, l4: 2 },
    { id: "code-assistance", name: "Code Assistance", tasks: 15, l1: 3, l2: 6, l3: 4, l4: 2 },
    { id: "communication", name: "Communication", tasks: 15, l1: 3, l2: 5, l3: 6, l4: 1 },
    { id: "cross-domain", name: "Cross-Domain", tasks: 15, l1: 0, l2: 0, l3: 8, l4: 7 },
    { id: "data-analysis", name: "Data Analysis", tasks: 15, l1: 3, l2: 4, l3: 6, l4: 2 },
    { id: "document-editing", name: "Document Editing", tasks: 15, l1: 4, l2: 6, l3: 4, l4: 1 },
    { id: "email", name: "Email", tasks: 15, l1: 3, l2: 6, l3: 5, l4: 1 },
    { id: "file-operations", name: "File Operations", tasks: 15, l1: 6, l2: 5, l3: 3, l4: 1 },
    { id: "memory", name: "Memory", tasks: 15, l1: 1, l2: 6, l3: 7, l4: 1 },
    { id: "multimodal", name: "Multimodal", tasks: 15, l1: 1, l2: 6, l3: 7, l4: 1 },
    { id: "security", name: "Security", tasks: 15, l1: 3, l2: 5, l3: 4, l4: 3 },
    { id: "system-admin", name: "System Admin", tasks: 15, l1: 3, l2: 6, l3: 5, l4: 1 },
    { id: "web-browsing", name: "Web Browsing", tasks: 15, l1: 3, l2: 6, l3: 5, l4: 1 },
    { id: "workflow-automation", name: "Workflow Automation", tasks: 15, l1: 2, l2: 6, l3: 6, l4: 1 },
  ];

  const totals = {
    tasks: domains.reduce((s, d) => s + d.tasks, 0),
    l1: domains.reduce((s, d) => s + d.l1, 0),
    l2: domains.reduce((s, d) => s + d.l2, 0),
    l3: domains.reduce((s, d) => s + d.l3, 0),
    l4: domains.reduce((s, d) => s + d.l4, 0),
  };

  function difficultyBar(l1: number, l2: number, l3: number, l4: number) {
    const total = l1 + l2 + l3 + l4;
    if (total === 0) return null;
    return (
      <div
        style={{
          display: "flex",
          height: "8px",
          borderRadius: "4px",
          overflow: "hidden",
          width: "100%",
          minWidth: "80px",
        }}
      >
        <div style={{ width: `${(l1 / total) * 100}%`, background: "#22c55e" }} title={`L1: ${l1}`} />
        <div style={{ width: `${(l2 / total) * 100}%`, background: "#eab308" }} title={`L2: ${l2}`} />
        <div style={{ width: `${(l3 / total) * 100}%`, background: "#f97316" }} title={`L3: ${l3}`} />
        <div style={{ width: `${(l4 / total) * 100}%`, background: "#ef4444" }} title={`L4: ${l4}`} />
      </div>
    );
  }

  return (
    <>
      <header className="page-header">
        <h1>Task Domains</h1>
        <p>
          Overview of all {totals.tasks} benchmark tasks across {domains.length} domains
          and 4 difficulty levels (L1-L4).
        </p>
      </header>

      <div
        style={{
          display: "flex",
          gap: "1rem",
          marginBottom: "1.5rem",
          flexWrap: "wrap",
        }}
      >
        {[
          { label: "Total Tasks", value: totals.tasks, color: "var(--accent)" },
          { label: "L1 (Easy)", value: totals.l1, color: "#22c55e" },
          { label: "L2 (Medium)", value: totals.l2, color: "#eab308" },
          { label: "L3 (Hard)", value: totals.l3, color: "#f97316" },
          { label: "L4 (Expert)", value: totals.l4, color: "#ef4444" },
        ].map((stat) => (
          <div
            key={stat.label}
            className="card"
            style={{
              flex: "1 1 150px",
              textAlign: "center",
              padding: "1rem",
            }}
          >
            <div
              style={{
                fontSize: "2rem",
                fontWeight: 700,
                fontFamily: "var(--font-mono)",
                color: stat.color,
              }}
            >
              {stat.value}
            </div>
            <div
              style={{
                fontSize: "0.75rem",
                color: "var(--text-secondary)",
                textTransform: "uppercase",
                letterSpacing: "0.05em",
                marginTop: "0.25rem",
              }}
            >
              {stat.label}
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Domain</th>
                <th style={{ textAlign: "right" }}>Tasks</th>
                <th style={{ textAlign: "right" }}>L1</th>
                <th style={{ textAlign: "right" }}>L2</th>
                <th style={{ textAlign: "right" }}>L3</th>
                <th style={{ textAlign: "right" }}>L4</th>
                <th>Difficulty Distribution</th>
              </tr>
            </thead>
            <tbody>
              {domains.map((d) => (
                <tr key={d.id}>
                  <td style={{ fontWeight: 600 }}>{d.name}</td>
                  <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{d.tasks}</td>
                  <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", color: "#22c55e" }}>{d.l1}</td>
                  <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", color: "#eab308" }}>{d.l2}</td>
                  <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", color: "#f97316" }}>{d.l3}</td>
                  <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", color: "#ef4444" }}>{d.l4}</td>
                  <td>{difficultyBar(d.l1, d.l2, d.l3, d.l4)}</td>
                </tr>
              ))}
              <tr style={{ fontWeight: 700 }}>
                <td>Total</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{totals.tasks}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{totals.l1}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{totals.l2}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{totals.l3}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)" }}>{totals.l4}</td>
                <td>{difficultyBar(totals.l1, totals.l2, totals.l3, totals.l4)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div
        style={{
          marginTop: "1.5rem",
          display: "flex",
          gap: "0.5rem",
          fontSize: "0.75rem",
          color: "var(--text-secondary)",
          alignItems: "center",
        }}
      >
        <span>Difficulty legend:</span>
        {[
          { label: "L1 Easy", color: "#22c55e" },
          { label: "L2 Medium", color: "#eab308" },
          { label: "L3 Hard", color: "#f97316" },
          { label: "L4 Expert", color: "#ef4444" },
        ].map((l) => (
          <span key={l.label} style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
            <span
              style={{
                display: "inline-block",
                width: "10px",
                height: "10px",
                borderRadius: "2px",
                background: l.color,
              }}
            />
            {l.label}
          </span>
        ))}
      </div>
    </>
  );
}
