import { show as mediaShowRoute } from '@/actions/Modules/FichaInventario/Http/Controllers/MediaController';
import { MediaGallery } from '@/components/media/MediaGallery';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { useSectionForm } from '../lib/section-form-context';
import type { SeccionProps } from './index';

type ImageMetadata = {
    caption: string;
    fuente: string;
    fecha_toma: string;
    hora: string;
    codificacion: string;
};

type ElementosTipologicosData = {
    imagenes?: Array<{ id: string; metadata?: ImageMetadata | null }> | null;
};

const EMPTY_METADATA: ImageMetadata = {
    caption: '',
    fuente: 'UATF',
    fecha_toma: '',
    hora: '',
    codificacion: '',
};

export function ElementosTipologicos({ fichaId }: SeccionProps) {
    const { data, setData, errors } = useSectionForm<ElementosTipologicosData>();

    const items = (data.imagenes ?? []).map((image) => ({
        id: image.id,
        metadata: image.metadata ?? { ...EMPTY_METADATA },
        previewUrl: mediaShowRoute.url({ media: image.id }),
        mimeType: 'image/jpeg',
    }));

    return (
        <div className="grid gap-4">
            <Field data-invalid={!!errors.imagenes}>
                <FieldLabel>
                    Elementos tipológicos representativos
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <p className="text-sm text-muted-foreground">
                    Mínimo 2 fotografías de elementos tipológicos en fachada(s) exterior(es).
                </p>
                <MediaGallery
                    fichaId={fichaId}
                    collection="foto_tipologica"
                    value={items}
                    minItems={2}
                    label="fotografías"
                    nativeDateInput
                    onChange={(next) =>
                        setData(
                            'imagenes',
                            next.map((item) => ({
                                id: item.id,
                                metadata: item.metadata,
                            })),
                        )
                    }
                />
                {errors.imagenes && <FieldError>{errors.imagenes}</FieldError>}
            </Field>
        </div>
    );
}