import type { FeatureCollection, Geometry } from 'geojson';
import { useEffect, useMemo, useState } from 'react';
import { useDebounce } from 'use-debounce';
import { MapGeoJSON } from '@/components/ui/map';
import { buscarPredios, CAPAS } from '../lib/nextgis';
import { useCodigoCatastral } from '../stores/useCodigoCatastral';
import type { PredioProperties, SeleccionPredio } from '../types';

type CapaResultadosProps = {
    onSelect: (seleccion: SeleccionPredio) => void;
};

export function CapaResultados({ onSelect }: CapaResultadosProps) {
    const zona = useCodigoCatastral((s) => s.zona);
    const manzano = useCodigoCatastral((s) => s.manzano);
    const lote = useCodigoCatastral((s) => s.lote);
    const sublote = useCodigoCatastral((s) => s.sublote);

    const filtros = useMemo(
        () => ({ zona, manzano, lote, sublote }),
        [zona, manzano, lote, sublote],
    );
    const [debouncedFiltros] = useDebounce(filtros, 400);

    const [geojson, setGeojson] = useState<FeatureCollection<
        Geometry,
        PredioProperties
    > | null>(null);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const { zona: z, manzano: m, lote: l, sublote: sl } = debouncedFiltros;

        // Busqueda progresiva: busca en cuanto haya al menos un campo con valor
        if ([z, m, l, sl].every((v) => v.trim() === '')) {
            setGeojson(null);
            setError(null);
            return;
        }

        const controller = new AbortController();

        buscarPredios(debouncedFiltros, controller.signal)
            .then((result) => {
                setGeojson(result);
                setError(null);
            })
            .catch((fetchError) => {
                if (fetchError?.name === 'AbortError') {
                    return;
                }
                setError(
                    fetchError instanceof Error
                        ? fetchError.message
                        : 'Error en la búsqueda',
                );
            });

        return () => controller.abort();
    }, [debouncedFiltros]);

    if (error) {
        return (
            <div className="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-destructive">
                {error}
            </div>
        );
    }

    if (!geojson) {
        return null;
    }

    return (
        <MapGeoJSON<PredioProperties>
            id={CAPAS.resultados.id}
            data={geojson}
            interactive
            promoteId="fid"
            fillPaint={{
                'fill-color': '#2563eb',
                'fill-opacity': 0.75,
            }}
            fillHoverPaint={{
                'fill-opacity': 0.9,
            }}
            linePaint={{
                'line-color': '#1e3a8a',
                'line-width': 2.5,
            }}
            onClick={(event) =>
                onSelect({
                    properties: event.feature.properties,
                    lng: event.longitude,
                    lat: event.latitude,
                })
            }
        />
    );
}