function InstitutionList({ year }) {
    const [employees, setEmployees] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    const [groupedData, setGroupedData] = React.useState({});
    const [selectedInstitution, setSelectedInstitution] = React.useState(null);
    const [institutionStats, setInstitutionStats] = React.useState([]);
    const [searchTerm, setSearchTerm] = React.useState(''); // New Search State

    React.useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            setError(null);
            try {
                const client = window.SupabaseUtils.getClient();
                if (!client) throw new Error("Koneksi database terputus");

                const { data, error } = await client
                    .from('employees')
                    .select('*')
                    .eq('tahun', year) // Filter year
                    .order('nama', { ascending: true });
                
                if (error) throw error;
                
                processData(data || []);
            } catch (err) {
                console.error("Fetch Error:", err);
                setError(window.SupabaseUtils.formatError(err));
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [year]);

    const handlePrint = () => {
        window.print();
    };

    const processData = (data) => {
        const groups = {};
        const stats = [];

        data.forEach(emp => {
            // Helper to add employee to a group
            const addToGroup = (instName, role) => {
                const name = instName.trim();
                if (!name) return;
                
                if (!groups[name]) {
                    groups[name] = [];
                }
                
                // Avoid duplicates in the same group if user input error
                if (!groups[name].find(e => e.id === emp.id)) {
                    groups[name].push({ ...emp, _roleInGroup: role });
                }
            };

            // 1. Add from Satminkal (Induk)
            if (emp.satminkal) {
                addToGroup(emp.satminkal, 'Induk (Satminkal)');
            }

            // 2. Add from Lembaga (Lainnya)
            if (emp.lembaga) {
                // Split by comma, handling potential spaces
                const otherOrgs = emp.lembaga.split(',').map(s => s.trim()).filter(Boolean);
                otherOrgs.forEach(org => {
                    // Only add if it's different from Satminkal to differentiate role, 
                    // or just add it anyway? Usually 'lembaga' field implies *other* places.
                    // But if user typed satminkal in lembaga field too, we handle it:
                    if (org.toLowerCase() !== (emp.satminkal || '').toLowerCase()) {
                         addToGroup(org, 'Guru Pengajar');
                    }
                });
            }
        });

        // Calculate stats for sorting
        Object.keys(groups).forEach(key => {
            stats.push({
                name: key,
                count: groups[key].length,
                indukCount: groups[key].filter(e => e._roleInGroup === 'Induk (Satminkal)').length
            });
        });

        // Sort institutions by number of teachers
        stats.sort((a, b) => b.count - a.count);

        setGroupedData(groups);
        setInstitutionStats(stats);
        
        // Select first one by default if available
        if (stats.length > 0 && !selectedInstitution) {
            setSelectedInstitution(stats[0].name);
        }
    };

    if (error) {
        return (
            <div className="p-8">
                <div className="bg-red-50 text-red-600 p-4 rounded border border-red-200 flex items-start gap-3">
                    <div className="icon-alert-triangle text-xl mt-0.5"></div>
                    <div>
                        <h3 className="font-bold">Gagal Memuat Data</h3>
                        <p className="text-sm">{error}</p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="flex flex-col md:flex-row h-full" data-name="institution-list" data-file="components/InstitutionList.js">
            {/* Sidebar List of Institutions */}
            <div className={`w-full md:w-80 bg-white border-r border-gray-200 flex flex-col h-[calc(100vh-120px)] md:h-[calc(100vh-64px)] overflow-hidden print:hidden ${selectedInstitution ? 'hidden md:flex' : 'flex animate-fade-in'}`}>
                <div className="p-4 border-b border-gray-200 bg-gray-50 flex flex-col gap-3">
                    <div>
                        <h2 className="font-bold text-gray-800 flex items-center gap-2">
                            <div className="icon-building text-teal-600"></div>
                            Daftar Lembaga
                        </h2>
                        <p className="text-xs text-gray-500 mt-1">
                            Total {institutionStats.length} lembaga terdata
                        </p>
                    </div>
                    {/* Search Bar */}
                    <div className="relative">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <div className="icon-search text-sm"></div>
                        </div>
                        <input 
                            type="text"
                            placeholder="Cari lembaga..."
                            className="w-full pl-9 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                    </div>
                </div>
                
                <div className="overflow-y-auto flex-1 p-2 space-y-1">
                    {loading ? (
                        <div className="flex flex-col items-center justify-center h-40 text-gray-400">
                            <div className="animate-spin w-6 h-6 border-2 border-teal-500 border-t-transparent rounded-full mb-2"></div>
                            <span className="text-xs">Memuat daftar...</span>
                        </div>
                    ) : institutionStats.length === 0 ? (
                        <div className="p-8 text-center text-gray-400 text-sm flex flex-col items-center">
                            <div className="icon-building-2 text-3xl mb-2 opacity-30"></div>
                            Belum ada data.
                        </div>
                    ) : (
                        institutionStats
                            .filter(stat => stat.name.toLowerCase().includes(searchTerm.toLowerCase()))
                            .map(stat => (
                                <button
                                    key={stat.name}
                                    onClick={() => setSelectedInstitution(stat.name)}
                                    className={`w-full text-left px-4 py-3 rounded-lg flex justify-between items-center transition-all group ${
                                        selectedInstitution === stat.name 
                                        ? 'bg-teal-50 text-teal-900 border border-teal-200 shadow-sm' 
                                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-transparent hover:border-gray-200'
                                    }`}
                                >
                                    <div className="flex-1 min-w-0 pr-3">
                                        <div className="font-bold text-sm truncate" title={stat.name}>{stat.name}</div>
                                        <div className="flex items-center gap-2 mt-1">
                                            <span className="text-[10px] bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded flex items-center gap-1">
                                                <div className="icon-users text-[10px]"></div> {stat.count}
                                            </span>
                                            {stat.indukCount > 0 && (
                                                <span className="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded flex items-center gap-1">
                                                    <div className="icon-home text-[10px]"></div> Induk
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                    <div className={`icon-chevron-right text-gray-300 transition-transform ${selectedInstitution === stat.name ? 'text-teal-500' : 'group-hover:translate-x-1'}`}></div>
                                </button>
                        ))
                    )}
                    
                    {!loading && institutionStats.length > 0 && institutionStats.filter(stat => stat.name.toLowerCase().includes(searchTerm.toLowerCase())).length === 0 && (
                        <div className="p-8 text-center text-gray-400 text-sm">
                            Tidak ditemukan "{searchTerm}"
                        </div>
                    )}
                </div>
            </div>

            {/* Main Content: Employee Table */}
            <div className={`flex-1 flex flex-col h-[calc(100vh-64px)] overflow-hidden bg-gray-50 print:h-auto print:overflow-visible print:bg-white ${selectedInstitution ? 'flex animate-slide-in' : 'hidden md:flex'}`}>
                {selectedInstitution && groupedData[selectedInstitution] ? (
                    <>
                        {/* Screen Header */}
                        <div className="p-4 md:p-6 pb-2 print:hidden flex flex-col md:flex-row justify-between md:items-end gap-3">
                            <div className="flex items-center gap-2">
                                <button 
                                    onClick={() => setSelectedInstitution(null)}
                                    className="md:hidden p-2 -ml-2 text-gray-500 hover:text-gray-700"
                                >
                                    <div className="icon-arrow-left text-xl"></div>
                                </button>
                                <div>
                                    <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-1 leading-tight">{selectedInstitution}</h2>
                                    <div className="flex gap-4 text-sm text-gray-500">
                                        <span>Total Pegawai: <strong>{groupedData[selectedInstitution].length}</strong></span>
                                    </div>
                                </div>
                            </div>
                            <button 
                                onClick={handlePrint}
                                className="bg-gray-800 text-white px-4 py-2 rounded flex items-center justify-center gap-2 hover:bg-gray-900 transition-colors shadow-sm w-full md:w-auto text-sm"
                            >
                                <div className="icon-printer text-lg"></div>
                                Export PDF / Cetak
                            </button>
                        </div>

                        {/* Screen Table Container */}
                        <div className="flex-1 overflow-auto p-4 md:p-6 pt-2 print:hidden pb-24 md:pb-6">
                            {/* Desktop Table */}
                            <div className="hidden md:block bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                                <table className="w-full text-sm text-left">
                                    <thead className="bg-gray-100 text-gray-600 font-medium border-b border-gray-200">
                                        <tr>
                                            <th className="px-6 py-3 w-16 text-center">No</th>
                                            <th className="px-6 py-3">Nama Pegawai</th>
                                            <th className="px-6 py-3">NIK</th>
                                            <th className="px-6 py-3">Jabatan</th>
                                            <th className="px-6 py-3">Status di Lembaga</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-200">
                                        {groupedData[selectedInstitution].map((emp, idx) => (
                                            <tr key={emp.id} className="hover:bg-gray-50">
                                                <td className="px-6 py-3 text-center text-gray-400">{idx + 1}</td>
                                                <td className="px-6 py-3 font-medium text-gray-900">{emp.nama}</td>
                                                <td className="px-6 py-3 font-mono text-gray-500 text-xs">{emp.nik}</td>
                                                <td className="px-6 py-3 text-gray-600">{emp.jabatan}</td>
                                                <td className="px-6 py-3">
                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                                        emp._roleInGroup.includes('Induk') 
                                                        ? 'bg-green-100 text-green-800' 
                                                        : 'bg-yellow-100 text-yellow-800'
                                                    }`}>
                                                        {emp._roleInGroup}
                                                    </span>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>

                            {/* Mobile Card View */}
                            <div className="md:hidden space-y-3">
                                {groupedData[selectedInstitution].map((emp, idx) => (
                                    <div key={emp.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                                        <div className="flex justify-between items-start mb-2">
                                            <div className="flex items-center gap-3">
                                                <span className="bg-gray-100 text-gray-500 w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold">{idx + 1}</span>
                                                <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
                                                    emp._roleInGroup.includes('Induk') 
                                                    ? 'bg-green-100 text-green-800' 
                                                    : 'bg-yellow-100 text-yellow-800'
                                                }`}>
                                                    {emp._roleInGroup.includes('Induk') ? 'Induk' : 'Pengajar'}
                                                </span>
                                            </div>
                                        </div>
                                        
                                        <div className="mb-2">
                                            <div className="font-bold text-gray-900 text-base">{emp.nama}</div>
                                            <div className="text-xs text-gray-500 font-mono mt-0.5">NIK: {emp.nik || '-'}</div>
                                        </div>

                                        <div className="flex items-center gap-2 text-xs text-gray-600 bg-gray-50 p-2 rounded">
                                            <div className="icon-briefcase text-gray-400"></div>
                                            <span className="truncate">{emp.jabatan || 'Tanpa Jabatan'}</span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* PRINT ONLY SECTION */}
                        <div className="hidden print:block p-8 bg-white text-black">
                            {/* Report Header */}
                            <div className="flex flex-col items-center text-center border-b-2 border-black pb-4 mb-6 relative">
                                <img 
                                    src={window.AppAssets.logo} 
                                    alt="Logo" 
                                    className="w-24 h-24 object-contain absolute left-0 top-0" 
                                />
                                <h1 className="text-2xl font-bold uppercase tracking-wide mb-1">DATA KEPEGAWAIAN</h1>
                                <h2 className="text-xl font-bold uppercase text-gray-800">{selectedInstitution}</h2>
                                <p className="text-sm mt-2 text-gray-600">Pondok Pesantren Karangasem Paciran</p>
                            </div>

                            <div className="mb-4 flex justify-between items-end">
                                <div className="text-sm">
                                    <div>Total Pegawai: <strong>{groupedData[selectedInstitution].length} Orang</strong></div>
                                    <div>Dicetak pada: {new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}</div>
                                </div>
                            </div>

                            {/* Report Table */}
                            <table className="w-full text-sm border-collapse border border-black">
                                <thead className="bg-gray-100">
                                    <tr>
                                        <th className="border border-black px-3 py-2 text-center w-12">No</th>
                                        <th className="border border-black px-3 py-2 text-left">Nama Lengkap</th>
                                        <th className="border border-black px-3 py-2 text-left w-32">NIK</th>
                                        <th className="border border-black px-3 py-2 text-left">Jabatan</th>
                                        <th className="border border-black px-3 py-2 text-center w-24">Status</th>
                                        <th className="border border-black px-3 py-2 text-center w-32">Tanda Tangan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {groupedData[selectedInstitution].map((emp, idx) => (
                                        <tr key={emp.id}>
                                            <td className="border border-black px-3 py-3 text-center">{idx + 1}</td>
                                            <td className="border border-black px-3 py-3 font-medium">
                                                {emp.nama}
                                                {emp.gelar ? `, ${emp.gelar}` : ''}
                                            </td>
                                            <td className="border border-black px-3 py-3 font-mono text-xs">{emp.nik || '-'}</td>
                                            <td className="border border-black px-3 py-3">{emp.jabatan || '-'}</td>
                                            <td className="border border-black px-3 py-3 text-center text-xs">
                                                {emp._roleInGroup.includes('Induk') ? 'INDUK' : 'Luar'}
                                            </td>
                                            <td className="border border-black px-3 py-3 text-left text-xs text-gray-400 align-bottom h-16">
                                                {idx % 2 === 0 ? (
                                                    <div className="pl-1">{idx + 1} ......</div>
                                                ) : (
                                                    <div className="text-right pr-1">...... {idx + 1}</div>
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>

                            {/* Report Footer / Signature Area */}
                            <div className="mt-12 flex justify-end">
                                <div className="text-center w-64">
                                    <div className="mb-20">
                                        Paciran, {new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
                                        <br/>
                                        Kepala / Pimpinan,
                                    </div>
                                    <div className="border-b border-black w-full mx-auto"></div>
                                    <div className="mt-1 font-bold">( ........................................... )</div>
                                </div>
                            </div>
                        </div>
                    </>
                ) : (
                    <div className="flex-1 flex items-center justify-center text-gray-400">
                        <div className="text-center">
                            <div className="icon-arrow-left text-4xl mb-2 mx-auto opacity-50"></div>
                            <p>Pilih lembaga di sebelah kiri untuk melihat detail</p>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}