"use client";

import type { DensityView, MapLayer, TimeMachine } from "@dci/core";
import { DENSITY_VIEWS, MAP_LAYERS } from "@dci/core";
import { Activity, Building2, Clock, Cloud, Cpu, Gauge, Grid2x2, Network, Pause, Play, Share2, Zap } from "lucide-react";
import { useEffect, useRef, useState, type ComponentType } from "react";
import { cn } from "@/components/ui/cn";
import { apiGet, clientApiBase } from "@/lib/api";
import { fmtPct } from "@/lib/format";
import { DENSITY_LABEL, MAP_LAYER_LABEL } from "@/lib/labels";

/* ------------------------------------------------------------------------------------------
   Map 2.0 controls: MODES rail (layer=), DENSITY toggle (density=), TIME MACHINE (year=).
   Pure presentational + URL callbacks; the page owns the state.
   ------------------------------------------------------------------------------------------ */

const LAYER_ICON: Record<MapLayer, ComponentType<{ className?: string; strokeWidth?: number }>> = {
  facilities: Building2,
  capacity: Gauge,
  projects: Activity,
  ai: Cpu,
  cloud: Cloud,
  ixps: Share2,
  connectivity: Network,
  power: Zap,
  pipeline: Grid2x2,
};

export const LAYER_HINT: Record<MapLayer, string> = {
  facilities: "Every indexed facility, coloured by status",
  capacity: "Facilities with a published MW figure, sized by capacity",
  projects: "Announced, permitted and under-construction projects (square markers)",
  ai: "Facilities and projects with AI / HPC evidence",
  cloud: "Public cloud regions (hollow accent circles) — providers publish the metro, not the building",
  ixps: "Internet exchange points (triangles)",
  connectivity: "Carrier hotels, IXPs and cloud on-ramps",
  power: "Utility-scale loads, grid connections and power events",
  pipeline: "Pipeline by lifecycle stage",
};

export function ModesRail({ layer, onChange, orientation = "vertical", className }: { layer: MapLayer; onChange: (l: MapLayer) => void; orientation?: "vertical" | "horizontal"; className?: string }) {
  const vertical = orientation === "vertical";
  return (
    <nav aria-label="Map modes" className={cn(vertical ? "flex flex-col" : "flex gap-1 overflow-x-auto no-scrollbar", className)}>
      {vertical && <div className="label-caps px-2 pb-1.5 pt-2">Modes</div>}
      {MAP_LAYERS.map((l) => {
        const Icon = LAYER_ICON[l];
        const active = l === layer;
        return (
          <button
            key={l}
            type="button"
            aria-pressed={active}
            title={LAYER_HINT[l]}
            onClick={() => onChange(l)}
            className={cn(
              "inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-sm text-[12.5px] font-medium transition-colors",
              vertical ? "h-9 w-full px-2 text-left" : "h-10 border px-2.5 sm:h-9",
              active ? (vertical ? "bg-ink text-paper" : "border-ink bg-ink text-paper") : vertical ? "text-ink-2 hover:bg-surface-2 hover:text-ink" : "border-hair-2 bg-surface/95 text-ink-2 backdrop-blur hover:text-ink",
            )}
          >
            <Icon className="size-4 shrink-0" strokeWidth={1.75} />
            <span className={vertical ? "truncate" : undefined}>{MAP_LAYER_LABEL[l]}</span>
          </button>
        );
      })}
    </nav>
  );
}

export function DensityToggle({ density, onChange, className }: { density: DensityView | null; onChange: (d: DensityView | null) => void; className?: string }) {
  return (
    <div className={className}>
      <div className="flex items-center justify-between px-2 pb-1.5 pt-2">
        <span className="label-caps">Density</span>
        {density && (
          <button type="button" onClick={() => onChange(null)} className="text-[11px] text-ink-3 hover:text-ink">
            Off
          </button>
        )}
      </div>
      <div className="flex flex-col">
        {DENSITY_VIEWS.map((d) => {
          const active = d === density;
          return (
            <button key={d} type="button" aria-pressed={active} onClick={() => onChange(active ? null : d)} className={cn("inline-flex h-8 w-full items-center gap-2 rounded-sm px-2 text-left text-[12px] transition-colors", active ? "bg-surface-3 text-ink" : "text-ink-2 hover:bg-surface-2 hover:text-ink")}>
              <span aria-hidden className={cn("inline-block size-[9px] rounded-[1px]", active ? (d === "known_mw" || d === "pipeline_mw" ? "bg-accent" : "bg-ink") : "border border-hair-2")} />
              <span className="truncate">{DENSITY_LABEL[d]}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/** Density legend: graduated grid from light to dark (or accent for MW views). */
export function DensityLegend({ density, max }: { density: DensityView; max: number | null }) {
  const mw = density === "known_mw" || density === "pipeline_mw";
  const fmt = (v: number) => (mw ? (v >= 1000 ? `${(v / 1000).toFixed(1)} GW` : `${Math.round(v)} MW`) : String(Math.round(v)));
  return (
    <div className="text-[11px] text-ink-2">
      <div className="mb-1 font-medium">{DENSITY_LABEL[density]} per cell</div>
      <div className="flex h-2 w-full overflow-hidden rounded-[1px]">
        {[0.06, 0.18, 0.3, 0.42, 0.55].map((o) => (
          <span key={o} className="flex-1" style={{ background: mw ? "var(--accent)" : "var(--ink)", opacity: o }} />
        ))}
      </div>
      <div className="figure mt-0.5 flex justify-between text-ink-3">
        <span>0</span>
        <span>{max !== null ? fmt(max) : "max"}</span>
      </div>
      <p className="mt-1 text-ink-4">{mw ? "Known published MW only — cells without a figure stay empty." : "Counts of indexed records per cell."}</p>
    </div>
  );
}

const THIS_YEAR = new Date().getUTCFullYear();

/**
 * Time machine (§20): year slider from earliestReliableYear to now, PLAY steps one year per tick, the caption states
 * the share of facilities whose opening date is known — so an early year is read as a lower bound, never as history.
 */
export function TimeMachineControl({ year, onChange, coverage, compact, className }: { year: number | null; onChange: (y: number | null) => void; coverage: number | null; compact?: boolean; className?: string }) {
  const [tm, setTm] = useState<TimeMachine | null>(null);
  const [playing, setPlaying] = useState(false);
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
  useEffect(() => {
    const ctrl = new AbortController();
    apiGet<TimeMachine>("/time-machine", undefined, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 8000 }).then((r) => {
      if (!ctrl.signal.aborted && r.ok) setTm(r.data);
    });
    return () => ctrl.abort();
  }, []);
  const min = tm?.earliestReliableYear ?? 1995;
  const max = THIS_YEAR;
  const y = year ?? max;

  useEffect(() => {
    if (!playing) {
      if (timer.current) clearInterval(timer.current);
      timer.current = null;
      return;
    }
    timer.current = setInterval(() => {
      if (y + 1 >= max) {
        setPlaying(false);
        onChange(null);
      } else onChange(y + 1);
    }, 800);
    return () => {
      if (timer.current) clearInterval(timer.current);
    };
  }, [playing, y, min, max, onChange]);

  const frame = tm?.frames.find((f) => f.year === y) ?? null;
  const cov = coverage ?? tm?.openingDateCoverage ?? null;

  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      <div className="flex items-center justify-between gap-2 px-2 pt-2">
        <span className="label-caps inline-flex items-center gap-1.5">
          <Clock className="size-3.5" strokeWidth={1.75} aria-hidden /> Time machine
        </span>
        {year !== null && (
          <button type="button" onClick={() => { setPlaying(false); onChange(null); }} className="text-[11px] text-ink-3 hover:text-ink">
            Now
          </button>
        )}
      </div>
      <div className="flex items-center gap-2 px-2">
        <button
          type="button"
          onClick={() => {
            if (!playing && year === null) onChange(min);
            setPlaying((p) => !p);
          }}
          aria-label={playing ? "Pause" : "Play through the years"}
          aria-pressed={playing}
          className="inline-flex size-9 shrink-0 items-center justify-center rounded-sm border border-hair-2 bg-surface text-ink-2 hover:text-ink sm:size-8"
        >
          {playing ? <Pause className="size-4" strokeWidth={1.75} /> : <Play className="size-4" strokeWidth={1.75} />}
        </button>
        <input
          type="range"
          min={min}
          max={max}
          step={1}
          value={y}
          aria-label="Year"
          aria-valuetext={`${y}`}
          onChange={(e) => {
            setPlaying(false);
            const v = Number(e.target.value);
            onChange(v >= max ? null : v);
          }}
          className="h-9 min-w-0 flex-1 accent-[var(--accent)] sm:h-6"
        />
        <span className="figure w-10 shrink-0 text-right text-[13px] font-medium text-ink">{y}</span>
      </div>
      {!compact && (
        <div className="px-2 pb-1 text-[11px] leading-snug text-ink-3">
          {year === null ? (
            <span>Drag or play to see facilities known open by a given year.</span>
          ) : (
            <span>
              Facilities known open by <span className="figure text-ink-2">{y}</span>
              {frame && frame.facilities > 0 ? <> · {frame.facilities.toLocaleString("en-US")} facilities{frame.knownMw ? `, ${frame.knownMw >= 1000 ? `${(frame.knownMw / 1000).toFixed(1)} GW` : `${Math.round(frame.knownMw)} MW`} known` : ""}</> : null}
            </span>
          )}
          {cov !== null && <span className="block text-ink-4">Opening date known for {fmtPct(cov, cov < 0.1 ? 1 : 0)} of facilities — earlier years are lower bounds.</span>}
        </div>
      )}
    </div>
  );
}