afrov2/app/afrolife/[id]/page.tsx

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

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

export default async function InterviewDetailPage({ params }: Props) {
    const { id } = await params;
    
    const interview = await prisma.interview.findUnique({
        where: { id }
    });

    if (!interview) {
        notFound();
    }

    // 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 = interview.type === InterviewType.VIDEO;

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

                {/* Header Info */}
                <div className="text-center mb-10">
                    <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">
                        {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">
                        {interview.title}
                    </h1>

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

                {/* Main Content Area */}
                {isVideo ? (
                    <div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
                        {interview.videoUrl ? (
                            <iframe
                                src={getEmbedUrl(interview.videoUrl) || ''}
                                title={interview.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-xl overflow-hidden shadow-lg mb-10">
                        <img src={interview.thumbnailUrl} alt={interview.title} className="w-full h-full object-cover" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                )}

                {/* Description / Article Content */}
                <div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600 break-words overflow-hidden">
                    {!isVideo && interview.content ? (
                        <div dangerouslySetInnerHTML={{ __html: interview.content }} />
                    ) : (
                        <p className="text-xl font-serif italic text-gray-500 border-l-4 border-brand-500 pl-6 py-2">
                            {interview.excerpt}
                        </p>
                    )}
                </div>

                {/* Footer Actions */}
                <div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
                    <button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
                        <Share2 className="w-5 h-5 mr-2" />
                        Partager cette interview
                    </button>
                </div>
            </div>
        </div>
    );
}