front-Censo/src/components/Equipo_Computo/MapaCalor.tsx

"use client";


import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
import L, { LatLngBoundsExpression } from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.heat";
import { useEffect } from "react";

// Ajustar vista automáticamente
function AjustarVista({ bounds }: { bounds: LatLngBoundsExpression }) {
  const map = useMap();

  useEffect(() => {
    map.fitBounds(bounds);
  }, [map, bounds]);

  return null;
}

function HeatLayer() {
  const map = useMap();

  useEffect(() => {

    //  A 4768x3368
    const edificios = {
      A1: [[1407, 3054], [1470, 3054], [1470, 3360], [1407, 3360]],
      A2: [[1570, 3130], [1570, 3190], [1850, 3190], [1850, 3130]],
      A3: [[1640, 2650], [1705, 2650], [1705, 2950], [1640, 2950]],
      A4: [[1268, 2765], [1268, 2830], [1540, 2830], [1540, 2765]],
      A5: [[995, 2405], [1295, 2405], [1295, 2470], [995, 2470]],
      A6: [[1390, 2385], [1450, 2385], [1450, 2655], [1390, 2655]],
      A7: [[1234, 2014], [1296, 2014], [1296, 2317], [1234, 2317]],
      A8: [[1390, 2055], [1700, 2055], [1700, 2118], [1390, 2118]],
      A9: [[1215, 1825], [1480, 1825], [1480, 1890], [1215, 1890]],
      A10: [[1570, 1695], [1635, 1695], [1635, 1960], [1570, 1960]],
      A11: [[1475, 1510], [1780, 1510], [1780, 1570], [1475, 1570]],
      A12: [[1310, 1395], [1375, 1395], [1375, 1700], [1310, 1700]],
      A13: [[1780, 810], [1845, 810], [1845, 1020], [1780, 1020]],
      A14: [[1505, 775], [1713, 775], [1713, 840], [1505, 840]],
      A15: [[2027, 2580], [2087, 2580], [2087, 2900], [2027, 2900]],
      AEROGRAFIA: [[1157, 3308], [1254, 3308], [1254, 3369], [1157, 3369]],
      ALMACEN: [[989, 1523], [1027, 1523], [1027, 1749], [989, 1749]],
      APOYO_DOC: [[1115, 1222], [1475, 1222], [1475, 1293], [1115, 1293]],
      BIBLIOTECA: [[1578, 2372], [1578, 2199], [1593, 2213], [1739, 2213],[1835, 2114], [1889, 2168], [1889, 2345], [1860, 2375],[1888, 2407], [1844, 2450], [1830, 2435], [1814, 2451],[1799, 2435], [1772, 2466], [1766, 2460], [1703, 2523],[1686, 2506], [1645, 2505], [1645, 2465], [1630, 2466],[1629, 2402], [1677, 2402], [1677, 2372], [1666, 2360], [1591, 2360]],
      CEI: [[1570, 990], [1767, 990], [1767, 1155], [1570, 1155]],
      INVEST: [[1570, 1240], [1727, 1240], [1727, 1400], [1570, 1400]],
      CEDTEC: [[885, 2900], [1080, 2900], [1080, 3200], [885, 3200]],
      CEMM: [[2167, 863], [2453, 863], [2453, 1458], [2167, 1458]],
      CAFETERIA_Y_LIBRERIA: [[2027, 1483], [2158, 1483], [2158, 1600], [2027, 1600]],
      CTED: [[1802, 1063], [1908, 1128], [1888, 1179], [1772, 1151]],
      POSGRADO: [[857, 1472], [1004, 1471],[1004, 1327],[1086, 1325],[1086, 1512], [860, 1512]],
      UNIDAD_SEMINA: [[1145, 2894], [1320, 2894], [1320, 3070], [1145, 3070]],
      TALLS_Y_LAB: [[1085, 3209], [1292, 3209], [1292, 3307], [1085, 3307]],
      UNIDAD_DE_TALLERES_MULTIDISC: [[1624, 3244], [1920, 3240], [1954, 3476], [1622, 3477]],
      USC: [[992, 2656], [1029, 2656], [1029, 2828], [992, 2828]],
      UIM: [[294, 3224], [901, 3257], [899, 3358], [312, 3386]],
      GOB: [[950, 2068], [1104, 2068], [1104, 2218], [950, 2218]],
      SERV_GRALES: [[1024, 882], [1089, 882], [1089, 1138], [1024, 1138]],
      SM: [[893, 1789], [935, 1789], [935, 1891], [893, 1891]]
    };


    const puntos: any[] = [];

    Object.entries(edificios).forEach(([nombre, poligono]) => {
      for (let i = 0; i < 15; i++) {

        const x = poligono[0][0] + Math.random() * (poligono[1][0] - poligono[0][0]);
        const y = poligono[0][1] + Math.random() * (poligono[2][1] - poligono[0][1]);

        const intensidad = Math.random();

        puntos.push([x, y, intensidad]);
      }
    });


    const heat = (L as any).heatLayer(puntos, {
      radius: 35,
      blur: 25,
      maxZoom: 2,
      gradient: {
        0.2: "#00f",
        0.4: "#0ff",
        0.6: "#0f0",
        0.8: "#ff0",
        1.0: "#f00"
      }
    });

    heat.addTo(map);


    Object.entries(edificios).forEach(([nombre, coords]: any) => {
      L.polygon((coords), {
        color: "#77ee9f",
        weight: 2,
        fillOpacity: 0.25
      })
        .bindPopup(`🏢 ${nombre}`)
        .addTo(map);
    });

    // DEBUG PRO (CLICK PARA COORDENADAS EXACTAS)
    map.on("click", function (e) {
      console.log(" Coordenadas exactas:", e.latlng);
    });

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

  }, [map]);

  return null;
}

export default function MapaCalor() {

  const bounds: LatLngBoundsExpression = [
    [0, 0],
    [3368, 4768]
  ];

  return (

    <div style={{
      width: "100%",
      height: "650px",
      marginTop: "40px",
      borderRadius: "12px",
      overflow: "hidden",
      boxShadow: "0 6px 25px rgba(0,0,0,0.3)"
    }}>

      <MapContainer
        crs={L.CRS.Simple}
        minZoom={-2}
        style={{ height: "100%", width: "100%" }}
      >

        <ImageOverlay
          url="/plano.png"
          bounds={bounds}
        />

        <AjustarVista bounds={bounds} />

        <HeatLayer />

      </MapContainer>

    </div>
  );
}