"use client";

import { useEffect, useState } from "react";

import { MapContainer, TileLayer, useMap, CircleMarker, Popup, Polyline } from "react-leaflet";

import L from "leaflet";

import "leaflet/dist/leaflet.css";

import "leaflet.markercluster/dist/MarkerCluster.css";

import "leaflet.markercluster/dist/MarkerCluster.Default.css";

import "leaflet.markercluster";

import { api, MapCamera, SatelliteCam } from "@/lib/api";

function opColor(op: string | null): string {

  const o = (op || "").toLowerCase();

  if (o.includes("flock")) return "#2dd4bf";

  if (o.includes("motorola")) return "#fbbf24";

  if (o.includes("genetec")) return "#a78bfa";

  if (o.includes("police") || o.includes("sheriff")) return "#38bdf8";

  return "#61708a";

}

function CameraClusters({ cameras }: { cameras: MapCamera[] }) {

  const map = useMap();

  useEffect(() => {

    const cluster = L.markerClusterGroup({ chunkedLoading: true, maxClusterRadius: 55,

      spiderfyOnMaxZoom: true, showCoverageOnHover: false });

    for (const c of cameras) {

      const m = L.circleMarker([c.lat, c.lon], { radius: 4, color: opColor(c.operator),

        fillColor: opColor(c.operator), fillOpacity: 0.85, weight: 1 });

      m.bindPopup(`<b>${c.name || "Camera"}</b><br/>Operator: ${c.operator || "-"}<br/>`

        + `State: ${c.state || "-"} · Zone: ${c.zone || "-"}<br/>`

        + `<a href="/cameras/${c.camera_id}">Open camera →</a>`);

      cluster.addLayer(m);

    }

    map.addLayer(cluster);

    return () => { map.removeLayer(cluster); };

  }, [cameras, map]);

  return null;

}

export default function IntelMap({ stateFilter, operatorFilter }:

  { stateFilter?: string; operatorFilter?: string }) {

  const [cameras, setCameras] = useState<MapCamera[]>([]);

  const [sats, setSats] = useState<SatelliteCam[]>([]);

  const [track, setTrack] = useState<{ id: string; pts: [number, number][] } | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const [showSats, setShowSats] = useState(true);

  useEffect(() => {

    api.cameraMap({ state: stateFilter, operator: operatorFilter })

      .then((r) => setCameras(r.cameras))

      .catch((e) => setErr(e.status === 401 ? "Sign in to view the map." : "Map load failed."));

    api.satellites().then((r) => setSats(r.satellites)).catch(() => {});

  }, [stateFilter, operatorFilter]);

  useEffect(() => {

    const t = setInterval(() => api.satellites().then((r) => setSats(r.satellites)).catch(() => {}), 30000);

    return () => clearInterval(t);

  }, []);

  async function showTrack(id: string) {

    try {

      const t = await api.entityTrack(id);

      setTrack({ id, pts: t.track.map((p) => [p.lat, p.lon]) });

    } catch {  }

  }

  if (err) return <div className="card muted">{err}</div>;

  return (

    <div style={{ position: "relative" }}>

      <MapContainer center={[39.5, -98]} zoom={4} style={{ height: "72vh", width: "100%", borderRadius: 12 }}

                    preferCanvas>

        <TileLayer url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"

                   attribution='© OpenStreetMap © CARTO' />

        <CameraClusters cameras={cameras} />

        {showSats && sats.filter((s) => s.lat != null).map((s) => (

          <CircleMarker key={s.identifier} center={[s.lat!, s.lon!]} radius={5}

                        pathOptions={{ color: "#fbbf24", fillColor: "#fbbf24", fillOpacity: 0.9, weight: 1 }}

                        eventHandlers={{ click: () => showTrack(s.identifier) }}>

            <Popup>

              <b>🛰 {s.label}</b><br />Imaging satellite ({s.constellation})<br />

              Alt: {s.altitude_km} km · Period: {s.period_min ? Math.round(s.period_min) : "-"} min<br />

              <span className="muted">click to plot ground track</span>

            </Popup>

          </CircleMarker>

        ))}

        {track && <Polyline positions={track.pts} pathOptions={{ color: "#fbbf24", weight: 1.5, dashArray: "4 4" }} />}

      </MapContainer>

      <div style={{ position: "absolute", top: 12, right: 12, zIndex: 1000 }} className="card">

        <div className="row" style={{ gap: 8, marginBottom: 8 }}>

          <strong style={{ fontSize: 12 }}>{cameras.length.toLocaleString()} cameras</strong>

        </div>

        <label className="row" style={{ gap: 6, fontSize: 12 }}>

          <input type="checkbox" checked={showSats} onChange={(e) => setShowSats(e.target.checked)} style={{ width: 14 }} />

          {sats.length} satellite cameras

        </label>

        <div style={{ marginTop: 8, fontSize: 11 }} className="muted">

          <div><span style={{ color: "#2dd4bf" }}>●</span> Flock &nbsp; <span style={{ color: "#fbbf24" }}>●</span> Motorola/Sat</div>

          <div><span style={{ color: "#a78bfa" }}>●</span> Genetec &nbsp; <span style={{ color: "#38bdf8" }}>●</span> Police</div>

        </div>

      </div>

    </div>

  );

}