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.prestasi.findUnique({ where: { id } });
    if (!item) return { title: 'Prestasi Tidak Ditemukan' };
    return {
        title: `${item.judul} | Prestasi HMF`,
        description: item.narasi.substring(0, 160),
    };
}

export default async function PrestasiDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.prestasi.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="/prestasi" 
                    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 Prestasi
                </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 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">
                            Prestasi
                        </span>
                    </div>

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

                    {item.imageUrl && (
                        <div className="w-full bg-black/40 rounded-2xl overflow-hidden mb-8 max-h-[500px] flex items-center justify-center border border-white/10 shadow-2xl">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                                src={item.imageUrl}
                                alt={item.judul}
                                className="max-h-[500px] object-contain w-full"
                            />
                        </div>
                    )}

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