"use client";

import type { NearbyInfrastructure } from "@dci/core";
import Link from "next/link";
import { useEffect, useState } from "react";
import { EstimateMark, FlagBadges, PrecisionBadge, StatusBadge } from "@/components/ui/badge";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { SegmentedControl } from "@/components/ui/segmented";
import { Skeleton } from "@/components/ui/skeleton";
import { apiGet, clientApiBase } from "@/lib/api";
import { bestMw, fmtInt, fmtMw } from "@/lib/format";
import { isImprecise } from "@/lib/labels";
import { routes } from "@/lib/routes";

const RADII = [5, 10, 25, 50, 100] as const;
type Radius = (typeof RADII)[number];

function km(d: number): string {
  return d < 1 ? `${Math.round(d * 1000)} m` : `${d.toFixed(d < 10 ? 1 : 0)} km`;
}

function Group({ title, count, children, note }: { title: string; count: number; children?: React.ReactNode; note?: string }) {
  return (
    <div>
      <div className="mb-1 flex items-baseline gap-2">
        <h3 className="text-[13px] font-semibold text-ink">{title}</h3>
        <span className="figure text-[11.5px] text-ink-3">{fmtInt(count)}</span>
      </div>
      {count === 0 ? <p className="text-[12px] text-ink-3">{note ?? "None within this radius."}</p> : children}
    </div>
  );
}

/**
 * NEARBY INFRASTRUCTURE (§23): facilities, projects, IXPs, cloud regions and metros within a radius, from GET /nearby.
 * Wording is always "nearby" — proximity is a great-circle distance between published coordinates and never implies a
 * connection. Layers whose connectors do not exist yet (landing stations, substations, power plants) show the API note.
 */
export function NearbyInfrastructurePanel({ initial, center, excludeId }: { initial: NearbyInfrastructure | null; center: { lat: number; lng: number }; excludeId?: string }) {
  const [radius, setRadius] = useState<Radius>((initial?.radiusKm as Radius | undefined) && RADII.includes(initial!.radiusKm as Radius) ? (initial!.radiusKm as Radius) : 25);
  // results cached per radius; the server-provided payload seeds its own radius
  const [fetched, setFetched] = useState<Partial<Record<Radius, NearbyInfrastructure>>>({});
  const [error, setError] = useState<string | null>(null);
  const data: NearbyInfrastructure | null = initial && radius === initial.radiusKm ? initial : (fetched[radius] ?? null);
  const loading = !data && !error;

  useEffect(() => {
    if (data) return;
    const ctrl = new AbortController();
    apiGet<NearbyInfrastructure>("/nearby", { lat: center.lat, lng: center.lng, radius_km: radius }, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 10000 }).then((r) => {
      if (ctrl.signal.aborted) return;
      if (r.ok) {
        setFetched((f) => ({ ...f, [radius]: r.data }));
        setError(null);
      } else setError(r.error);
    });
    return () => ctrl.abort();
  }, [radius, center.lat, center.lng, data]);

  const facilities = (data?.facilities ?? []).filter((f) => f.id !== excludeId);
  const empty = ["landingStations", "substations", "powerPlants"] as const;
  const emptyLabels: Record<(typeof empty)[number], string> = { landingStations: "Cable landing stations", substations: "Substations", powerPlants: "Power plants" };

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <SegmentedControl label="Search radius" value={String(radius)} onChange={(v) => { setError(null); setRadius(Number(v) as Radius); }} options={RADII.map((r) => ({ value: String(r), label: `${r} km` }))} size="xs" />
        <span className="figure text-[12px] text-ink-3" aria-live="polite">
          {loading ? "Loading…" : error ? `Unavailable (${error})` : data ? `${fmtInt(facilities.length)} facilities · ${fmtInt(data.ixps.length)} IXPs · ${fmtInt(data.cloudRegions.length)} cloud regions · ${fmtInt(data.projects.length)} projects` : ""}
        </span>
        <Link href={routes.map(`lat=${center.lat.toFixed(4)}&lng=${center.lng.toFixed(4)}&z=${radius <= 10 ? 11 : radius <= 25 ? 9.5 : radius <= 50 ? 8.5 : 7.5}`)} className="ml-auto text-[12.5px] text-ink-3 hover:text-ink">
          Open on map →
        </Link>
      </div>

      {loading && !data ? (
        <Skeleton className="h-24" />
      ) : !data ? (
        <p className="rounded-sm border border-dashed border-hair-2 px-3 py-2.5 text-[12.5px] text-ink-3">Nearby infrastructure is unavailable right now.</p>
      ) : (
        <div className={cn("grid gap-5 md:grid-cols-2", loading && "opacity-60")}>
          <Group title="Nearby facilities" count={facilities.length}>
            <ul className="divide-y divide-hair">
              {facilities.slice(0, 12).map((n) => {
                const { mw, kind } = bestMw(n);
                return (
                  <li key={n.id} className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 py-2">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                        <Link href={routes.facility(n.slug)} className="truncate text-[13px] font-medium text-ink hover:text-accent hover:underline">
                          {n.name}
                        </Link>
                        <StatusBadge status={n.status} short size="xs" />
                        <FlagBadges isAi={n.isAi} isHyperscale={n.isHyperscale} />
                      </div>
                      <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-[11.5px] text-ink-3">
                        <span>{n.operator?.name ?? "Operator unknown"}</span>
                        {isImprecise(n.geoPrecision) && <PrecisionBadge precision={n.geoPrecision} size="xs" />}
                      </div>
                    </div>
                    <div className="flex flex-col items-end text-right">
                      <span className="figure text-[13px] font-medium text-ink">
                        {mw === null ? <span className="text-ink-4">—</span> : (
                          <>
                            {kind === "planned" && <EstimateMark className="mr-0.5 text-[11px]" />}
                            {fmtMw(mw)}
                          </>
                        )}
                      </span>
                      <span className="figure text-[11px] text-ink-3">{km(n.distanceKm)}</span>
                    </div>
                  </li>
                );
              })}
            </ul>
            {facilities.length > 12 && <p className="mt-1 text-[11.5px] text-ink-4">Showing 12 of {fmtInt(facilities.length)}.</p>}
          </Group>

          <div className="flex flex-col gap-5">
            <Group title="Nearby internet exchanges" count={data.ixps.length} note="No IXP with published coordinates within this radius.">
              <ul className="divide-y divide-hair">
                {data.ixps.slice(0, 8).map((x) => (
                  <li key={x.id} className="flex items-baseline justify-between gap-3 py-1.5 text-[13px]">
                    <Link href={routes.ixp(x.slug)} className="truncate text-ink hover:text-accent hover:underline">
                      {x.name}
                    </Link>
                    <span className="figure shrink-0 text-[11.5px] text-ink-3">
                      {x.networkCount !== null ? `${fmtInt(x.networkCount)} nets · ` : ""}
                      {km(x.distanceKm)}
                    </span>
                  </li>
                ))}
              </ul>
            </Group>
            <Group title="Nearby cloud regions" count={data.cloudRegions.length} note="No public cloud region is published for this area.">
              <ul className="divide-y divide-hair">
                {data.cloudRegions.slice(0, 8).map((c) => (
                  <li key={c.id} className="flex items-baseline justify-between gap-3 py-1.5 text-[13px]">
                    <span className="min-w-0 truncate">
                      <Link href={routes.cloudRegion(c.slug)} className="text-ink hover:text-accent hover:underline">
                        {c.provider.name} <span className="figure text-ink-3">{c.code}</span>
                      </Link>
                    </span>
                    <span className="figure shrink-0 text-[11.5px] text-ink-3">{km(c.distanceKm)}</span>
                  </li>
                ))}
              </ul>
            </Group>
            <Group title="Nearby projects" count={data.projects.length} note="No located project within this radius (most projects carry city-level coordinates only).">
              <ul className="divide-y divide-hair">
                {data.projects.slice(0, 8).map((p) => (
                  <li key={p.id} className="flex items-baseline justify-between gap-3 py-1.5 text-[13px]">
                    <span className="min-w-0 inline-flex items-center gap-1.5 truncate">
                      <Link href={routes.project(p.slug)} className="truncate text-ink hover:text-accent hover:underline">
                        {p.name}
                      </Link>
                      <StatusBadge status={p.status} short size="xs" />
                    </span>
                    <span className="figure shrink-0 text-[11.5px] text-ink-3">
                      {p.plannedMw !== null ? `≈ ${fmtMw(p.plannedMw)} · ` : ""}
                      {km(p.distanceKm)}
                    </span>
                  </li>
                ))}
              </ul>
            </Group>
            {data.metros.length > 0 && (
              <Group title="Markets" count={data.metros.length}>
                <ul className="flex flex-wrap gap-1.5">
                  {data.metros.map((m) => (
                    <li key={m.id}>
                      <Link href={routes.market(m.slug)} className="inline-flex h-7 items-center gap-1.5 rounded-xs border border-hair px-2 text-[12px] text-ink-2 hover:text-ink">
                        <CountryFlag iso2={m.countryIso2} size={11} /> {m.name} <span className="figure text-ink-4">{km(m.distanceKm)}</span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </Group>
            )}
          </div>
        </div>
      )}

      {data && (
        <div className="grid gap-2 border-t border-hair pt-3 sm:grid-cols-3">
          {empty.map((k) => (
            <div key={k} className="text-[12px]">
              <div className="flex items-baseline gap-2">
                <span className="font-medium text-ink-2">{emptyLabels[k]}</span>
                <span className="figure text-ink-3">{fmtInt(data[k].length)}</span>
              </div>
              {data[k].length === 0 && <p className="text-ink-4">Empty until a licensed connector for this layer exists — never inferred.</p>}
            </div>
          ))}
          <p className="text-[11px] text-ink-4 sm:col-span-3">{data.note}</p>
        </div>
      )}
    </div>
  );
}