'use client';

import { useEffect, useState } from 'react';
import L from 'leaflet';
import { LocateFixed } from 'lucide-react';
import {
  MapContainer,
  Marker,
  TileLayer,
  useMap,
  useMapEvents,
} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';

const icon = L.divIcon({
  className: '',
  html: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"
    class="lucide lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799
    a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8
    8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>`,
  iconSize: [24, 24],
  iconAnchor: [12, 24],
});

function FlyToLocation({
  position,
}: {
  position?: { lat: number; lon: number };
}) {
  const map = useMap();

  useEffect(() => {
    if (position) {
      map.flyTo([position.lat, position.lon], 15, {
        duration: 1.2,
      });
    }
  }, [position, map]);

  return null;
}

function LocationSelector({
  onSelect,
}: {
  onSelect: (lat: number, lon: number) => void;
}) {
  useMapEvents({
    click(e) {
      onSelect(e.latlng.lat, e.latlng.lng);
    },
  });
  return null;
}

export default function LocationPicker({
  value,
  onChange,
}: {
  value?: { lat?: number; lon?: number };
  onChange: (val: { lat: number; lon: number }) => void;
}) {
  const [position, setPosition] = useState<{ lat: number; lon: number } | null>(
    null,
  );
  const { t } = useTranslation();
  useEffect(() => {
    if (value?.lat && value?.lon) {
      setPosition({ lat: value.lat, lon: value.lon });
    }
  }, [value?.lat, value?.lon]);

  const handleSelect = (lat: number, lon: number) => {
    setPosition({ lat, lon });
    onChange({ lat, lon });
  };

  const getUserCurrentPosition = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          handleSelect(pos.coords.latitude, pos.coords.longitude);
        },
        (error) => {
          console.error('❌ Error getting location:', error);
          alert('Unable to retrieve your location. Please check permissions.');
        },
      );
    } else {
      alert('Geolocation is not supported by your browser.');
    }
  };

  const center = position
    ? [position.lat, position.lon]
    : [26.3671999, 43.1483897];

  return (
    <div className="w-full h-64 rounded-lg overflow-hidden border relative">
      <Button
        type="button"
        variant="primary"
        className="absolute top-2 right-2 z-[50] bg-white text-gray-800 px-2 py-1 text-xs rounded shadow hover:bg-gray-100"
        onClick={getUserCurrentPosition}
      >
        <LocateFixed className="w-4 h-4 " />
        {t('requests.labels.my_location')}
      </Button>

      <MapContainer
        center={center as [number, number]}
        zoom={6.5}
        style={{ width: '100%', height: '100%' }}
      >
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <LocationSelector onSelect={handleSelect} />
        <FlyToLocation position={position || undefined} />
        {position && (
          <Marker position={[position.lat, position.lon]} icon={icon} />
        )}
      </MapContainer>
    </div>
  );
}