import { show as mediaShowRoute } from '@/actions/Modules/FichaInventario/Http/Controllers/MediaController';
import { MediaUploader } from '@/components/media/MediaUploader';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import type { DescripcionVolumetricaData } from '@/generated/types';
import { CheckboxCategory } from '../../components/CheckboxCategory';
import {
    ARCO_LABELS,
    type ArcoKey,
    BALCON_LABELS,
    type BalconKey,
    CARPINTERIA_PUERTA_VENTANA_LABELS,
    type CarpinteriaPuertaVentanaKey,
    COLONIAL_LABELS,
    type ColonialKey,
    HERRAJE_LABELS,
    type HerrajeKey,
    MOLDURA_ORNAMENTACION_LABELS,
    type MolduraOrnamentacionKey,
    REMATE_FACHADA_LABELS,
    REPUBLICANO_LABELS,
    REVOQUE_PINTURA_LABELS,
    type RemateFachadaKey,
    type RepublicanoKey,
    type RevoquePinturaKey,
    TEXTURA_FACHADA_LABELS,
    type TexturaFachadaKey,
    TIPO_FACHADA_LABELS,
    type TipoFachadaKey,
    ZOCALO_LABELS,
    type ZocaloKey,
} from '../../lib/enum-labels';
import { useSectionForm } from '../../lib/section-form-context';
import type { SeccionProps } from '../index';
import { RadioCategory } from './radio-category';
import { VanosAbiertosTable } from './vanos-abiertos-table';

function buildSingleSelect<K extends string>(
    keys: readonly K[],
    selected: K | null,
): Record<K, boolean> {
    return keys.reduce(
        (acc, k) => {
            acc[k] = k === selected;
            return acc;
        },
        {} as Record<K, boolean>,
    );
}

export function DescripcionVolumetrica({ fichaId }: SeccionProps) {
    const { data, setData } = useSectionForm<DescripcionVolumetricaData>();

    const imagenId = data.imagen?.id ?? null;

    return (
        <div className="flex flex-col gap-6">
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                <RadioCategory<ColonialKey>
                    title="Colonial"
                    labels={COLONIAL_LABELS}
                    values={data.colonial}
                    onChange={(selectedKey) =>
                        setData(
                            'colonial',
                            buildSingleSelect(
                                Object.keys(COLONIAL_LABELS) as ColonialKey[],
                                selectedKey,
                            ),
                        )
                    }
                />

                <RadioCategory<RepublicanoKey>
                    title="Republicano"
                    labels={REPUBLICANO_LABELS}
                    values={data.republicano}
                    onChange={(selectedKey) =>
                        setData(
                            'republicano',
                            buildSingleSelect(
                                Object.keys(REPUBLICANO_LABELS) as RepublicanoKey[],
                                selectedKey,
                            ),
                        )
                    }
                />

                <CheckboxCategory<MolduraOrnamentacionKey>
                    title="Molduras y Ornamentación"
                    labels={MOLDURA_ORNAMENTACION_LABELS}
                    values={data.molduras}
                    onChange={(key, value) =>
                        setData('molduras', { ...data.molduras, [key]: value })
                    }
                />

                <CheckboxCategory<RevoquePinturaKey>
                    title="Revoque y Pintura"
                    labels={REVOQUE_PINTURA_LABELS}
                    values={data.revoques}
                    onChange={(key, value) =>
                        setData('revoques', { ...data.revoques, [key]: value })
                    }
                >
                    <label className="flex items-center gap-3 text-sm">
                        <span className="text-muted-foreground">
                            Color de fachada
                        </span>
                        <Input
                            value={data.color_fachada ?? ''}
                            onChange={(e) =>
                                setData(
                                    'color_fachada',
                                    e.target.value || null,
                                )
                            }
                            placeholder="Ej. Ocre, azul cielo..."
                            className="h-8 flex-1"
                        />
                    </label>
                </CheckboxCategory>

                <CheckboxCategory<RemateFachadaKey>
                    title="Remate de Fachada"
                    labels={REMATE_FACHADA_LABELS}
                    values={data.remates}
                    onChange={(key, value) =>
                        setData('remates', { ...data.remates, [key]: value })
                    }
                />

                <CheckboxCategory<ZocaloKey>
                    title="Zócalo"
                    labels={ZOCALO_LABELS}
                    values={data.zocalo}
                    onChange={(key, value) =>
                        setData('zocalo', { ...data.zocalo, [key]: value })
                    }
                />

                <CheckboxCategory<TipoFachadaKey>
                    title="Tipo de Fachada"
                    labels={TIPO_FACHADA_LABELS}
                    values={data.tipo_fachada}
                    onChange={(key, value) =>
                        setData('tipo_fachada', {
                            ...data.tipo_fachada,
                            [key]: value,
                        })
                    }
                />

                <CheckboxCategory<TexturaFachadaKey>
                    title="Textura"
                    labels={TEXTURA_FACHADA_LABELS}
                    values={data.textura}
                    onChange={(key, value) =>
                        setData('textura', { ...data.textura, [key]: value })
                    }
                />

                <CheckboxCategory<BalconKey>
                    title="Balcones"
                    labels={BALCON_LABELS}
                    values={data.balcones}
                    onChange={(key, value) =>
                        setData('balcones', { ...data.balcones, [key]: value })
                    }
                />

                <CheckboxCategory<CarpinteriaPuertaVentanaKey>
                    title="Carpintería Puerta/Ventana"
                    labels={CARPINTERIA_PUERTA_VENTANA_LABELS}
                    values={data.carpinteria}
                    onChange={(key, value) =>
                        setData('carpinteria', {
                            ...data.carpinteria,
                            [key]: value,
                        })
                    }
                />

                <CheckboxCategory<HerrajeKey>
                    title="Herrajes"
                    labels={HERRAJE_LABELS}
                    values={data.herrajes}
                    onChange={(key, value) =>
                        setData('herrajes', { ...data.herrajes, [key]: value })
                    }
                />

                <CheckboxCategory<ArcoKey>
                    title="Arcos"
                    labels={ARCO_LABELS}
                    values={data.arcos}
                    onChange={(key, value) =>
                        setData('arcos', { ...data.arcos, [key]: value })
                    }
                />

                <Card className="gap-4 py-4">
                    <CardHeader>
                        <CardTitle className="text-sm">
                            Imagen de Referencia
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <MediaUploader
                            fichaId={fichaId}
                            collection="descripcion_volumetrica"
                            value={imagenId ? { id: imagenId } : null}
                            onChange={(value) =>
                                setData(
                                    'imagen',
                                    value ? { id: value.id } : null,
                                )
                            }
                            previewUrl={
                                imagenId
                                    ? mediaShowRoute.url({ media: imagenId })
                                    : undefined
                            }
                            label="imagen de referencia"
                        />
                    </CardContent>
                </Card>
            </div>

            <VanosAbiertosTable
                value={data.vanos_abiertos}
                onChange={(value) => setData('vanos_abiertos', value)}
            />
        </div>
    );
}