import { Link } from '@inertiajs/react';
import { SeoHead } from '@/components/seo-head';
import { motion } from 'framer-motion';
import { ArrowLeft, ArrowRight, Calendar, MapPin } from 'lucide-react';
import PublicLayout from '@/layouts/public-layout';

interface School {
    id: number;
    year: number;
    edition: string;
    title: string;
    location: string | null;
    start_date: string | null;
    end_date: string | null;
    summary: string | null;
}

interface NavItem { year: number; title: string }

const HERO_IMAGES = [
    '/images/student-equations-chalkboard-wide.jpg',
    '/images/university-lecture-hall.jpg',
    '/images/lab-researcher-flask-microscope.jpg',
    '/images/african-graduates-caps-gowns.jpg',
    '/images/woman-engineer-electronics-workbench.jpg',
    '/images/lab-team-protective-gear-redlight.jpg',
    '/images/african-university-convocation.jpg',
    '/images/doctors-team-reviewing-tablet.jpg',
    '/images/student-scientist-chemical-flask.jpg',
    '/images/scientist-microscope-warmlight.jpg',
];

function fmt(date: string) {
    return new Date(date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
}

export default function SummerSchoolShow({ school, prev, next }: { school: School; prev: NavItem | null; next: NavItem | null }) {
    const heroImage = HERO_IMAGES[school.id % HERO_IMAGES.length];

    const schoolDescription = school.summary
        ? school.summary.slice(0, 160).trimEnd() + (school.summary.length > 160 ? '…' : '')
        : `${school.edition} ABEC Africa Summer School${school.location ? ` in ${school.location}` : ''}${school.start_date ? `, ${new Date(school.start_date).getFullYear()}` : ''}. Annual intensive training in biomedical engineering for African students and professionals.`;

    const schoolJsonLd = {
        '@context': 'https://schema.org',
        '@type': 'EducationEvent',
        name: school.title,
        description: schoolDescription,
        ...(school.start_date ? { startDate: school.start_date } : {}),
        ...(school.end_date ? { endDate: school.end_date } : {}),
        ...(school.location ? { location: { '@type': 'Place', name: school.location } } : {}),
        organizer: { '@id': 'https://abecafrica.org/#organization' },
        url: `https://abecafrica.org/programs/summer-schools/${school.year}`,
        inLanguage: 'en-GB',
        eventStatus: 'https://schema.org/EventScheduled',
        eventAttendanceMode: 'https://schema.org/OfflineEventAttendanceMode',
    };

    return (
        <div className="min-h-screen bg-[#F9F7F4]">
            <SeoHead
                title={school.title}
                description={schoolDescription}
                image={heroImage}
                url={`https://abecafrica.org/programs/summer-schools/${school.year}`}
                keywords={`ABEC Africa Summer School ${school.year}, biomedical engineering summer school Africa${school.location ? `, ${school.location}` : ''}, ABEC ${school.year}`}
                jsonLd={schoolJsonLd}
            />
            {/* Hero */}
            <div className="relative h-72 md:h-96 overflow-hidden">
                <img src={heroImage} alt="" className="absolute inset-0 w-full h-full object-cover" />
                <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(10,38,71,0.97) 0%, rgba(10,38,71,0.9) 45%, rgba(10,38,71,0.3) 70%, transparent 100%)' }} />

                <div className="relative h-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-between py-8 pt-24">
                    <Link
                        href="/programs"
                        className="inline-flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors self-start"
                    >
                        <ArrowLeft size={14} /> Back to Programs
                    </Link>

                    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
                        <div className="flex items-center gap-3 mb-3">
                            <div className="w-8 h-px bg-[#df2548]" />
                            <span className="text-[#d0d4ec]/60 text-xs tracking-[0.2em] uppercase font-semibold">
                                {school.edition} Innovators' Summer School
                            </span>
                        </div>
                        <h1 className="text-3xl lg:text-5xl font-black text-white leading-tight tracking-tight">{school.title}</h1>
                        {school.location && (
                            <div className="flex items-center gap-2 mt-3 text-white/60 text-sm">
                                <MapPin size={14} className="text-[#df2548]" />
                                {school.location}
                            </div>
                        )}
                    </motion.div>
                </div>
            </div>

            {/* Body */}
            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <motion.div
                    initial={{ opacity: 0, y: 16 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: 0.1 }}
                    className="grid gap-8 lg:grid-cols-[1fr_280px]"
                >
                    {/* Main */}
                    <div className="space-y-6">
                        {school.summary ? (
                            <div className="bg-white border border-[#d0d4ec] p-8">
                                <h2 className="text-[10px] font-bold tracking-[0.18em] uppercase text-[#df2548] mb-4">About This Edition</h2>
                                <p className="text-[#1b265c] leading-relaxed">{school.summary}</p>
                            </div>
                        ) : (
                            <div className="bg-white border border-[#d0d4ec] p-8">
                                <h2 className="text-[10px] font-bold tracking-[0.18em] uppercase text-[#df2548] mb-4">About This Edition</h2>
                                <p className="text-[#555e8a] leading-relaxed italic">
                                    The {school.edition} Innovators' Summer School was held in {school.location ?? 'Africa'} in {school.year},
                                    bringing together biomedical engineering students, researchers, and industry experts for intensive design
                                    challenges focused on African healthcare needs.
                                </p>
                            </div>
                        )}
                    </div>

                    {/* Sidebar */}
                    <div className="space-y-4">
                        <div className="bg-white border border-[#d0d4ec] p-6">
                            <h2 className="text-[10px] font-bold tracking-[0.18em] uppercase text-[#df2548] mb-4">Details</h2>
                            <div className="space-y-3">
                                <div>
                                    <p className="text-[10px] text-[#555e8a] uppercase tracking-wider mb-0.5">Edition</p>
                                    <p className="text-sm font-bold text-[#1b265c]">{school.edition}</p>
                                </div>
                                <div>
                                    <p className="text-[10px] text-[#555e8a] uppercase tracking-wider mb-0.5">Year</p>
                                    <p className="text-sm font-bold text-[#1b265c]">{school.year}</p>
                                </div>
                                {school.location && (
                                    <div className="flex items-start gap-2">
                                        <MapPin size={14} className="text-[#555e8a] mt-0.5 flex-shrink-0" />
                                        <div>
                                            <p className="text-[10px] text-[#555e8a] uppercase tracking-wider mb-0.5">Location</p>
                                            <p className="text-sm font-semibold text-[#1b265c]">{school.location}</p>
                                        </div>
                                    </div>
                                )}
                                {(school.start_date || school.end_date) && (
                                    <div className="flex items-start gap-2">
                                        <Calendar size={14} className="text-[#555e8a] mt-0.5 flex-shrink-0" />
                                        <div>
                                            <p className="text-[10px] text-[#555e8a] uppercase tracking-wider mb-0.5">Dates</p>
                                            <p className="text-sm font-semibold text-[#1b265c]">
                                                {school.start_date && fmt(school.start_date)}
                                                {school.start_date && school.end_date && ' – '}
                                                {school.end_date && fmt(school.end_date)}
                                            </p>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className="bg-[#0A2647] p-6">
                            <p className="text-white/60 text-xs leading-relaxed mb-4">
                                Interested in participating in a future Innovators' Summer School?
                            </p>
                            <Link
                                href="/join"
                                className="block text-center bg-[#df2548] text-white text-xs font-bold tracking-widest uppercase px-4 py-3 hover:bg-[#c41e3d] transition-colors"
                            >
                                Join ABEC
                            </Link>
                        </div>
                    </div>
                </motion.div>

                {/* Prev / Next navigation */}
                {(prev || next) && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.4, delay: 0.2 }}
                        className="mt-12 pt-8 border-t border-[#d0d4ec] flex items-center justify-between gap-4"
                    >
                        {prev ? (
                            <Link
                                href={`/programs/summer-schools/${prev.year}`}
                                className="flex items-center gap-3 group max-w-xs"
                            >
                                <ArrowLeft size={16} className="text-[#555e8a] group-hover:text-[#df2548] transition-colors flex-shrink-0" />
                                <div>
                                    <p className="text-[10px] text-[#555e8a] uppercase tracking-wider">Previous</p>
                                    <p className="text-sm font-semibold text-[#1b265c] group-hover:text-[#df2548] transition-colors leading-snug">{prev.title}</p>
                                </div>
                            </Link>
                        ) : <div />}

                        {next ? (
                            <Link
                                href={`/programs/summer-schools/${next.year}`}
                                className="flex items-center gap-3 group max-w-xs text-right"
                            >
                                <div>
                                    <p className="text-[10px] text-[#555e8a] uppercase tracking-wider">Next</p>
                                    <p className="text-sm font-semibold text-[#1b265c] group-hover:text-[#df2548] transition-colors leading-snug">{next.title}</p>
                                </div>
                                <ArrowRight size={16} className="text-[#555e8a] group-hover:text-[#df2548] transition-colors flex-shrink-0" />
                            </Link>
                        ) : <div />}
                    </motion.div>
                )}
            </div>

            {/* CTA */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img src="/images/african-graduates-caps-gowns.jpg" alt="" className="w-full h-full object-cover" />
                    <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(10,38,71,0.97) 0%, rgba(10,38,71,0.92) 40%, rgba(10,38,71,0.35) 65%, transparent 100%)' }} />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
                    <div className="max-w-lg">
                        <span className="text-[#d0d4ec]/60 text-xs tracking-[0.2em] uppercase font-semibold block mb-3">Programs &amp; Access</span>
                        <h2 className="text-4xl font-black text-white tracking-tight mb-4">Attend the Next School</h2>
                        <p className="text-white/60 leading-relaxed mb-8 text-sm">
                            Join ABEC to stay informed about upcoming Innovators' Summer Schools and gain access to all programs across Africa.
                        </p>
                        <Link
                            href="/join"
                            className="inline-flex items-center gap-2 h-12 px-8 bg-[#d0d4ec] text-[#1b265c] text-xs font-bold tracking-[0.15em] uppercase hover:bg-white transition-colors"
                        >
                            Apply for Membership <ArrowRight size={14} />
                        </Link>
                    </div>
                </div>
            </section>
        </div>
    );
}

SummerSchoolShow.layout = (page: React.ReactNode) => <PublicLayout>{page}</PublicLayout>;