import { useCallback } from 'react';
import type {
    CrujiaConfig,
    Inventario173AutorizacionData,
    Inventario173FilaData,
    Inventario173ModificacionData,
    SectionProps,
} from '@/types/fichas-inventario';
import { useSectionForm } from '../../hooks/use-section-form';
import { AntecedentesIntervenciones } from './seccion17/AntecedentesIntervenciones';
import { ModificacionesAlteraciones } from './seccion17/ModificacionesAlteraciones';

export function Section173({ data }: SectionProps) {
    const autorizaciones173 = (data.autorizaciones_17_3 ??
        []) as Inventario173AutorizacionData[];
    const filas173 = (data.filas_17_3 ?? []) as Inventario173FilaData[];
    // Note: crujias161 comes from server props, not from useSectionForm.
    // If section 16 is edited, section 17 won't see changes until page refresh.
    const crujias161 = (data.crujias_16_1 ?? []) as CrujiaConfig[];
    const modificaciones173 = (data.modificaciones_17_3 ??
        []) as Inventario173ModificacionData[];

    const { data: formData, setData } = useSectionForm('17', {
        autorizaciones_17_3: autorizaciones173,
        filas_17_3: filas173,
        modificaciones_17_3: modificaciones173,
    });

    const setAutorizacion173Value = useCallback(
        (index: number, fila: Inventario173AutorizacionData) => {
            const currentFilas = Array.isArray(formData.autorizaciones_17_3)
                ? formData.autorizaciones_17_3
                : [];
            const updated = [...currentFilas];
            updated[index] = fila;
            setData('autorizaciones_17_3', updated);
        },
        [formData.autorizaciones_17_3, setData],
    );

    const setFila173Value = useCallback(
        (index: number, fila: Inventario173FilaData) => {
            const currentFilas = Array.isArray(formData.filas_17_3)
                ? formData.filas_17_3
                : [];
            const updated = [...currentFilas];
            updated[index] = fila;
            setData('filas_17_3', updated);
        },
        [formData.filas_17_3, setData],
    );

    const setModificacion173Value = useCallback(
        (index: number, modificacion: Inventario173ModificacionData) => {
            const currentModificaciones = Array.isArray(
                formData.modificaciones_17_3,
            )
                ? formData.modificaciones_17_3
                : [];
            const updated = [...currentModificaciones];
            updated[index] = modificacion;
            setData('modificaciones_17_3', updated);
        },
        [formData.modificaciones_17_3, setData],
    );

    return (
        <div className="flex flex-col gap-6">
            <AntecedentesIntervenciones
                autorizaciones={formData.autorizaciones_17_3}
                filas={formData.filas_17_3}
                onAutorizacionChange={setAutorizacion173Value}
                onFilaChange={setFila173Value}
            />

            <ModificacionesAlteraciones
                crujias={crujias161}
                modificaciones={formData.modificaciones_17_3}
                onModificacionChange={setModificacion173Value}
            />
        </div>
    );
}