import { useMemo } from 'react';
import { Separator } from '@/components/ui/separator';
import type { InventarioArchivoData, SectionProps } from '@/types/fichas-inventario';
import { useSectionForm } from '../../hooks/use-section-form';
import { MediosSection } from './medios-section';
import { buildArchivoFromFile } from './medios-section.helpers';
import type { DescripcionVolumetricaData } from './seccion16/DescripcionVolumetrica';
import {
    DescripcionVolumetrica,
    defaultDescripcionVolumetrica,
} from './seccion16/DescripcionVolumetrica';
import type { VanosAbiertosData } from './seccion16/types';
import { defaultVanosAbiertos } from './seccion16/types';
import { VanosAbiertos } from './seccion16/VanosAbiertos';

function parseJsonField<T>(value: string | null | undefined, fallback: T): T {
    if (!value) {
        return fallback;
    }
    try {
        return JSON.parse(value) as T;
    } catch {
        return fallback;
    }
}

export function Section162({ data }: SectionProps) {
    const archivos = (data.archivos ?? []) as InventarioArchivoData[];

    const sectionForm = useSectionForm('16', {
        descripcion_volumetrica:
            (data.descripcion_volumetrica as string | null) ?? null,
        vanos_abiertos:
            (data.vanos_abiertos as VanosAbiertosData | null) ??
            defaultVanosAbiertos,
        archivos,
    });

    const descripcionData = useMemo(
        () =>
            parseJsonField<DescripcionVolumetricaData>(
                sectionForm.data.descripcion_volumetrica,
                defaultDescripcionVolumetrica,
            ),
        [sectionForm.data.descripcion_volumetrica],
    );

    const handleDescripcionChange = (
        key: keyof DescripcionVolumetricaData,
        value: boolean | string | number | null,
    ) => {
        const next = { ...descripcionData, [key]: value };
        sectionForm.setData('descripcion_volumetrica', JSON.stringify(next));
    };

    const vanosData =
        sectionForm.data.vanos_abiertos ?? defaultVanosAbiertos;

    const handleVanosChange = (next: VanosAbiertosData) => {
        sectionForm.setData('vanos_abiertos', next);
    };

    return (
        <div className="flex flex-col gap-3">
            <div>
                <p className="text-sm font-medium text-foreground">
                    16.2 Descripción Volumétrica
                </p>
                <p className="text-xs text-muted-foreground">
                    Características de la fachada y composición volumétrica del
                    inmueble.
                </p>
            </div>
            <Separator />
            <DescripcionVolumetrica
                data={descripcionData}
                onChange={handleDescripcionChange}
            />
            <Separator />
            <VanosAbiertos data={vanosData} onChange={handleVanosChange} />
            <Separator />
            <MediosSection
                groupKeys={['16']}
                archivos={sectionForm.data.archivos}
                setArchivoValue={(index, key, value) => {
                    const updated = [...sectionForm.data.archivos];
                    updated[index] = { ...updated[index], [key]: value };
                    sectionForm.setData('archivos', updated);
                }}
                setArchivos={(archivos) =>
                    sectionForm.setData('archivos', archivos.slice(0, 1))
                }
                addArchivo={(sectionCode, mediaKind, title) => {
                    const existingArchivo = sectionForm.data.archivos[0];

                    sectionForm.setData('archivos', [
                        {
                            id: existingArchivo?.id,
                            section_code: sectionCode,
                            media_kind: mediaKind,
                            title: title || existingArchivo?.title || null,
                            is_primary: false,
                            sort_order: 1,
                            caption: existingArchivo?.caption ?? null,
                            source: existingArchivo?.source ?? null,
                            taken_date: existingArchivo?.taken_date ?? null,
                            taken_time: existingArchivo?.taken_time ?? null,
                            photo_code: existingArchivo?.photo_code ?? null,
                            original_name: existingArchivo?.original_name ?? null,
                            file_path: existingArchivo?.file_path ?? null,
                            file_url: existingArchivo?.file_url ?? null,
                            file: existingArchivo?.file ?? null,
                            remove: false,
                        },
                    ]);
                }}
                removeArchivo={(index) => {
                    const archivo = sectionForm.data.archivos[index];

                    if (archivo?.id) {
                        sectionForm.setData('archivos', [
                            { ...archivo, remove: true, file: null },
                        ]);
                    } else {
                        sectionForm.setData('archivos', []);
                    }
                }}
                replaceSingleArchivo={(file, group) => {
                    const existingArchivo = sectionForm.data.archivos[0];

                    sectionForm.setData('archivos', [
                        buildArchivoFromFile(
                            file,
                            {
                                sectionCode: group.sectionCode,
                                mediaKind: group.mediaKind,
                            },
                            existingArchivo,
                            1,
                        ),
                    ]);
                }}
            />
        </div>
    );
}