import Chart from "chart.js/auto";
import { useEffect, useMemo, useRef, useState } from "react";

// ============================================================================
// Inline SVG icons (avoids the lucide-react module dependency)
// ============================================================================

const SvgIcon = ({ children, className = "w-4 h-4", strokeWidth = 2 }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={strokeWidth}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    {children}
  </svg>
);

const Play = (p) => (
  <SvgIcon {...p}>
    <polygon points="6 3 20 12 6 21 6 3" />
  </SvgIcon>
);
const Pause = (p) => (
  <SvgIcon {...p}>
    <rect x="6" y="4" width="4" height="16" />
    <rect x="14" y="4" width="4" height="16" />
  </SvgIcon>
);
const RotateCcw = (p) => (
  <SvgIcon {...p}>
    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
    <path d="M3 3v5h5" />
  </SvgIcon>
);
const AlertTriangle = (p) => (
  <SvgIcon {...p}>
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
    <path d="M12 9v4" />
    <path d="M12 17h.01" />
  </SvgIcon>
);
const Check = (p) => (
  <SvgIcon {...p}>
    <polyline points="20 6 9 17 4 12" />
  </SvgIcon>
);
const ShieldAlert = (p) => (
  <SvgIcon {...p}>
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
    <path d="M12 8v4" />
    <path d="M12 16h.01" />
  </SvgIcon>
);
const Archive = (p) => (
  <SvgIcon {...p}>
    <rect width="20" height="5" x="2" y="3" rx="1" />
    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
    <path d="M10 12h4" />
  </SvgIcon>
);
const GitPullRequest = (p) => (
  <SvgIcon {...p}>
    <circle cx="18" cy="18" r="3" />
    <circle cx="6" cy="6" r="3" />
    <path d="M13 6h3a2 2 0 0 1 2 2v7" />
    <line x1="6" x2="6" y1="9" y2="21" />
  </SvgIcon>
);
const Database = (p) => (
  <SvgIcon {...p}>
    <ellipse cx="12" cy="5" rx="9" ry="3" />
    <path d="M3 5V19A9 3 0 0 0 21 19V5" />
    <path d="M3 12A9 3 0 0 0 21 12" />
  </SvgIcon>
);
const TrendingDown = (p) => (
  <SvgIcon {...p}>
    <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
    <polyline points="16 17 22 17 22 11" />
  </SvgIcon>
);

// ============================================================================
// Model: simulate four a11y-testing adoption strategies over 52 weeks
// ============================================================================
//
// Shared mechanics:
//   - Team starts with N existing violations.
//   - Each week: `newPerWeek` violations introduced (PR regressions),
//                 `fixesPerWeek` violations fixed (intentional a11y work).
//   - Backlog never goes below zero.
//
// Per-strategy interpretation of "violations CI would flag on this week's PR":
//
//   A. Gate on zero         → every violation is a failure.
//   B. Suppressions file    → only NEW unsuppressed violations fail. Devs
//                              suppress 50% of new ones immediately; the
//                              other 50% fail CI until someone updates the
//                              file. Suppressions never get pruned when the
//                              referenced violation is fixed, so "staleness"
//                              grows unbounded.
//   C. Per-test opt-in      → coverage grows ~1.5% per week (capped at 80%).
//                              Failures = coverage × backlog.
//   D. Snapshot baselines   → baseline matches current state on first run.
//                              New violations fail CI; fixes ratchet the
//                              baseline down automatically. Assume new
//                              regressions get fixed same week (caught in
//                              PR), so net failures ≈ 0.
//
// This is a simplified model. The point is the SHAPE of each curve over
// time, not a precise prediction.
// ============================================================================

function simulate({ starting, newPerWeek, fixesPerWeek }) {
  const weeks = [];
  let backlog = starting;
  let suppressions = starting; // all known violations suppressed on day 1
  let staleSuppressions = 0; // suppressions that no longer match a live violation
  let unsuppressedBacklog = 0; // new violations not yet in suppressions file
  let optIn = 0; // fraction 0..0.8

  for (let w = 0; w <= 52; w++) {
    if (w > 0) {
      const added = newPerWeek;
      const applied = Math.min(fixesPerWeek, backlog);
      backlog = backlog + added - applied;

      const newlySuppressed = Math.floor(added * 0.5);
      suppressions += newlySuppressed;
      unsuppressedBacklog += added - newlySuppressed;
      staleSuppressions += applied;

      optIn = Math.min(0.8, optIn + 0.015);
    }

    const gateOnZeroFail = backlog;
    const suppressionsFail = unsuppressedBacklog;
    const optInFail = Math.round(backlog * optIn);
    const snapshotBaselineSize = Math.max(0, starting - fixesPerWeek * w);

    weeks.push({
      week: w,
      backlog,
      gateOnZeroFail,
      suppressionsFail,
      suppressionsStale: staleSuppressions,
      optInFail,
      optInCoverage: optIn,
      snapshotBaseline: snapshotBaselineSize,
      snapshotRatchetedAway: starting - snapshotBaselineSize,
    });
  }
  return weeks;
}

// ============================================================================
// UI primitives
// ============================================================================

function Slider({ label, value, onChange, min, max, step = 1, suffix = "" }) {
  return (
    <label className="flex flex-col gap-1 min-w-0">
      <span className="flex items-baseline justify-between gap-2 text-sm text-slate-600">
        <span>{label}</span>
        <span className="tabular-nums font-mono text-slate-900">
          {value}
          {suffix}
        </span>
      </span>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="accent-indigo-600"
      />
    </label>
  );
}

function Badge({ tone, children }) {
  const tones = {
    red: "bg-rose-100 text-rose-800 ring-rose-200",
    amber: "bg-amber-100 text-amber-800 ring-amber-200",
    green: "bg-emerald-100 text-emerald-800 ring-emerald-200",
    slate: "bg-slate-100 text-slate-700 ring-slate-200",
  };
  return (
    <span
      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset ${tones[tone]}`}
    >
      {children}
    </span>
  );
}

// ============================================================================
// Chart.js plugin: vertical "now" line at the current week
// ============================================================================

const nowLinePlugin = {
  id: "nowLine",
  afterDraw(chart, _args, options) {
    const week = options?.week;
    if (week == null) return;
    const xScale = chart.scales.x;
    if (!xScale) return;
    const x = xScale.getPixelForValue(week);
    const { ctx, chartArea } = chart;
    ctx.save();
    ctx.strokeStyle = "#0f172a";
    ctx.setLineDash([2, 3]);
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x, chartArea.top);
    ctx.lineTo(x, chartArea.bottom);
    ctx.stroke();
    ctx.restore();
  },
};

// ============================================================================
// ChartPanel: one <canvas> with Chart.js instance, imperatively updated
// ============================================================================

function ChartPanel({ labels, datasets, week, extraOptions = {} }) {
  const canvasRef = useRef(null);
  const chartRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    chartRef.current = new Chart(canvasRef.current, {
      type: "line",
      data: { labels, datasets },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        scales: {
          x: { display: false, type: "linear", min: 0, max: 52 },
          y: { display: false, beginAtZero: true },
          ...extraOptions.scales,
        },
        plugins: {
          legend: { display: false },
          tooltip: {
            mode: "index",
            intersect: false,
            backgroundColor: "#ffffff",
            titleColor: "#475569",
            bodyColor: "#0f172a",
            borderColor: "#e2e8f0",
            borderWidth: 1,
            padding: 8,
            titleFont: { size: 11, family: "ui-monospace, SFMono-Regular, monospace" },
            bodyFont: { size: 11 },
            displayColors: true,
            boxWidth: 8,
            boxHeight: 8,
            usePointStyle: true,
            callbacks: {
              title: (items) => `week ${items[0].parsed.x}`,
            },
          },
          nowLine: { week },
        },
        interaction: { mode: "index", intersect: false, axis: "x" },
        elements: { point: { radius: 0 } },
      },
      plugins: [nowLinePlugin],
    });
    return () => {
      chartRef.current?.destroy();
      chartRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const chart = chartRef.current;
    if (!chart) return;
    chart.data.labels = labels;
    chart.data.datasets = datasets;
    chart.options.plugins.nowLine.week = week;
    chart.update("none");
  }, [labels, datasets, week]);

  return (
    <div className="relative h-32">
      <canvas ref={canvasRef} />
    </div>
  );
}

// ============================================================================
// StrategyCard: title, icon, ChartPanel, CI status
// ============================================================================

function StrategyCard({ title, blurb, icon: Icon, accent, status, week, children }) {
  return (
    <div className="flex flex-col rounded-xl ring-1 ring-slate-200 bg-white p-4 gap-3">
      <div className="flex items-start gap-3">
        <div
          className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${accent}`}
        >
          <Icon className="w-5 h-5" strokeWidth={2} />
        </div>
        <div className="min-w-0">
          <h3 className="font-semibold text-slate-900 leading-tight">{title}</h3>
          <p className="text-xs text-slate-500 leading-snug">{blurb}</p>
        </div>
      </div>
      <div className="-mx-1">{children}</div>
      <div className="flex items-center justify-between gap-2 text-xs">
        {status}
        <span className="tabular-nums font-mono text-slate-500">week {week}</span>
      </div>
    </div>
  );
}

// ============================================================================
// Main App
// ============================================================================

export default function App() {
  const [starting, setStarting] = useState(200);
  const [newPerWeek, setNewPerWeek] = useState(3);
  const [fixesPerWeek, setFixesPerWeek] = useState(1);
  const [week, setWeek] = useState(0);
  const [playing, setPlaying] = useState(false);
  const timerRef = useRef(null);

  useEffect(() => {
    if (!playing) return;
    timerRef.current = setInterval(() => {
      setWeek((w) => {
        if (w >= 52) {
          setPlaying(false);
          return 52;
        }
        return w + 1;
      });
    }, 220);
    return () => clearInterval(timerRef.current);
  }, [playing]);

  const raw = useMemo(
    () => simulate({ starting, newPerWeek, fixesPerWeek }),
    [starting, newPerWeek, fixesPerWeek],
  );

  const labels = useMemo(() => raw.map((r) => r.week), [raw]);
  const current = raw[week];

  // Dataset builders per strategy
  const dsGateOnZero = useMemo(
    () => [
      {
        label: "violations flagged",
        data: raw.map((r) => ({ x: r.week, y: r.gateOnZeroFail })),
        borderColor: "#e11d48",
        backgroundColor: "rgba(244, 63, 94, 0.35)",
        fill: "origin",
        borderWidth: 2,
        tension: 0.15,
      },
    ],
    [raw],
  );

  const dsSuppress = useMemo(
    () => [
      {
        label: "stale entries",
        data: raw.map((r) => ({ x: r.week, y: r.suppressionsStale })),
        borderColor: "#b45309",
        backgroundColor: "rgba(245, 158, 11, 0.30)",
        fill: "origin",
        borderWidth: 2,
        tension: 0.15,
      },
      {
        label: "unsuppressed (CI red)",
        data: raw.map((r) => ({ x: r.week, y: r.suppressionsFail })),
        borderColor: "#e11d48",
        backgroundColor: "rgba(244, 63, 94, 0.15)",
        fill: false,
        borderWidth: 2,
        tension: 0.15,
      },
    ],
    [raw],
  );

  const dsOptIn = useMemo(
    () => [
      {
        label: "backlog (all tests)",
        data: raw.map((r) => ({ x: r.week, y: r.backlog })),
        borderColor: "#94a3b8",
        backgroundColor: "rgba(148, 163, 184, 0.20)",
        fill: "origin",
        borderWidth: 1,
        borderDash: [2, 2],
        tension: 0.15,
      },
      {
        label: "flagged in opted-in tests",
        data: raw.map((r) => ({ x: r.week, y: r.optInFail })),
        borderColor: "#4f46e5",
        backgroundColor: "rgba(99, 102, 241, 0.25)",
        fill: "origin",
        borderWidth: 2,
        tension: 0.15,
      },
      {
        label: "coverage",
        data: raw.map((r) => ({ x: r.week, y: r.optInCoverage * 100 })),
        borderColor: "#a5b4fc",
        backgroundColor: "transparent",
        fill: false,
        borderWidth: 2,
        yAxisID: "y2",
        tension: 0.15,
        borderDash: [4, 2],
      },
    ],
    [raw],
  );

  const dsSnap = useMemo(
    () => [
      {
        label: "remaining in baseline",
        data: raw.map((r) => ({ x: r.week, y: r.snapshotBaseline })),
        borderColor: "#059669",
        backgroundColor: "rgba(16, 185, 129, 0.30)",
        fill: "origin",
        borderWidth: 2,
        tension: 0.15,
      },
      {
        label: "ratcheted away (fixes)",
        data: raw.map((r) => ({ x: r.week, y: r.snapshotRatchetedAway })),
        borderColor: "#0f766e",
        backgroundColor: "transparent",
        fill: false,
        borderWidth: 2,
        borderDash: [4, 2],
        tension: 0.15,
      },
    ],
    [raw],
  );

  const statusGateOnZero =
    current.gateOnZeroFail === 0 ? (
      <Badge tone="green">
        <Check className="w-3 h-3" /> CI green
      </Badge>
    ) : (
      <Badge tone="red">
        <AlertTriangle className="w-3 h-3" /> CI red ({current.gateOnZeroFail} flagged)
      </Badge>
    );
  const statusSuppress =
    current.suppressionsFail === 0 ? (
      <Badge tone="amber">
        <ShieldAlert className="w-3 h-3" /> {current.suppressionsStale} stale suppressions
      </Badge>
    ) : (
      <Badge tone="red">
        <AlertTriangle className="w-3 h-3" /> CI red ({current.suppressionsFail} unsuppressed)
      </Badge>
    );
  const statusOptIn = (
    <Badge tone="amber">
      <GitPullRequest className="w-3 h-3" />
      {Math.round(current.optInCoverage * 100)}% coverage
    </Badge>
  );
  const statusSnap = (
    <Badge tone="green">
      <TrendingDown className="w-3 h-3" /> baseline: {current.snapshotBaseline}
    </Badge>
  );

  const reset = () => {
    setWeek(0);
    setPlaying(false);
  };

  const narrative = useMemo(
    () => buildNarrative({ current, starting, newPerWeek, fixesPerWeek, week }),
    [current, starting, newPerWeek, fixesPerWeek, week],
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      <div className="max-w-6xl mx-auto px-6 py-10">
        <header className="mb-8">
          <h1 className="text-3xl font-bold leading-tight mb-2">
            Four ways to enable accessibility tests on a codebase with a backlog
          </h1>
          <p className="text-slate-600 max-w-3xl">
            Drag the sliders. Press play. Watch what "CI green" and "violations flagged"
            look like under each strategy over a year. The premise: the codebase already
            has a few hundred a11y violations, new regressions land at a certain rate,
            fixes land at another. Which strategy actually holds up?
          </p>
        </header>

        {/* Controls */}
        <section className="bg-white rounded-xl ring-1 ring-slate-200 p-5 mb-6">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-5">
            <Slider
              label="Starting violations"
              value={starting}
              onChange={setStarting}
              min={0}
              max={500}
              step={10}
            />
            <Slider
              label="New violations per week"
              value={newPerWeek}
              onChange={setNewPerWeek}
              min={0}
              max={10}
            />
            <Slider
              label="Fixes per week"
              value={fixesPerWeek}
              onChange={setFixesPerWeek}
              min={0}
              max={10}
            />
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={() => setPlaying((p) => !p)}
              className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-indigo-600 text-white text-sm hover:bg-indigo-700"
            >
              {playing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
              {playing ? "Pause" : "Play"}
            </button>
            <button
              onClick={reset}
              className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-slate-200 text-slate-700 text-sm hover:bg-slate-300"
            >
              <RotateCcw className="w-4 h-4" />
              Reset
            </button>
            <div className="flex-1 flex items-center gap-3">
              <input
                type="range"
                min={0}
                max={52}
                value={week}
                onChange={(e) => {
                  setPlaying(false);
                  setWeek(Number(e.target.value));
                }}
                className="flex-1 accent-indigo-600"
              />
              <span className="font-mono tabular-nums text-sm text-slate-600 w-20 text-right">
                week {week} / 52
              </span>
            </div>
          </div>
        </section>

        {/* Four strategy cards */}
        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <StrategyCard
            title="Gate on zero"
            blurb="Every violation fails CI, starting from day one."
            icon={ShieldAlert}
            accent="bg-rose-50 text-rose-600"
            status={statusGateOnZero}
            week={week}
          >
            <ChartPanel labels={labels} datasets={dsGateOnZero} week={week} />
          </StrategyCard>
          <StrategyCard
            title="Suppressions file"
            blurb="A committed list of known violations, hand-maintained."
            icon={Archive}
            accent="bg-amber-50 text-amber-600"
            status={statusSuppress}
            week={week}
          >
            <ChartPanel labels={labels} datasets={dsSuppress} week={week} />
          </StrategyCard>
          <StrategyCard
            title="Per-test opt-in"
            blurb="Add the assertion to new tests only; backfill over time."
            icon={GitPullRequest}
            accent="bg-indigo-50 text-indigo-600"
            status={statusOptIn}
            week={week}
          >
            <ChartPanel
              labels={labels}
              datasets={dsOptIn}
              week={week}
              extraOptions={{
                scales: {
                  y2: {
                    display: false,
                    position: "right",
                    min: 0,
                    max: 100,
                    beginAtZero: true,
                  },
                },
              }}
            />
          </StrategyCard>
          <StrategyCard
            title="Snapshot baselines"
            blurb="Whole-suite, gates on new violations, ratchets down with fixes."
            icon={Database}
            accent="bg-emerald-50 text-emerald-600"
            status={statusSnap}
            week={week}
          >
            <ChartPanel labels={labels} datasets={dsSnap} week={week} />
          </StrategyCard>
        </section>

        {/* Narrative */}
        <section className="bg-white rounded-xl ring-1 ring-slate-200 p-5 mb-6">
          <h2 className="font-semibold mb-3">What a developer sees this week</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
            {narrative.map((n) => (
              <div
                key={n.title}
                className={`rounded-lg p-3 border border-slate-200 ${n.bg}`}
              >
                <div className="font-medium text-slate-900 mb-1">{n.title}</div>
                <div className="text-slate-600 leading-snug">{n.text}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Week-52 summary */}
        <section className="bg-white rounded-xl ring-1 ring-slate-200 p-5 mb-10">
          <h2 className="font-semibold mb-3">Week-52 outcome</h2>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-slate-500 border-b border-slate-200">
                <tr>
                  <th className="py-2 pr-4">Strategy</th>
                  <th className="py-2 pr-4">Coverage</th>
                  <th className="py-2 pr-4">Violations still flagged</th>
                  <th className="py-2 pr-4">CI health trend</th>
                  <th className="py-2 pr-4">Notes</th>
                </tr>
              </thead>
              <tbody className="tabular-nums">
                <Row
                  name="Gate on zero"
                  coverage="100%"
                  flagged={raw[52].gateOnZeroFail}
                  trend={raw[52].gateOnZeroFail === 0 ? "green" : "red all year"}
                  note="Team usually disables by week 2 in practice."
                />
                <Row
                  name="Suppressions file"
                  coverage="100%"
                  flagged={raw[52].suppressionsFail}
                  trend="flaky"
                  note={`${raw[52].suppressionsStale} stale entries. The file is write-only.`}
                />
                <Row
                  name="Per-test opt-in"
                  coverage={`${Math.round(raw[52].optInCoverage * 100)}%`}
                  flagged={raw[52].optInFail}
                  trend="green, patchy"
                  note="Coverage creeps up but never catches up to reality."
                />
                <Row
                  name="Snapshot baselines"
                  coverage="100%"
                  flagged={0}
                  trend="green"
                  note={`Baseline started at ${starting}, now at ${raw[52].snapshotBaseline}.`}
                />
              </tbody>
            </table>
          </div>
        </section>

        <footer className="text-xs text-slate-500 text-center">
          Simplified model. Real a11y work is messier, but the shape of each curve
          matches what most teams see. Built to accompany the{" "}
          <span className="font-mono">@accesslint/jest</span> launch post.
        </footer>
      </div>
    </div>
  );
}

// ============================================================================
// Narrative generator
// ============================================================================

function buildNarrative({ current, starting, newPerWeek, fixesPerWeek, week }) {
  if (!current) return [];
  const weekLabel = week === 0 ? "Day one." : `Week ${week}.`;
  return [
    {
      title: "Gate on zero",
      bg: current.gateOnZeroFail > 0 ? "bg-rose-50/50" : "bg-emerald-50/50",
      text:
        current.gateOnZeroFail > 0
          ? `${weekLabel} CI has been red since the feature was enabled. ${current.gateOnZeroFail} violations flag every PR. The team disabled the assertion a while ago; no one remembers when.`
          : `${weekLabel} The backlog finally hit zero. CI is green. This takes ${Math.ceil(starting / Math.max(1, fixesPerWeek - newPerWeek))} weeks at the current rates, if it's reachable at all.`,
    },
    {
      title: "Suppressions file",
      bg: current.suppressionsFail > 0 ? "bg-rose-50/50" : "bg-amber-50/50",
      text:
        current.suppressionsFail > 0
          ? `${weekLabel} ${current.suppressionsFail} new violations slipped through. Someone forgot to update the suppressions file again. CI red until the next housekeeping pass.`
          : `${weekLabel} CI green, but ${current.suppressionsStale} entries in the file point at violations that were fixed months ago. Code review glosses over the diff.`,
    },
    {
      title: "Per-test opt-in",
      bg: "bg-indigo-50/50",
      text: `${weekLabel} ${Math.round(current.optInCoverage * 100)}% of tests now include an accessibility assertion. The ones that do catch ${current.optInFail} of the ${current.backlog} existing violations. New features and untouched components remain unchecked.`,
    },
    {
      title: "Snapshot baselines",
      bg: "bg-emerald-50/50",
      text:
        current.snapshotBaseline === 0
          ? `${weekLabel} Baseline hit zero. The team drops the \`snapshot\` option on tests whose baselines cleared, and those tests now gate on any violation at all.`
          : `${weekLabel} Baseline at ${current.snapshotBaseline} violations, down from ${starting}. CI is green. PRs that introduce new violations are caught and fixed before merge; PRs that fix violations see the baseline file shrink in the diff.`,
    },
  ];
}

function Row({ name, coverage, flagged, trend, note }) {
  const trendTone =
    trend === "green"
      ? "text-emerald-700"
      : trend === "flaky"
        ? "text-amber-700"
        : trend === "green, patchy"
          ? "text-indigo-700"
          : "text-rose-700";
  return (
    <tr className="border-b border-slate-100">
      <td className="py-2 pr-4 font-medium text-slate-900">{name}</td>
      <td className="py-2 pr-4">{coverage}</td>
      <td className="py-2 pr-4">{flagged}</td>
      <td className={`py-2 pr-4 font-medium ${trendTone}`}>{trend}</td>
      <td className="py-2 pr-4 text-slate-600">{note}</td>
    </tr>
  );
}