import { GoogleMap, LoadScript, Marker, Autocomplete } from '@react-google-maps/api';
import { Input } from '@/components/ui/input';
import { useState, useCallback, useRef, useEffect } from 'react';

interface LocationPickerProps {
    address: string;
    latitude: string;
    longitude: string;
    onAddressChange: (address: string) => void;
    onLocationChange: (lat: number, lng: number) => void;
    addressError?: string;
    latitudeError?: string;
    longitudeError?: string;
}

const libraries: ("places")[] = ["places"];

const mapContainerStyle = {
    width: '100%',
    height: '400px'
};

const defaultCenter = {
    lat: 8.7478, // Montería, Córdoba, Colombia
    lng: -75.8814
};

export default function LocationPicker({
    address,
    latitude,
    longitude,
    onAddressChange,
    onLocationChange,
    addressError,
    latitudeError,
    longitudeError
}: LocationPickerProps) {
    const [map, setMap] = useState<google.maps.Map | null>(null);
    const [autocomplete, setAutocomplete] = useState<google.maps.places.Autocomplete | null>(null);
    const [markerPosition, setMarkerPosition] = useState(() => {
        if (latitude && longitude) {
            return {
                lat: parseFloat(latitude),
                lng: parseFloat(longitude)
            };
        }
        return defaultCenter;
    });

    const autocompleteRef = useRef<HTMLInputElement>(null);

    const onLoad = useCallback((map: google.maps.Map) => {
        setMap(map);
    }, []);

    const onUnmount = useCallback(() => {
        setMap(null);
    }, []);

    const onAutocompleteLoad = (autocomplete: google.maps.places.Autocomplete) => {
        setAutocomplete(autocomplete);
    };

    const onPlaceChanged = () => {
        if (autocomplete) {
            const place = autocomplete.getPlace();
            if (place.geometry && place.geometry.location) {
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();
                const newPosition = { lat, lng };

                setMarkerPosition(newPosition);
                onAddressChange(place.formatted_address || '');
                onLocationChange(lat, lng);

                // Centrar el mapa en la nueva ubicación
                if (map) {
                    map.panTo(newPosition);
                    map.setZoom(16);
                }
            }
        }
    };

    const onMapClick = (event: google.maps.MapMouseEvent) => {
        if (event.latLng) {
            const lat = event.latLng.lat();
            const lng = event.latLng.lng();
            const newPosition = { lat, lng };

            setMarkerPosition(newPosition);
            onLocationChange(lat, lng);

            // Solo actualizar la dirección si está vacía
            if (!address.trim()) {
                const geocoder = new google.maps.Geocoder();
                geocoder.geocode({ location: newPosition }, (results, status) => {
                    if (status === 'OK' && results && results[0]) {
                        onAddressChange(results[0].formatted_address);
                    }
                });
            }
        }
    };

    const onMarkerDragEnd = (event: google.maps.MapMouseEvent) => {
        if (event.latLng) {
            const lat = event.latLng.lat();
            const lng = event.latLng.lng();
            const newPosition = { lat, lng };

            setMarkerPosition(newPosition);
            onLocationChange(lat, lng);

            // No actualizar la dirección cuando se arrastra el marcador
            // Solo actualizar las coordenadas para mayor precisión
        }
    };

    // Actualizar la posición del marcador cuando cambien las coordenadas desde afuera
    useEffect(() => {
        if (latitude && longitude) {
            const newPosition = {
                lat: parseFloat(latitude),
                lng: parseFloat(longitude)
            };
            setMarkerPosition(newPosition);

            // Centrar el mapa si está disponible
            if (map) {
                map.panTo(newPosition);
            }
        }
    }, [latitude, longitude, map]);

    const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;

    if (!apiKey) {
        return (
            <div className="p-4 bg-red-50 border border-red-200 rounded-md">
                <p className="text-red-800 text-sm">
                    Error: VITE_GOOGLE_MAPS_API_KEY no está configurada en el archivo .env
                </p>
            </div>
        );
    }

    return (
        <div className="space-y-4">
            <LoadScript
                googleMapsApiKey={apiKey}
                libraries={libraries}
                loadingElement={<div className="h-96 bg-slate-100 rounded-md animate-pulse" />}
            >
                <div className="space-y-4">
                    {/* Campo de búsqueda con autocompletado */}
                    <div className="space-y-2">
                        <label htmlFor="address-search" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                            Buscar Dirección
                        </label>
                        <Autocomplete
                            onLoad={onAutocompleteLoad}
                            onPlaceChanged={onPlaceChanged}
                            options={{
                                componentRestrictions: { country: 'co' }, // Restringir a Colombia
                                fields: ['formatted_address', 'geometry']
                            }}
                        >
                            <Input
                                ref={autocompleteRef}
                                id="address-search"
                                type="text"
                                value={address}
                                onChange={(e) => onAddressChange(e.target.value)}
                                placeholder="Escribe la dirección aquí..."
                                className={addressError ? 'border-red-500' : ''}
                            />
                        </Autocomplete>
                        {addressError && (
                            <p className="text-sm text-red-600">{addressError}</p>
                        )}
                        <p className="text-xs text-muted-foreground">
                            Escribe para buscar sugerencias. Puedes arrastrar el marcador en el mapa para ajustar la ubicación exacta sin cambiar la dirección.
                        </p>
                    </div>

                    {/* Mapa */}
                    <div className="border rounded-md overflow-hidden">
                        <GoogleMap
                            mapContainerStyle={mapContainerStyle}
                            center={markerPosition}
                            zoom={14}
                            onLoad={onLoad}
                            onUnmount={onUnmount}
                            onClick={onMapClick}
                            options={{
                                streetViewControl: false,
                                mapTypeControl: false,
                                fullscreenControl: false,
                            }}
                        >
                            <Marker
                                position={markerPosition}
                                draggable={true}
                                onDragEnd={onMarkerDragEnd}
                                title="Ubicación de la sede"
                            />
                        </GoogleMap>
                    </div>

                    {/* Coordenadas (campos hidden para el formulario) */}
                    <div className="hidden">
                        <input type="hidden" name="latitude" value={latitude} />
                        <input type="hidden" name="longitude" value={longitude} />
                    </div>

                    {/* Mostrar coordenadas actuales */}
                    <div className="grid grid-cols-2 gap-4 text-xs text-muted-foreground">
                        <div>
                            <span className="font-medium">Latitud:</span> {latitude || 'No seleccionada'}
                            {latitudeError && (
                                <p className="text-red-600 mt-1">{latitudeError}</p>
                            )}
                        </div>
                        <div>
                            <span className="font-medium">Longitud:</span> {longitude || 'No seleccionada'}
                            {longitudeError && (
                                <p className="text-red-600 mt-1">{longitudeError}</p>
                            )}
                        </div>
                    </div>
                </div>
            </LoadScript>
        </div>
    );
}