'use client';

import { useState, useEffect } from 'react';
import { Edit2, Eye, Briefcase, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import BidangForm from '@/components/admin/bidang-form';

const DIVISION_COLORS = [
    'bg-blue-50 border-blue-200 text-blue-700',
    'bg-violet-50 border-violet-200 text-violet-700',
    'bg-emerald-50 border-emerald-200 text-emerald-700',
    'bg-orange-50 border-orange-200 text-orange-700',
    'bg-rose-50 border-rose-200 text-rose-700',
    'bg-cyan-50 border-cyan-200 text-cyan-700',
    'bg-amber-50 border-amber-200 text-amber-700',
    'bg-indigo-50 border-indigo-200 text-indigo-700',
];

export default function BidangTable({ initialData }: { initialData: any[] }) {
    const [data, setData] = useState(initialData);
    const [isFormOpen, setIsFormOpen] = useState(false);
    const [selectedItem, setSelectedItem] = useState<any>(null);

    useEffect(() => { setData(initialData); }, [initialData]);

    const handleEdit = (item: any) => {
        setSelectedItem(JSON.parse(JSON.stringify(item)));
        setIsFormOpen(true);
    };

    return (
        <div>
            {/* Header */}
            <div className="mb-8">
                <h2 className="text-xl font-bold text-slate-800">Bidang & Lembaga</h2>
                <p className="text-sm text-slate-400 mt-0.5">Kelola profil dan program kerja setiap bidang/lembaga HMF FPMIPA UPI</p>
            </div>

            {data.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-24 bg-white border border-slate-200 rounded-2xl">
                    <Briefcase className="w-12 h-12 text-slate-200 mb-3" />
                    <p className="text-sm font-semibold text-slate-500">Belum ada bidang/lembaga</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    {data.map((item, idx) => {
                        const colorClass = DIVISION_COLORS[idx % DIVISION_COLORS.length];
                        const isLembaga = item.name.toLowerCase().includes('lembaga');
                        return (
                            <div key={item.slug} className="group bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 flex flex-col gap-4">
                                {/* Top: badge + name */}
                                <div>
                                    <span className={`inline-block text-[10px] font-bold uppercase tracking-widest px-2.5 py-1 rounded-full border ${colorClass} mb-3`}>
                                        {isLembaga ? 'Lembaga' : 'Bidang'}
                                    </span>
                                    <h3 className="font-bold text-slate-800 leading-snug">{item.name}</h3>
                                    {item.shortName && (
                                        <span className="text-[10px] font-mono text-slate-400 mt-0.5 block">{item.shortName}</span>
                                    )}
                                </div>

                                {/* Description */}
                                <p className="text-xs text-slate-500 leading-relaxed line-clamp-3 flex-1">
                                    {item.desc || 'Belum ada deskripsi untuk bidang/lembaga ini.'}
                                </p>

                                {/* Footer actions */}
                                <div className="flex items-center gap-2 pt-3 border-t border-slate-100">
                                    <button
                                        onClick={() => handleEdit(item)}
                                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 text-xs font-semibold hover:bg-slate-50 hover:border-slate-300 transition-all"
                                    >
                                        <Edit2 className="w-3.5 h-3.5" /> Edit
                                    </button>
                                    <Link href={`/admin/bidang/${item.slug}`} className="flex-1">
                                        <button className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#1e3a5f] text-white text-xs font-semibold hover:bg-[#1e3a5f]/90 transition-all">
                                            <Eye className="w-3.5 h-3.5" /> Kelola Proker
                                            <ArrowRight className="w-3 h-3 ml-auto" />
                                        </button>
                                    </Link>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {isFormOpen && (
                <BidangForm isOpen={isFormOpen} setIsOpen={setIsFormOpen} initialData={selectedItem} />
            )}
        </div>
    );
}