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 { TextareaField } from '../components/TextareaField';
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 AnexoImagen = {
    id: string;
    metadata?: ImageMetadata | null;
    sort_order?: number;
};

type AnexosData = {
    observaciones?: string | null;
    criterio_social_propietario?: string | null;
    imagenes?: AnexoImagen[] | null;
};

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

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

    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">
            <div className="grid gap-4 md:grid-cols-2">
                <TextareaField
                    name="observaciones"
                    label="Observaciones"
                    placeholder="Registra observaciones adicionales de los anexos fotográficos."
                    rows={5}
                />

                <TextareaField
                    name="criterio_social_propietario"
                    label="Criterio social del propietario"
                    placeholder="Describe criterios, comentarios o aportes sociales del propietario."
                    rows={5}
                />
            </div>

            <Field data-invalid={!!errors.imagenes}>
                <FieldLabel>
                    Fotografías complementarias
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <p className="text-sm text-muted-foreground">
                    Mínimo 1 fotografía complementaria del inmueble.
                </p>
                <MediaGallery
                    fichaId={fichaId}
                    collection="anexo_fotografico"
                    value={items}
                    minItems={1}
                    label="fotografías complementarias"
                    nativeDateInput
                    onChange={(next) =>
                        setData(
                            'imagenes',
                            next.map((item, index) => ({
                                id: item.id,
                                metadata: item.metadata,
                                sort_order: index + 1,
                            })),
                        )
                    }
                />
                {errors.imagenes && <FieldError>{errors.imagenes}</FieldError>}
            </Field>
        </div>
    );
}