"use client";

import type { CloudRegionSummary, DensityView, FacilityFilters, FacilityStatus, MapLayer, MapPoint, MapResponse, SearchHit, SearchResponse } from "@dci/core";
import { DENSITY_VIEWS, MAP_LAYERS, PIPELINE_STATUSES } from "@dci/core";
import { ChevronRight, List, Locate, PanelRightClose, PanelRightOpen, SlidersHorizontal } from "lucide-react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { FacilityFilterFields } from "@/components/facility-filters";
import type { FlyTarget, MapExtraQuery, MapView } from "@/components/map/map-canvas";
import { DensityLegend, DensityToggle, LAYER_HINT, ModesRail, TimeMachineControl } from "@/components/map/map-modes";
import { AiMark, Badge, ConfidenceBadge, FlagBadges, PrecisionBadge, StatusBadge, TypeBadge } from "@/components/ui/badge";
import { Button, IconButton } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { FilterChips, ToggleChip, type Chip } from "@/components/ui/filter-chips";
import { SearchInput } from "@/components/ui/search-input";
import { Sheet } from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import { StatusDot } from "@/components/ui/status-dot";
import { apiGet, clientApiBase } from "@/lib/api";
import { countryName, fmtInt, fmtMw, fmtPct } from "@/lib/format";
import { useDebounced, useMediaQuery } from "@/lib/hooks";
import { DENSITY_LABEL, MAP_LAYER_LABEL, PRECISION_LABEL, STATUS_LABEL, STATUS_SHORT, TYPE_LABEL } from "@/lib/labels";
import { countActiveFilters, describeFilters, filtersToQuery, parseFilters, removeFilter } from "@/lib/query";
import { routes } from "@/lib/routes";

const MapCanvas = dynamic(() => import("@/components/map/map-canvas").then((m) => m.MapCanvas), { ssr: false, loading: () => <Skeleton className="h-full w-full rounded-none" /> });

/* ------------------------------------------------------------------ URL state beyond FacilityFilters */

interface MapExtras {
  layer: MapLayer;
  density: DensityView | null;
  year: number | null;
  location_precision?: string;
  ai_evidence?: string;
  project_status?: string;
  expected_from?: number;
  expected_to?: number;
}

const PRECISION_GROUPS: Array<{ key: string; label: string; hint: string }> = [
  { key: "exact,parcel,street", label: "Precise", hint: "exact / parcel / street" },
  { key: "city,metro", label: "City / metro", hint: "placed at the city or metro point" },
  { key: "approximate,unknown", label: "Approximate", hint: "approximate or unknown" },
];
const AI_EVIDENCE = ["confirmed", "likely", "associated"] as const;
const STAGES: FacilityStatus[] = [...PIPELINE_STATUSES, "cancelled"];

function parseExtras(sp: URLSearchParams): MapExtras {
  const layer = sp.get("layer");
  const density = sp.get("density");
  const year = Number(sp.get("year"));
  const num = (k: string) => {
    const v = Number(sp.get(k));
    return sp.get(k) && Number.isFinite(v) ? v : undefined;
  };
  return {
    layer: (MAP_LAYERS as readonly string[]).includes(layer ?? "") ? (layer as MapLayer) : "facilities",
    density: (DENSITY_VIEWS as readonly string[]).includes(density ?? "") ? (density as DensityView) : null,
    year: sp.get("year") && Number.isFinite(year) && year > 1900 ? year : null,
    location_precision: sp.get("location_precision") ?? undefined,
    ai_evidence: sp.get("ai_evidence") ?? undefined,
    project_status: sp.get("project_status") ?? undefined,
    expected_from: num("expected_from"),
    expected_to: num("expected_to"),
  };
}

function extrasToQuery(x: MapExtras): MapExtraQuery {
  return { location_precision: x.location_precision, ai_evidence: x.ai_evidence, project_status: x.project_status, expected_from: x.expected_from, expected_to: x.expected_to };
}

const LEGEND: Array<{ tone: Parameters<typeof StatusDot>[0]["status"]; label: string; hollow?: boolean }> = [
  { tone: "operational", label: "Operational" },
  { tone: "construction", label: "Under construction" },
  { tone: "planned", label: "Planned / announced" },
  { tone: "permitting", label: "Permitting / approved" },
  { tone: "delayed", label: "Delayed" },
  { tone: "closed", label: "Cancelled / closed" },
  { tone: "rumored", label: "Rumored" },
];

/* ------------------------------------------------------------------ extra filter fields */

function ExtraFilterFields({ value, onChange, layer }: { value: MapExtras; onChange: (x: MapExtras) => void; layer: MapLayer }) {
  const csv = (s: string | undefined) => (s ? s.split(",").filter(Boolean) : []);
  const toggleCsv = (key: "ai_evidence" | "project_status", member: string) => {
    const cur = csv(value[key]);
    const next = cur.includes(member) ? cur.filter((x) => x !== member) : [...cur, member];
    onChange({ ...value, [key]: next.length ? next.join(",") : undefined });
  };
  const field = "figure h-9 w-full rounded-sm border border-hair-2 bg-surface px-2 text-[13px] outline-none focus:border-ink";
  return (
    <div className="flex flex-col">
      <fieldset className="border-t border-hair py-3">
        <legend className="label-caps mb-2 block w-full p-0">Location precision</legend>
        <div className="flex flex-wrap gap-1.5">
          {PRECISION_GROUPS.map((g) => (
            <ToggleChip key={g.key} active={value.location_precision === g.key} onClick={() => onChange({ ...value, location_precision: value.location_precision === g.key ? undefined : g.key })} dot={<span className={cn("inline-block size-[8px] rounded-full", g.key.startsWith("exact") ? "bg-ink-2" : "border-[1.5px] border-ink-3")} />}>
              {g.label}
            </ToggleChip>
          ))}
        </div>
        <p className="mt-1.5 text-[11px] text-ink-4">Hollow rings mark city / metro / approximate points — never an exact site.</p>
      </fieldset>
      <fieldset className="border-t border-hair py-3">
        <legend className="label-caps mb-2 block w-full p-0">AI evidence</legend>
        <div className="flex flex-wrap gap-1.5">
          {AI_EVIDENCE.map((a) => (
            <ToggleChip key={a} active={csv(value.ai_evidence).includes(a)} onClick={() => toggleCsv("ai_evidence", a)}>
              {a}
            </ToggleChip>
          ))}
        </div>
      </fieldset>
      <fieldset className={cn("border-t border-hair py-3", layer !== "projects" && layer !== "pipeline" && "opacity-80")}>
        <legend className="label-caps mb-2 block w-full p-0">Project stage</legend>
        <div className="flex flex-wrap gap-1.5">
          {STAGES.map((s) => (
            <ToggleChip key={s} active={csv(value.project_status).includes(s)} onClick={() => toggleCsv("project_status", s)} dot={<StatusDot status={s} size={7} />}>
              {STATUS_SHORT[s]}
            </ToggleChip>
          ))}
        </div>
      </fieldset>
      <fieldset className="border-t border-hair py-3">
        <legend className="label-caps mb-2 block w-full p-0">Expected opening</legend>
        <div className="flex items-center gap-2">
          <label className="flex-1">
            <span className="sr-only">Expected from</span>
            <input type="number" inputMode="numeric" min={2000} max={2045} placeholder="from" value={value.expected_from ?? ""} onChange={(e) => onChange({ ...value, expected_from: e.target.value ? Number(e.target.value) : undefined })} className={field} />
          </label>
          <span className="text-ink-4">–</span>
          <label className="flex-1">
            <span className="sr-only">Expected to</span>
            <input type="number" inputMode="numeric" min={2000} max={2045} placeholder="to" value={value.expected_to ?? ""} onChange={(e) => onChange({ ...value, expected_to: e.target.value ? Number(e.target.value) : undefined })} className={field} />
          </label>
        </div>
      </fieldset>
    </div>
  );
}

/* ------------------------------------------------------------------ page */

export function MapPage() {
  const router = useRouter();
  const sp = useSearchParams();
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const isWide = useMediaQuery("(min-width: 1180px)");

  const filters = useMemo(() => parseFilters(sp), [sp]);
  const extras = useMemo(() => parseExtras(sp), [sp]);
  const showCloud = sp.get("cr") === "1";
  const initialView = useMemo<MapView | undefined>(() => {
    const z = Number(sp.get("z"));
    const lat = Number(sp.get("lat"));
    const lng = Number(sp.get("lng"));
    return Number.isFinite(z) && Number.isFinite(lat) && Number.isFinite(lng) && sp.get("z") ? { zoom: z, lat, lng } : undefined;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [panel, setPanel] = useState(false); // mobile filter sheet
  const [inspector, setInspector] = useState(true); // desktop right inspector
  const [inspectorTab, setInspectorTab] = useState<"filters" | "details">("filters");
  const [draft, setDraft] = useState<FacilityFilters>(filters);
  const [draftX, setDraftX] = useState<MapExtras>(extras);
  const [synced, setSynced] = useState(filters);
  const [syncedX, setSyncedX] = useState(extras);
  if (synced !== filters) {
    setSynced(filters);
    setDraft(filters);
  }
  if (syncedX !== extras) {
    setSyncedX(extras);
    setDraftX(extras);
  }
  const [selected, setSelected] = useState<MapPoint | null>(null);
  const [selectedCloud, setSelectedCloud] = useState<CloudRegionSummary | null>(null);
  const [data, setData] = useState<MapResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [fly, setFly] = useState<FlyTarget | null>(null);
  const [legend, setLegend] = useState(false);

  // search box
  const [q, setQ] = useState(sp.get("q") ?? "");
  const dq = useDebounced(q.trim(), 180);
  const [hits, setHits] = useState<SearchHit[]>([]);
  const [hitsOpen, setHitsOpen] = useState(false);
  useEffect(() => {
    if (dq.length < 2) return;
    const ctrl = new AbortController();
    apiGet<SearchResponse>("/search", { q: dq }, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 6000 }).then((r) => {
      if (!ctrl.signal.aborted && r.ok) setHits(r.data.hits.filter((h) => h.meta && (typeof h.meta.lat === "number" || Array.isArray(h.meta.bbox))).concat(r.data.hits.filter((h) => !(h.meta && (typeof h.meta.lat === "number" || Array.isArray(h.meta.bbox))))).slice(0, 8));
    });
    return () => ctrl.abort();
  }, [dq]);

  /* URL writer: filters + extras via router, view via history.replaceState. */
  const writeUrl = useCallback(
    (f: FacilityFilters, x: MapExtras, extra?: Record<string, string | undefined>) => {
      const params = new URLSearchParams(filtersToQuery(f));
      if (x.layer !== "facilities") params.set("layer", x.layer);
      if (x.density) params.set("density", x.density);
      if (x.year !== null) params.set("year", String(x.year));
      for (const k of ["location_precision", "ai_evidence", "project_status"] as const) if (x[k]) params.set(k, x[k]!);
      for (const k of ["expected_from", "expected_to"] as const) if (x[k] !== undefined) params.set(k, String(x[k]));
      // the current view is kept in the URL by onViewChange (history.replaceState) — copy it forward
      const cur = new URLSearchParams(window.location.search);
      for (const k of ["z", "lat", "lng"]) {
        const v = cur.get(k);
        if (v !== null) params.set(k, v);
      }
      if (showCloud) params.set("cr", "1");
      if (extra) {
        for (const [k, val] of Object.entries(extra)) {
          if (val === undefined) params.delete(k);
          else params.set(k, val);
        }
      }
      const s = params.toString();
      router.replace(`${routes.map()}${s ? `?${s}` : ""}`, { scroll: false });
    },
    [router, showCloud],
  );
  const setExtras = useCallback((patch: Partial<MapExtras>) => writeUrl(filters, { ...extras, ...patch }), [writeUrl, filters, extras]);

  const onViewChange = useCallback((v: MapView) => {
    const params = new URLSearchParams(window.location.search);
    params.set("z", String(v.zoom));
    params.set("lat", String(v.lat));
    params.set("lng", String(v.lng));
    window.history.replaceState(window.history.state, "", `${window.location.pathname}?${params.toString()}`);
  }, []);

  const onData = useCallback((r: MapResponse | null, err?: string) => {
    setData(r);
    setError(r ? null : (err ?? "unavailable"));
  }, []);

  const onSelect = useCallback((p: MapPoint) => {
    setSelectedCloud(null);
    setSelected(p);
    setInspectorTab("details");
    setInspector(true);
  }, []);

  // hide mobile bottom nav while a sheet is open on the map
  useEffect(() => {
    const open = !isDesktop && (!!selected || !!selectedCloud || panel);
    if (open) document.body.setAttribute("data-hide-mobile-nav", "");
    else document.body.removeAttribute("data-hide-mobile-nav");
    return () => document.body.removeAttribute("data-hide-mobile-nav");
  }, [selected, selectedCloud, panel, isDesktop]);

  const activeExtras = [extras.location_precision, extras.ai_evidence, extras.project_status, extras.expected_from, extras.expected_to].filter((v) => v !== undefined).length;
  const active = countActiveFilters(filters) + activeExtras;
  const chips: Chip[] = describeFilters(filters, { status: STATUS_LABEL, type: TYPE_LABEL }).map((c) => ({ key: `${c.key}:${c.member ?? c.value}`, label: c.label, value: c.value, onRemove: () => writeUrl(removeFilter(filters, c), extras) }));
  if (extras.location_precision) chips.push({ key: "lp", label: "Precision", value: PRECISION_GROUPS.find((g) => g.key === extras.location_precision)?.label ?? extras.location_precision, onRemove: () => setExtras({ location_precision: undefined }) });
  if (extras.ai_evidence) chips.push({ key: "aie", label: "AI evidence", value: extras.ai_evidence.replace(/,/g, ", "), onRemove: () => setExtras({ ai_evidence: undefined }) });
  if (extras.project_status) chips.push({ key: "ps", label: "Stage", value: extras.project_status.split(",").map((s) => STATUS_SHORT[s as FacilityStatus] ?? s).join(", "), onRemove: () => setExtras({ project_status: undefined }) });
  if (extras.expected_from !== undefined || extras.expected_to !== undefined) chips.push({ key: "exp", label: "Expected", value: `${extras.expected_from ?? "…"}–${extras.expected_to ?? "…"}`, onRemove: () => setExtras({ expected_from: undefined, expected_to: undefined }) });
  if (extras.year !== null) chips.push({ key: "year", label: "Known open by", value: String(extras.year), onRemove: () => setExtras({ year: null }) });

  const pickHit = (h: SearchHit) => {
    setHitsOpen(false);
    setQ(h.title);
    const m = h.meta ?? {};
    if (Array.isArray(m.bbox) && m.bbox.length === 4) setFly({ bbox: m.bbox as [number, number, number, number], key: Date.now() });
    else if (typeof m.lat === "number" && typeof m.lng === "number") setFly({ center: [m.lng, m.lat], zoom: h.type === "facility" ? 13 : h.type === "country" ? 5 : 10, key: Date.now() });
    else if (h.type === "country") writeUrl({ ...filters, country: (m.iso2 as string | undefined) ?? filters.country }, extras);
    else if (h.type === "operator") writeUrl({ ...filters, operator: h.slug }, extras);
    else if (h.type === "metro") writeUrl({ ...filters, metro: h.slug }, extras);
    else writeUrl({ ...filters, q: h.title }, extras);
  };

  const total = data?.total ?? null;
  const yearCoverage = data?.yearCoverage ?? null;
  const densityMax = data?.density?.max ?? null;

  const statusLine = error ? "Data unavailable" : total === null ? "Loading…" : data?.mode === "density" ? `${fmtInt(total)} records · ${DENSITY_LABEL[data.density?.view ?? "facilities"].toLowerCase()}` : `${fmtInt(total)} ${extras.layer === "facilities" || extras.layer === "capacity" ? "facilities" : MAP_LAYER_LABEL[extras.layer].toLowerCase()}${data?.mode === "points" ? " in view" : ""}${data?.degraded ? " (clustered)" : ""}`;

  const facilityFields = (onChange: (n: FacilityFilters) => void, value: FacilityFilters, extraNode?: ReactNode) => (
    <FacilityFilterFields
      value={value}
      onChange={onChange}
      hide={["q"]}
      extra={
        <div className="mt-2 flex flex-wrap gap-1.5">
          <ToggleChip active={showCloud} onClick={() => writeUrl(value, extras, { cr: showCloud ? undefined : "1" })} dot={<span className="inline-block size-[9px] rounded-full border-2 border-accent" />}>
            Cloud regions overlay
          </ToggleChip>
          {extraNode}
        </div>
      }
    />
  );

  const legendPanel = (
    <div className="text-[11.5px]">
      <ul className="grid grid-cols-2 gap-x-4 gap-y-1">
        {LEGEND.map((l) => (
          <li key={l.label} className="inline-flex items-center gap-1.5 text-ink-2">
            <StatusDot status={l.tone} hollow={l.hollow} size={8} /> {l.label}
          </li>
        ))}
      </ul>
      <ul className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 border-t border-hair pt-2 text-ink-2">
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-flex items-end gap-[2px]" aria-hidden>
            <span className="inline-block size-[5px] rounded-full bg-ink-3" />
            <span className="inline-block size-[8px] rounded-full bg-ink-3" />
            <span className="inline-block size-[11px] rounded-full bg-ink-3" />
          </span>
          Size = known MW
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-block size-[10px] rounded-full border-[1.5px] border-ink-3" aria-hidden /> City / metro ring
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-block size-[8px] rotate-45 bg-accent" aria-hidden /> AI / HPC
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-block size-[9px] bg-st-construction" aria-hidden /> Project (stage colour)
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span aria-hidden className="inline-block border-x-[5px] border-b-[9px] border-x-transparent border-b-ink" /> Internet exchange
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-block size-[9px] rounded-full border-2 border-accent" aria-hidden /> Cloud region
        </li>
        <li className="inline-flex items-center gap-1.5">
          <span className="inline-flex size-[12px] items-center justify-center rounded-full bg-ink-3 text-[7px] text-white" aria-hidden>
            n
          </span>
          Cluster (count)
        </li>
      </ul>
      {extras.density && (
        <div className="mt-2 border-t border-hair pt-2">
          <DensityLegend density={extras.density} max={densityMax} />
        </div>
      )}
    </div>
  );

  const railW = isWide ? 176 : 56;
  const inspW = 340;
  const leftOffset = isDesktop ? railW + 12 : 0;
  const rightOffset = isDesktop && inspector ? inspW + 12 : 0;

  return (
    <div className="relative h-full w-full">
      <h1 className="sr-only">Global map of data center infrastructure</h1>
      <div className="absolute inset-0">
        <MapCanvas
          filters={filters}
          layer={extras.layer}
          density={extras.density ?? undefined}
          year={extras.year ?? undefined}
          extraQuery={extrasToQuery(extras)}
          showCloudRegions={showCloud}
          initialView={initialView}
          onViewChange={onViewChange}
          onData={onData}
          onSelect={onSelect}
          onSelectCloudRegion={(c) => {
            setSelected(null);
            setSelectedCloud(c);
            setInspectorTab("details");
            setInspector(true);
          }}
          flyTo={fly}
          paddingBottom={isDesktop ? 0 : 260}
        />
      </div>

      {/* ---------------------------------------------------------------- desktop left rail: modes · density · time machine */}
      {isDesktop && (
        <aside className="absolute bottom-3 left-3 top-3 z-[10] flex flex-col overflow-y-auto rounded-sm border border-hair bg-surface/95 backdrop-blur no-scrollbar" style={{ width: railW }} aria-label="Map modes and time machine">
          {isWide ? (
            <>
              <ModesRail layer={extras.layer} onChange={(l) => setExtras({ layer: l })} className="px-1.5 pb-1.5" />
              <DensityToggle density={extras.density} onChange={(d) => setExtras({ density: d })} className="border-t border-hair px-1.5 pb-1.5" />
              <TimeMachineControl year={extras.year} onChange={(y) => setExtras({ year: y })} coverage={yearCoverage} className="mt-auto border-t border-hair pb-2" />
            </>
          ) : (
            <div className="flex flex-col gap-0.5 p-1">
              {MAP_LAYERS.map((l) => (
                <button key={l} type="button" aria-pressed={l === extras.layer} title={`${MAP_LAYER_LABEL[l]} — ${LAYER_HINT[l]}`} onClick={() => setExtras({ layer: l })} className={cn("figure inline-flex h-9 w-full items-center justify-center rounded-sm text-[10.5px] font-medium uppercase", l === extras.layer ? "bg-ink text-paper" : "text-ink-2 hover:bg-surface-2")}>
                  {MAP_LAYER_LABEL[l].slice(0, 3)}
                </button>
              ))}
              <button type="button" aria-pressed={!!extras.density} title="Density" onClick={() => setExtras({ density: extras.density ? null : "facilities" })} className={cn("mt-1 inline-flex h-9 w-full items-center justify-center rounded-sm border-t border-hair text-[10.5px] font-medium uppercase", extras.density ? "bg-surface-3 text-ink" : "text-ink-2 hover:bg-surface-2")}>
                Dens
              </button>
            </div>
          )}
        </aside>
      )}

      {/* ---------------------------------------------------------------- desktop right inspector: filters · details */}
      {isDesktop && (
        <aside className={cn("absolute bottom-3 right-3 top-3 z-[10] flex flex-col rounded-sm border border-hair bg-surface/95 backdrop-blur transition-transform", !inspector && "translate-x-[calc(100%+12px)]")} style={{ width: inspW }} aria-label="Map inspector" aria-hidden={!inspector} id="map-inspector">
          <div className="flex items-center gap-1 border-b border-hair px-2 py-1.5">
            <div role="tablist" aria-label="Inspector" className="flex gap-0.5">
              {(["filters", "details"] as const).map((t) => (
                <button key={t} role="tab" type="button" aria-selected={inspectorTab === t} onClick={() => setInspectorTab(t)} className={cn("inline-flex h-8 items-center gap-1.5 rounded-sm px-2.5 text-[12.5px] font-medium", inspectorTab === t ? "bg-surface-3 text-ink" : "text-ink-3 hover:text-ink")}>
                  {t === "filters" ? "Filters" : "Details"}
                  {t === "filters" && active > 0 && <span className="figure rounded-xs bg-ink px-1 text-[10.5px] text-paper">{active}</span>}
                </button>
              ))}
            </div>
            <span className="figure ml-auto truncate text-[11px] text-ink-3">{statusLine}</span>
            <IconButton label="Collapse inspector" size="sm" onClick={() => setInspector(false)}>
              <PanelRightClose className="size-4" />
            </IconButton>
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
            {inspectorTab === "filters" ? (
              <>
                {active > 0 && (
                  <div className="mb-2 flex justify-end">
                    <Button size="xs" variant="ghost" onClick={() => writeUrl({}, { layer: extras.layer, density: extras.density, year: null })}>
                      Reset filters
                    </Button>
                  </div>
                )}
                {facilityFields((n) => writeUrl(n, extras), filters)}
                <ExtraFilterFields value={extras} onChange={(x) => writeUrl(filters, x)} layer={extras.layer} />
              </>
            ) : selected ? (
              <QuickProfile p={selected} onClose={() => setSelected(null)} />
            ) : selectedCloud ? (
              <CloudProfile c={selectedCloud} />
            ) : (
              <div className="text-[12.5px] text-ink-3">
                <p>Select a facility, project, IXP or cloud region on the map to inspect it here.</p>
                <p className="mt-3 text-[11.5px] text-ink-4">{LAYER_HINT[extras.layer]}.</p>
              </div>
            )}
          </div>
          <div className="flex items-center justify-between border-t border-hair px-3 py-2 text-[11.5px] text-ink-3">
            <Link href={`${routes.datacenters()}${filtersToQuery(filters) ? `?${filtersToQuery(filters)}` : ""}`} className="inline-flex items-center gap-1 hover:text-ink">
              <List className="size-3.5" /> Open as list
            </Link>
            <button type="button" onClick={() => setLegend((l) => !l)} aria-expanded={legend} className="inline-flex items-center gap-1 hover:text-ink">
              Legend <ChevronRight className={cn("size-3.5 transition-transform", legend && "rotate-90")} />
            </button>
          </div>
          {legend && <div className="border-t border-hair px-3 py-2.5 animate-fade-in">{legendPanel}</div>}
        </aside>
      )}
      {isDesktop && !inspector && (
        <div className="absolute right-3 top-3 z-[11]">
          <Button size="md" variant={active ? "primary" : "secondary"} onClick={() => setInspector(true)} className="h-10 bg-surface/95 backdrop-blur" aria-expanded={inspector} aria-controls="map-inspector">
            <PanelRightOpen className="size-4" strokeWidth={1.75} /> Inspector{active > 0 && <span className="figure ml-0.5 rounded-xs bg-paper/20 px-1 text-[11px]">{active}</span>}
          </Button>
        </div>
      )}

      {/* ---------------------------------------------------------------- top bar: search + chips (+ mobile modes) */}
      <div className="absolute top-3 z-[11] flex flex-col gap-2 transition-[left,right]" style={{ left: 12 + leftOffset, right: 12 + rightOffset }}>
        <div className="flex items-start gap-2">
          <div className="relative w-full max-w-[420px]">
            <SearchInput
              value={q}
              onChange={(v) => {
                setQ(v);
                setHitsOpen(true);
              }}
              onFocus={() => setHitsOpen(true)}
              onBlur={() => setTimeout(() => setHitsOpen(false), 120)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && hits[0]) pickHit(hits[0]);
                if (e.key === "Escape") setHitsOpen(false);
              }}
              placeholder="Search a place, operator or facility…"
              aria-label="Search the map"
              wrapperClassName="bg-surface/95 backdrop-blur"
              trailing={
                !isDesktop && (
                  <button type="button" onClick={() => setPanel(true)} aria-label={`Filters${active ? ` (${active} active)` : ""}`} className={cn("inline-flex h-10 min-w-10 items-center justify-center gap-1 rounded-xs px-2 text-[12px]", active ? "bg-ink text-paper" : "text-ink-2")}>
                    <SlidersHorizontal className="size-4" strokeWidth={1.75} />
                    {active > 0 && <span className="figure">{active}</span>}
                  </button>
                )
              }
            />
            {hitsOpen && dq.length >= 2 && hits.length > 0 && (
              <ul role="listbox" className="absolute inset-x-0 top-full mt-1 max-h-[50vh] overflow-y-auto rounded-sm border border-hair-2 bg-surface animate-fade-in">
                {hits.map((h) => (
                  <li key={`${h.type}:${h.id}`}>
                    <button type="button" role="option" aria-selected={false} onMouseDown={(e) => e.preventDefault()} onClick={() => pickHit(h)} className="flex min-h-11 w-full items-center gap-3 px-3 py-1.5 text-left hover:bg-surface-2">
                      <Badge tone="outline" size="xs" className="w-[78px] justify-center">
                        {h.type.replace("_", " ")}
                      </Badge>
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-[13px]">{h.title}</span>
                        {h.subtitle && <span className="block truncate text-[11px] text-ink-3">{h.subtitle}</span>}
                      </span>
                      <Locate className="size-3.5 text-ink-4" />
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
        {!isDesktop && <ModesRail layer={extras.layer} onChange={(l) => setExtras({ layer: l })} orientation="horizontal" className="-mx-3 px-3" />}
        {data && total === 0 && !error && (
          <p role="status" className="max-w-[420px] rounded-sm border border-hair bg-surface/95 px-3 py-2 text-[12px] text-ink-2 backdrop-blur animate-fade-in">
            {extras.layer === "projects" || extras.layer === "pipeline" ? (
              <>
                No project with published coordinates in this view — most projects carry a city-level location only.{" "}
                <Link href={routes.projects("view=table")} className="underline decoration-hair-2 hover:text-ink">
                  Browse the project list
                </Link>
                .
              </>
            ) : extras.year !== null ? (
              <>No facility with a known opening date on or before {extras.year} in this view — opening dates are published for a small share of facilities.</>
            ) : (
              <>Nothing published for the {MAP_LAYER_LABEL[extras.layer].toLowerCase()} layer in this view{active ? " with these filters" : ""}.</>
            )}
          </p>
        )}
        {(chips.length > 0 || showCloud) && (
          <FilterChips chips={chips} onReset={() => writeUrl({}, { layer: extras.layer, density: null, year: null })} className="[&>*]:bg-surface/95 [&>*]:backdrop-blur">
            {showCloud && (
              <button type="button" onClick={() => writeUrl(filters, extras, { cr: undefined })} className="inline-flex h-10 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm border border-accent/40 bg-surface px-2 text-[12px] text-ink sm:h-7">
                <span className="inline-block size-[8px] rounded-full border-2 border-accent" /> Cloud regions ×
              </button>
            )}
          </FilterChips>
        )}
      </div>

      {/* ---------------------------------------------------------------- bottom-left: count + legend (+ mobile time machine) */}
      <div className="absolute z-[10] flex flex-col items-start gap-1.5 transition-[left] bottom-[calc(3.5rem+env(safe-area-inset-bottom)+12px)] md:bottom-3 [body[data-hide-mobile-nav]_&]:bottom-3" style={{ left: 12 + leftOffset }}>
        {legend && !isDesktop && <div className="max-w-[calc(100vw-24px)] rounded-sm border border-hair bg-surface/95 p-2.5 backdrop-blur animate-fade-in">{legendPanel}</div>}
        {!isDesktop && extras.year !== null && (
          <div className="w-[min(360px,calc(100vw-24px))] rounded-sm border border-hair bg-surface/95 backdrop-blur">
            <TimeMachineControl year={extras.year} onChange={(y) => setExtras({ year: y })} coverage={yearCoverage} compact />
          </div>
        )}
        <div className="flex flex-wrap items-center gap-1.5">
          {!isDesktop && (
            <button type="button" onClick={() => setLegend((l) => !l)} aria-expanded={legend} className="inline-flex h-10 items-center gap-1.5 rounded-sm border border-hair bg-surface/95 px-2.5 text-[12px] text-ink-2 backdrop-blur hover:text-ink">
              <span className="inline-flex gap-[2px]">
                <StatusDot status="operational" size={6} />
                <StatusDot status="construction" size={6} />
                <StatusDot status="planned" size={6} />
              </span>
              Legend
            </button>
          )}
          <span className="figure inline-flex h-10 items-center rounded-sm border border-hair bg-surface/95 px-2.5 text-[12px] text-ink-2 backdrop-blur md:h-8" aria-live="polite">
            {statusLine}
          </span>
          {extras.year !== null && isDesktop && <span className="inline-flex h-8 items-center rounded-sm border border-accent/40 bg-surface/95 px-2.5 text-[12px] text-ink-2 backdrop-blur">Known open by <span className="figure ml-1 text-ink">{extras.year}</span>{yearCoverage !== null && <span className="ml-1.5 text-ink-4">· dates known for {fmtPct(yearCoverage, yearCoverage < 0.1 ? 1 : 0)}</span>}</span>}
        </div>
      </div>

      {/* ---------------------------------------------------------------- mobile filter sheet: filters + density + time machine */}
      {!isDesktop && (
        <Sheet
          open={panel}
          onClose={() => setPanel(false)}
          title="Filter the map"
          description={total !== null ? statusLine : undefined}
          heightVh={84}
          id="map-filters"
          footer={
            <div className="flex items-center justify-between gap-2">
              <Button
                variant="ghost"
                onClick={() => {
                  setDraft({});
                  setDraftX({ layer: draftX.layer, density: null, year: null });
                }}
              >
                Reset
              </Button>
              <Button
                variant="primary"
                onClick={() => {
                  writeUrl(draft, draftX);
                  setPanel(false);
                }}
              >
                Show results
              </Button>
            </div>
          }
        >
          <div className="-mx-1 mb-3 rounded-sm border border-hair">
            <TimeMachineControl year={draftX.year} onChange={(y) => setDraftX({ ...draftX, year: y })} coverage={yearCoverage} />
          </div>
          <div className="mb-3">
            <div className="label-caps mb-2">Density</div>
            <div className="flex flex-wrap gap-1.5">
              {DENSITY_VIEWS.map((d) => (
                <ToggleChip key={d} active={draftX.density === d} onClick={() => setDraftX({ ...draftX, density: draftX.density === d ? null : d })}>
                  {DENSITY_LABEL[d]}
                </ToggleChip>
              ))}
            </div>
          </div>
          {facilityFields(setDraft, draft)}
          <ExtraFilterFields value={draftX} onChange={setDraftX} layer={draftX.layer} />
        </Sheet>
      )}

      {/* ---------------------------------------------------------------- mobile detail sheets (swipeable) */}
      {!isDesktop && (
        <>
          <Sheet open={!!selected} onClose={() => setSelected(null)} modal={false} heightVh={48} width={380} title={selected?.n} description={selected ? [selected.o, selected.c ? countryName(selected.c) : null].filter(Boolean).join(" · ") : undefined}>
            {selected && <QuickProfile p={selected} />}
          </Sheet>
          <Sheet open={!!selectedCloud} onClose={() => setSelectedCloud(null)} modal={false} heightVh={40} width={380} title={selectedCloud ? `${selectedCloud.provider.name} · ${selectedCloud.code}` : undefined} description={selectedCloud?.name}>
            {selectedCloud && <CloudProfile c={selectedCloud} />}
          </Sheet>
        </>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ profiles */

function kindLabel(k: MapPoint["k"]): string {
  switch (k) {
    case "project":
      return "Project";
    case "ixp":
      return "Internet exchange";
    case "cloud_region":
      return "Cloud region";
    case "landing_station":
      return "Cable landing station";
    case "substation":
      return "Substation";
    case "power_plant":
      return "Power plant";
    default:
      return "Data center";
  }
}

function hrefFor(p: MapPoint): string {
  switch (p.k) {
    case "project":
      return routes.project(p.slug);
    case "ixp":
      return routes.ixp(p.slug);
    case "cloud_region":
      return routes.cloudRegion(p.slug);
    default:
      return routes.facility(p.slug);
  }
}

function QuickProfile({ p, onClose }: { p: MapPoint; onClose?: () => void }) {
  const imprecise = p.p === "city" || p.p === "metro" || p.p === "approximate" || p.p === "unknown";
  return (
    <div className="flex flex-col gap-3 text-[13px]">
      {onClose && (
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <div className="label-caps">{kindLabel(p.k)}</div>
            <div className="truncate text-[15px] font-semibold text-ink">{p.n}</div>
            {(p.o || p.c) && <div className="truncate text-[12px] text-ink-3">{[p.o, p.c ? countryName(p.c) : null].filter(Boolean).join(" · ")}</div>}
          </div>
          <Button size="xs" variant="ghost" onClick={onClose}>
            Clear
          </Button>
        </div>
      )}
      <div className="flex flex-wrap gap-1.5">
        <StatusBadge status={p.s} size="xs" />
        {p.k !== "project" && p.k !== "ixp" && <TypeBadge type={p.t} size="xs" />}
        {p.ai ? <AiMark /> : null}
        <FlagBadges isHyperscale={!!p.hs} />
        <PrecisionBadge precision={p.p} size="xs" />
        {p.rs === "campus" && (
          <Badge tone="outline" size="xs">
            Campus
          </Badge>
        )}
      </div>
      <dl className="grid grid-cols-3 gap-x-3 gap-y-2">
        <div>
          <dt className="label-caps">{p.k === "project" ? "Planned" : "Capacity"}</dt>
          <dd className="figure mt-0.5 text-[16px] font-medium">{p.mw === null || p.mw === undefined ? <span className="text-ink-4">—</span> : `${p.k === "project" ? "≈ " : ""}${fmtMw(p.mw)}`}</dd>
          {(p.mw === null || p.mw === undefined) && <dd className="text-[10.5px] text-ink-4">not published</dd>}
        </div>
        <div>
          <dt className="label-caps">Status</dt>
          <dd className="mt-0.5 inline-flex items-center gap-1.5">
            <StatusDot status={p.s} size={7} /> {STATUS_SHORT[p.s]}
          </dd>
        </div>
        <div>
          <dt className="label-caps">{p.y ? "Opened" : "Country"}</dt>
          <dd className="mt-0.5">{p.y ? <span className="figure">{p.y}</span> : <CountryFlag iso2={p.c} withName />}</dd>
        </div>
      </dl>
      <p className="text-[11.5px] text-ink-3">
        {PRECISION_LABEL[p.p]}
        {imprecise ? " — the ring marks the area, not a site" : ` · ${p.lat.toFixed(4)}, ${p.lng.toFixed(4)}`}
      </p>
      <div className="flex items-center gap-2">
        <Button href={hrefFor(p)} variant="primary" size="md" className="flex-1">
          Open {p.k === "project" ? "project" : p.k === "ixp" ? "exchange" : "profile"}
        </Button>
        {p.o && (
          <Button href={routes.search(p.o)} size="md" variant="secondary" className="max-w-[45%] truncate">
            {p.o}
          </Button>
        )}
      </div>
      <p className="text-[11px] text-ink-4">
        Confidence and per-field evidence: <ConfidenceBadge level="moderate" size="xs" className="align-middle" /> on the full profile (every figure opens its sources).
      </p>
    </div>
  );
}

function CloudProfile({ c }: { c: CloudRegionSummary }) {
  return (
    <div className="flex flex-col gap-3 text-[13px]">
      <div>
        <div className="label-caps">Cloud region</div>
        <div className="text-[15px] font-semibold text-ink">
          {c.provider.name} · <span className="figure">{c.code}</span>
        </div>
        <div className="text-[12px] text-ink-3">{c.name}</div>
      </div>
      <div className="flex flex-wrap gap-1.5">
        <Badge tone="outline" size="xs">
          {c.status}
        </Badge>
        {c.isSovereign && (
          <Badge tone="accent" size="xs">
            Sovereign
          </Badge>
        )}
        <PrecisionBadge precision={c.geoPrecision} size="xs" />
      </div>
      <dl className="grid grid-cols-2 gap-x-4 gap-y-2">
        <div>
          <dt className="label-caps">Location</dt>
          <dd className="mt-0.5 inline-flex items-center gap-1.5">
            <CountryFlag iso2={c.countryIso2} size={12} /> {c.city ?? countryName(c.countryIso2)}
          </dd>
        </div>
        <div>
          <dt className="label-caps">Availability zones</dt>
          <dd className="figure mt-0.5">{c.availabilityZones ?? "—"}</dd>
        </div>
      </dl>
      <p className="text-[11.5px] text-ink-3">Providers publish the metro, not the building — the point marks the market.</p>
      <Button href={routes.cloudRegion(c.slug)} variant="primary" size="md" className="w-full">
        Open region
      </Button>
    </div>
  );
}