import { useFetch } from "../hooks";

interface StressTest {
  id: string;
  name: string;
  severity: string;
  passed: boolean;
  score: number;
  max_score: number;
  failure_modes: string[];
  details: Array<Record<string, unknown>>;
}

interface MatrixResponse {
  tests: StressTest[];
  summary: {
    total: number;
    passed: number;
    failed: number;
    pass_rate: number;
  };
}

export function StressMatrix() {
  const { data, error, loading } = useFetch<MatrixResponse>(
    "/api/v1/stress-matrix",
  );

  if (loading) return <div className="loading">Loading stress matrix…</div>;
  if (error)
    return <div className="error">Failed to load stress matrix: {error}</div>;
  if (!data) return null;

  const { tests, summary } = data;

  return (
    <>
      <h2>Stress Matrix</h2>

      <div className="cards">
        <div className="card">
          <div className="label">Total Tests</div>
          <div className="value">{summary.total}</div>
        </div>
        <div className="card">
          <div className="label">Passed</div>
          <div className={`value ${summary.passed === summary.total ? "green" : "yellow"}`}>
            {summary.passed}
          </div>
        </div>
        <div className="card">
          <div className="label">Failed</div>
          <div className={`value ${summary.failed === 0 ? "green" : "red"}`}>
            {summary.failed}
          </div>
        </div>
        <div className="card">
          <div className="label">Pass Rate</div>
          <div className={`value ${summary.pass_rate === 1 ? "green" : summary.pass_rate >= 0.5 ? "yellow" : "red"}`}>
            {(summary.pass_rate * 100).toFixed(0)}%
          </div>
        </div>
      </div>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Severity</th>
            <th>Status</th>
            <th>Score</th>
            <th>Failure Modes</th>
          </tr>
        </thead>
        <tbody>
          {tests.map((t) => (
            <tr key={t.id}>
              <td style={{ fontFamily: "monospace", fontWeight: 600 }}>{t.id}</td>
              <td>{t.name}</td>
              <td>
                <span
                  className={`badge ${t.severity.toLowerCase() === "critical" ? "critical" : t.severity.toLowerCase() === "high" ? "high" : "pass"}`}
                >
                  {t.severity}
                </span>
              </td>
              <td>
                <span className={`badge ${t.passed ? "pass" : "fail"}`}>
                  {t.passed ? "PASS" : "FAIL"}
                </span>
              </td>
              <td>
                {t.score} / {t.max_score}
              </td>
              <td>
                {t.failure_modes.length === 0 ? (
                  <span style={{ color: "var(--text-muted)" }}>None</span>
                ) : (
                  t.failure_modes.join(", ")
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {tests.some((t) => t.details.length > 0) && (
        <>
          <h2 style={{ marginTop: "2rem" }}>Detailed Breakdown</h2>
          {tests
            .filter((t) => t.details.length > 0)
            .map((t) => (
              <div key={t.id} style={{ marginBottom: "1.5rem" }}>
                <h3 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>
                  {t.id}: {t.name}
                </h3>
                <table>
                  <thead>
                    <tr>
                      <th>Benchmark ID</th>
                      <th>Passed</th>
                      <th>Score</th>
                    </tr>
                  </thead>
                  <tbody>
                    {t.details.map((d, i) => (
                      <tr key={i}>
                        <td style={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
                          {String(d.benchmark_id ?? `entry-${i}`)}
                        </td>
                        <td>
                          <span className={`badge ${d.passed ? "pass" : "fail"}`}>
                            {d.passed ? "PASS" : "FAIL"}
                          </span>
                        </td>
                        <td>{String(d.total_score ?? d.score ?? "—")}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ))}
        </>
      )}
    </>
  );
}
