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

interface Publication {
    id: number;
    title: string;
    authors: string;
    abstract: string;
    journal: string | null;
    year: number;
    doi: string | null;
    url: string | null;
    type: string;
    tags: string[] | null;
}

interface Props {
    publication: Publication;
    related: Publication[];
}

const typeIcons: Record<string, typeof BookOpen> = {
    journal_article: BookOpen,
    conference_paper: Presentation,
    book_chapter: FileText,
};

const typeLabel: Record<string, string> = {
    journal_article: 'Journal Article',
    conference_paper: 'Conference Paper',
    book_chapter: 'Book Chapter',
};

const typeAccent: Record<string, string> = {
    journal_article: 'bg-[#1b265c]',
    conference_paper: 'bg-[#df2548]',
    book_chapter: 'bg-[#D4A843]',
};

export default function ResearchShow({ publication, related }: Props) {
    const Icon = typeIcons[publication.type] ?? FileText;
    const accent = typeAccent[publication.type] ?? 'bg-[#d0d4ec]';
    const externalUrl = publication.doi ?? publication.url ?? null;

    // Split authors into an array for display
    const authorList = publication.authors.split(',').map((a) => a.trim());

    const pubDescription = publication.abstract
        ? publication.abstract.slice(0, 160).trimEnd() + (publication.abstract.length > 160 ? '…' : '')
        : `${typeLabel[publication.type] ?? 'Publication'} by ${publication.authors}. Published ${publication.year}${publication.journal ? ` in ${publication.journal}` : ''}.`;

    const pubJsonLd = {
        '@context': 'https://schema.org',
        '@type': publication.type === 'journal_article' ? 'ScholarlyArticle' : 'Article',
        headline: publication.title,
        author: publication.authors.split(',').map((a) => ({ '@type': 'Person', name: a.trim() })),
        datePublished: String(publication.year),
        ...(publication.abstract ? { abstract: publication.abstract } : {}),
        ...(publication.doi ? { identifier: publication.doi } : {}),
        ...(publication.journal ? { isPartOf: { '@type': 'Periodical', name: publication.journal } } : {}),
        publisher: { '@id': 'https://abecafrica.org/#organization' },
        inLanguage: 'en-GB',
    };

    return (
        <div>
            <SeoHead
                title={publication.title}
                description={pubDescription}
                type="article"
                keywords={`${publication.title}, ${publication.authors}, biomedical engineering research Africa, ABEC Africa publications${publication.journal ? `, ${publication.journal}` : ''}`}
                jsonLd={pubJsonLd}
            />
            {/* BREADCRUMB HEADER */}
            <section className="bg-[#1b265c] py-12 pt-28">
                <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                    <Link
                        href="/research"
                        className="inline-flex items-center gap-2 text-white/50 hover:text-white text-xs tracking-[0.15em] uppercase font-semibold mb-6 transition-colors"
                    >
                        <ArrowLeft size={12} /> Research & Publications
                    </Link>

                    <div className="flex flex-wrap items-center gap-3 mb-5">
                        <span className={`inline-flex items-center gap-1.5 px-3 py-1 ${accent} text-white text-xs font-bold tracking-wide uppercase`}>
                            <Icon size={11} /> {typeLabel[publication.type] ?? publication.type}
                        </span>
                        <span className="text-[#d0d4ec]/60 text-sm">{publication.year}</span>
                        {publication.journal && (
                            <span className="text-[#d0d4ec]/60 text-sm italic">{publication.journal}</span>
                        )}
                    </div>

                    <motion.h1
                        initial={{ opacity: 0, y: 16 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                        className="text-3xl lg:text-5xl font-black text-white tracking-tight leading-tight"
                    >
                        {publication.title}
                    </motion.h1>
                </div>
            </section>

            {/* MAIN CONTENT */}
            <section className="bg-white py-16">
                <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid lg:grid-cols-3 gap-12">
                        {/* Abstract + body */}
                        <div className="lg:col-span-2">
                            <div className="section-rule" />
                            <h2 className="text-sm font-bold text-[#555e8a] tracking-[0.15em] uppercase mb-4">Abstract</h2>
                            <p className="text-[#1b265c]/80 leading-[1.95] text-lg">{publication.abstract}</p>

                            {externalUrl && (
                                <div className="mt-10">
                                    <a
                                        href={externalUrl}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-2 h-12 px-8 bg-[#1b265c] text-white text-sm font-bold tracking-[0.12em] uppercase hover:bg-[#df2548] transition-colors"
                                    >
                                        View Full Publication <ExternalLink size={14} />
                                    </a>
                                </div>
                            )}
                        </div>

                        {/* Sidebar meta */}
                        <div className="space-y-8">
                            {/* Authors */}
                            <div>
                                <h3 className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#555e8a] mb-3">Authors</h3>
                                <ul className="space-y-1.5">
                                    {authorList.map((author, i) => (
                                        <li key={i} className="text-sm text-[#1b265c] font-medium leading-snug">
                                            {author}
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* Journal / Venue */}
                            {publication.journal && (
                                <div>
                                    <h3 className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#555e8a] mb-2">Published In</h3>
                                    <p className="text-sm text-[#1b265c] italic leading-snug">{publication.journal}</p>
                                    <p className="text-xs text-[#555e8a] mt-1">{publication.year}</p>
                                </div>
                            )}

                            {/* DOI */}
                            {publication.doi && (
                                <div>
                                    <h3 className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#555e8a] mb-2">DOI</h3>
                                    <a
                                        href={publication.doi}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="text-xs text-[#df2548] break-all hover:underline"
                                    >
                                        {publication.doi}
                                    </a>
                                </div>
                            )}

                            {/* Tags */}
                            {publication.tags && publication.tags.length > 0 && (
                                <div>
                                    <h3 className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#555e8a] mb-3">Tags</h3>
                                    <div className="flex flex-wrap gap-2">
                                        {publication.tags.map((tag) => (
                                            <span
                                                key={tag}
                                                className="px-2 py-1 bg-[#f0f1f8] text-[#1b265c] text-xs font-semibold tracking-wide"
                                            >
                                                {tag}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </section>

            {/* RELATED PUBLICATIONS */}
            {related.length > 0 && (
                <section className="bg-[#f0f1f8] py-16">
                    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="section-rule" />
                        <h2 className="text-2xl font-black text-[#1b265c] tracking-tight mb-8">Related Publications</h2>
                        <div className="space-y-4">
                            {related.map((pub) => {
                                const RelIcon = typeIcons[pub.type] ?? FileText;
                                const relAccent = typeAccent[pub.type] ?? 'bg-[#d0d4ec]';
                                return (
                                    <Link
                                        key={pub.id}
                                        href={`/research/${pub.id}`}
                                        className="group flex items-start gap-5 bg-white border border-[#d0d4ec] p-6 hover:border-[#df2548] transition-colors"
                                    >
                                        <div className={`w-8 h-8 ${relAccent} flex items-center justify-center flex-shrink-0 mt-0.5`}>
                                            <RelIcon size={13} className="text-white" />
                                        </div>
                                        <div className="min-w-0">
                                            <div className="text-[#df2548] text-xs font-bold mb-1">{pub.year}</div>
                                            <h3 className="font-bold text-[#1b265c] leading-snug group-hover:text-[#df2548] transition-colors">
                                                {pub.title}
                                            </h3>
                                            <p className="text-xs text-[#555e8a] mt-1">{pub.authors}</p>
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                        <div className="mt-8">
                            <Link
                                href="/research"
                                className="inline-flex items-center gap-2 text-sm text-[#1b265c] font-semibold hover:text-[#df2548] transition-colors"
                            >
                                <ArrowLeft size={14} /> All Publications
                            </Link>
                        </div>
                    </div>
                </section>
            )}
            {/* CTA */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img src="/images/scientist-microscope-bluelight.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">Research Network</span>
                        <h2 className="text-4xl font-black text-white tracking-tight mb-4">Publish With ABEC</h2>
                        <p className="text-white/60 leading-relaxed mb-8 text-sm">
                            Join Africa's premier biomedical engineering consortium to access research collaborations, publications, and continental symposia.
                        </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>
    );
}

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