"use client";

import { useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

interface Point {
  id: number;
  name: string;
  address: string;
  city: string;
  phone: string;
  lat: number;
  lng: number;
}

const icon = L.divIcon({
  className: "",
  html: `<div style="
    width:32px;height:32px;
    background:var(--color-brand-yellow);
    border:3px solid var(--color-brand-dark);
    border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
  "></div>`,
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -36],
});

export default function Map({ points, openInMaps }: { points: Point[]; openInMaps?: string }) {
  useEffect(() => {
    // Fix leaflet default icon paths in Next.js
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    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 center: [number, number] = points.length > 0
    ? [Number(points[0].lat), Number(points[0].lng)]
    : [18.0735, -15.9582]; // Nouakchott default

  return (
    <MapContainer
      center={center}
      zoom={13}
      style={{ height: "100%", width: "100%" }}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {points.map((p) => (
        <Marker key={p.id} position={[Number(p.lat), Number(p.lng)]} icon={icon}>
          <Popup>
            <div style={{ fontFamily: "sans-serif", minWidth: 180 }}>
              <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4, color: "var(--color-brand-dark)" }}>{p.name}</div>
              {p.address && <div style={{ fontSize: 12, color: "#555", marginBottom: 2 }}>{p.address}</div>}
              {p.city    && <div style={{ fontSize: 12, color: "#888", marginBottom: 6 }}>{p.city}</div>}
              {p.phone   && (
                <a href={`tel:${p.phone}`} style={{ fontSize: 12, color: "var(--color-brand-dark)", fontWeight: 600, display: "block", marginBottom: 8 }}>
                  {p.phone}
                </a>
              )}
              <a
                href={`https://www.google.com/maps?q=${p.lat},${p.lng}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-block",
                  backgroundColor: "var(--color-brand-yellow)",
                  color: "var(--color-brand-dark)",
                  fontWeight: 700,
                  fontSize: 11,
                  padding: "6px 12px",
                  borderRadius: 20,
                  textDecoration: "none",
                  letterSpacing: "0.04em",
                }}
              >
                {openInMaps ?? "Ouvrir dans Maps →"}
              </a>
            </div>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}