import { useMemo } from 'react';
import { Separator } from '@/components/ui/separator';
import type { SectionProps } from '@/types/fichas-inventario';
import { useSectionForm } from '../../hooks/use-section-form';
import {
    EspaciosComplementarios,
    type EspaciosComplementariosOption,
} from './seccion16/EspaciosComplementarios';

function normalizeEspacioKey(value: string): string {
    return value
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '_')
        .replace(/^_+|_+$/g, '');
}

function parseEspaciosSelectedIds(
    value: string | null | undefined,
    options: EspaciosComplementariosOption[],
): number[] {
    if (!value) { return []; }

    try {
        const parsed = JSON.parse(value) as unknown;

        if (Array.isArray(parsed)) {
            return parsed
                .map((item) => Number(item))
                .filter((id) => Number.isInteger(id) && id > 0);
        }

        if (parsed && typeof parsed === 'object') {
            const optionsByNormalizedKey = new Map(
                options.map((option) => [
                    normalizeEspacioKey(option.nombre),
                    option.id,
                ]),
            );

            return Object.entries(parsed as Record<string, unknown>)
                .filter(([, checked]) => checked === true)
                .map(([key]) => {
                    const numericId = Number(key);
                    if (Number.isInteger(numericId) && numericId > 0) {
                        return numericId;
                    }
                    const normalized = normalizeEspacioKey(key);
                    return optionsByNormalizedKey.get(normalized) ?? null;
                })
                .filter((id): id is number => Number.isInteger(id) && id > 0);
        }

        return [];
    } catch {
        return [];
    }
}

export function Section163({ data, catalogs }: SectionProps) {
    const espacios163 = (
        (catalogs.espacios_16_3 ?? []) as Record<string, unknown>[]
    ).map((e) => ({
        id: e.id as number,
        nombre: (e.nombre as string) ?? '',
        categoria: (e.categoria as string) ?? '',
        sort_order: (e.sort_order as number) ?? 0,
    })) as EspaciosComplementariosOption[];

    const sectionForm = useSectionForm('16', {
        espacios_complementarios:
            (data.espacios_complementarios as string | null) ?? null,
    });

    const espaciosSelectedIds = useMemo(
        () =>
            parseEspaciosSelectedIds(
                sectionForm.data.espacios_complementarios,
                espacios163,
            ),
        [espacios163, sectionForm.data.espacios_complementarios],
    );

    const handleEspaciosToggle = (id: number, checked: boolean) => {
        const current = parseEspaciosSelectedIds(
            sectionForm.data.espacios_complementarios,
            espacios163,
        );

        const next = checked
            ? Array.from(new Set([...current, id])).sort((a, b) => a - b)
            : current.filter((value) => value !== id);

        sectionForm.setData('espacios_complementarios', JSON.stringify(next));
    };

    return (
        <div className="flex flex-col gap-3">
            <div>
                <p className="text-sm font-medium text-foreground">
                    16.3 Espacios Complementarios
                </p>
                <p className="text-xs text-muted-foreground">
                    Espacios y elementos complementarios presentes en el
                    inmueble.
                </p>
            </div>
            <Separator />
            <EspaciosComplementarios
                options={espacios163}
                selectedIds={espaciosSelectedIds}
                onToggle={handleEspaciosToggle}
            />
        </div>
    );
}