"use client";

import { useEffect, useMemo, useState } from "react";

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

import "leaflet/dist/leaflet.css";

import L from "leaflet";

import BannerHeader from "@/components/bannerHeader";

import locationImg from "../../../../public/assets/banners/header-banner/location.webp";

import { MapPinnedIcon } from "lucide-react";

delete (L.Icon.Default.prototype as any)._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl:
    "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",

  iconUrl:
    "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",

  shadowUrl:
    "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
});

const locations = [
  {
    id: 1,
    division: "Khulna",
    district: "Jashore",
    thana: "Jashore Sadar",
    shopName: "Jashore Electric House",
    lat: 23.1664,
    lng: 89.2081,
    address: "Rail Road, Jashore",
    contactPerson: "Md. Shahin Alam",
    phone: "01711000001",
  },

  {
    id: 2,
    division: "Khulna",
    district: "Jashore",
    thana: "Monirampur",
    shopName: "M/S Noor Enterprise",
    lat: 23.1702,
    lng: 89.2113,
    address: "Monirampur Bazar",
    contactPerson: "Abdur Rahim",
    phone: "01711000002",
  },
];

type LocationType = (typeof locations)[0];

function FlyToLocation({
  location,
}: {
  location: LocationType | null;
}) {
  const map = useMap();

  useEffect(() => {
    if (location) {
      map.flyTo(
        [location.lat, location.lng],
        14,
        {
          duration: 2,
        }
      );
    }
  }, [location, map]);

  return null;
}

export default function DistributionMapClient() {
  const [division, setDivision] = useState("");

  const [district, setDistrict] = useState("");

  const [selectedLocation, setSelectedLocation] =
    useState<LocationType | null>(null);

  const divisions = useMemo(
    () => [...new Set(locations.map((i) => i.division))],
    []
  );

  const districts = useMemo(() => {
    return [
      ...new Set(
        locations
          .filter((i) =>
            division
              ? i.division === division
              : true
          )
          .map((i) => i.district)
      ),
    ];
  }, [division]);

  const locationList = useMemo(() => {
    return locations.filter((item) => {
      const matchDivision = division
        ? item.division === division
        : true;

      const matchDistrict = district
        ? item.district === district
        : true;

      return matchDivision && matchDistrict;
    });
  }, [division, district]);

  return (
    <div className="bg-slate-100 min-h-screen">
      <BannerHeader
        bannerTitle="Sales Networks"
        image={locationImg.src}
      />

      <div className="grid lg:grid-cols-12 h-[calc(100vh-200px)]">
        <div className="lg:col-span-4 bg-white border-r">
          <div className="sticky top-0 bg-white z-20 p-6 border-b">
            <h1 className="text-2xl font-bold text-orange-500">
              SQ Distribution Network
            </h1>

            <p className="text-gray-500 text-sm mt-1">
              Total Locations:
              {locationList.length}
            </p>
          </div>

          <div className="p-6 space-y-4">
            <select
              value={division}
              onChange={(e) => {
                setDivision(e.target.value);
                setDistrict("");
                setSelectedLocation(null);
              }}
              className="w-full p-3 rounded-xl border"
            >
              <option value="">
                All Division
              </option>

              {divisions.map((item) => (
                <option
                  key={item}
                  value={item}
                >
                  {item}
                </option>
              ))}
            </select>

            <select
              value={district}
              onChange={(e) =>
                setDistrict(e.target.value)
              }
              className="w-full p-3 rounded-xl border"
            >
              <option value="">
                All District
              </option>

              {districts.map((item) => (
                <option
                  key={item}
                  value={item}
                >
                  {item}
                </option>
              ))}
            </select>
          </div>

          <div className="px-6 pb-10 h-[600px] overflow-y-auto">
            {locationList.map((item) => (
              <div
                key={item.id}
                onClick={() =>
                  setSelectedLocation(item)
                }
                className={`cursor-pointer rounded-2xl border p-5 mb-3 transition-all
                ${
                  selectedLocation?.id ===
                  item.id
                    ? "border-blue-500 bg-blue-50"
                    : "border-gray-200 bg-white"
                }`}
              >
                <div className="flex justify-between">
                  <div>
                    <h3 className="font-bold text-orange-500">
                      {item.thana}
                    </h3>

                    <p className="text-sm">
                      {item.shopName}
                    </p>
                  </div>

                  <MapPinnedIcon />
                </div>

                <div className="mt-4 text-sm">
                  <p>
                    {item.contactPerson}
                  </p>

                  <p>{item.phone}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="lg:col-span-8">
          <MapContainer
            center={[23.685, 90.3563]}
            zoom={7}
            className="h-full w-full"
          >
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />

            {selectedLocation && (
              <FlyToLocation
                location={
                  selectedLocation
                }
              />
            )}

            {locationList.map((item) => (
              <Marker
                key={item.id}
                position={[
                  item.lat,
                  item.lng,
                ]}
              >
                <Popup>
                  <div>
                    <h3 className="font-bold">
                      {item.shopName}
                    </h3>

                    <p>{item.address}</p>

                    <p>
                      {item.contactPerson}
                    </p>

                    <p>{item.phone}</p>
                  </div>
                </Popup>
              </Marker>
            ))}
          </MapContainer>
        </div>
      </div>
    </div>
  );
}