import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { Calendar, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { format } from 'date-fns';
import { id as localeId } from 'date-fns/locale';
import { formatNarrativeWithLinks } from '@/lib/utils';

export const revalidate = 60;

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.rangersTalk.findUnique({ where: { id } });
    if (!item) return { title: 'Rangers Talk Tidak Ditemukan' };
    return {
        title: `${item.judul} | Rangers Talk`,
        description: item.narasi.substring(0, 160),
    };
}

export default async function RangersTalkDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.rangersTalk.findUnique({
        where: { id },
    });

    if (!item) {
        notFound();
    }

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] pt-32 pb-24 font-sans text-white relative">
            {/* Background elements to match the theme */}
            <div className="absolute inset-0 z-0 pointer-events-none">
                <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}></div>
                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/10 via-[#07090f] to-[#07090f]"></div>
            </div>

            <div className="container px-4 md:px-8 max-w-4xl mx-auto relative z-10">
                <Link 
                    href="/rangers-talk" 
                    className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-8 font-semibold transition-colors bg-white/5 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 hover:bg-white/10"
                >
                    <ArrowLeft className="w-4 h-4" /> Kembali ke Rangers Talk
                </Link>

                <article className="bg-white/5 backdrop-blur-xl rounded-[2rem] overflow-hidden shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] border border-white/10 p-6 md:p-10">
                    <div className="flex flex-col md:flex-row gap-8">
                        {/* 9:16 Portrait Image Panel */}
                        {item.imageUrl && (
                            <div className="w-full md:w-[320px] bg-black/40 rounded-2xl overflow-hidden flex items-center justify-center border border-white/10 shadow-2xl self-start flex-shrink-0">
                                {/* eslint-disable-next-line @next/next/no-img-element */}
                                <img
                                    src={item.imageUrl}
                                    alt={item.judul}
                                    className="w-full h-auto object-cover aspect-[9/16]"
                                />
                            </div>
                        )}

                        {/* Content Panel */}
                        <div className="flex-1">
                            <div className="flex items-center gap-2 text-xs text-gray-400 mb-4">
                                <Calendar className="w-4 h-4" />
                                {format(new Date(item.createdAt), 'dd MMMM yyyy', { locale: localeId })}
                                <span className="ml-3 inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-blue-500/10 text-blue-400 border border-blue-500/20">
                                    Rangers Talk
                                </span>
                            </div>

                            <h1 className="text-2xl md:text-4xl font-sans font-black text-white mb-4 leading-tight tracking-tight">
                                {item.judul}
                            </h1>
                            <div className="w-12 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mb-6 rounded-full"></div>

                            <div className="text-gray-300 text-base md:text-lg leading-relaxed whitespace-pre-line">
                                {formatNarrativeWithLinks(item.narasi)}
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    );
}