import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { Star, ArrowLeft, Linkedin, Instagram, User } from 'lucide-react';
import Link from 'next/link';

export const revalidate = 60;

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.awardeePH.findUnique({
        where: { id },
        include: { pengurus: true },
    });
    if (!item) return { title: 'Awardee Tidak Ditemukan' };
    const nama = item.pengurus?.nama || 'Pengurus HMF';
    return {
        title: `${nama} - Awardee PH HMF`,
        description: `Penghargaan Awardee PH HMF Kategori ${item.kategori} Kategori ${item.bidang} - Periode ${item.periode} ${item.tahun}`,
    };
}

export default async function AwardeeDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const item = await prisma.awardeePH.findUnique({
        where: { id },
        include: { pengurus: true },
    });

    if (!item) {
        notFound();
    }

    const pengurus = item.pengurus || {
        nama: "Alumni / Fungsionaris Terhapus",
        npm: "-",
        angkatan: "-",
        jabatan: "-",
        divisi: "-",
        fotoUrl: "",
        instagramUrl: null,
        linkedinUrl: null,
    };

    return (
        <div className="min-h-screen bg-[#0B1F3A] pt-32 pb-24 font-sans text-white">
            <div className="container px-4 md:px-8 max-w-4xl mx-auto">
                <Link 
                    href="/awardee" 
                    className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-8 font-semibold transition-colors"
                >
                    <ArrowLeft className="w-4 h-4" /> Kembali ke Awardee
                </Link>

                <div className="relative w-full bg-white/5 border border-white/10 rounded-3xl shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[500px]">
                    {/* Image Panel (3:4) */}
                    <div className="w-full md:w-1/2 bg-white/5 relative min-h-[400px] md:min-h-0">
                        {pengurus.fotoUrl ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img
                                src={pengurus.fotoUrl}
                                alt={pengurus.nama}
                                className="absolute inset-0 w-full h-full object-cover"
                            />
                        ) : (
                            <div className="absolute inset-0 flex items-center justify-center text-white/20">
                                <User className="w-24 h-24 stroke-[1]" />
                            </div>
                        )}
                    </div>

                    {/* Text Panel */}
                    <div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center space-y-6">
                        <div>
                            <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-4
                                ${item.kategori === 'KETUA_BIDANG_TERBAIK' ? 'bg-[#c9a24d]/20 text-[#c9a24d]' : 'bg-white/10 text-white/80'}`}>
                                <Star className="w-3.5 h-3.5 fill-current" />
                                {item.kategori === 'KETUA_BIDANG_TERBAIK' ? 'Ketua Bidang Terbaik' : 'Staf Terbaik'}
                            </span>
                            <h1 className="text-3xl md:text-4xl font-bold font-serif leading-tight">{pengurus.nama}</h1>
                            <p className="text-[#c9a24d] font-semibold text-base mt-2">{item.bidang}</p>
                            <p className="text-gray-400 text-sm mt-1">Periode: {item.periode} {item.tahun}</p>
                        </div>

                        <div className="border-t border-white/10 pt-4 space-y-3 text-sm">
                            <div className="flex justify-between border-b border-white/5 pb-2">
                                <span className="text-gray-400">Angkatan:</span>
                                <span className="font-semibold">{pengurus.angkatan}</span>
                            </div>
                            <div className="flex justify-between border-b border-white/5 pb-2">
                                <span className="text-gray-400">Jabatan:</span>
                                <span className="font-semibold">{pengurus.jabatan}</span>
                            </div>
                            <div className="flex justify-between pb-2">
                                <span className="text-gray-400">Divisi:</span>
                                <span className="font-semibold">{pengurus.divisi}</span>
                            </div>
                        </div>

                        {/* Social Media Links */}
                        {(pengurus.instagramUrl || pengurus.linkedinUrl) && (
                            <div className="flex gap-4 pt-2">
                                {pengurus.instagramUrl && (
                                    <a 
                                        href={pengurus.instagramUrl} 
                                        target="_blank" 
                                        rel="noopener noreferrer" 
                                        className="p-3 bg-white/5 hover:bg-white/10 text-white rounded-full transition-colors flex items-center justify-center border border-white/10"
                                    >
                                        <Instagram className="w-5 h-5" />
                                    </a>
                                )}
                                {pengurus.linkedinUrl && (
                                    <a 
                                        href={pengurus.linkedinUrl} 
                                        target="_blank" 
                                        rel="noopener noreferrer" 
                                        className="p-3 bg-white/5 hover:bg-white/10 text-white rounded-full transition-colors flex items-center justify-center border border-white/10"
                                    >
                                        <Linkedin className="w-5 h-5" />
                                    </a>
                                )}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}