"use client";

import { geoNaturalEarth1, geoPath } from "d3-geo";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import * as topojson from "topojson-client";
import type { Topology, GeometryCollection } from "topojson-specification";
import { cx } from "@/lib/format";
import { useNow } from "@/lib/stream";
import type { MarketsOverview } from "@/lib/types";

type Ex = MarketsOverview["exchanges"][number] & { breadth?: { median_change_percent: number | null } | null };

const STATE_FILL: Record<string, string> = { OPEN: "var(--positive)", PRE: "var(--warning)", POST: "var(--warning)", AUCTION: "var(--warning)", HALTED: "var(--negative)", CLOSED: "var(--stale)", UNKNOWN: "var(--stale)" };

const W = 960;
const H = 470;

/**
 * World Market Map: countries-110m (world-atlas) drawn with d3-geo Natural Earth; one marker per
 * exchange, coloured by session state, sized by whether it trades now. Time-aware: as the clock
 * moves, states come from the API (refreshed by the parent) and local times tick here.
 */
export function WorldMap({ exchanges, className }: { exchanges: Ex[]; className?: string }) {
  const [land, setLand] = useState<string | null>(null);
  const [hover, setHover] = useState<string | null>(null);
  const now = useNow(1000);
  const projection = useMemo(() => geoNaturalEarth1().scale(W / 6.1).translate([W / 2, H / 2 + 8]), []);
  const path = useMemo(() => geoPath(projection), [projection]);

  useEffect(() => {
    let alive = true;
    import("world-atlas/countries-110m.json")
      .then((mod) => {
        if (!alive) return;
        const topo = (mod.default ?? mod) as unknown as Topology<{ countries: GeometryCollection }>;
        const fc = topojson.feature(topo, topo.objects.countries);
        setLand(path(fc) ?? "");
      })
      .catch(() => setLand(""));
    return () => {
      alive = false;
    };
  }, [path]);

  const markers = useMemo(
    () =>
      exchanges
        .filter((e) => e.lat != null && e.lon != null)
        .map((e) => {
          const p = projection([e.lon!, e.lat!]);
          return p ? { e, x: p[0], y: p[1] } : null;
        })
        .filter((m): m is { e: Ex; x: number; y: number } => !!m),
    [exchanges, projection],
  );
  const open = exchanges.filter((e) => e.status.state === "OPEN").length;
  const hovered = markers.find((m) => m.e.id === hover);
  const timeIn = (tz: string) => {
    try {
      return new Intl.DateTimeFormat("en-GB", { timeZone: tz, hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).format(new Date(now || Date.now()));
    } catch {
      return "";
    }
  };
  return (
    <div className={cx("relative overflow-hidden rounded-md border border-rule bg-surface", className)}>
      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-rule px-3 py-2 text-[11px] text-ink-3">
        <span className="uppercase tracking-wide">
          World market map · <span className="text-ink-2">{open}</span> of {exchanges.length} venues trading now
        </span>
        <span className="flex items-center gap-3">
          <Legend color="var(--positive)" label="open" />
          <Legend color="var(--warning)" label="pre/post" />
          <Legend color="var(--stale)" label="closed" />
        </span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} className="block h-auto w-full" role="img" aria-label="World map of exchanges and their session state">
        {land != null ? <path d={land} fill="var(--map-land)" stroke="var(--map-stroke)" strokeWidth="0.6" /> : <rect width={W} height={H} fill="var(--surface-2)" />}
        {markers.map(({ e, x, y }) => {
          const isOpen = e.status.state === "OPEN";
          const fill = STATE_FILL[e.status.state] ?? "var(--stale)";
          return (
            <g key={e.id} transform={`translate(${x},${y})`} onMouseEnter={() => setHover(e.id)} onMouseLeave={() => setHover(null)} className="cursor-pointer">
              <Link href={`/exchanges/${e.id}`}>
                {isOpen && <circle r={9} fill={fill} opacity={0.18} className="live-dot" />}
                <circle r={isOpen ? 4.2 : 3} fill={fill} stroke="var(--surface)" strokeWidth="1" />
                <circle r={12} fill="transparent" />
              </Link>
            </g>
          );
        })}
      </svg>
      {hovered && (
        <div className="pointer-events-none absolute left-3 top-11 rounded-md border border-rule bg-surface/95 px-3 py-2 text-xs shadow-lg backdrop-blur">
          <div className="font-medium">{hovered.e.name}</div>
          <div className="text-ink-3">
            {hovered.e.city ?? hovered.e.country} · <span className="mono">{timeIn(hovered.e.timezone)}</span> local · <span className="uppercase">{hovered.e.status.state.toLowerCase()}</span>
            {hovered.e.status.isHoliday && hovered.e.status.holidayName ? ` · ${hovered.e.status.holidayName}` : ""}
          </div>
          {hovered.e.breadth?.median_change_percent != null && <div className="mono text-ink-2">median change {hovered.e.breadth.median_change_percent.toFixed(2)}%</div>}
        </div>
      )}
    </div>
  );
}

function Legend({ color, label }: { color: string; label: string }) {
  return (
    <span className="inline-flex items-center gap-1">
      <span className="inline-block h-2 w-2 rounded-full" style={{ background: color }} />
      {label}
    </span>
  );
}