'use client';

import { useState } from 'react';
import { AnimatedNumber } from '@/components/ui/AnimatedNumber';
import { Sparkline } from '@/components/ui/primitives';
import { fmt, fmtDelta, fmtInt } from '@/lib/format';
import { useDegraded, useLive } from '@/lib/live';
import { levelById, pressureColor, trendArrow } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { GlobalPressure } from '@/lib/types';
import { ExplainPanel } from './ExplainPanel';

/** The instrument. SSR renders `initial`; afterwards the live slice drives it. Click → Explain (spec §44). */
export function Gauge({ initial }: { initial: GlobalPressure | null }) {
  const live = useLive((s) => s.global);
  const updates = useLive((s) => s.updates);
  const { degraded, frozenSince } = useDegraded();
  const [open, setOpen] = useState(false);
  const g = live ?? initial;

  if (!g) {
    return (
      <div className="py-10">
        <p className="label">Global Internet Pressure</p>
        <p className="num mt-2 text-[96px] leading-none text-ink-3">—</p>
        <p className="mt-3 text-sm text-warn">The pressure API is unreachable. This is our failure, not an Internet event.</p>
      </div>
    );
  }

  const color = pressureColor(g.level);
  const level = levelById(g.level);
  const dim = degraded ? 'opacity-50 saturate-50' : '';

  return (
    <div className="relative">
      {/* faint radial glow tinted by the current level — the only gradient on the site */}
      <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 -top-10 h-[360px] max-w-[560px] opacity-[0.22]" style={{ background: `radial-gradient(ellipse 60% 55% at 30% 45%, ${color}, transparent 70%)` }} />
      <p className="label relative">Global Internet Pressure</p>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={`group relative mt-1 flex flex-wrap items-baseline gap-x-5 gap-y-1 text-left ${dim}`}
        aria-label={`Global Internet Pressure ${fmt(g.pressure)}, ${level?.label ?? g.level}. Open explanation.`}
        aria-haspopup="dialog"
      >
        <AnimatedNumber
          value={g.pressure}
          digits={1}
          duration={updates > 0 ? 700 : 0}
          className="text-[112px] font-semibold leading-[0.9] tracking-[-0.045em] text-ink sm:text-[160px] lg:text-[184px]"
          aria-live="polite"
          aria-atomic="true"
        />
        <span className="flex flex-col gap-1">
          <span className="text-[22px] font-medium uppercase tracking-[0.18em] sm:text-[28px]" style={{ color }}>
            {level?.short ?? g.level}
          </span>
          <span className="num text-[18px] text-ink sm:text-[22px]">
            {trendArrow(g.trend, g.delta_1h)} {fmtDelta(g.delta_1h)} <span className="text-ink-3">/ 1h</span>
          </span>
        </span>
        <span className="absolute -bottom-5 left-0 text-[10.5px] uppercase tracking-[0.12em] text-ink-3 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">Click to explain →</span>
      </button>

      <div className={`relative mt-7 grid gap-x-8 gap-y-2 text-[12.5px] text-ink-2 sm:grid-cols-[auto_1fr] ${dim}`}>
        <div className="flex flex-wrap gap-x-6 gap-y-1">
          <span>
            <span className="label mr-2">velocity</span>
            <span className="num text-ink">{fmtDelta(g.velocity_per_h)}/h</span>
            <span className="num text-ink-3"> · {fmtDelta(g.acceleration_per_h2)}/h²</span>
          </span>
          <span>
            <span className="label mr-2">Δ24h</span>
            <span className="num text-ink">{fmtDelta(g.delta_24h)}</span>
          </span>
          <span>
            <span className="label mr-2">volatility</span>
            <span className="num text-ink">{fmt(g.volatility_1h)}</span>
          </span>
        </div>
        <div className="num sm:text-right">
          {fmtInt(g.coverage.probes_active)}
          <span className="text-ink-3">/{fmtInt(g.coverage.probes_total)}</span> probes · {fmtInt(g.coverage.probe_regions)} regions · {fmtInt(g.coverage.targets)} targets · {fmtInt(g.coverage.bgp_collectors)} collectors · confidence{' '}
          <span className="text-ink">{Math.round(g.confidence * 100)} %</span>
        </div>
      </div>

      <div className={`relative mt-4 flex items-end gap-4 ${dim}`}>
        <Sparkline values={g.sparkline_1h} width={320} height={44} color={color} className="w-full max-w-[420px]" />
        <span className="label whitespace-nowrap">1 h</span>
      </div>

      {degraded && (
        <p className="relative mt-3 text-[12px] text-warn">
          Frozen since <Time ts={frozenSince ?? g.ts} className="num" /> — instrument degraded, not an Internet event.
        </p>
      )}
      <p className="relative mt-2 text-[11px] text-ink-3">
        Engine <Time ts={g.ts} style="time" className="num" /> · baseline {fmt(g.coverage.baseline_days)} d · {fmtInt(g.coverage.measurements_5m)} measurements / 5 min
      </p>

      {open && <ExplainPanel global={g} onClose={() => setOpen(false)} />}
    </div>
  );
}