import { useId } from 'react';
import { show as mediaShowRoute } from '@/actions/Modules/FichaInventario/Http/Controllers/MediaController';
import { MediaUploader } from '@/components/media/MediaUploader';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
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 FotografiaActualData = {
    id?: string | null;
    metadata?: ImageMetadata | null;
};

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

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

    const value = data.id ? { id: data.id } : null;
    const previewUrl = data.id ? mediaShowRoute.url({ media: data.id }) : undefined;

    const updateMetadata = (field: keyof ImageMetadata, fieldValue: string) => {
        setData('metadata', { ...(data.metadata ?? EMPTY_METADATA), [field]: fieldValue });
    };

    return (
        <div className="grid gap-4">
            <Field data-invalid={!!errors.id}>
                <FieldLabel>
                    Fotografía actual
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <MediaUploader
                    fichaId={fichaId}
                    collection="foto_actual"
                    value={value}
                    onChange={(v) => {
                        if (v) {
                            setData({
                                id: v.id,
                                metadata: data.metadata ?? { ...EMPTY_METADATA },
                            });
                        } else {
                            setData({ id: null, metadata: null });
                        }
                    }}
                    previewUrl={previewUrl}
                    label="fotografía actual"
                />
                {errors.id && <FieldError>{errors.id}</FieldError>}
            </Field>

            {data.id && (
                <MetadataFields
                    metadata={data.metadata ?? EMPTY_METADATA}
                    errors={errors}
                    onChange={updateMetadata}
                />
            )}
        </div>
    );
}

type MetadataFieldsProps = {
    metadata: ImageMetadata;
    errors: Record<string, string>;
    onChange: (field: keyof ImageMetadata, value: string) => void;
};

function MetadataFields({ metadata, errors, onChange }: MetadataFieldsProps) {
    const captionId = useId();
    const fuenteId = useId();
    const codificacionId = useId();
    const fechaId = useId();
    const horaId = useId();

    return (
        <>
            <Field data-invalid={!!errors['metadata.caption']}>
                <FieldLabel htmlFor={captionId}>
                    Título de la fotografía
                    <span className="ml-0.5 text-destructive">*</span>
                </FieldLabel>
                <Textarea
                    id={captionId}
                    value={metadata.caption}
                    onChange={(e) => onChange('caption', e.target.value)}
                />
                {errors['metadata.caption'] && (
                    <FieldError>{errors['metadata.caption']}</FieldError>
                )}
            </Field>

            <div className="grid gap-4 sm:grid-cols-2">
                <Field data-invalid={!!errors['metadata.fuente']}>
                    <FieldLabel htmlFor={fuenteId}>Fuente</FieldLabel>
                    <Input
                        id={fuenteId}
                        readOnly
                        value={metadata.fuente}
                    />
                    {errors['metadata.fuente'] && (
                        <FieldError>{errors['metadata.fuente']}</FieldError>
                    )}
                </Field>

                <Field data-invalid={!!errors['metadata.codificacion']}>
                    <FieldLabel htmlFor={codificacionId}>
                        Codificación
                        <span className="ml-0.5 text-destructive">*</span>
                    </FieldLabel>
                    <Input
                        id={codificacionId}
                        value={metadata.codificacion}
                        onChange={(e) => onChange('codificacion', e.target.value)}
                    />
                    {errors['metadata.codificacion'] && (
                        <FieldError>{errors['metadata.codificacion']}</FieldError>
                    )}
                </Field>

                <Field data-invalid={!!errors['metadata.fecha_toma']}>
                    <FieldLabel htmlFor={fechaId}>
                        Fecha de toma
                        <span className="ml-0.5 text-destructive">*</span>
                    </FieldLabel>
                    <Input
                        id={fechaId}
                        type="date"
                        value={metadata.fecha_toma}
                        onChange={(e) => onChange('fecha_toma', e.target.value)}
                    />
                    {errors['metadata.fecha_toma'] && (
                        <FieldError>{errors['metadata.fecha_toma']}</FieldError>
                    )}
                </Field>

                <Field data-invalid={!!errors['metadata.hora']}>
                    <FieldLabel htmlFor={horaId}>
                        Hora
                        <span className="ml-0.5 text-destructive">*</span>
                    </FieldLabel>
                    <Input
                        id={horaId}
                        type="time"
                        step={60}
                        value={metadata.hora}
                        onChange={(e) => onChange('hora', e.target.value)}
                    />
                    {errors['metadata.hora'] && (
                        <FieldError>{errors['metadata.hora']}</FieldError>
                    )}
                </Field>
            </div>
        </>
    );
}