function EmployeeDetailModal({ employee, onClose }) {
    if (!employee) return null;

    // Parse Lembaga Lain (comma separated)
    const otherLocations = employee.lembaga 
        ? employee.lembaga.split(',').map(l => l.trim()).filter(Boolean) 
        : [];

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 animate-fade-in" onClick={onClose}>
            <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden" onClick={e => e.stopPropagation()}>
                {/* Header */}
                <div className="bg-[var(--primary-color)] p-6 text-white relative">
                    <button 
                        onClick={onClose}
                        className="absolute right-4 top-4 text-white/70 hover:text-white transition-colors"
                    >
                        <div className="icon-x text-2xl"></div>
                    </button>
                    
                    <div className="flex items-center gap-4">
                        <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center text-2xl font-bold backdrop-blur-sm border-2 border-white/30">
                            {employee.nama ? employee.nama.charAt(0).toUpperCase() : '?'}
                        </div>
                        <div>
                            <h2 className="text-xl font-bold leading-tight">{employee.nama}</h2>
                            <p className="text-teal-100 text-sm mt-1 flex items-center gap-1">
                                <div className="icon-briefcase text-xs"></div>
                                {employee.jabatan || 'Tanpa Jabatan'}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Content */}
                <div className="p-6 overflow-y-auto max-h-[70vh]">
                    {/* Status Badge */}
                    <div className="flex justify-between items-start mb-6">
                        <div className="bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200 text-xs font-mono text-gray-500">
                            ID: {employee.nik || 'BELUM ADA NIK'}
                        </div>
                        <span className={`px-3 py-1 rounded-full text-xs font-bold border ${
                            employee.is_active 
                            ? 'bg-green-50 text-green-700 border-green-200' 
                            : 'bg-red-50 text-red-700 border-red-200'
                        }`}>
                            {employee.is_active ? 'Aktif' : 'Non-Aktif'}
                        </span>
                    </div>

                    <div className="space-y-6">
                        {/* Informasi Utama */}
                        <div>
                            <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                                <div className="icon-user text-gray-400"></div>
                                Data Pribadi
                            </h3>
                            <div className="grid grid-cols-2 gap-4">
                                <div className="bg-gray-50 p-3 rounded-lg">
                                    <div className="text-xs text-gray-400 mb-1">Jenis Kelamin</div>
                                    <div className="font-medium text-gray-800">
                                        {employee.jenis_kelamin === 'L' ? 'Laki-laki' : 
                                         employee.jenis_kelamin === 'P' ? 'Perempuan' : '-'}
                                    </div>
                                </div>
                                <div className="bg-gray-50 p-3 rounded-lg">
                                    <div className="text-xs text-gray-400 mb-1">Status Kepegawaian</div>
                                    <div className="font-medium text-gray-800">{employee.status || '-'}</div>
                                </div>
                                <div className="bg-gray-50 p-3 rounded-lg col-span-2">
                                    <div className="text-xs text-gray-400 mb-1">Mulai Tugas (TMT)</div>
                                    <div className="font-medium text-gray-800">
                                        {employee.tmt 
                                            ? new Date(employee.tmt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) 
                                            : '-'
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Lokasi Mengajar */}
                        <div>
                            <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
                                <div className="icon-map-pin text-gray-400"></div>
                                Lokasi Mengajar
                            </h3>
                            
                            <div className="space-y-3">
                                {/* Satminkal */}
                                <div className="border-l-4 border-teal-500 bg-teal-50 p-4 rounded-r-lg">
                                    <div className="text-xs font-bold text-teal-700 mb-1 flex items-center gap-1">
                                        <div className="icon-building-2 text-xs"></div>
                                        SATMINKAL (INDUK)
                                    </div>
                                    <div className="text-lg font-bold text-gray-800">
                                        {employee.satminkal || 'Belum ditentukan'}
                                    </div>
                                </div>

                                {/* Lembaga Lain */}
                                {otherLocations.length > 0 ? (
                                    <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                                        <div className="text-xs font-bold text-orange-700 mb-2 flex items-center gap-1">
                                            <div className="icon-building text-xs"></div>
                                            TEMPAT MENGAJAR LAIN
                                        </div>
                                        <ul className="space-y-2">
                                            {otherLocations.map((loc, idx) => (
                                                <li key={idx} className="flex items-center gap-2 text-gray-800 font-medium border-b border-orange-200/50 last:border-0 pb-1 last:pb-0">
                                                    <div className="w-1.5 h-1.5 bg-orange-400 rounded-full"></div>
                                                    {loc}
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                ) : (
                                    <div className="text-sm text-gray-400 italic px-4">
                                        Tidak ada data tempat mengajar lain.
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Info Non-Aktif (Jika ada) */}
                        {!employee.is_active && (
                            <div className="bg-red-50 border border-red-100 p-4 rounded-lg">
                                <h3 className="text-red-800 font-bold text-sm mb-2 flex items-center gap-2">
                                    <div className="icon-alert-circle text-red-600"></div>
                                    Riwayat Keluar
                                </h3>
                                <div className="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span className="block text-red-400 text-xs">Tanggal</span>
                                        <span className="text-red-900 font-medium">
                                            {employee.tanggal_keluar || '-'}
                                        </span>
                                    </div>
                                    <div>
                                        <span className="block text-red-400 text-xs">Alasan</span>
                                        <span className="text-red-900 font-medium">
                                            {employee.alasan_keluar || '-'}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>

                <div className="bg-gray-50 p-4 border-t border-gray-100 flex justify-end">
                    <button 
                        onClick={onClose}
                        className="px-6 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition-colors"
                    >
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    );
}