'use client';

import Link from 'next/link';
import { Bar, Delta, LevelBadge, PNum } from '@/components/ui/primitives';
import { fmt, fmtInt } from '@/lib/format';
import { useLive } from '@/lib/live';
import { pressureColor } from '@/lib/pressure';
import type { ComponentId, Region } from '@/lib/types';

const COLS: ComponentId[] = ['routing', 'latency', 'dns', 'availability', 'http_tls', 'path'];
const SHORT: Record<string, string> = { routing: 'Rout', latency: 'Lat', dns: 'DNS', availability: 'Avail', http_tls: 'HTTP', path: 'Path' };

export function RegionsTable({ initial }: { initial: Region[] | null }) {
  const live = useLive((s) => s.regions);
  const regions = [...(live ?? initial ?? [])].sort((a, b) => b.pressure - a.pressure);
  if (!regions.length) return <p className="text-xs text-ink-3">Regions unavailable.</p>;
  return (
    <div className="scroll-x -mx-3 px-3">
      <table className="tbl">
        <thead>
          <tr>
            <th>Region</th>
            <th className="r">Pressure</th>
            <th className="hidden w-[12%] md:table-cell"></th>
            <th className="r">Δ1h</th>
            <th className="hidden lg:table-cell">Level</th>
            {COLS.map((c) => (
              <th key={c} className="r hidden md:table-cell">
                {SHORT[c]}
              </th>
            ))}
            <th className="r hidden sm:table-cell">Probes</th>
            <th className="r hidden sm:table-cell">Targets</th>
            <th className="r hidden lg:table-cell">Inc.</th>
            <th className="hidden lg:table-cell">Coverage</th>
          </tr>
        </thead>
        <tbody>
          {regions.map((r) => (
            <tr key={r.id}>
              <td>
                <Link href={`/internet/${r.id}`} className="text-ink hover:text-accent">
                  {r.name}
                </Link>
                <span className="ml-2 hidden text-[10.5px] text-ink-3 xl:inline">{r.continent}</span>
              </td>
              <td className="r">
                <PNum value={r.pressure} className="text-[15px]" />
              </td>
              <td className="hidden md:table-cell">
                <Bar value={r.pressure} />
              </td>
              <td className="r">
                <Delta value={r.delta_1h} trend={r.trend} />
              </td>
              <td className="hidden lg:table-cell">
                <LevelBadge level={r.level} size="xs" />
              </td>
              {COLS.map((c) => {
                const v = r.components[c];
                return (
                  <td key={c} className="num r hidden md:table-cell" style={{ color: v == null ? 'var(--ink-3)' : pressureColor(v) }} title={v == null ? 'No ASN attribution for this region' : undefined}>
                    {v == null ? '·' : fmt(v, 0)}
                  </td>
                );
              })}
              <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(r.probes)}</td>
              <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(r.targets)}</td>
              <td className="num r hidden sm:table-cell lg:table-cell" style={{ color: r.incidents ? 'var(--p-high)' : 'var(--ink-3)' }}>
                {fmtInt(r.incidents)}
              </td>
              <td className="hidden text-[11px] lg:table-cell" style={{ color: r.coverage_ok ? 'var(--ink-2)' : 'var(--warn)' }}>
                {r.coverage_ok ? r.role : 'weak'} · {Math.round(r.confidence * 100)} %
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}