'use client';

import { Award, Star, User } from 'lucide-react';
import Link from 'next/link';

interface Pengurus {
    id: string;
    nama: string;
    npm: string | null;
    jabatan: string;
    divisi: string;
    angkatan: string;
    fotoUrl: string;
    linkedinUrl: string | null;
    instagramUrl: string | null;
}

interface AwardeeItem {
    id: string;
    periode: string;
    tahun: string;
    kategori: string;
    bidang: string;
    pengurusId: string;
    createdAt: Date | string;
    pengurus: Pengurus;
}

export default function AwardeeClientGrid({ awards }: { awards: AwardeeItem[] }) {
    // Group by tahun+periode
    const grouped = awards.reduce<Record<string, AwardeeItem[]>>((acc, a) => {
        const key = `${a.tahun} - ${a.periode}`;
        if (!acc[key]) acc[key] = [];
        acc[key].push(a);
        return acc;
    }, {});

    return (
        <div className="flex flex-col gap-12 max-w-6xl mx-auto">
            {Object.entries(grouped).map(([key, awardees]) => {
                const ketuaBidang = awardees.filter(a => a.kategori === 'KETUA_BIDANG_TERBAIK');
                const wakilTerbaik = awardees.filter(a => a.kategori === 'WAKIL_TERBAIK');
                const stafTerbaik = awardees.filter(a => a.kategori === 'STAF_TERBAIK');
                
                // Group staf terbaik per bidang
                const stafPerBidang = stafTerbaik.reduce<Record<string, AwardeeItem[]>>((acc, staf) => {
                    if (!acc[staf.bidang]) acc[staf.bidang] = [];
                    acc[staf.bidang].push(staf);
                    return acc;
                }, {});
                
                return (
                    <div key={key} className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]">
                        <div className="bg-blue-600/10 px-8 py-5 border-b border-white/10 flex items-center gap-3">
                            <Award className="w-6 h-6 text-blue-400" />
                            <h2 className="text-2xl font-bold text-white">
                                Periode {key}
                            </h2>
                        </div>
                        
                        <div className="p-8 space-y-12">
                            {/* Ketua Bidang Terbaik */}
                            {ketuaBidang.length > 0 && (
                                <div>
                                    <h3 className="text-sm font-bold text-blue-400 tracking-widest uppercase mb-6 flex items-center gap-2">
                                        <Star className="w-4 h-4 fill-blue-400" /> Ketua Bidang Terbaik
                                    </h3>
                                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                                        {ketuaBidang.map(a => (
                                            <div 
                                                key={a.id} 
                                                className="group bg-white/5 rounded-2xl overflow-hidden border border-blue-500/20 shadow-[0_4px_20px_0_rgba(0,0,0,0.2)] flex flex-col relative"
                                            >
                                                <div className="aspect-[3/4] w-full overflow-hidden bg-black/20 relative z-10">
                                                    {a.pengurus?.fotoUrl ? (
                                                        // eslint-disable-next-line @next/next/no-img-element
                                                        <img 
                                                            src={a.pengurus.fotoUrl} 
                                                            alt={a.pengurus.nama} 
                                                            className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
                                                        />
                                                    ) : (
                                                        <div className="absolute inset-0 flex items-center justify-center text-blue-400/40">
                                                            <User className="w-16 h-16 stroke-[1.2]" />
                                                        </div>
                                                    )}
                                                </div>
                                                <div className="p-4 text-center relative z-10 bg-gradient-to-b from-transparent to-black/20">
                                                    <p className="font-bold text-white text-sm md:text-base line-clamp-1">{a.pengurus?.nama || 'Awardee'}</p>
                                                    <p className="text-blue-400 text-xs md:text-sm font-semibold mt-1">{a.bidang}</p>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {/* Wakil Terbaik */}
                            {wakilTerbaik.length > 0 && (
                                <div>
                                    <h3 className="text-sm font-bold text-blue-300 tracking-widest uppercase mb-6 flex items-center gap-2">
                                        <Star className="w-4 h-4 fill-blue-300" /> Wakil Terbaik
                                    </h3>
                                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                                        {wakilTerbaik.map(a => (
                                            <div 
                                                key={a.id} 
                                                className="group bg-white/5 rounded-2xl overflow-hidden border border-blue-400/20 shadow-[0_4px_20px_0_rgba(0,0,0,0.2)] flex flex-col relative"
                                            >
                                                <div className="aspect-[3/4] w-full overflow-hidden bg-black/20 relative z-10">
                                                    {a.pengurus?.fotoUrl ? (
                                                        // eslint-disable-next-line @next/next/no-img-element
                                                        <img 
                                                            src={a.pengurus.fotoUrl} 
                                                            alt={a.pengurus.nama} 
                                                            className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
                                                        />
                                                    ) : (
                                                        <div className="absolute inset-0 flex items-center justify-center text-blue-300/40">
                                                            <User className="w-16 h-16 stroke-[1.2]" />
                                                        </div>
                                                    )}
                                                </div>
                                                <div className="p-4 text-center relative z-10 bg-gradient-to-b from-transparent to-black/20">
                                                    <p className="font-bold text-white text-sm md:text-base line-clamp-1">{a.pengurus?.nama || 'Awardee'}</p>
                                                    <p className="text-blue-300 text-xs md:text-sm font-semibold mt-1">{a.bidang}</p>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {/* Staf Terbaik */}
                            {Object.keys(stafPerBidang).length > 0 && (
                                <div>
                                    <h3 className="text-sm font-bold text-white/70 tracking-widest uppercase mb-6 flex items-center gap-2">
                                        <Star className="w-4 h-4" /> Staf Terbaik
                                    </h3>
                                    
                                    <div className="space-y-8">
                                        {Object.entries(stafPerBidang).map(([bidangName, stafs]) => (
                                            <div key={bidangName}>
                                                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 pb-2 border-b border-white/5">{bidangName}</h4>
                                                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                                                    {stafs.map(a => (
                                                        <div 
                                                            key={a.id} 
                                                            className="group bg-white/5 rounded-2xl overflow-hidden border border-white/10 flex flex-col relative"
                                                        >
                                                            <div className="aspect-[3/4] w-full overflow-hidden bg-black/20 relative z-10">
                                                                {a.pengurus?.fotoUrl ? (
                                                                    // eslint-disable-next-line @next/next/no-img-element
                                                                    <img 
                                                                        src={a.pengurus.fotoUrl} 
                                                                        alt={a.pengurus.nama} 
                                                                        className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
                                                                    />
                                                                ) : (
                                                                    <div className="absolute inset-0 flex items-center justify-center text-white/30">
                                                                        <User className="w-10 h-10 stroke-[1.2]" />
                                                                    </div>
                                                                )}
                                                            </div>
                                                            <div className="p-3 text-center relative z-10 bg-gradient-to-b from-transparent to-black/20">
                                                                <p className="font-bold text-white text-xs md:text-sm line-clamp-1">{a.pengurus?.nama || 'Awardee'}</p>
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}