import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, Link, useForm, router } from '@inertiajs/react';
import { ArrowLeft, Save, FolderOpen, X } from 'lucide-react';
import { showLoading, updateToast, showError } from '@/lib/toast';
import LocationPicker from '@/components/google-maps/location-picker';
import CollaboratorSearch from '@/components/projects/collaborator-search';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface Metodology {
    id: number;
    name: string;
    description?: string;
}

interface EducationLevel {
    id: number;
    name: string;
    description?: string;
}

interface Category {
    id: number;
    name: string;
    description?: string;
}

interface Contexto {
    id: number;
    name: string;
    description?: string;
}

interface Area {
    id: number;
    name: string;
    description?: string;
}

interface Naturaleza {
    id: number;
    name: string;
    description?: string;
}

interface TipoInnovacion {
    id: number;
    name: string;
    description?: string;
}

interface EnfoquePedagogico {
    id: number;
    name: string;
    description?: string;
}

interface Project {
    id: number;
    title: string;
    description?: string;
    keywords?: string;
    methodologies?: Metodology[];
    enfoque_pedagogicos?: EnfoquePedagogico[];
    education_levels?: EducationLevel[];
    contextos?: Contexto[];
    areas?: Area[];
    naturalezas?: Naturaleza[];
    pdf_path?: string;
    video_url?: string;
    latitude?: string;
    longitude?: string;
    address?: string;
    categories: Category[];
    images: { id: number; image_path: string }[];
    collaborators?: string[] | Array<{ id: number; name: string; email: string; pivot?: any }>;
    valoracion?: string;
    justificacion_valoracion?: string;
    tipos_innovacion?: TipoInnovacion[];
    tipo_innovacions?: TipoInnovacion[];
    descripcion_tipo_innovacion?: string;
    transferibilidad?: string;
    sostenibilidad?: string;
    escalabilidad?: string;
    observaciones?: string;
    veracidad?: boolean;
    tratamiento_datos?: boolean;
    poblacion?: string;
    solucion?: string;
    efectos?: string;
    informe_url?: string;
    guia_didactica?: string;
    otro_recurso?: string;
}

interface Props {
    project: Project;
    metodologies: Metodology[];
    enfoquesPedagogicos: EnfoquePedagogico[];
    educationLevels: EducationLevel[];
    categories: Category[];
    contextos?: Contexto[];
    areas?: Area[];
    naturalezas?: Naturaleza[];
    tiposInnovacion?: TipoInnovacion[];
}

export default function ProjectsEdit({ project, metodologies = [], enfoquesPedagogicos = [], educationLevels = [], categories = [], contextos = [], areas = [], naturalezas = [], tiposInnovacion = [] }: Props) {
    const { data, setData, processing, errors } = useForm<{
        title: string;
        description: string;
        keywords: string;
        methodologies: number[];
        enfoques_pedagogicos: number[];
        education_levels: number[];
        contextos: number[];
        areas: number[];
        naturalezas: number[];
        pdf_path: File | null;
        video_url: string;
        latitude: string;
        longitude: string;
        address: string;
        categories: number[];
        collaborators: string[];
        images: File[];
        images_to_delete: number[];
        valoracion: string;
        justificacion_valoracion: string;
        tipos_innovacion: number[];
        descripcion_tipo_innovacion: string;
        transferibilidad: string;
        sostenibilidad: string;
        escalabilidad: string;
        observaciones: string;
        veracidad: boolean;
        tratamiento_datos: boolean;
        poblacion: string;
        solucion: string;
        efectos: string;
        informe_url: string;
        guia_didactica: File | null;
        otro_recurso: string;
    }>({
        title: project.title,
        description: project.description || '',
        keywords: project.keywords || '',
        methodologies: project.methodologies ? project.methodologies.map(m => m.id) : [],
        enfoques_pedagogicos: project.enfoque_pedagogicos ? project.enfoque_pedagogicos.map(ep => ep.id) : [],
        education_levels: project.education_levels ? project.education_levels.map(el => el.id) : [],
        contextos: project.contextos ? project.contextos.map(c => c.id) : [],
        areas: project.areas ? project.areas.map(a => a.id) : [],
        naturalezas: project.naturalezas ? project.naturalezas.map(n => n.id) : [],
        pdf_path: null as File | null,
        video_url: project.video_url || '',
        latitude: project.latitude || '',
        longitude: project.longitude || '',
        address: project.address || '',
        categories: project.categories ? project.categories.map(cat => cat.id) : [],
        collaborators: project.collaborators ? project.collaborators.map(c => typeof c === 'string' ? c : c.email) : [],
        images: [] as File[],
        images_to_delete: [] as number[], // IDs of images to delete
        valoracion: project.valoracion || '',
        justificacion_valoracion: project.justificacion_valoracion || '',
        tipos_innovacion: project.tipo_innovacions ? project.tipo_innovacions.map(ti => ti.id) : [],
        descripcion_tipo_innovacion: project.descripcion_tipo_innovacion || '',
        transferibilidad: project.transferibilidad || '',
        sostenibilidad: project.sostenibilidad || '',
        escalabilidad: project.escalabilidad || '',
        observaciones: project.observaciones || '',
        veracidad: project.veracidad || false,
        tratamiento_datos: project.tratamiento_datos || false,
        poblacion: project.poblacion || '',
        solucion: project.solucion || '',
        efectos: project.efectos || '',
        informe_url: project.informe_url || '',
        guia_didactica: null as File | null,
        otro_recurso: project.otro_recurso || '',
    });

    const handleMethodologyChange = (methodologyId: number, checked: boolean) => {
        if (checked) {
            setData('methodologies', [...data.methodologies, methodologyId]);
        } else {
            setData('methodologies', data.methodologies.filter(id => id !== methodologyId));
        }
    };

    const handleEnfoquePedagogicoChange = (enfoqueId: number, checked: boolean) => {
        if (checked) {
            setData('enfoques_pedagogicos', [...data.enfoques_pedagogicos, enfoqueId]);
        } else {
            setData('enfoques_pedagogicos', data.enfoques_pedagogicos.filter(id => id !== enfoqueId));
        }
    };

    const handleEducationLevelChange = (levelId: number, checked: boolean) => {
        if (checked) {
            setData('education_levels', [...data.education_levels, levelId]);
        } else {
            setData('education_levels', data.education_levels.filter(id => id !== levelId));
        }
    };

    const handleCategoryChange = (categoryId: number, checked: boolean) => {
        if (checked) {
            setData('categories', [...data.categories, categoryId]);
        } else {
            setData('categories', data.categories.filter(id => id !== categoryId));
        }
    };

    const handleContextoChange = (contextoId: number, checked: boolean) => {
        if (checked) {
            setData('contextos', [...data.contextos, contextoId]);
        } else {
            setData('contextos', data.contextos.filter(id => id !== contextoId));
        }
    };

    const handleAreaChange = (areaId: number, checked: boolean) => {
        if (checked) {
            setData('areas', [...data.areas, areaId]);
        } else {
            setData('areas', data.areas.filter(id => id !== areaId));
        }
    };

    const handleNaturalezaChange = (naturalezaId: number, checked: boolean) => {
        if (checked) {
            setData('naturalezas', [...data.naturalezas, naturalezaId]);
        } else {
            setData('naturalezas', data.naturalezas.filter(id => id !== naturalezaId));
        }
    };

    const handleTipoInnovacionChange = (tipoId: number, checked: boolean) => {
        if (checked) {
            setData('tipos_innovacion', [...data.tipos_innovacion, tipoId]);
        } else {
            setData('tipos_innovacion', data.tipos_innovacion.filter(id => id !== tipoId));
        }
    };

    const handleCollaboratorAdd = (email: string) => {
        if (email && !data.collaborators.includes(email)) {
            setData('collaborators', [...data.collaborators, email]);
        }
    };

    const handleCollaboratorRemove = (email: string) => {
        setData('collaborators', data.collaborators.filter(collab => collab !== email));
    };

    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(e.target.files || []);
        const maxSize = 5 * 1024 * 1024; // 5MB
        const validFiles: File[] = [];
        const invalidFiles: string[] = [];

        files.forEach(file => {
            if (file.size > maxSize) {
                invalidFiles.push(file.name);
            } else {
                validFiles.push(file);
            }
        });

        if (invalidFiles.length > 0) {
            showError(`Las siguientes imágenes superan el límite de 5MB: ${invalidFiles.join(', ')}`);
        }

        if (validFiles.length > 0) {
            setData('images', [...data.images, ...validFiles]);
        }
    };

    const removeImage = (index: number) => {
        setData('images', data.images.filter((_, i) => i !== index));
    };

    const removeExistingImage = (imageId: number) => {
        setData('images_to_delete', [...data.images_to_delete, imageId]);
    };

    const handlePdfChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;
        setData('pdf_path', file);
    };

    const handleGuiaDidacticaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;
        setData('guia_didactica', file);
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        const toastId = showLoading('Actualizando proyecto...');

        const formData = new FormData();
        formData.append('title', data.title);
        formData.append('description', data.description);
        formData.append('keywords', data.keywords);
        formData.append('video_url', data.video_url);
        formData.append('latitude', data.latitude);
        formData.append('longitude', data.longitude);
        formData.append('address', data.address);
        formData.append('valoracion', data.valoracion);
        formData.append('justificacion_valoracion', data.justificacion_valoracion);
        formData.append('descripcion_tipo_innovacion', data.descripcion_tipo_innovacion);
        formData.append('transferibilidad', data.transferibilidad);
        formData.append('sostenibilidad', data.sostenibilidad);
        formData.append('escalabilidad', data.escalabilidad);
        formData.append('observaciones', data.observaciones);
        formData.append('veracidad', data.veracidad ? '1' : '0');
        formData.append('tratamiento_datos', data.tratamiento_datos ? '1' : '0');
        formData.append('poblacion', data.poblacion);
        formData.append('solucion', data.solucion);
        formData.append('efectos', data.efectos);
        formData.append('informe_url', data.informe_url);
        formData.append('otro_recurso', data.otro_recurso);
        formData.append('_method', 'PUT');

        // Add tipos_innovacion array
        (data.tipos_innovacion || []).forEach(tipoId => {
            formData.append('tipos_innovacion[]', tipoId.toString());
        });

        // Add methodologies (required)
        (data.methodologies || []).forEach(methodologyId => {
            formData.append('methodologies[]', methodologyId.toString());
        });

        // Add enfoques pedagógicos (optional)
        (data.enfoques_pedagogicos || []).forEach(enfoqueId => {
            formData.append('enfoques_pedagogicos[]', enfoqueId.toString());
        });

        // Add education levels (required)
        (data.education_levels || []).forEach(levelId => {
            formData.append('education_levels[]', levelId.toString());
        });

        // Add contextos (required)
        (data.contextos || []).forEach(contextoId => {
            formData.append('contextos[]', contextoId.toString());
        });

        // Add areas (required)
        (data.areas || []).forEach(areaId => {
            formData.append('areas[]', areaId.toString());
        });

        // Add naturalezas (optional)
        (data.naturalezas || []).forEach(naturalezaId => {
            formData.append('naturalezas[]', naturalezaId.toString());
        });

        // Add categories (optional)
        (data.categories || []).forEach(categoryId => {
            formData.append('categories[]', categoryId.toString());
        });

        // Add collaborators (optional)
        (data.collaborators || []).forEach(email => {
            formData.append('collaborators[]', email);
        });

        // Add images to delete
        (data.images_to_delete || []).forEach(imageId => {
            formData.append('images_to_delete[]', imageId.toString());
        });

        // Add PDF file
        if (data.pdf_path) {
            formData.append('pdf_path', data.pdf_path);
        }

        // Add guía didáctica file
        if (data.guia_didactica) {
            formData.append('guia_didactica', data.guia_didactica);
        }

        // Add images
        (data.images || []).forEach(image => {
            formData.append('images[]', image);
        });

        router.post(`/projects/${project.id}`, formData, {
            onSuccess: () => {
                updateToast(toastId, 'success', 'Proyecto actualizado exitosamente');
            },
            onError: (errors) => {
                // Only show error toast for server errors, not validation errors
                if (errors?.status !== '422') {
                    updateToast(toastId, 'error', 'Error al actualizar el proyecto');
                } else {
                    // Validation errors are handled automatically by Inertia
                    updateToast(toastId, 'error', 'Por favor corrige los errores del formulario');
                }
            },
            preserveState: true,
            preserveScroll: true,
        });
    };

    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashboard', href: '/dashboard' },
        { title: 'Proyectos', href: '/projects' },
        { title: project.title, href: `/projects/${project.id}` },
        { title: 'Editar', href: `/projects/${project.id}/edit` },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Editar ${project.title}`} />

            <div className="flex h-full flex-1 flex-col gap-6 rounded-xl p-6">
                {/* Header */}
                <div className="flex flex-col gap-4">
                    <div className="flex items-center justify-between">
                        <div className="flex items-start gap-3 flex-1">
                            <div className="p-2 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg flex-shrink-0">
                                <FolderOpen className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                            </div>
                            <div className="min-w-0 flex-1">
                                <h1 className="text-xl font-bold text-slate-900 dark:text-white sm:text-2xl">
                                    Editar Proyecto
                                </h1>
                                <p className="text-slate-600 dark:text-slate-400 mt-1 text-sm">
                                    Modifica los datos de "{project.title}"
                                </p>
                            </div>
                        </div>
                        <Button variant="outline" asChild className="ml-4 flex-shrink-0">
                            <Link href={`/projects/${project.id}`}>
                                <ArrowLeft className="w-4 h-4 mr-2" />
                                Volver
                            </Link>
                        </Button>
                    </div>
                </div>

                {/* Form */}
                <div className="w-full max-w-8xl mx-auto">
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                Información del Proyecto
                            </CardTitle>
                            <CardDescription>
                                Completa los datos para actualizar el proyecto
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <form onSubmit={handleSubmit} className="space-y-6">

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Proyecto terminado
                                    </h2>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div className="space-y-2">
                                            <label htmlFor="title" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Título del proyecto *
                                            </label>
                                            <Input
                                                id="title"
                                                type="text"
                                                value={data.title}
                                                onChange={(e) => setData('title', e.target.value)}
                                                placeholder="Titulo oficial del proyecto"
                                                className={errors.title ? 'border-red-500' : ''}
                                            />
                                            {errors.title && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.title}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="keywords" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Palabras claves
                                            </label>
                                            <Input
                                                id="keywords"
                                                type="text"
                                                value={data.keywords || ''}
                                                onChange={(e) => setData('keywords', e.target.value)}
                                                placeholder="Separa las palabras claves con comas"
                                                className={errors.keywords ? 'border-red-500' : ''}
                                            />
                                            {errors.keywords && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.keywords}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6 mt-4'>
                                        <div className="space-y-2">
                                            <label htmlFor="informe_url" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Enlace del informe completo
                                            </label>
                                            <Input
                                                id="informe_url"
                                                type="url"
                                                value={data.informe_url}
                                                onChange={(e) => setData('informe_url', e.target.value)}
                                                placeholder="https://drive.google.com/ u otro enlace"
                                                className={errors.informe_url ? 'border-red-500' : ''}
                                            />
                                            <p className="text-xs text-slate-500">
                                                Enlace al informe completo en Drive, OneDrive, Dropbox u otra plataforma
                                            </p>
                                            {errors.informe_url && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.informe_url}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Contextualización
                                    </h2>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="description" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Descripción del desafío o problema a resolver *
                                            </label>
                                            <Textarea
                                                id="description"
                                                value={data.description}
                                                onChange={(e) => setData('description', e.target.value)}
                                                placeholder="Describe brevemente el desafio o problema"
                                                rows={4}
                                                className={errors.description ? 'border-red-500' : ''}
                                            />
                                            {errors.description && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.description}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Metodologías *
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {metodologies.length > 0 ? (
                                                    metodologies.map((metodology) => (
                                                        <label key={metodology.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.methodologies.includes(metodology.id)}
                                                                onChange={(e) => handleMethodologyChange(metodology.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {metodology.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay metodologías disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.methodologies && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.methodologies}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Enfoques Pedagógicos
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {enfoquesPedagogicos.length > 0 ? (
                                                    enfoquesPedagogicos.map((enfoque) => (
                                                        <label key={enfoque.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.enfoques_pedagogicos.includes(enfoque.id)}
                                                                onChange={(e) => handleEnfoquePedagogicoChange(enfoque.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-teal-600 focus:ring-teal-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {enfoque.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay enfoques pedagógicos disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.enfoques_pedagogicos && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.enfoques_pedagogicos}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Niveles Educativos *
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {educationLevels.length > 0 ? (
                                                    educationLevels.map((level) => (
                                                        <label key={level.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.education_levels.includes(level.id)}
                                                                onChange={(e) => handleEducationLevelChange(level.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-purple-600 focus:ring-purple-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {level.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay niveles educativos disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.education_levels && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.education_levels}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Contextos *
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {contextos.length > 0 ? (
                                                    contextos.map((contexto) => (
                                                        <label key={contexto.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.contextos.includes(contexto.id)}
                                                                onChange={(e) => handleContextoChange(contexto.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-green-600 focus:ring-green-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {contexto.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay contextos disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.contextos && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.contextos}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Ubicación en el Mapa *
                                            </label>
                                            <LocationPicker
                                                address={data.address}
                                                latitude={data.latitude}
                                                longitude={data.longitude}
                                                onAddressChange={(address) => setData('address', address)}
                                                onLocationChange={(lat, lng) => {
                                                    setData('latitude', lat.toString());
                                                    setData('longitude', lng.toString());
                                                }}
                                                addressError={errors.address}
                                                latitudeError={errors.latitude}
                                                longitudeError={errors.longitude}
                                            />
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="poblacion" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Población intervenida *
                                            </label>
                                            <Textarea
                                                id="poblacion"
                                                value={data.poblacion}
                                                onChange={(e) => setData('poblacion', e.target.value)}
                                                placeholder="Población intervenida y/o participante"
                                                rows={4}
                                                className={errors.poblacion ? 'border-red-500' : ''}
                                            />
                                            {errors.poblacion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.poblacion}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Caracterización de la intervención
                                    </h2>
                                    <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="solucion" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Solución desarrollada *
                                            </label>
                                            <Textarea
                                                id="solucion"
                                                value={data.solucion}
                                                onChange={(e) => setData('solucion', e.target.value)}
                                                placeholder="Estrategia, recursos, acciones"
                                                rows={4}
                                                className={errors.solucion ? 'border-red-500' : ''}
                                            />
                                            {errors.solucion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.solucion}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Áreas de conocimiento *
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {areas.length > 0 ? (
                                                    areas.map((area) => (
                                                        <label key={area.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.areas.includes(area.id)}
                                                                onChange={(e) => handleAreaChange(area.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-orange-600 focus:ring-orange-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {area.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay áreas disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.areas && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.areas}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="efectos" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Efectos de la intervención *
                                            </label>
                                            <Textarea
                                                id="efectos"
                                                value={data.efectos}
                                                onChange={(e) => setData('efectos', e.target.value)}
                                                placeholder="Resultados observados, datos, testimonios"
                                                rows={4}
                                                className={errors.efectos ? 'border-red-500' : ''}
                                            />
                                            {errors.efectos && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.efectos}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Naturaleza de la experiencia
                                            </label>
                                            <div className="grid grid-cols-1 gap-3 p-4 border rounded-lg">
                                                {naturalezas.length > 0 ? (
                                                    naturalezas.map((naturaleza) => (
                                                        <label key={naturaleza.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.naturalezas.includes(naturaleza.id)}
                                                                onChange={(e) => handleNaturalezaChange(naturaleza.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-red-600 focus:ring-red-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {naturaleza.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay naturalezas disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.naturalezas && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.naturalezas}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Clasificación del resultado de la intervención
                                    </h2>
                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="valoracion" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Valoración (seleccione)
                                            </label>
                                            <Select
                                                value={data.valoracion || ''}
                                                onValueChange={(value) => setData('valoracion', value)}
                                            >
                                                <SelectTrigger className={errors.valoracion ? 'border-red-500' : ''}>
                                                    <SelectValue placeholder="— Seleccione —" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="leccion_aprendida">Lección aprendida / Experiencia significativa</SelectItem>
                                                    <SelectItem value="buena_practica">Buena práctica</SelectItem>
                                                    <SelectItem value="innovacion">Innovación</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            {errors.valoracion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.valoracion}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="justificacion_valoracion" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Justificación de la valoración *
                                            </label>
                                            <Textarea
                                                id="justificacion_valoracion"
                                                value={data.justificacion_valoracion || ''}
                                                onChange={(e) => setData('justificacion_valoracion', e.target.value)}
                                                placeholder="Explique por qué se califica así"
                                                rows={4}
                                                className={errors.justificacion_valoracion ? 'border-red-500' : ''}
                                            />
                                            {errors.justificacion_valoracion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.justificacion_valoracion}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className='mt-2'>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">Tipos de innovación *</label>
                                        </div>

                                        <div className="space-y-2">
                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4 border rounded-lg">
                                                {tiposInnovacion.length > 0 ? (
                                                    tiposInnovacion.map((tipoInnovacion) => (
                                                        <label key={tipoInnovacion.id} className="flex items-center space-x-2">
                                                            <input
                                                                type="checkbox"
                                                                checked={data.tipos_innovacion.includes(tipoInnovacion.id)}
                                                                onChange={(e) => handleTipoInnovacionChange(tipoInnovacion.id, e.target.checked)}
                                                                className="rounded border-slate-300 text-pink-600 focus:ring-pink-500"
                                                            />
                                                            <span className="text-sm text-slate-900 dark:text-white">
                                                                {tipoInnovacion.name}
                                                            </span>
                                                        </label>
                                                    ))
                                                ) : (
                                                    <p className="text-sm text-slate-500 col-span-full">
                                                        No hay tipos de innovación disponibles
                                                    </p>
                                                )}
                                            </div>
                                            {errors.tipos_innovacion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.tipos_innovacion}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="descripcion_tipo_innovacion" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Descripción del tipo de innovación *
                                            </label>
                                            <Textarea
                                                id="descripcion_tipo_innovacion"
                                                value={data.descripcion_tipo_innovacion || ''}
                                                onChange={(e) => setData('descripcion_tipo_innovacion', e.target.value)}
                                                placeholder="Explique su elección"
                                                rows={4}
                                                className={errors.descripcion_tipo_innovacion ? 'border-red-500' : ''}
                                            />
                                            {errors.descripcion_tipo_innovacion && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.descripcion_tipo_innovacion}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Proyección de resultados
                                    </h2>
                                    <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="transferibilidad" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Transferibilidad *
                                            </label>
                                            <Textarea
                                                id="transferibilidad"
                                                value={data.transferibilidad || ''}
                                                onChange={(e) => setData('transferibilidad', e.target.value)}
                                                placeholder="Contextos similares donde aplica; evidencias"
                                                rows={4}
                                                className={errors.transferibilidad ? 'border-red-500' : ''}
                                            />
                                            {errors.transferibilidad && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.transferibilidad}
                                                </p>
                                            )}
                                        </div>
                                        <div className="space-y-2">
                                            <label htmlFor="sostenibilidad" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Sostenibilidad *
                                            </label>
                                            <Textarea
                                                id="sostenibilidad"
                                                value={data.sostenibilidad || ''}
                                                onChange={(e) => setData('sostenibilidad', e.target.value)}
                                                placeholder="Mantenimiento de impactos tras cierre"
                                                rows={4}
                                                className={errors.sostenibilidad ? 'border-red-500' : ''}
                                            />
                                            {errors.sostenibilidad && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.sostenibilidad}
                                                </p>
                                            )}
                                        </div>
                                        <div className="space-y-2">
                                            <label htmlFor="escalabilidad" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Escalabilidad *
                                            </label>
                                            <Textarea
                                                id="escalabilidad"
                                                value={data.escalabilidad || ''}
                                                onChange={(e) => setData('escalabilidad', e.target.value)}
                                                placeholder="Posibilidades de expansión sin perder calidad"
                                                rows={4}
                                                className={errors.escalabilidad ? 'border-red-500' : ''}
                                            />
                                            {errors.escalabilidad && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.escalabilidad}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Evidencia audiovisual y colaboradores
                                    </h2>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div className="space-y-2">
                                            <label htmlFor="video_url" className="text-sm font-medium text-slate-900 dark:text-white">
                                                URL del Video de YouTube
                                            </label>
                                            <Input
                                                id="video_url"
                                                type="url"
                                                value={data.video_url}
                                                onChange={(e) => setData('video_url', e.target.value)}
                                                placeholder="https://www.youtube.com/watch?v=..."
                                                className={errors.video_url ? 'border-red-500' : ''}
                                            />
                                            <p className="text-xs text-slate-500">
                                                Solo URLs de YouTube (youtube.com o youtu.be)
                                            </p>
                                            {errors.video_url && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.video_url}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="pdf_path" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Archivo PDF
                                            </label>
                                            <Input
                                                id="pdf_path"
                                                type="file"
                                                accept=".pdf"
                                                onChange={handlePdfChange}
                                                className={errors.pdf_path ? 'border-red-500' : ''}
                                            />
                                            {project.pdf_path && !data.pdf_path && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    PDF actual: <a href={`/storage/${project.pdf_path}`} target="_blank" rel="noopener noreferrer" className="text-emerald-600 hover:underline">Ver PDF</a>
                                                </p>
                                            )}
                                            {data.pdf_path && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    Nuevo archivo seleccionado: {data.pdf_path.name}
                                                </p>
                                            )}
                                            {errors.pdf_path && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.pdf_path}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mt-4'>
                                        <div className="space-y-2">
                                            <label htmlFor="guia_didactica" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Guía didáctica (PDF) *
                                            </label>
                                            <Input
                                                id="guia_didactica"
                                                type="file"
                                                accept=".pdf"
                                                onChange={handleGuiaDidacticaChange}
                                                className={errors.guia_didactica ? 'border-red-500' : ''}
                                            />
                                            {project.guia_didactica && !data.guia_didactica && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    Guía actual: <a href={`/storage/${project.guia_didactica}`} target="_blank" rel="noopener noreferrer" className="text-emerald-600 hover:underline">Ver guía</a>
                                                </p>
                                            )}
                                            {data.guia_didactica && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    Nuevo archivo seleccionado: {data.guia_didactica.name}
                                                </p>
                                            )}
                                            {errors.guia_didactica && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.guia_didactica}
                                                </p>
                                            )}
                                        </div>

                                        <div className="space-y-2">
                                            <label htmlFor="otro_recurso" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Otro recurso (URL)
                                            </label>
                                            <Input
                                                id="otro_recurso"
                                                type="url"
                                                value={data.otro_recurso}
                                                onChange={(e) => setData('otro_recurso', e.target.value)}
                                                placeholder="https://..."
                                                className={errors.otro_recurso ? 'border-red-500' : ''}
                                            />
                                            {project.otro_recurso && !data.otro_recurso && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    Recurso actual: <a href={project.otro_recurso} target="_blank" rel="noopener noreferrer" className="text-emerald-600 hover:underline">Ver recurso</a>
                                                </p>
                                            )}
                                            {errors.otro_recurso && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.otro_recurso}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6 mt-4'>
                                        <div className="space-y-2">
                                            <label htmlFor="images" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Imágenes del Proyecto
                                            </label>
                                            <Input
                                                id="images"
                                                type="file"
                                                accept="image/*"
                                                multiple
                                                onChange={handleImageChange}
                                                className={errors.images ? 'border-red-500' : ''}
                                            />

                                            {/* Existing images */}
                                            {project.images.length > 0 && (
                                                <div className="mt-3 space-y-2">
                                                    <p className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Imágenes actuales ({project.images.length}):
                                                    </p>
                                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                                                        {project.images.map((image) => {
                                                            const isMarkedForDeletion = data.images_to_delete.includes(image.id);
                                                            return (
                                                                <div key={image.id} className="relative group">
                                                                    <img
                                                                        src={`/storage/${image.image_path}`}
                                                                        alt="Imagen del proyecto"
                                                                        className={`w-full h-20 object-cover rounded-lg border ${isMarkedForDeletion ? 'opacity-50 border-red-300' : ''
                                                                            }`}
                                                                    />
                                                                    {!isMarkedForDeletion && (
                                                                        <button
                                                                            type="button"
                                                                            onClick={() => removeExistingImage(image.id)}
                                                                            className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                                                                        >
                                                                            <X className="w-3 h-3" />
                                                                        </button>
                                                                    )}
                                                                    {isMarkedForDeletion && (
                                                                        <div className="absolute inset-0 flex items-center justify-center bg-red-500 bg-opacity-75 rounded-lg">
                                                                            <span className="text-white text-xs font-medium">A eliminar</span>
                                                                        </div>
                                                                    )}
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                    {data.images_to_delete.length > 0 && (
                                                        <p className="text-sm text-red-600 dark:text-red-400">
                                                            {data.images_to_delete.length} imagen(es) marcada(s) para eliminación
                                                        </p>
                                                    )}
                                                </div>
                                            )}

                                            {/* New images */}
                                            {data.images.length > 0 && (
                                                <div className="mt-3 space-y-2">
                                                    <p className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Nuevas imágenes ({data.images.length}):
                                                    </p>
                                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                                                        {data.images.map((image, index) => (
                                                            <div key={index} className="relative group">
                                                                <img
                                                                    src={URL.createObjectURL(image)}
                                                                    alt={`Nueva imagen ${index + 1}`}
                                                                    className="w-full h-20 object-cover rounded-lg border"
                                                                />
                                                                <button
                                                                    type="button"
                                                                    onClick={() => removeImage(index)}
                                                                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                                                                >
                                                                    <X className="w-3 h-3" />
                                                                </button>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            )}
                                            {errors.images && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.images}
                                                </p>
                                            )}
                                            {errors.images_to_delete && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.images_to_delete}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <CollaboratorSearch
                                            collaborators={data.collaborators}
                                            onAddCollaborator={handleCollaboratorAdd}
                                            onRemoveCollaborator={handleCollaboratorRemove}
                                            error={errors.collaborators}
                                        />
                                    </div>
                                </section>

                                <section className="mb-8">
                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                                        Declaraciones y autorización
                                    </h2>
                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label htmlFor="observaciones" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Observaciones adicionales
                                            </label>
                                            <Textarea
                                                id="observaciones"
                                                value={data.observaciones || ''}
                                                onChange={(e) => setData('observaciones', e.target.value)}
                                                placeholder="Comentarios adicionales"
                                                rows={4}
                                                className={errors.observaciones ? 'border-red-500' : ''}
                                            />
                                            {errors.observaciones && (
                                                <p className="text-sm text-red-600 dark:text-red-400">
                                                    {errors.observaciones}
                                                </p>
                                            )}
                                        </div>

                                        <div className="flex items-center gap-3">
                                            <Checkbox
                                                id="veracidad"
                                                checked={data.veracidad}
                                                onCheckedChange={(checked) => setData('veracidad', !!checked)}
                                            />
                                            <label htmlFor="veracidad" className="text-sm text-slate-900 dark:text-white">
                                                Declaro que la información suministrada en este formulario es veraz y completa *
                                            </label>
                                        </div>

                                        <div className="flex items-center gap-3">
                                            <Checkbox
                                                id="tratamiento_datos"
                                                checked={data.tratamiento_datos}
                                                onCheckedChange={(checked) => setData('tratamiento_datos', !!checked)}
                                            />
                                            <label htmlFor="tratamiento_datos" className="text-sm text-slate-900 dark:text-white">
                                                Autorizo el tratamiento de mis datos personales para el registro y gestión de la experiencia *
                                            </label>
                                        </div>
                                    </div>
                                </section>
                            </form>
                        </CardContent>
                        <CardFooter className="flex justify-end gap-2">
                            <Button variant="outline" asChild>
                                <Link href={`/projects/${project.id}`}>
                                    <X className='w-4 h-4 mr-2' /> Cancelar
                                </Link>
                            </Button>
                            <Button
                                type="submit"
                                disabled={processing}
                                className="bg-emerald-600 hover:bg-emerald-700"
                                onClick={handleSubmit}
                            >
                                <Save className="w-4 h-4 mr-2" />
                                {processing ? 'Guardando...' : 'Actualizar Proyecto'}
                            </Button>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </AppLayout>
    );
}