import Link from 'next/link';
import { Empty, PNum, StatusDot } from '@/components/ui/primitives';
import { fmt, fmtInt, fmtMs, fmtPct } from '@/lib/format';
import { Time } from '@/lib/time';
import type { CountryTargetRow, LatencyPair, Probe, TargetRow } from '@/lib/types';

export function TargetsTable({ targets, showCategory = false }: { targets: (TargetRow | CountryTargetRow)[]; showCategory?: boolean }) {
  if (!targets.length) return <Empty>No target anchored in this scope.</Empty>;
  const sorted = [...targets].sort((a, b) => b.pressure - a.pressure);
  return (
    <div className="scroll-x -mx-3 px-3">
      <table className="tbl">
        <thead>
          <tr>
            <th>Target</th>
            {showCategory && <th className="hidden sm:table-cell">Category</th>}
            <th className="r">Pressure</th>
            <th className="r">OK 1h</th>
            <th className="r hidden sm:table-cell">TTFB p50</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((t) => (
            <tr key={t.target_id}>
              <td>
                <span className="text-ink">{t.name}</span> <span className="num text-[10.5px] text-ink-3">{t.target_id}</span>
              </td>
              {showCategory && <td className="hidden text-ink-2 sm:table-cell">{'category' in t ? t.category : '—'}</td>}
              <td className="r">
                <PNum value={t.pressure} />
              </td>
              <td className="num r" style={{ color: t.ok_ratio_1h < 0.98 ? 'var(--p-high)' : 'var(--ink)' }}>
                {fmtPct(t.ok_ratio_1h, 1)}
              </td>
              <td className="num r hidden text-ink-2 sm:table-cell">{fmtMs(t.ttfb_ms_median)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function ProbesTable({ probes, compact = false }: { probes: Probe[]; compact?: boolean }) {
  if (!probes.length) return <Empty>No probe in this scope — pressure here is the destination view only.</Empty>;
  return (
    <div className="scroll-x -mx-3 px-3">
      <table className="tbl">
        <thead>
          <tr>
            <th>Probe</th>
            <th>Status</th>
            <th className="hidden md:table-cell">Location</th>
            <th className="hidden sm:table-cell">Provider</th>
            <th className="r">ASN</th>
            {!compact && (
              <>
                <th className="r hidden sm:table-cell">Meas./h</th>
                <th className="r hidden md:table-cell">Uptime 24h</th>
                <th className="r hidden lg:table-cell">Clock</th>
                <th className="hidden lg:table-cell">Version</th>
                <th className="hidden md:table-cell">Capabilities</th>
              </>
            )}
            <th className="r">Last seen</th>
          </tr>
        </thead>
        <tbody>
          {probes.map((p) => (
            <tr key={p.probe_id}>
              <td>
                <span className="num text-ink">{p.probe_id}</span>
                <span className="ml-2 hidden text-ink-2 xl:inline">{p.name}</span>
              </td>
              <td>
                <StatusDot status={p.status} />
              </td>
              <td className="hidden text-ink-2 md:table-cell">
                {p.city}, {p.country} ·{' '}
                <Link href={`/internet/${p.region}`} className="hover:text-accent">
                  {p.region}
                </Link>
              </td>
              <td className="hidden text-ink-2 sm:table-cell">{p.provider}</td>
              <td className="num r">
                <Link href={`/asn/${p.asn}`} className="hover:text-accent">
                  {p.asn}
                </Link>
              </td>
              {!compact && (
                <>
                  <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(p.measurements_1h)}</td>
                  <td className="num r hidden md:table-cell" style={{ color: p.uptime_24h < 0.99 ? 'var(--warn)' : 'var(--ink)' }}>
                    {fmtPct(p.uptime_24h, 1)}
                  </td>
                  <td className="num r hidden text-ink-2 lg:table-cell" style={{ color: Math.abs(p.clock_offset_ms) > 50 ? 'var(--warn)' : undefined }}>
                    {p.clock_offset_ms > 0 ? '+' : ''}
                    {p.clock_offset_ms} ms
                  </td>
                  <td className="num hidden text-ink-2 lg:table-cell">{p.version}</td>
                  <td className="hidden text-[11px] text-ink-3 md:table-cell">{p.capabilities.join(' · ')}</td>
                </>
              )}
              <td className="num r text-ink-2">
                <Time ts={p.last_seen} style="time" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function LatencyMatrixTable({ rows, highlight }: { rows: LatencyPair[]; highlight?: string }) {
  if (!rows.length) return <Empty>No inter-region latency pairs for this scope.</Empty>;
  return (
    <div className="scroll-x -mx-3 px-3">
      <table className="tbl">
        <thead>
          <tr>
            <th>From</th>
            <th>To</th>
            <th className="r">RTT</th>
            <th className="r hidden sm:table-cell">Baseline</th>
            <th className="r">Δ</th>
            <th className="r hidden sm:table-cell">TTFB</th>
            <th className="r">Loss</th>
            <th className="r">z</th>
            <th className="r hidden md:table-cell">Pairs</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((m) => {
            const d = m.rtt_ms - m.rtt_ms_baseline;
            return (
              <tr key={`${m.from}-${m.to}`}>
                <td className={m.from === highlight ? 'text-ink' : 'text-ink-2'}>
                  <Link href={`/internet/${m.from}`} className="hover:text-accent">
                    {m.from}
                  </Link>
                </td>
                <td className={m.to === highlight ? 'text-ink' : 'text-ink-2'}>
                  <Link href={`/internet/${m.to}`} className="hover:text-accent">
                    {m.to}
                  </Link>
                </td>
                <td className="num r">{fmtMs(m.rtt_ms, 1)}</td>
                <td className="num r hidden text-ink-2 sm:table-cell">{fmtMs(m.rtt_ms_baseline, 1)}</td>
                <td className="num r" style={{ color: d > 5 ? 'var(--p-stressed)' : d < -5 ? 'var(--p-calm)' : 'var(--ink-2)' }}>
                  {d > 0 ? '+' : ''}
                  {fmt(d, 1)}
                </td>
                <td className="num r hidden text-ink-2 sm:table-cell">{fmtMs(m.ttfb_ms)}</td>
                <td className="num r" style={{ color: m.loss_pct >= 1 ? 'var(--p-high)' : 'var(--ink)' }}>
                  {fmt(m.loss_pct)} %
                </td>
                <td className="num r" style={{ color: Math.abs(m.z) >= 3 ? 'var(--p-high)' : Math.abs(m.z) >= 1.5 ? 'var(--p-elevated)' : 'var(--ink)' }}>
                  {fmt(m.z)}
                </td>
                <td className="num r hidden text-ink-2 md:table-cell">{fmtInt(m.pairs)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export function LinkList({ items, hrefFor, label }: { items: { key: string; name: string; pressure: number; sub?: string }[]; hrefFor: (k: string) => string; label: string }) {
  if (!items.length) return <Empty>No {label} in this scope.</Empty>;
  return (
    <ul className="divide-y divide-line">
      {[...items]
        .sort((a, b) => b.pressure - a.pressure)
        .map((i) => (
          <li key={i.key} className="flex items-baseline justify-between gap-3 py-1.5 text-[13px]">
            <Link href={hrefFor(i.key)} className="truncate text-ink hover:text-accent">
              {i.name}
              {i.sub && <span className="num ml-2 text-[10.5px] text-ink-3">{i.sub}</span>}
            </Link>
            <PNum value={i.pressure} />
          </li>
        ))}
    </ul>
  );
}