import { fmt } from '@/lib/format';
import type { ServiceDetail, TargetRow } from '@/lib/types';

/** z → colour: |z|<1.5 neutral, <3 elevated, <5 high, ≥5 severe; failing cell = severe outline. */
function zColor(z: number, ok: boolean): string {
  if (!ok) return 'var(--p-severe)';
  const a = Math.abs(z);
  if (a < 1) return 'var(--panel-2)';
  if (a < 1.5) return 'rgba(76,201,240,0.25)';
  if (a < 3) return 'rgba(233,196,106,0.45)';
  if (a < 5) return 'rgba(231,111,81,0.6)';
  return 'rgba(214,40,40,0.75)';
}

export function ProbeTargetMatrix({ matrix, targets }: { matrix: ServiceDetail['matrix']; targets: TargetRow[] }) {
  if (!matrix.length || !targets.length) return <p className="py-3 text-[12.5px] text-ink-3">No matrix available.</p>;
  const cols = targets.map((t) => t.target_id);
  return (
    <div className="scroll-x -mx-3 px-3">
      <table className="text-[11px]">
        <thead>
          <tr>
            <th className="label sticky left-0 bg-bg py-1 pr-3 text-left font-medium">probe \ target</th>
            {targets.map((t) => (
              <th key={t.target_id} className="px-0.5 pb-1 align-bottom font-normal text-ink-2" title={t.name}>
                <span className="block h-20 w-6 [writing-mode:vertical-rl] rotate-180 truncate text-[10px]">{t.name.replace(/^.*· /, '')}</span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {matrix.map((row) => {
            const byId = new Map(row.targets.map((c) => [c.target_id, c]));
            return (
              <tr key={row.probe_id}>
                <th className="num sticky left-0 bg-bg py-0.5 pr-3 text-left font-normal text-ink">
                  {row.probe_id} <span className="text-ink-3">{row.probe_region}</span>
                </th>
                {cols.map((id) => {
                  const c = byId.get(id);
                  return (
                    <td key={id} className="p-0.5">
                      <span className="num flex h-6 w-6 items-center justify-center rounded-[2px] text-[9.5px]" style={{ background: c ? zColor(c.z, c.ok) : 'transparent', color: c && (Math.abs(c.z) >= 3 || !c.ok) ? '#fff' : 'var(--ink-2)', outline: c && !c.ok ? '1px solid var(--p-severe)' : undefined }} title={c ? `${row.probe_id} → ${id}\nTTFB ${fmt(c.ttfb_ms, 0)} ms · z ${fmt(c.z)} · ${c.ok ? 'ok' : 'FAILING'}` : 'not measured'}>
                        {c ? (c.ok ? fmt(c.z, 1) : '×') : '·'}
                      </span>
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}