"use client";

import type { MapPoint, MapResponse, ProjectSummary } from "@dci/core";
import dynamic from "next/dynamic";
import Link from "next/link";
import { useCallback, useState } from "react";
import { StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { fmtInt, fmtMw } from "@/lib/format";
import { PRECISION_LABEL } from "@/lib/labels";
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" /> });

/**
 * Projects MAP view: the shared canvas in `layer=projects` mode (square stage-coloured markers, hollow ring for
 * city-level points). Projects without published coordinates cannot be drawn — the caption says how many are missing
 * instead of guessing a location.
 */
export function ProjectsMapView({ items, total, projectStatus }: { items: ProjectSummary[]; total: number; projectStatus?: string }) {
  const [data, setData] = useState<MapResponse | null>(null);
  const [sel, setSel] = useState<MapPoint | null>(null);
  const onData = useCallback((r: MapResponse | null) => setData(r), []);
  const located = items.filter((p) => p.lat !== null && p.lng !== null).length;
  return (
    <div className="flex flex-col gap-2">
      <div className="relative h-[52vh] min-h-[320px] w-full overflow-hidden rounded-sm border border-hair bg-surface-2">
        <MapCanvas layer="projects" extraQuery={{ project_status: projectStatus }} onData={onData} onSelect={setSel} className="h-full w-full" />
        {sel && (
          <div className="absolute bottom-3 left-3 right-3 z-[5] flex flex-wrap items-center gap-2 rounded-sm border border-hair bg-surface/95 px-3 py-2 text-[12.5px] backdrop-blur sm:right-auto sm:max-w-[420px]">
            <StatusBadge status={sel.s} short size="xs" />
            <span className="min-w-0 flex-1 truncate font-medium text-ink">{sel.n}</span>
            <span className="figure text-ink-2">{sel.mw != null ? `≈ ${fmtMw(sel.mw)}` : "—"}</span>
            <span className="text-[11px] text-ink-3">{PRECISION_LABEL[sel.p]}</span>
            <Button href={sel.k === "project" ? routes.project(sel.slug) : routes.facility(sel.slug)} size="xs" variant="primary">
              Open
            </Button>
          </div>
        )}
      </div>
      <p className="text-[11.5px] text-ink-3">
        {data ? <>{fmtInt(data.total)} located {data.total === 1 ? "project" : "projects"} drawn</> : "Loading…"} · {fmtInt(located)} of the {fmtInt(items.length)} projects on this page have published coordinates{total > items.length ? ` (${fmtInt(total)} match in total)` : ""}. Square markers are coloured by stage; a hollow ring means a city-level location, never a site.{" "}
        <Link href={routes.map("layer=projects")} className="underline decoration-hair-2 hover:text-ink">
          Open in the full map
        </Link>
      </p>
    </div>
  );
}