import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, Link, router } from '@inertiajs/react';
import { ArrowLeft, Edit, Trash2, MapPin, FileText, Video, FolderOpen } from 'lucide-react';
import { showConfirmation, showSuccess, showError } from '@/lib/toast';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
// import SEOHead from '@/components/SEOHead';

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 Areas {
    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 ProjectImage {
    id: number;
    image_path: string;
}

interface User {
    id: number;
    name: string;
    email: string;
}

interface YouTubePreview {
    video_id: string | null;
    thumbnail: string | null;
    embed_url: string | null;
    is_valid: boolean;
}

interface Project {
    id: number;
    title: string;
    description?: string;
    creator: User;
    methodologies: Metodology[];
    enfoque_pedagogicos: EnfoquePedagogico[];
    education_levels: EducationLevel[];
    contextos: Contexto[];
    areas: Areas[];
    naturalezas: Naturaleza[];
    tipo_innovacions: TipoInnovacion[];
    pdf_path?: string;
    video_url?: string;
    latitude?: string;
    longitude?: string;
    address?: string;
    keywords?: string;
    valoracion?: string;
    justificacion_valoracion?: string;
    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;
    categories: Category[];
    collaborators: User[];
    images: ProjectImage[];
    youtube_preview: YouTubePreview;
    created_at: string;
    updated_at: string;
}

interface Props {
    project: Project;
}

export default function ProjectsShow({ project }: Props) {
    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashboard', href: '/dashboard' },
        { title: 'Proyectos', href: '/projects' },
        { title: project.title, href: `/projects/${project.id}` },
    ];

    const handleDelete = () => {
        showConfirmation(
            `¿Estás seguro de que quieres eliminar el proyecto "${project.title}"?`,
            () => {
                router.delete(`/projects/${project.id}`, {
                    onSuccess: () => {
                        showSuccess('Proyecto eliminado exitosamente');
                    },
                    onError: () => {
                        showError('Error al eliminar el proyecto');
                    }
                });
            }
        );
    };

    // Construir datos estructurados del proyecto
    const projectJsonLd = {
        "@context": "https://schema.org",
        "@type": "ResearchProject",
        "name": project.title,
        "description": project.description || `Proyecto de innovación educativa: ${project.title}`,
        "url": window.location.href,
        "author": {
            "@type": "Person",
            "name": project.creator.name,
            "email": project.creator.email
        },
        "contributor": project.collaborators.map(collab => ({
            "@type": "Person",
            "name": collab.name,
            "email": collab.email
        })),
        "keywords": project.keywords || project.methodologies.map(m => m.name).join(', '),
        "about": project.methodologies.map(m => m.name),
        "spatialCoverage": project.address ? {
            "@type": "Place",
            "address": project.address,
            "geo": project.latitude && project.longitude ? {
                "@type": "GeoCoordinates",
                "latitude": project.latitude,
                "longitude": project.longitude
            } : undefined
        } : undefined,
        "dateCreated": project.created_at,
        "dateModified": project.updated_at,
        "educationalLevel": project.education_levels.map(level => level.name),
        "inLanguage": "es-CO",
        "isAccessibleForFree": true,
        "image": project.images.length > 0 ?
            project.images.map(img => `${window.location.origin}/storage/${img.image_path}`) :
            undefined,
        "video": project.youtube_preview?.embed_url ? {
            "@type": "VideoObject",
            "name": `Video del proyecto: ${project.title}`,
            "description": project.description,
            "thumbnailUrl": project.youtube_preview.thumbnail,
            "embedUrl": project.youtube_preview.embed_url
        } : undefined
    };

    return (
        <>
            {/* <SEOHead
                title={project.title}
                description={project.description || `Proyecto de innovación educativa en ${project.areas.map(a => a.name).join(', ')}. ${project.methodologies.map(m => m.name).join(', ')}.`}
                keywords={[
                    ...project.methodologies.map(m => m.name),
                    ...project.education_levels.map(e => e.name),
                    ...project.areas.map(a => a.name),
                    ...(project.keywords?.split(',') || [])
                ]}
                type="article"
                author={project.creator.name}
                publishedTime={project.created_at}
                modifiedTime={project.updated_at}
                section="Innovación Educativa"
                tags={project.categories.map(c => c.name)}
                image={project.images.length > 0 ?
                    `${window.location.origin}/storage/${project.images[0].image_path}` :
                    undefined
                }
                // jsonLd={projectJsonLd}
            /> */}
            <AppLayout breadcrumbs={breadcrumbs}>
                <Head title={project.title} />

                <div className="flex h-full flex-1 flex-col gap-6 rounded-xl p-6">
                    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                        {/* Project Title */}
                        <div className="flex items-center gap-4">
                            <div className="flex items-center gap-3">
                                <div className="p-2 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg">
                                    <FolderOpen className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
                                </div>
                                <div>
                                    <h1 className="text-3xl font-bold text-emerald-700 dark:text-emerald-400">
                                        {project.title}
                                    </h1>
                                    <p className="text-slate-600 dark:text-slate-400 mt-2">
                                        Detalles del proyecto de investigación
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Header */}
                        <div className="flex gap-2">
                            <Button variant="outline" asChild>
                                <Link href="/projects">
                                    <ArrowLeft className="w-4 h-4 mr-2" />
                                    Volver
                                </Link>
                            </Button>
                            <Button variant="outline" asChild>
                                <Link href={`/projects/${project.id}/edit`}>
                                    <Edit className="w-4 h-4 mr-2" />
                                    Editar
                                </Link>
                            </Button>
                            <Button
                                variant="destructive"
                                onClick={handleDelete}
                            >
                                <Trash2 className="w-4 h-4 mr-2" />
                                Eliminar
                            </Button>
                        </div>
                    </div>

                    {/* Project Details */}
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        {/* Main Information */}
                        <div className="lg:col-span-2 space-y-6">
                            <Card>
                                <CardHeader>
                                    <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                        Información General
                                    </CardTitle>
                                    <CardDescription>
                                        Detalles principales del proyecto
                                    </CardDescription>
                                </CardHeader>
                                <CardContent className="space-y-6">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Título
                                            </label>
                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                {project.title}
                                            </p>
                                        </div>

                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Creador
                                            </label>
                                            <div className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                <div className="font-medium">{project.creator.name}</div>
                                                <div className="text-sm text-slate-500">{project.creator.email}</div>
                                            </div>
                                        </div>
                                    </div>

                                    {project.description && (
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Descripción
                                            </label>
                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                {project.description}
                                            </p>
                                        </div>
                                    )}

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Metodologías
                                            </label>
                                            <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                <div className="flex flex-wrap gap-2">
                                                    {project.methodologies.map((methodology) => (
                                                        <span
                                                            key={methodology.id}
                                                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300"
                                                        >
                                                            {methodology.name}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>

                                        {project.enfoque_pedagogicos && project.enfoque_pedagogicos.length > 0 && (
                                            <div>
                                                <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                    Enfoques Pedagógicos
                                                </label>
                                                <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                    <div className="flex flex-wrap gap-2">
                                                        {project.enfoque_pedagogicos.map((enfoque) => (
                                                            <span
                                                                key={enfoque.id}
                                                                className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-900/20 dark:text-teal-300"
                                                            >
                                                                {enfoque.name}
                                                            </span>
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        )}

                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Niveles Educativos
                                            </label>
                                            <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                <div className="flex flex-wrap gap-2">
                                                    {project.education_levels.map((level) => (
                                                        <span
                                                            key={level.id}
                                                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-300"
                                                        >
                                                            {level.name}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Contextos
                                            </label>
                                            <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                <div className="flex flex-wrap gap-2">
                                                    {project.contextos.map((contexto) => (
                                                        <span
                                                            key={contexto.id}
                                                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-300"
                                                        >
                                                            {contexto.name}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>

                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Áreas
                                            </label>
                                            <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                <div className="flex flex-wrap gap-2">
                                                    {project.areas.map((area) => (
                                                        <span
                                                            key={area.id}
                                                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-900/20 dark:text-teal-300"
                                                        >
                                                            {area.name}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {(project.naturalezas.length > 0 || project.tipo_innovacions.length > 0) && (
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            {project.naturalezas.length > 0 && (
                                                <div>
                                                    <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Naturalezas
                                                    </label>
                                                    <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        <div className="flex flex-wrap gap-2">
                                                            {project.naturalezas.map((naturaleza) => (
                                                                <span
                                                                    key={naturaleza.id}
                                                                    className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-300"
                                                                >
                                                                    {naturaleza.name}
                                                                </span>
                                                            ))}
                                                        </div>
                                                    </div>
                                                </div>
                                            )}

                                            {project.tipo_innovacions.length > 0 && (
                                                <div>
                                                    <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Tipos de Innovación
                                                    </label>
                                                    <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        <div className="flex flex-wrap gap-2">
                                                            {project.tipo_innovacions.map((tipo) => (
                                                                <span
                                                                    key={tipo.id}
                                                                    className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900/20 dark:text-pink-300"
                                                                >
                                                                    {tipo.name}
                                                                </span>
                                                            ))}
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    )}

                                    {project.keywords && (
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Palabras Clave
                                            </label>
                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                {project.keywords}
                                            </p>
                                        </div>
                                    )}

                                    {(project.descripcion_tipo_innovacion || project.valoracion || project.justificacion_valoracion) && (
                                        <div className="space-y-4">
                                            {project.descripcion_tipo_innovacion && (
                                                <div>
                                                    <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Descripción del Tipo de Innovación
                                                    </label>
                                                    <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                        {project.descripcion_tipo_innovacion}
                                                    </p>
                                                </div>
                                            )}

                                            {project.valoracion && (
                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                    <div>
                                                        <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                            Valoración
                                                        </label>
                                                        <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                            {project.valoracion}
                                                        </p>
                                                    </div>

                                                    {project.justificacion_valoracion && (
                                                        <div>
                                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                                Justificación de la Valoración
                                                            </label>
                                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                                {project.justificacion_valoracion}
                                                            </p>
                                                        </div>
                                                    )}
                                                </div>
                                            )}
                                        </div>
                                    )}

                                    {project.video_url && (
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white flex items-center gap-2">
                                                <Video className="w-4 h-4" />
                                                Video de YouTube
                                            </label>
                                            <div className="mt-1 space-y-3">
                                                {project.youtube_preview.is_valid && project.youtube_preview.embed_url ? (
                                                    <div className="aspect-video bg-slate-50 dark:bg-slate-800/50 rounded-lg overflow-hidden">
                                                        <iframe
                                                            src={project.youtube_preview.embed_url}
                                                            title="YouTube video player"
                                                            frameBorder="0"
                                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                            allowFullScreen
                                                            className="w-full h-full"
                                                        />
                                                    </div>
                                                ) : (
                                                    <div className="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        <a
                                                            href={project.video_url}
                                                            target="_blank"
                                                            rel="noopener noreferrer"
                                                            className="text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 underline"
                                                        >
                                                            {project.video_url}
                                                        </a>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    )}

                                    {(project.latitude && project.longitude) && (
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white flex items-center gap-2">
                                                <MapPin className="w-4 h-4" />
                                                Ubicación
                                            </label>
                                            <div className="mt-1 space-y-4">
                                                {project.address && (
                                                    <p className="text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        {project.address}
                                                    </p>
                                                )}
                                                <div className="border rounded-lg overflow-hidden">
                                                    <LoadScript googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}>
                                                        <GoogleMap
                                                            mapContainerStyle={{
                                                                width: '100%',
                                                                height: '300px'
                                                            }}
                                                            center={{
                                                                lat: parseFloat(project.latitude),
                                                                lng: parseFloat(project.longitude)
                                                            }}
                                                            zoom={15}
                                                            options={{
                                                                streetViewControl: false,
                                                                mapTypeControl: false,
                                                                fullscreenControl: false,
                                                                zoomControl: true,
                                                                gestureHandling: 'cooperative'
                                                            }}
                                                        >
                                                            <Marker
                                                                position={{
                                                                    lat: parseFloat(project.latitude),
                                                                    lng: parseFloat(project.longitude)
                                                                }}
                                                                title={project.title}
                                                            />
                                                        </GoogleMap>
                                                    </LoadScript>
                                                </div>
                                                <p className="text-sm text-slate-600 dark:text-slate-400">
                                                    Coordenadas: {project.latitude}, {project.longitude}
                                                </p>
                                            </div>
                                        </div>
                                    )}

                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Fecha de Creación
                                            </label>
                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                {new Date(project.created_at).toLocaleDateString('es-ES', {
                                                    year: 'numeric',
                                                    month: 'long',
                                                    day: 'numeric',
                                                    hour: '2-digit',
                                                    minute: '2-digit'
                                                })}
                                            </p>
                                        </div>
                                        <div>
                                            <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                Última Actualización
                                            </label>
                                            <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                {new Date(project.updated_at).toLocaleDateString('es-ES', {
                                                    year: 'numeric',
                                                    month: 'long',
                                                    day: 'numeric',
                                                    hour: '2-digit',
                                                    minute: '2-digit'
                                                })}
                                            </p>
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>

                            {/* Additional Information */}
                            {(project.transferibilidad || project.sostenibilidad || project.escalabilidad || project.poblacion || project.solucion || project.efectos || project.observaciones) && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                            Información Adicional
                                        </CardTitle>
                                        <CardDescription>
                                            Detalles específicos del proyecto
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent className="space-y-6">
                                        {(project.transferibilidad || project.sostenibilidad || project.escalabilidad) && (
                                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                                                {project.transferibilidad && (
                                                    <div>
                                                        <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                            Transferibilidad
                                                        </label>
                                                        <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                            {project.transferibilidad}
                                                        </p>
                                                    </div>
                                                )}

                                                {project.sostenibilidad && (
                                                    <div>
                                                        <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                            Sostenibilidad
                                                        </label>
                                                        <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                            {project.sostenibilidad}
                                                        </p>
                                                    </div>
                                                )}

                                                {project.escalabilidad && (
                                                    <div>
                                                        <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                            Escalabilidad
                                                        </label>
                                                        <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                            {project.escalabilidad}
                                                        </p>
                                                    </div>
                                                )}
                                            </div>
                                        )}

                                        {project.poblacion && (
                                            <div>
                                                <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                    Población Objetivo
                                                </label>
                                                <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                    {project.poblacion}
                                                </p>
                                            </div>
                                        )}

                                        {project.solucion && (
                                            <div>
                                                <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                    Solución Propuesta
                                                </label>
                                                <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                    {project.solucion}
                                                </p>
                                            </div>
                                        )}

                                        {project.efectos && (
                                            <div>
                                                <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                    Efectos Esperados
                                                </label>
                                                <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                    {project.efectos}
                                                </p>
                                            </div>
                                        )}

                                        {project.observaciones && (
                                            <div>
                                                <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                    Observaciones
                                                </label>
                                                <p className="mt-1 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg whitespace-pre-wrap">
                                                    {project.observaciones}
                                                </p>
                                            </div>
                                        )}
                                    </CardContent>
                                </Card>
                            )}

                            {/* Data Privacy & Verification */}
                            {(project.veracidad !== undefined || project.tratamiento_datos !== undefined) && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                            Verificación y Privacidad
                                        </CardTitle>
                                        <CardDescription>
                                            Información sobre la veracidad y tratamiento de datos
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            {project.veracidad !== undefined && (
                                                <div>
                                                    <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Veracidad Verificada
                                                    </label>
                                                    <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${project.veracidad
                                                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300'
                                                            : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300'
                                                            }`}>
                                                            {project.veracidad ? 'Verificado' : 'Pendiente de verificación'}
                                                        </span>
                                                    </div>
                                                </div>
                                            )}

                                            {project.tratamiento_datos !== undefined && (
                                                <div>
                                                    <label className="text-sm font-medium text-slate-900 dark:text-white">
                                                        Tratamiento de Datos Autorizado
                                                    </label>
                                                    <div className="mt-1 bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
                                                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${project.tratamiento_datos
                                                            ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300'
                                                            : 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300'
                                                            }`}>
                                                            {project.tratamiento_datos ? 'Autorizado' : 'No autorizado'}
                                                        </span>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            {/* Categories */}
                            {project.categories.length > 0 && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                            Categorías
                                        </CardTitle>
                                        <CardDescription>
                                            Categorías asignadas al proyecto
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="flex flex-wrap gap-2">
                                            {project.categories.map((category) => (
                                                <span
                                                    key={category.id}
                                                    className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-400"
                                                >
                                                    {category.name}
                                                </span>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            {/* Collaborators */}
                            {project.collaborators.length > 0 && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                            Investigadores
                                        </CardTitle>
                                        <CardDescription>
                                            Usuarios que colaboran en este proyecto
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="space-y-3">
                                            {project.collaborators.map((collaborator) => (
                                                <div
                                                    key={collaborator.id}
                                                    className="flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg"
                                                >
                                                    <div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900/20 rounded-full flex items-center justify-center">
                                                        <span className="text-emerald-600 dark:text-emerald-400 font-medium text-sm">
                                                            {collaborator.name.charAt(0).toUpperCase()}
                                                        </span>
                                                    </div>
                                                    <div className="flex-1">
                                                        <div className="font-medium text-slate-900 dark:text-white">
                                                            {collaborator.name}
                                                        </div>
                                                        <div className="text-sm text-slate-500 dark:text-slate-400">
                                                            {collaborator.email}
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
                                {/* PDF Document */}
                                {project.pdf_path && (
                                    <Card>
                                        <CardHeader>
                                            <CardTitle className="text-emerald-700 dark:text-emerald-400 flex items-center gap-2">
                                                <FileText className="w-5 h-5" />
                                                Resumen
                                            </CardTitle>
                                            <CardDescription>
                                                Documento PDF del resumen del proyecto
                                            </CardDescription>
                                        </CardHeader>
                                        <CardContent>
                                            <a
                                                href={`/storage/${project.pdf_path}`}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
                                            >
                                                <FileText className="w-4 h-4" />
                                                Ver Resumen
                                            </a>
                                        </CardContent>
                                    </Card>
                                )}

                                {/* Guía Didáctica */}
                                {project.guia_didactica && (
                                    <Card>
                                        <CardHeader>
                                            <CardTitle className="text-emerald-700 dark:text-emerald-400 flex items-center gap-2">
                                                <FileText className="w-5 h-5" />
                                                Guía Didáctica
                                            </CardTitle>
                                            <CardDescription>
                                                Documento PDF de la guía didáctica del proyecto
                                            </CardDescription>
                                        </CardHeader>
                                        <CardContent>
                                            <a
                                                href={`/storage/${project.guia_didactica}`}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
                                            >
                                                <FileText className="w-4 h-4" />
                                                Ver Guía Didáctica
                                            </a>
                                        </CardContent>
                                    </Card>
                                )}

                                {/* Informe URL */}
                                {project.informe_url && (
                                    <Card>
                                        <CardHeader>
                                            <CardTitle className="text-emerald-700 dark:text-emerald-400 flex items-center gap-2">
                                                <FileText className="w-5 h-5" />
                                                Enlace Repositorio
                                            </CardTitle>
                                            <CardDescription>
                                                Enlace al informe o repositorio del proyecto
                                            </CardDescription>
                                        </CardHeader>
                                        <CardContent>
                                            <a
                                                href={project.informe_url}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
                                            >
                                                <FileText className="w-4 h-4" />
                                                Ver Repositorio
                                            </a>
                                        </CardContent>
                                    </Card>
                                )}

                                {/* Otro Recurso */}
                                {project.otro_recurso && (
                                    <Card>
                                        <CardHeader>
                                            <CardTitle className="text-emerald-700 dark:text-emerald-400 flex items-center gap-2">
                                                <FileText className="w-5 h-5" />
                                                Otro Recurso
                                            </CardTitle>
                                            <CardDescription>
                                                Enlace a otro recurso relacionado con el proyecto
                                            </CardDescription>
                                        </CardHeader>
                                        <CardContent>
                                            <a
                                                href={project.otro_recurso}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
                                            >
                                                <FileText className="w-4 h-4" />
                                                Ver Recurso
                                            </a>
                                        </CardContent>
                                    </Card>
                                )}
                            </div>
                        </div>

                        {/* Images Sidebar */}
                        <div className="space-y-6">
                            {project.images.length > 0 && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-emerald-700 dark:text-emerald-400">
                                            Imágenes del Proyecto
                                        </CardTitle>
                                        <CardDescription>
                                            {project.images.length} imagen(es)
                                        </CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="grid grid-cols-1 gap-4">
                                            {project.images.map((image) => (
                                                <div key={image.id} className="aspect-video">
                                                    <img
                                                        src={`/storage/${image.image_path}`}
                                                        alt="Imagen del proyecto"
                                                        className="w-full h-full object-cover rounded-lg border"
                                                    />
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>
                    </div>
                </div>
            </AppLayout>
        </>
    );
}