'use client';

import Link from 'next/link';
import { Bar, ConfBar, Empty, StatusDot } from '@/components/ui/primitives';
import { fmt, fmtInt, fmtRatio } from '@/lib/format';
import { useLive } from '@/lib/live';
import { pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { Front } from '@/lib/types';

const DIR: Record<string, string> = { east: '→ E', west: '← W', north: '↑ N', south: '↓ S', northeast: '↗ NE', northwest: '↖ NW', southeast: '↘ SE', southwest: '↙ SW' };

/** Active Pressure Fronts (spec §20) — the signature feature, expressed as source → destination. */
export function Fronts({ initial }: { initial: Front[] | null }) {
  const live = useLive((s) => s.fronts);
  const fronts = live ?? initial ?? [];
  if (!fronts.length) return <Empty>No Pressure Front detected. Regions are not rising together.</Empty>;
  return (
    <ul className="divide-y divide-line">
      {fronts.map((f) => (
        <li key={f.id} className="grid gap-x-6 gap-y-2 py-3 md:grid-cols-[1fr_auto]">
          <div className="min-w-0">
            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
              <h3 className="text-[14px] font-medium text-ink">{f.name}</h3>
              <StatusDot status={f.status} />
              <span className="num text-[11px] text-ink-3">
                since <Time ts={f.since} style="time" />
              </span>
            </div>
            <p className="mt-1 text-[12.5px] text-ink-2">
              <Link href={`/internet/${f.from.region}`} className="text-ink hover:text-accent">
                {f.from.name}
              </Link>{' '}
              <span className="num text-ink-3">{DIR[f.direction] ?? f.direction}</span>{' '}
              <Link href={`/internet/${f.to.region}`} className="text-ink hover:text-accent">
                {f.to.name}
              </Link>
            </p>
            <dl className="num mt-2 grid grid-cols-3 gap-x-4 gap-y-1 text-[11.5px] text-ink-2 sm:grid-cols-6">
              <div>
                <dt className="label">latency</dt>
                <dd className="text-ink">+{fmt(f.observed.latency_pct, 0)} %</dd>
              </div>
              <div>
                <dt className="label">churn</dt>
                <dd className="text-ink">{fmtRatio(f.observed.churn_x)}</dd>
              </div>
              <div>
                <dt className="label">loss</dt>
                <dd className="text-ink">{fmt(f.observed.loss_pct)} %</dd>
              </div>
              <div>
                <dt className="label">pairs</dt>
                <dd className="text-ink">{fmtInt(f.observed.pairs)}</dd>
              </div>
              <div>
                <dt className="label">targets</dt>
                <dd className="text-ink">{fmtInt(f.observed.targets)}</dd>
              </div>
              <div>
                <dt className="label">route Δ</dt>
                <dd className="text-ink">{fmtInt(f.observed.route_changes)}</dd>
              </div>
            </dl>
          </div>
          <div className="flex items-center gap-6 md:flex-col md:items-end md:gap-2">
            <div className="text-right">
              <div className="label">intensity</div>
              <div className="num text-[26px] leading-none" style={{ color: pressureColor(f.intensity) }}>
                {fmt(f.intensity)}
              </div>
              <Bar value={f.intensity} className="mt-1 w-24" />
            </div>
            <ConfBar value={f.confidence} />
          </div>
        </li>
      ))}
    </ul>
  );
}