"use client";

import { useState, useRef, useCallback, useEffect } from "react";
import dynamic from "next/dynamic";
import { Map as MapIcon, Loader2, AlertTriangle } from "lucide-react";
import { Card, CardContent } from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { BasemapSwitcher } from "@/modules/geoportal/components/basemap-switcher";
import {
  SelectionToolbar,
  type SelectionMode,
} from "@/modules/geoportal/components/selection-toolbar";
import { FeatureInfoPanel } from "@/modules/geoportal/components/feature-info-panel";
import type { MapViewerHandle } from "@/modules/geoportal/components/map-viewer";
import type {
  BasemapId,
  ClickedFeature,
  LayerVisibility,
  SelectedFeature,
} from "@/modules/geoportal/types";

/* MapLibre uses WebGL — must disable SSR */
const MapViewer = dynamic(
  () =>
    import("@/modules/geoportal/components/map-viewer").then((m) => ({
      default: m.MapViewer,
    })),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
        <p className="text-sm text-muted-foreground">Se incarca harta...</p>
      </div>
    ),
  },
);

/* ------------------------------------------------------------------ */
/*  Layer IDs — must match map-viewer.tsx LAYER_IDS                     */
/* ------------------------------------------------------------------ */

const BASE_LAYERS = [
  "l-terenuri-fill",
  "l-terenuri-line",
  "l-terenuri-label",
  "l-cladiri-fill",
  "l-cladiri-line",
];

/* ------------------------------------------------------------------ */
/*  Props                                                              */
/* ------------------------------------------------------------------ */

type MapTabProps = {
  siruta: string;
  sirutaValid: boolean;
};

/* ------------------------------------------------------------------ */
/*  Typed map handle                                                    */
/* ------------------------------------------------------------------ */

type MapLike = {
  getLayer(id: string): unknown;
  getSource(id: string): unknown;
  addSource(id: string, source: Record<string, unknown>): void;
  addLayer(layer: Record<string, unknown>, before?: string): void;
  setFilter(id: string, filter: unknown[] | null): void;
  setLayoutProperty(id: string, prop: string, value: unknown): void;
  setPaintProperty(id: string, prop: string, value: unknown): void;
  fitBounds(
    bounds: [number, number, number, number],
    opts?: Record<string, unknown>,
  ): void;
  isStyleLoaded(): boolean;
};

function asMap(handle: MapViewerHandle | null): MapLike | null {
  const m = handle?.getMap();
  return m ? (m as unknown as MapLike) : null;
}

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export function MapTab({ siruta, sirutaValid }: MapTabProps) {
  const mapHandleRef = useRef<MapViewerHandle>(null);
  const [basemap, setBasemap] = useState<BasemapId>("liberty");
  const [clickedFeature, setClickedFeature] =
    useState<ClickedFeature | null>(null);
  const [selectionMode, setSelectionMode] = useState<SelectionMode>("off");
  const [selectedFeatures, setSelectedFeatures] = useState<SelectedFeature[]>(
    [],
  );
  const [boundsLoading, setBoundsLoading] = useState(false);
  const [mapReady, setMapReady] = useState(false);
  const appliedSirutaRef = useRef("");
  const boundsRef = useRef<[number, number, number, number] | null>(null);

  /* Boundary check results */
  const [mismatchSummary, setMismatchSummary] = useState<{
    foreign: number;
    edge: number;
  } | null>(null);

  /* Layer visibility: show terenuri + cladiri, hide admin */
  const [layerVisibility] = useState<LayerVisibility>({
    terenuri: true,
    cladiri: true,
    administrativ: false,
  });

  /* ── Detect when map is ready ──────────────────────────────── */
  useEffect(() => {
    if (!sirutaValid) return;
    const check = setInterval(() => {
      const map = asMap(mapHandleRef.current);
      if (map && map.isStyleLoaded()) {
        setMapReady(true);
        clearInterval(check);
      }
    }, 200);
    return () => clearInterval(check);
  }, [sirutaValid]);

  /* ── Fetch UAT bounds ──────────────────────────────────────── */
  const prevBoundsSirutaRef = useRef("");
  useEffect(() => {
    if (!sirutaValid || !siruta) return;
    if (prevBoundsSirutaRef.current === siruta) return;
    prevBoundsSirutaRef.current = siruta;

    setBoundsLoading(true);
    fetch(`/api/geoportal/uat-bounds?siruta=${siruta}`)
      .then((r) => (r.ok ? r.json() : null))
      .then(
        (data: { bounds?: [[number, number], [number, number]] } | null) => {
          if (data?.bounds) {
            const [[minLng, minLat], [maxLng, maxLat]] = data.bounds;
            boundsRef.current = [minLng, minLat, maxLng, maxLat];
            const map = asMap(mapHandleRef.current);
            if (map) {
              map.fitBounds([minLng, minLat, maxLng, maxLat], {
                padding: 40,
                duration: 1500,
              });
            }
          }
        },
      )
      .catch(() => {})
      .finally(() => setBoundsLoading(false));
  }, [siruta, sirutaValid]);

  /* ── When map becomes ready, fitBounds if we have bounds ───── */
  useEffect(() => {
    if (!mapReady || !boundsRef.current) return;
    const map = asMap(mapHandleRef.current);
    if (!map) return;
    map.fitBounds(boundsRef.current, { padding: 40, duration: 1500 });
  }, [mapReady]);

  /* ── Apply siruta filter + enrichment overlay ──────────────── */
  useEffect(() => {
    if (!mapReady || !sirutaValid || !siruta) return;
    if (appliedSirutaRef.current === siruta) return;

    const map = asMap(mapHandleRef.current);
    if (!map) return;

    appliedSirutaRef.current = siruta;
    const filter = ["==", ["get", "siruta"], siruta];

    // Filter base layers by siruta
    for (const layerId of BASE_LAYERS) {
      try {
        if (map.getLayer(layerId)) map.setFilter(layerId, filter);
      } catch {
        /* noop */
      }
    }

    // Keep l-terenuri-fill VISIBLE but fully transparent (catches clicks!)
    try {
      if (map.getLayer("l-terenuri-fill"))
        map.setPaintProperty("l-terenuri-fill", "fill-opacity", 0);
    } catch {
      /* noop */
    }

    const martinBase =
      typeof window !== "undefined"
        ? `${window.location.origin}/tiles`
        : "/tiles";

    // ── Enrichment overlay for PARCELS ──
    if (!map.getSource("gis_terenuri_status")) {
      map.addSource("gis_terenuri_status", {
        type: "vector",
        tiles: [`${martinBase}/gis_terenuri_status/{z}/{x}/{y}`],
        minzoom: 10,
        maxzoom: 18,
      });

      // Data-driven fill: red = building no legal, green = enriched, yellow = no enrichment
      map.addLayer(
        {
          id: "l-ps-terenuri-fill",
          type: "fill",
          source: "gis_terenuri_status",
          "source-layer": "gis_terenuri_status",
          minzoom: 13,
          filter,
          paint: {
            "fill-color": [
              "case",
              // Building without legal docs: RED fill (covers building too)
              [
                "all",
                ["==", ["get", "has_building"], 1],
                ["==", ["get", "build_legal"], 0],
              ],
              "#ef4444",
              // Building with legal: light blue
              ["==", ["get", "has_building"], 1],
              "#93c5fd",
              // Enriched, no building: green
              ["==", ["get", "has_enrichment"], 1],
              "#22c55e",
              // No enrichment: amber/yellow
              "#fbbf24",
            ],
            "fill-opacity": [
              "case",
              // Stronger opacity for building issues so it shows through
              [
                "all",
                ["==", ["get", "has_building"], 1],
                ["==", ["get", "build_legal"], 0],
              ],
              0.45,
              0.25,
            ],
          },
        },
        "l-terenuri-fill", // below the transparent click-catcher
      );

      // Data-driven outline: red = building no legal, blue = building legal, green = default
      map.addLayer(
        {
          id: "l-ps-terenuri-line",
          type: "line",
          source: "gis_terenuri_status",
          "source-layer": "gis_terenuri_status",
          minzoom: 13,
          filter,
          paint: {
            "line-color": [
              "case",
              [
                "all",
                ["==", ["get", "has_building"], 1],
                ["==", ["get", "build_legal"], 0],
              ],
              "#ef4444", // red: building without legal
              ["==", ["get", "has_building"], 1],
              "#3b82f6", // blue: building with legal
              "#15803d", // green: no building
            ],
            "line-width": [
              "case",
              ["==", ["get", "has_building"], 1],
              2,
              0.8,
            ],
          },
        },
        "l-terenuri-fill",
      );
    } else {
      try {
        if (map.getLayer("l-ps-terenuri-fill"))
          map.setFilter("l-ps-terenuri-fill", filter);
        if (map.getLayer("l-ps-terenuri-line"))
          map.setFilter("l-ps-terenuri-line", filter);
      } catch {
        /* noop */
      }
    }

    // Buildings: keep base layer visible with siruta filter (already applied above)
  }, [mapReady, siruta, sirutaValid]);

  /* ── Boundary cross-check: load mismatched parcels ─────────── */
  const prevCheckSirutaRef = useRef("");
  useEffect(() => {
    if (!mapReady || !sirutaValid || !siruta) return;
    if (prevCheckSirutaRef.current === siruta) return;
    prevCheckSirutaRef.current = siruta;

    fetch(`/api/geoportal/boundary-check?siruta=${siruta}`)
      .then((r) => (r.ok ? r.json() : null))
      .then(
        (
          data: {
            type?: string;
            features?: GeoJSON.Feature[];
            summary?: { foreign: number; edge: number };
          } | null,
        ) => {
          if (!data || !data.features || data.features.length === 0) {
            setMismatchSummary(null);
            return;
          }

          setMismatchSummary(data.summary ?? null);

          const map = asMap(mapHandleRef.current);
          if (!map) return;

          // Add or update GeoJSON source for mismatched parcels
          if (map.getSource("boundary-mismatch")) {
            // Update data
            const src = map.getSource("boundary-mismatch") as unknown as {
              setData(d: unknown): void;
            };
            src.setData(data);
          } else {
            map.addSource("boundary-mismatch", {
              type: "geojson",
              data: data as unknown as Record<string, unknown>,
            });

            // Orange dashed fill for mismatched parcels
            map.addLayer({
              id: "l-mismatch-fill",
              type: "fill",
              source: "boundary-mismatch",
              paint: {
                "fill-color": [
                  "case",
                  ["==", ["get", "mismatch_type"], "foreign"],
                  "#f97316", // orange: foreign parcel in this UAT
                  "#a855f7", // purple: edge parcel (registered here but centroid outside)
                ],
                "fill-opacity": 0.35,
              },
            });

            map.addLayer({
              id: "l-mismatch-line",
              type: "line",
              source: "boundary-mismatch",
              paint: {
                "line-color": [
                  "case",
                  ["==", ["get", "mismatch_type"], "foreign"],
                  "#ea580c",
                  "#9333ea",
                ],
                "line-width": 2.5,
                "line-dasharray": [4, 2],
              },
            });
          }
        },
      )
      .catch(() => {});
  }, [mapReady, siruta, sirutaValid]);

  /* ── Feature click handler ─────────────────────────────────── */
  const handleFeatureClick = useCallback(
    (feature: ClickedFeature | null) => {
      if (!feature || !feature.properties) {
        setClickedFeature(null);
        return;
      }
      setClickedFeature(feature);
    },
    [],
  );

  /* ── Selection mode handler ────────────────────────────────── */
  const handleSelectionModeChange = useCallback((mode: SelectionMode) => {
    if (mode === "off") {
      mapHandleRef.current?.clearSelection();
      setSelectedFeatures([]);
    }
    setSelectionMode(mode);
  }, []);

  /* ── Render ─────────────────────────────────────────────────── */

  if (!sirutaValid) {
    return (
      <Card>
        <CardContent className="py-12 text-center text-muted-foreground">
          <MapIcon className="h-10 w-10 mx-auto mb-3 opacity-30" />
          <p>Selectează un UAT din lista de mai sus</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-2">
      {/* Boundary mismatch alert */}
      {mismatchSummary && (mismatchSummary.foreign > 0 || mismatchSummary.edge > 0) && (
        <div className="flex items-center gap-2 rounded-lg border border-orange-200 bg-orange-50/50 dark:border-orange-800 dark:bg-orange-950/20 px-3 py-2 text-xs">
          <AlertTriangle className="h-3.5 w-3.5 text-orange-500 shrink-0" />
          <span>
            <strong>Verificare limită UAT:</strong>{" "}
            {mismatchSummary.foreign > 0 && (
              <>
                <Badge variant="outline" className="text-[10px] border-orange-300 text-orange-700 dark:text-orange-400 mx-0.5">
                  {mismatchSummary.foreign} parcele străine
                </Badge>
                (din alt UAT dar geometric în acest UAT)
              </>
            )}
            {mismatchSummary.foreign > 0 && mismatchSummary.edge > 0 && " · "}
            {mismatchSummary.edge > 0 && (
              <>
                <Badge variant="outline" className="text-[10px] border-purple-300 text-purple-700 dark:text-purple-400 mx-0.5">
                  {mismatchSummary.edge} parcele la limită
                </Badge>
                (înregistrate aici dar centroid în afara limitei)
              </>
            )}
          </span>
        </div>
      )}

      <div className="relative h-[600px] rounded-lg border overflow-hidden">
        {boundsLoading && (
          <div className="absolute top-3 left-1/2 -translate-x-1/2 z-20 flex items-center gap-2 rounded-full bg-background/90 border px-3 py-1.5 text-xs shadow-sm">
            <Loader2 className="h-3 w-3 animate-spin" />
            Se încarcă zona UAT...
          </div>
        )}

        <MapViewer
          ref={mapHandleRef}
          className="h-full w-full"
          basemap={basemap}
          selectionType={selectionMode}
          onFeatureClick={handleFeatureClick}
          onSelectionChange={setSelectedFeatures}
          layerVisibility={layerVisibility}
        />

        {/* Top-right: basemap switcher + feature panel */}
        <div className="absolute top-3 right-3 z-10 flex flex-col items-end gap-2">
          <BasemapSwitcher value={basemap} onChange={setBasemap} />
          {clickedFeature && selectionMode === "off" && (
            <FeatureInfoPanel
              feature={clickedFeature}
              onClose={() => setClickedFeature(null)}
            />
          )}
        </div>

        {/* Bottom-left: selection toolbar */}
        <div className="absolute bottom-8 left-3 z-10">
          <SelectionToolbar
            selectedFeatures={selectedFeatures}
            selectionMode={selectionMode}
            onSelectionModeChange={handleSelectionModeChange}
            onClearSelection={() => {
              mapHandleRef.current?.clearSelection();
              setSelectedFeatures([]);
            }}
          />
        </div>

        {/* Bottom-right: legend */}
        <div className="absolute bottom-3 right-3 z-10 rounded-lg bg-background/90 border p-2 text-[10px] space-y-1">
          <div className="flex items-center gap-1.5">
            <span
              className="inline-block h-3 w-3 rounded-sm"
              style={{
                backgroundColor: "rgba(251,191,36,0.25)",
                border: "1px solid #15803d",
              }}
            />
            Fără enrichment
          </div>
          <div className="flex items-center gap-1.5">
            <span
              className="inline-block h-3 w-3 rounded-sm"
              style={{
                backgroundColor: "rgba(34,197,94,0.25)",
                border: "1px solid #15803d",
              }}
            />
            Cu enrichment
          </div>
          <div className="flex items-center gap-1.5">
            <span
              className="inline-block h-3 w-3 rounded-sm"
              style={{
                backgroundColor: "rgba(147,197,253,0.25)",
                border: "2px solid #3b82f6",
              }}
            />
            Cu clădire (legal)
          </div>
          <div className="flex items-center gap-1.5">
            <span
              className="inline-block h-3 w-3 rounded-sm"
              style={{
                backgroundColor: "rgba(239,68,68,0.45)",
                border: "2px solid #ef4444",
              }}
            />
            Clădire fără acte
          </div>
          {mismatchSummary && (mismatchSummary.foreign > 0 || mismatchSummary.edge > 0) && (
            <>
              <div className="font-semibold text-[11px] mt-1.5 mb-1">Limită UAT</div>
              <div className="flex items-center gap-1.5">
                <span
                  className="inline-block h-3 w-3 rounded-sm"
                  style={{
                    backgroundColor: "rgba(249,115,22,0.35)",
                    border: "2px dashed #ea580c",
                  }}
                />
                Parcele străine
              </div>
              <div className="flex items-center gap-1.5">
                <span
                  className="inline-block h-3 w-3 rounded-sm"
                  style={{
                    backgroundColor: "rgba(168,85,247,0.35)",
                    border: "2px dashed #9333ea",
                  }}
                />
                La limită
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}