"use client";

import type { ExploreQuery, FacilityFilters } from "@dci/core";
import dynamic from "next/dynamic";
import Link from "next/link";
import { Skeleton } from "@/components/ui/skeleton";
import { fmtInt } from "@/lib/format";
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" /> });

/** Facility filters the /map endpoint understands, derived from the explore query. */
export function mapFiltersFor(q: ExploreQuery): FacilityFilters {
  const f: FacilityFilters = {};
  if (q.country) f.country = q.country;
  if (q.operator) f.operator = q.operator;
  if (q.metro) f.metro = q.metro;
  if (q.status) f.status = q.status;
  if (q.type) f.type = q.type;
  if (q.min_mw !== undefined) f.min_mw = q.min_mw;
  if (q.max_mw !== undefined) f.max_mw = q.max_mw;
  if (q.hyperscale) f.hyperscale = true;
  if (q.has_mw) f.has_mw = true;
  if (q.ai && q.ai !== "associated") f.ai = true;
  if (q.q) f.q = q.q;
  if (q.opened_from !== undefined) f.opened_from = q.opened_from;
  if (q.opened_to !== undefined) f.opened_to = q.opened_to;
  return f;
}

/**
 * Map view of the explore result. The canvas fetches /map with the same filters (server-side clustering), so what it
 * draws is the filtered set, not the current table page. Projects use the projects layer.
 */
export function ExploreMap({ query, total, degraded }: { query: ExploreQuery; total: number; degraded: boolean }) {
  const projects = query.entity === "projects";
  const filters = mapFiltersFor(query);
  const extra: Record<string, string | number | boolean | undefined> = projects ? { project_status: query.status, expected_from: query.expected_after, expected_to: query.expected_before, ai_evidence: query.ai && query.ai !== "any" ? query.ai : undefined } : { location_precision: query.location_precision, ai_evidence: query.ai && query.ai !== "any" ? query.ai : undefined };
  const sp = new URLSearchParams();
  for (const [k, v] of Object.entries({ ...filters, ...extra, layer: projects ? "projects" : undefined })) if (v !== undefined && v !== "" && v !== false) sp.set(k, v === true ? "1" : String(v));
  const href = routes.map(sp.toString() || undefined);
  return (
    <div>
      <div className="relative h-[360px] w-full overflow-hidden rounded-sm border border-hair bg-surface-2 sm:h-[480px]">
        <MapCanvas className="h-full w-full" filters={filters} layer={projects ? "projects" : "facilities"} extraQuery={extra} initialView={{ lng: 10, lat: 25, zoom: 1.4 }} />
      </div>
      <p className="mt-2 text-[11.5px] text-ink-3">
        <span className="figure">{fmtInt(total)}</span> {projects ? "project" : "facility"} points carry coordinates in this result{degraded ? " — the point cap (5 000) was hit, so the map shows clusters" : ""}. Hollow rings are city-level locations; {projects ? "projects are geocoded from their metro or city, never to a parcel" : "records without coordinates are listed in the table but not drawn"}.{" "}
        <Link href={href} className="underline decoration-hair-2 hover:text-ink">
          Open in the full map →
        </Link>
      </p>
    </div>
  );
}