'use client';

import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import { Bar, Section, Stat } from '@/components/ui/primitives';
import { fmt, fmtInt, fmtMs, fmtPct } from '@/lib/format';
import { Time, useTime } from '@/lib/time';
import type { Hop, Probe, RoutePair, RouteResponse, Target } from '@/lib/types';

const HASH_COLORS = ['#5B8DEF', '#E9C46A', '#4CC9F0', '#B497F0', '#F4A261', '#7FB77E', '#E76F51', '#F72585'];

function AsnChips({ path, other, label }: { path: number[]; other: number[]; label: string }) {
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      <span className="label mr-1">{label}</span>
      {path.map((asn, i) => {
        const inOther = other.includes(asn);
        return (
          <span key={`${asn}-${i}`} className="inline-flex items-center gap-1">
            <Link href={`/asn/${asn}`} className={`num rounded-[3px] border px-1.5 py-0.5 text-[11px] ${inOther ? 'border-line text-ink hover:border-line-2' : 'border-warn/60 bg-[rgba(233,196,106,0.1)] text-warn'}`}>
              AS{asn}
            </Link>
            {i < path.length - 1 && <span className="text-ink-3">›</span>}
          </span>
        );
      })}
    </div>
  );
}

function HopList({ hops, diffIps, kind, title, total, hash, meta }: { hops: Hop[]; diffIps: Set<string>; kind: 'added' | 'removed'; title: string; total?: number | null; hash: string; meta?: React.ReactNode }) {
  return (
    <div className="min-w-0">
      <div className="mb-2 flex items-baseline justify-between gap-2">
        <h3 className="text-[13px] font-medium text-ink">{title}</h3>
        <span className="num text-[10.5px] text-ink-3">
          {hash.slice(0, 12)} · {hops.length} hops{total != null ? ` · ${fmtMs(total, 1)}` : ''}
        </span>
      </div>
      {meta && <p className="num mb-2 text-[11px] text-ink-3">{meta}</p>}
      <ol className="divide-y divide-line border border-line">
        {hops.map((h) => {
          const flagged = diffIps.has(h.ip);
          return (
            <li key={`${h.n}-${h.ip}`} className={`grid grid-cols-[28px_minmax(0,1fr)_auto] items-baseline gap-x-3 px-2 py-1.5 text-[12px] ${flagged ? (kind === 'added' ? 'bg-[rgba(231,111,81,0.10)]' : 'bg-[rgba(76,201,240,0.08)]') : ''}`}>
              <span className="num text-ink-3">{h.n}</span>
              <span className="min-w-0">
                <span className={`num ${h.private ? 'text-ink-3' : 'text-ink'}`}>{h.ip}</span>
                {h.asn != null ? (
                  <Link href={`/asn/${h.asn}`} className="ml-2 text-ink-2 hover:text-accent">
                    AS{h.asn} <span className="hidden text-ink-3 sm:inline">{h.asn_name}</span>
                  </Link>
                ) : (
                  <span className="ml-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">{h.private ? 'private' : 'unknown'}</span>
                )}
                {flagged && <span className={`ml-2 text-[10px] uppercase tracking-[0.1em] ${kind === 'added' ? 'text-high' : 'text-calm'}`}>{kind}</span>}
              </span>
              <span className="num text-ink-2">{h.rtt_ms == null ? '*' : fmtMs(h.rtt_ms, 1)}</span>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

export function RouteExplorer({ pairs, probes, targets, initialPair, initialRoute }: { pairs: RoutePair[]; probes: Probe[]; targets: Target[]; initialPair: RoutePair | null; initialRoute: RouteResponse | null }) {
  const [probe, setProbe] = useState(initialPair?.probe_id ?? '');
  const [target, setTarget] = useState(initialPair?.target_id ?? '');
  const [route, setRoute] = useState<RouteResponse | null>(initialRoute);
  const [err, setErr] = useState<{ key: string; message: string } | null>(null);
  const pairKey = `${probe}|${target}`;
  const routeMatches = Boolean(route && route.probe.probe_id === probe && route.target.target_id === target);
  const errMsg = err && err.key === pairKey ? err.message : null;
  const loading = Boolean(probe && target) && !routeMatches && !errMsg;
  const { format } = useTime();

  const targetName = useMemo(() => new Map(targets.map((t) => [t.target_id, t.name])), [targets]);
  const probeName = useMemo(() => new Map(probes.map((p) => [p.probe_id, p.name])), [probes]);
  const targetsForProbe = useMemo(() => {
    const ids = new Set(pairs.filter((p) => p.probe_id === probe).map((p) => p.target_id));
    return targets.filter((t) => ids.has(t.target_id));
  }, [pairs, probe, targets]);
  const probeIds = useMemo(() => [...new Set(pairs.map((p) => p.probe_id))], [pairs]);

  useEffect(() => {
    if (!probe || !target || routeMatches) return;
    const ctrl = new AbortController();
    fetch(`/api/v1/routes?probe=${encodeURIComponent(probe)}&target=${encodeURIComponent(target)}`, { signal: ctrl.signal })
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(r.status === 404 ? 'No traceroute sampled for this pair' : `API ${r.status}`))))
      .then((d: RouteResponse) => setRoute(d))
      .catch((e: Error) => {
        if (e.name !== 'AbortError') setErr({ key: `${probe}|${target}`, message: e.message });
      });
    return () => ctrl.abort();
  }, [probe, target, routeMatches]);

  const hashColor = useMemo(() => {
    const m = new Map<string, string>();
    const all = [...(route?.route_share_7d.map((r) => r.route_hash) ?? []), ...(route?.history_24h.map((h) => h.route_hash) ?? [])];
    for (const h of all) if (!m.has(h)) m.set(h, HASH_COLORS[m.size % HASH_COLORS.length]!);
    return m;
  }, [route]);

  const added = new Set(route?.diff.added.map((h) => h.ip) ?? []);
  const removed = new Set(route?.diff.removed.map((h) => h.ip) ?? []);

  return (
    <div>
      <div className="grid grid-cols-[minmax(0,1fr)] gap-3 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_auto]">
        <label className="block min-w-0">
          <span className="label">Probe</span>
          <select
            value={probe}
            onChange={(e) => {
              setProbe(e.target.value);
              const first = pairs.find((p) => p.probe_id === e.target.value);
              if (first && !pairs.some((p) => p.probe_id === e.target.value && p.target_id === target)) setTarget(first.target_id);
            }}
            className="mt-1 h-9 w-full rounded-[4px] border border-line bg-panel px-2 text-[13px] text-ink"
          >
            {probeIds.map((id) => (
              <option key={id} value={id}>
                {id} — {probeName.get(id) ?? ''}
              </option>
            ))}
          </select>
        </label>
        <label className="block min-w-0">
          <span className="label">Target</span>
          <select value={target} onChange={(e) => setTarget(e.target.value)} className="mt-1 h-9 w-full rounded-[4px] border border-line bg-panel px-2 text-[13px] text-ink">
            {targetsForProbe.map((t) => {
              const pr = pairs.find((p) => p.probe_id === probe && p.target_id === t.target_id);
              return (
                <option key={t.target_id} value={t.target_id}>
                  {t.name} ({t.hostname}){pr && pr.changed_24h ? ` — ${pr.changed_24h} changes 24h` : ''}
                </option>
              );
            })}
          </select>
        </label>
        <div className="flex items-end">
          <p className="num text-[11px] text-ink-3">
            {fmtInt(pairs.length)} sampled pairs · {fmtInt(pairs.filter((p) => !p.stable).length)} unstable
          </p>
        </div>
      </div>

      <div className="mt-4 flex flex-wrap gap-1.5" aria-label="Changed pairs">
        {[...pairs]
          .sort((a, b) => b.changed_24h - a.changed_24h)
          .slice(0, 10)
          .map((p) => {
            const active = p.probe_id === probe && p.target_id === target;
            return (
              <button
                key={`${p.probe_id}-${p.target_id}`}
                type="button"
                onClick={() => {
                  setProbe(p.probe_id);
                  setTarget(p.target_id);
                }}
                className={`num rounded-[3px] border px-2 py-1 text-[11px] ${active ? 'border-line-2 bg-panel-2 text-ink' : 'border-line text-ink-2 hover:text-ink'}`}
              >
                {p.probe_id} → {targetName.get(p.target_id)?.replace(/ · .*/, '') ?? p.target_id}
                <span className={p.changed_24h ? 'ml-1.5 text-warn' : 'ml-1.5 text-ink-3'}>{p.changed_24h ? `${p.changed_24h}Δ` : 'stable'}</span>
              </button>
            );
          })}
      </div>

      {errMsg && <p className="mt-6 text-[13px] text-warn">{errMsg}</p>}
      {loading && <p className="mt-6 text-[12px] text-ink-3">Loading traceroute…</p>}

      {route && !errMsg && (
        <div className={loading ? 'opacity-50' : ''}>
          <Section label="Comparison" className="mt-6">
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
              <Stat label="route" value={route.diff.changed ? <span className="text-high">changed</span> : <span className="text-normal">unchanged</span>} sub={`hop Δ ${route.diff.hop_delta >= 0 ? '+' : ''}${route.diff.hop_delta}`} />
              <Stat label="latency shift" value={<span style={{ color: route.diff.latency_shift_ms > 5 ? 'var(--p-stressed)' : undefined }}>{`${route.diff.latency_shift_ms >= 0 ? '+' : ''}${fmt(route.diff.latency_shift_ms, 1)} ms`}</span>} />
              <Stat label="added hops" value={fmtInt(route.diff.added.length)} />
              <Stat label="removed hops" value={fmtInt(route.diff.removed.length)} />
              <Stat label="baseline share 7d" value={fmtPct(route.baseline.share_7d)} />
            </div>
            <div className="mt-4 space-y-2">
              <AsnChips label="baseline path" path={route.diff.asn_path_baseline} other={route.diff.asn_path_current} />
              <AsnChips label="current path" path={route.diff.asn_path_current} other={route.diff.asn_path_baseline} />
            </div>
          </Section>

          <div className="grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-2">
            <HopList hops={route.baseline.hops} diffIps={removed} kind="removed" title="Baseline route" hash={route.baseline.route_hash} meta={<>dominant {fmtPct(route.baseline.share_7d)} of 7 d · first seen {format(route.baseline.first_seen, 'date')} · last seen {format(route.baseline.last_seen, 'short')}</>} />
            <HopList hops={route.current.hops} diffIps={added} kind="added" title="Current route" hash={route.current.route_hash} total={route.current.total_ms} meta={<>sampled {format(route.current.ts, 'short')} · {route.current.reached ? 'destination reached' : 'destination NOT reached'}</>} />
          </div>

          <Section label="24 h route fingerprints" right={<span>one cell per traceroute sample · colour = fingerprint</span>} className="mt-6">
            <div className="flex h-8 w-full gap-px overflow-hidden rounded-[3px]" role="img" aria-label="Route hash history">
              {route.history_24h.map((h, i) => (
                <span key={i} className="flex-1 min-w-[2px]" style={{ background: hashColor.get(h.route_hash) ?? '#3A4756' }} title={`${format(h.ts, 'short')} · ${h.route_hash.slice(0, 12)} · ${h.hop_count} hops · ${fmt(h.total_ms, 1)} ms`} />
              ))}
            </div>
            <div className="num mt-1 flex justify-between text-[10.5px] text-ink-3">
              <span>{route.history_24h[0] ? <Time ts={route.history_24h[0].ts} /> : ''}</span>
              <span>{route.history_24h.at(-1) ? <Time ts={route.history_24h.at(-1)!.ts} /> : ''}</span>
            </div>
          </Section>

          <Section label="7 d route share">
            <ul className="space-y-2">
              {route.route_share_7d.map((r) => (
                <li key={r.route_hash} className="grid grid-cols-[14px_minmax(0,1fr)_auto] items-center gap-3 text-[12px]">
                  <span className="size-3 rounded-[2px]" style={{ background: hashColor.get(r.route_hash) }} aria-hidden="true" />
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-baseline gap-x-3">
                      <span className="num text-ink">{r.route_hash.slice(0, 12)}</span>
                      <span className="num text-ink-2">{r.asn_path.map((a) => `AS${a}`).join(' › ')}</span>
                      {r.route_hash === route.baseline.route_hash && <span className="label">baseline</span>}
                      {r.route_hash === route.current.route_hash && <span className="label text-high">current</span>}
                    </div>
                    <Bar value={r.share * 100} color={hashColor.get(r.route_hash)} className="mt-1" />
                  </div>
                  <span className="num text-ink">{fmtPct(r.share)}</span>
                </li>
              ))}
            </ul>
          </Section>
        </div>
      )}
    </div>
  );
}