import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ArrowLeft, Share2, Play, Calendar, User, Building2, MapPin, ArrowRight } from 'lucide-react';
import { sanitizeHTML } from '../../../lib/sanitize';
import { prisma } from '../../../lib/prisma';
import { InterviewType } from '@prisma/client';
import LightboxImage from '@/components/LightboxImage';
import BlogShareButtons from '../../../components/BlogShareButtons';

import { Metadata } from 'next';

interface Props {
  params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { id } = await params;
    const now = new Date();
    
    const interview = await prisma.interview.findFirst({
        where: {
            OR: [{ id }, { slug: id }],
            publishedAt: { lte: now },
            status: 'PUBLISHED'
        }
    });

    const event = !interview ? await prisma.event.findFirst({
        where: {
            OR: [{ id }, { slug: id }],
            publishedAt: { lte: now },
            status: 'PUBLISHED'
        }
    }) : null;

    const item = interview || event;
    if (!item) return { title: 'Contenu non trouvé' };

    const title = (item as any).metaTitle || item.title;
    const description = (item as any).metaDescription || (item as any).excerpt || (item as any).description;

    return {
        title,
        description,
        keywords: (item as any).tags || [],
        openGraph: {
            title,
            description,
            images: [(item as any).thumbnailUrl],
        }
    };
}

export default async function AfroLifeDetailPage({ params }: Props) {
    const { id } = await params;
    const now = new Date();
    
    // 1. Try to find an interview
    const interview = await prisma.interview.findFirst({
        where: {
            OR: [{ id }, { slug: id }],
            publishedAt: { lte: now },
            status: 'PUBLISHED'
        }
    });

    // 2. If not found, try to find an event
    const event = !interview ? await prisma.event.findFirst({
        where: {
            OR: [{ id }, { slug: id }],
            publishedAt: { lte: now },
            status: 'PUBLISHED'
        }
    }) : null;

    if (!interview && !event) {
        notFound();
    }

    const item = interview || event;
    const isEvent = !!event;

    // Helper to get YouTube embed URL
    const getEmbedUrl = (url: string) => {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ? `https://www.youtube.com/embed/${match[2]}` : null;
    };

    const isVideo = !isEvent && (interview as any).type === InterviewType.VIDEO;

    return (
        <div className="bg-white min-h-screen">
            <div className="max-w-4xl mx-auto px-0 sm:px-6 lg:px-8 py-0 sm:py-12">
                <div className="pt-4 sm:pt-0 px-4 sm:px-0 mb-6 sm:mb-8">
                    <Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 transition-colors">
                        <ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
                    </Link>
                </div>

                {/* Header Info */}
                <div className="text-center mb-8 sm:mb-10 px-4 sm:px-0">
                    <div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
                        {isEvent ? 'Événement' : (isVideo ? 'Interview Vidéo' : 'Grand Entretien')}
                    </div>
                    <h1 className="text-3xl md:text-5xl font-serif font-bold text-gray-900 mb-6 leading-tight">
                        {item!.title}
                    </h1>

                    {/* Tags */}
                    {item && (item as any).tags && (item as any).tags.length > 0 && (
                        <div className="flex flex-wrap justify-center gap-2 mb-8">
                            {(item as any).tags.map((tag: string) => (
                                <span key={tag} className="px-3 py-1 bg-brand-50 text-brand-700 rounded-full text-xs font-semibold">
                                    #{tag}
                                </span>
                            ))}
                        </div>
                    )}

                    <div className="flex flex-wrap justify-center gap-6 text-sm text-gray-500">
                        {!isEvent ? (
                            <>
                                <div className="flex items-center">
                                    <User className="w-4 h-4 mr-2 text-brand-500" />
                                    <span className="font-medium text-gray-900">{(interview as any).guestName}</span>
                                    <span className="mx-1 text-gray-400">|</span>
                                    <span>{(interview as any).role}</span>
                                </div>
                                <div className="flex items-center">
                                    <Building2 className="w-4 h-4 mr-2 text-brand-500" />
                                    {(interview as any).companyName}
                                </div>
                            </>
                        ) : (
                            <div className="flex items-center">
                                <MapPin className="w-4 h-4 mr-2 text-brand-500" />
                                <span className="font-medium text-gray-900">{(event as any).location}</span>
                            </div>
                        )}
                        <div className="flex items-center">
                            <Calendar className="w-4 h-4 mr-2 text-brand-500" />
                            {new Date(item!.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                        </div>
                    </div>
                </div>

                {/* Main Content Area en pleine largeur sur mobile */}
                {isVideo ? (
                    <div className="bg-black rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-2xl aspect-w-16 aspect-h-9 mb-8 sm:mb-10 w-full">
                        {(interview as any).videoUrl ? (
                            <iframe
                                src={getEmbedUrl((interview as any).videoUrl) || ''}
                                title={item!.title}
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                                className="w-full h-full"
                            ></iframe>
                        ) : (
                            <div className="w-full h-full flex items-center justify-center bg-gray-900 min-h-[300px]">
                                <p className="text-white">Vidéo non disponible</p>
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="relative h-64 md:h-96 rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-lg mb-8 sm:mb-10 w-full">
                        <LightboxImage 
                            src={item!.thumbnailUrl} 
                            alt={item!.title} 
                            position={(item as any).coverPosition || "50% 50%"}
                            zoom={(item as any).coverZoom || 1}
                        />
                    </div>
                )}

                {/* Description / Article Content / Event Content */}
                <div className="prose sm:prose-lg prose-orange max-w-none mx-auto text-gray-600 px-4 sm:px-0">
                    {isEvent ? (
                        <div dangerouslySetInnerHTML={{ __html: sanitizeHTML((event as any).description) }} />
                    ) : (
                        !isVideo && (interview as any).content ? (
                            <div dangerouslySetInnerHTML={{ __html: sanitizeHTML((interview as any).content) }} />
                        ) : (
                            <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
                                {(interview as any).excerpt}
                            </p>
                        )
                    )}
                </div>

                {/* Event Link Action */}
                {isEvent && (event as any).link && (
                    <div className="mt-10 text-center px-4 sm:px-0">
                        <Link 
                            href={(event as any).link} 
                            target="_blank" 
                            className="inline-flex items-center px-8 py-4 bg-brand-600 text-white rounded-full font-bold shadow-lg hover:bg-brand-700 hover:shadow-xl transition-all"
                        >
                            Participer à l'événement <ArrowRight className="w-5 h-5 ml-2" />
                        </Link>
                    </div>
                )}

                {/* Footer Actions / Partage */}
                <div className="mt-10 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100 px-4 sm:px-0 pb-8 sm:pb-0">
                    <p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 text-center">
                        Partager {isEvent ? "cet événement" : "cette interview"}
                    </p>
                    <BlogShareButtons title={item!.title} layout="horizontal" />
                </div>
            </div>
        </div>
    );
}