import { Button } from '@/components/ui/button';
import { MapPopup } from '@/components/ui/map';
import { normalizeCadastralBlock } from '@/lib/cadastral-code';
import { codigoDigits } from '../lib/codigoInventario';
import { useCodigoCatastral } from '../stores/useCodigoCatastral';
import type { PredioProperties } from '../types';
import { CodigoCatastral } from './CodigoCatastral';

type PredioPopupProps = {
    properties: PredioProperties;
    lng: number;
    lat: number;
    onClose: () => void;
};

function Fila({
    label,
    value,
}: {
    label: string;
    value: string | number | null | undefined;
}) {
    if (value === null || value === undefined || value === '') {
        return null;
    }

    return (
        <div className="flex justify-between gap-2">
            <dt className="text-muted-foreground">{label}</dt>
            <dd className="truncate text-right font-medium">{String(value)}</dd>
        </div>
    );
}

export function PredioPopup({
    properties,
    lng,
    lat,
    onClose,
}: PredioPopupProps) {
    const setCampos = useCodigoCatastral((s) => s.setCampos);

    const seleccionar = () => {
        const zona = normalizeCadastralBlock(
            properties.Nro_Catast,
            codigoDigits.zona,
        );
        const manzano = normalizeCadastralBlock(
            properties.Manzano,
            codigoDigits.manzano,
        );
        const lote = normalizeCadastralBlock(
            properties.Lote,
            codigoDigits.lote,
        );
        const sublote = normalizeCadastralBlock(
            properties.Sublote,
            codigoDigits.sublote,
        );

        setCampos({ zona, manzano, lote, sublote });

        onClose();
    };

    const coordenadas = [properties.Coordenada, properties.Coordena_1]
        .filter((v): v is number => v !== null && v !== undefined)
        .map((v) => v.toFixed(2))
        .join(', ');

    return (
        <MapPopup
            longitude={lng}
            latitude={lat}
            closeButton
            onClose={onClose}
            className="w-60 rounded-lg border bg-background p-3 text-sm shadow-lg"
        >
            <div className="space-y-2.5">
                <CodigoCatastral
                    zona={properties.Nro_Catast ?? ''}
                    manzano={properties.Manzano ?? ''}
                    lote={properties.Lote ?? ''}
                    sublote={properties.Sublote}
                    size="sm"
                />

                <dl className="space-y-1">
                    <Fila label="Capa" value={properties.Layer} />
                    <Fila label="Zona" value={properties.Zona_castr} />
                    <Fila label="Junta vecinal" value={properties.Junta_Veci} />
                    <Fila label="Coordenadas" value={coordenadas || null} />
                </dl>

                <Button
                    type="button"
                    size="sm"
                    className="w-full"
                    onClick={seleccionar}
                >
                    Seleccionar
                </Button>
            </div>
        </MapPopup>
    );
}