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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
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 { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

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 Props {
    metodologies?: Metodology[];
    enfoquesPedagogicos?: EnfoquePedagogico[];
    educationLevels?: EducationLevel[];
    categories?: Category[];
    contextos?: Contexto[];
    areas?: Area[];
    naturalezas?: Naturaleza[];
    tiposInnovacion?: TipoInnovacion[];
}

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
    { title: 'Proyectos', href: '/projects' },
    { title: 'Nuevo Proyecto', href: '/projects/create' },
];

export default function ProjectsCreate({ metodologies = [], enfoquesPedagogicos = [], educationLevels = [], categories = [], contextos = [], areas = [], naturalezas = [], tiposInnovacion = [] }: Props) {
    const { data, setData, processing, errors } = useForm({
        title: '',
        description: '',
        keywords: '',
        methodologies: [] as number[],
        enfoques_pedagogicos: [] as number[],
        education_levels: [] as number[],
        contextos: [] as number[],
        areas: [] as number[],
        naturalezas: [] as number[],
        pdf_path: null as File | null,
        video_url: '',
        latitude: '',
        longitude: '',
        address: '',
        categories: [] as number[],
        collaborators: [] as string[],
        images: [] as File[],
        valoracion: '',
        justificacion_valoracion: '',
        tipos_innovacion: [] as number[],
        descripcion_tipo_innovacion: '',
        transferibilidad: '',
        sostenibilidad: '',
        escalabilidad: '',
        observaciones: '',
        veracidad: false as boolean,
        tratamiento_datos: false as boolean,
        poblacion: '',
        solucion: '',
        efectos: '',
        informe_url: '',
        otro_recurso: '',
        guia_didactica: null as File | null,
    });

    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 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('Creando 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);

        // 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 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', formData, {
            onSuccess: () => {
                updateToast(toastId, 'success', 'Proyecto creado exitosamente');
            },
            onError: () => {
                updateToast(toastId, 'error', 'Error al crear el proyecto');
            }
        });
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Nuevo Proyecto" />

            <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">
                                    Nuevo Proyecto
                                </h1>
                                <p className="text-slate-600 dark:text-slate-400 mt-1 text-sm">
                                    Crea un nuevo proyecto de investigación
                                </p>
                            </div>
                        </div>
                        <Button variant="outline" asChild className="ml-4 flex-shrink-0">
                            <Link href="/projects">
                                <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 crear el nuevo 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 <span className="text-red-500">*</span>
                                            </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 clave (3–7) <span className="text-red-500">*</span>
                                            </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 al informe o repositorio
                                            </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">
                                                Url de Google Drive u otro enlace
                                            </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">
                                                Situación/problema que motivó la investigación
                                            </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">
                                                Contexto *
                                            </label>
                                            <div className="grid grid-cols-1 md:grid-cols-2 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-purple-600 focus:ring-purple-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 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 md:grid-cols-2 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">
                                                Áreas *
                                            </label>
                                            <div className="grid grid-cols-1 md:grid-cols-2 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-purple-600 focus:ring-purple-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>

                                    <div className='grid grid-cols-1 gap-6'>
                                        <div className="space-y-2">
                                            <label className="text-md font-medium text-slate-900 dark:text-white">
                                                Comunidad / institución donde se desarrolló el proyecto *
                                            </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">
                                                Sujetos (grupos, grados, beneficiarios, informantes)
                                            </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 diseñada y aplicada
                                            </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">
                                                Metodología / estrategia de intervención *
                                            </label>
                                            <div className="grid grid-cols-1 md:grid-cols-2 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 md:grid-cols-2 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 htmlFor="efectos" className="text-sm font-medium text-slate-900 dark:text-white">
                                                Efectos de la intervención (evidencias)
                                            </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 del efecto / impacto (marque las que apliquen)
                                            </label>
                                            <div className="grid grid-cols-2 md:grid-cols-3 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-emerald-600 focus:ring-emerald-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'>
                                            <h2 className='font-bold textx-md'>Tipo de innovación (si aplica)</h2>
                                            <p className='text-sm'>Marque y describa según corresponda. Referencias rápidas: Incremental/Integradora (mejoras graduales), Radical (cambios de gran alcance), Disruptiva (irrumpe desde segmentos desatendidos), Arquitectural (reconfigura la interacción entre componentes).</p>
                                        </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">
                                                Describa por qué encaja en el/los tipo(s) seleccionado(s)
                                            </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 — ¿hay evidencia explícita?
                                            </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 — ¿hay evidencia explícita?
                                            </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 — ¿hay evidencia explícita?
                                            </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 (máx. 2 minutos)
                                            </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' : ''}
                                            />
                                            {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">
                                                Resumen del proyecto (archivo PDF)
                                            </label>
                                            <Input
                                                id="pdf_path"
                                                type="file"
                                                accept=".pdf"
                                                onChange={handlePdfChange}
                                                className={errors.pdf_path ? 'border-red-500' : ''}
                                            />
                                            {data.pdf_path && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    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 (archivo PDF)
                                            </label>
                                            <Input
                                                id="guia_didactica"
                                                type="file"
                                                accept=".pdf"
                                                onChange={handleGuiaDidacticaChange}
                                                className={errors.guia_didactica ? 'border-red-500' : ''}
                                            />
                                            {data.guia_didactica && (
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    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' : ''}
                                            />
                                            {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' : ''}
                                            />
                                            {data.images.length > 0 && (
                                                <div className="mt-3 space-y-2">
                                                    <p className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Imágenes seleccionadas ({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={`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>
                                            )}
                                        </div>
                                    </div>

                                    <div className='grid grid-cols-1 gap-6 mt-4'>
                                        <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 (opcional)
                                            </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">
                                                Declaro que la información es veraz y autorizo su publicación en el mapa MíRATE para fines de visibilización y conexión académica.
                                            </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">
                                                Autorizo el tratamiento de datos conforme a la política institucional.
                                            </Label>
                                        </div>
                                    </div>
                                </section>
                            </form>
                        </CardContent>
                        <CardFooter className="flex justify-end gap-2">
                            <Button variant="outline" asChild>
                                <Link href="/projects">
                                    <X className='w-4 h-4 mr-2' /> Cancelar
                                </Link>
                            </Button>
                            <Button
                                type="submit"
                                disabled={processing || !data.veracidad || !data.tratamiento_datos}
                                className="bg-emerald-600 hover:bg-emerald-700"
                                onClick={handleSubmit}
                            >
                                <Save className="w-4 h-4 mr-2" />
                                {processing ? 'Guardando...' : 'Guardar Proyecto'}
                            </Button>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </AppLayout >
    );
}