import { useEffect, useRef } from 'react';
import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
import type { DriverRecord } from '../types/tracking';

type DriverMapProps = {
  drivers: DriverRecord[];
  defaultCenter: [number, number];
  zoom?: number;
};

const CenterOnFirstDriver = ({
  drivers,
  hasCenteredRef,
}: {
  drivers: DriverRecord[];
  hasCenteredRef: React.MutableRefObject<boolean>;
}) => {
  const map = useMap();

  useEffect(() => {
    if (!hasCenteredRef.current && drivers.length > 0) {
      map.setView([drivers[0].lat, drivers[0].lng], map.getZoom(), { animate: true });
      hasCenteredRef.current = true;
    }
  }, [drivers, map, hasCenteredRef]);

  return null;
};

export const DriverMap = ({ drivers, defaultCenter, zoom = 13 }: DriverMapProps) => {
  const hasCenteredRef = useRef(false);

  return (
    <div className="h-[420px] w-full overflow-hidden rounded-xl border border-slate-200">
      <MapContainer center={defaultCenter} zoom={zoom} className="h-full w-full" scrollWheelZoom>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

        <CenterOnFirstDriver drivers={drivers} hasCenteredRef={hasCenteredRef} />

        {drivers.map((driver) => (
          <Marker key={driver.driverId} position={[driver.lat, driver.lng]}>
            <Popup>
              <div className="text-sm">
                <p className="font-semibold">{driver.driverId}</p>
                <p>
                  {driver.lat.toFixed(6)}, {driver.lng.toFixed(6)}
                </p>
              </div>
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    </div>
  );
};