import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { Calendar, ArrowLeft, FileText } 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.laporanKeuangan.findUnique({ where: { id } });
    if (!item) return { title: 'Laporan Keuangan Tidak Ditemukan' };
    return {
        title: `${item.judul} | Laporan Keuangan HMF`,
        description: item.narasi ? item.narasi.substring(0, 160) : `Periode: ${item.periode}`,
    };
}

export default async function LaporanKeuanganDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.laporanKeuangan.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/20 via-[#07090f] to-[#07090f]"></div>
            </div>

            <div className="container px-4 md:px-8 max-w-4xl mx-auto relative z-10">
                <Link 
                    href="/laporan-keuangan" 
                    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 Laporan Keuangan
                </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">
                            Laporan Keuangan
                        </span>
                    </div>

                    <h1 className="text-3xl md:text-5xl font-sans font-black text-white mb-4 leading-tight tracking-tight">
                        {item.judul}
                    </h1>
                    <p className="text-sm md:text-base font-medium text-gray-400 mb-6 bg-white/5 inline-block px-4 py-2 rounded-xl border border-white/10">
                        Periode Laporan: <span className="text-blue-400">{item.periode}</span>
                    </p>
                    <div className="w-16 h-1.5 bg-gradient-to-r from-blue-500 to-indigo-500 mb-8 rounded-full"></div>

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

                    {item.fileUrl && (
                        <div className="mt-8 flex flex-col gap-4">
                            <h3 className="text-lg font-bold text-white flex items-center gap-2">
                                <FileText className="w-5 h-5 text-blue-400" /> Preview Dokumen
                            </h3>
                            <div className="w-full h-[600px] rounded-2xl overflow-hidden border border-white/10 bg-white/5 shadow-2xl">
                                <iframe 
                                    src={item.fileUrl} 
                                    className="w-full h-full border-none"
                                    title={`Preview PDF - ${item.judul}`}
                                />
                            </div>
                            <div className="flex justify-end">
                                <a 
                                    href={item.fileUrl} 
                                    target="_blank" 
                                    rel="noopener noreferrer"
                                    className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-medium transition-colors"
                                >
                                    Buka di Tab Baru
                                </a>
                            </div>
                        </div>
                    )}
                </article>
            </div>
        </div>
    );
}