'use client';

import dynamic from 'next/dynamic';
import { useMemo, useState } from 'react';
import { LevelLegend } from '@/components/ui/primitives';
import { useLive } from '@/lib/live';
import type { Country, Front, Incident, LatencyPair, Probe, Region } from '@/lib/types';
import { ModeSelector } from './ModeSelector';
import { type MapMode } from './modes';

const WorldMap = dynamic(() => import('./WorldMap').then((m) => m.WorldMap), {
  ssr: false,
  loading: () => <div className="flex h-full w-full items-center justify-center bg-neutral text-[11px] text-ink-3">Loading map…</div>,
});

export interface MapData {
  regions: Region[] | null;
  countries: Country[] | null;
  probes: Probe[] | null;
  fronts: Front[] | null;
  incidents: Incident[] | null;
  matrix: LatencyPair[] | null;
}

/** Client island: the map itself is lazy-loaded (no SSR); live slices override the SSR data. */
export function MapIsland({ initial, height = 'h-[300px] sm:h-[420px] lg:h-[520px]', initialMode = 'pressure' }: { initial: MapData; height?: string; initialMode?: MapMode }) {
  const [mode, setMode] = useState<MapMode>(initialMode);
  const liveRegions = useLive((s) => s.regions);
  const liveFronts = useLive((s) => s.fronts);
  const liveIncidents = useLive((s) => s.incidents);
  const liveCountries = useLive((s) => s.countries);

  // Memoised so the map's data effect only re-runs when a real regional update arrived.
  const countries = useMemo(() => {
    if (!initial.countries) return null;
    if (!liveCountries) return initial.countries;
    const byCc = new Map(liveCountries.map((x) => [x.cc, x]));
    return initial.countries.map((c) => {
      const u = byCc.get(c.cc);
      return u ? { ...c, pressure: u.pressure, level: u.level, delta_1h: u.delta_1h } : c;
    });
  }, [initial.countries, liveCountries]);

  return (
    <div>
      <ModeSelector mode={mode} onChange={setMode} />
      <div className={`relative mt-2 w-full overflow-hidden rounded-[4px] border border-line bg-neutral ${height}`}>
        <WorldMap mode={mode} regions={liveRegions ?? initial.regions} countries={countries} probes={initial.probes} fronts={liveFronts ?? initial.fronts} incidents={liveIncidents ?? initial.incidents} matrix={initial.matrix} />
      </div>
      <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
        <LevelLegend compact />
        <span className="text-[10.5px] text-ink-3">{mode === 'probes' ? 'Arc thickness = |z| of the inter-region latency matrix' : mode === 'incidents' ? 'Markers = incidents with a geographic scope' : 'Countries coloured only where we hold measurements'}</span>
      </div>
    </div>
  );
}