function EmployeeList({ year }) {
    const [employees, setEmployees] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    const [showForm, setShowForm] = React.useState(false);
    const [editingEmployee, setEditingEmployee] = React.useState(null);
    const [viewingEmployee, setViewingEmployee] = React.useState(null);
    const [showImport, setShowImport] = React.useState(false);
    const [selectedIds, setSelectedIds] = React.useState([]);

    // Coupon State
    const [showCouponModal, setShowCouponModal] = React.useState(false);
    const [couponData, setCouponData] = React.useState([]);

    // Pagination & Filter State
    const [currentPage, setCurrentPage] = React.useState(1);
    const [itemsPerPage, setItemsPerPage] = React.useState(25);
    const [showFilters, setShowFilters] = React.useState(false);
    
    // Advanced Filters
    const [filters, setFilters] = React.useState({
        global: '',
        nama: '',
        nik: '',
        satminkal: '',
        gender: '',
        kategori: '',
        jabatan: ''
    });

    // Master Data for Filter Options
    const [masterInstitutions, setMasterInstitutions] = React.useState([]);
    const [masterCategories, setMasterCategories] = React.useState([]);

    const fetchEmployees = 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('is_active', true)
                .eq('tahun', year) // Filter by Year
                .order('created_at', { ascending: false });
            
            if (error) {
                if (error.code === '42P01') {
                    throw new Error("Tabel 'employees' tidak ditemukan. Harap buat tabel di Supabase SQL Editor.");
                }
                throw error;
            }
            
            const list = data || [];
            setEmployees(list);

            // Extract unique categories from current data
            const uniqueCats = [...new Set(list.map(item => item.kategori).filter(Boolean))].sort();
            setMasterCategories(uniqueCats);

        } catch (err) {
            console.error("Fetch Error:", err);
            setError(window.SupabaseUtils.formatError(err));
        } finally {
            setLoading(false);
        }
    };

    const fetchInstitutions = async () => {
        try {
            const client = window.SupabaseUtils.getClient();
            if (!client) return;

            const { data } = await client
                .from('institutions')
                .select('nama')
                .order('nama', { ascending: true });
            
            if (data) {
                setMasterInstitutions(data.map(i => i.nama));
            } else {
                setMasterInstitutions([
                    "MAM 1 Paciran", "SMAM 6 Paciran", "SMKM 8 Paciran", "SMPM 14 Paciran", 
                    "MTs.M 2 Paciran", "MI 16 Paciran", "MI 20 Paciran", "TK Aisyiyah 1", 
                    "TK Aisyiyah 2", "TK Aisyiyah 3", "Pondok Pesantren"
                ]);
            }
        } catch (err) {
            console.error("Fetch Institutions Error:", err);
        }
    };

    React.useEffect(() => {
        fetchEmployees();
        fetchInstitutions();
    }, [year]); // Refetch when year changes

    // Reset page when filters change
    React.useEffect(() => {
        setCurrentPage(1);
    }, [filters, itemsPerPage]);

    const handleDelete = async (id) => {
        const result = await Swal.fire({
            title: "Hapus Data?",
            text: "Data pegawai ini akan dihapus permanen.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Ya, Hapus!",
            cancelButtonText: "Batal"
        });

        if (!result.isConfirmed) return;

        try {
            const client = window.SupabaseUtils.getClient();
            const { error } = await client.from('employees').delete().eq('id', id);
            if (error) throw error;
            
            Swal.fire({
                title: "Terhapus!",
                text: "Data pegawai berhasil dihapus.",
                icon: "success",
                timer: 1500,
                showConfirmButton: false
            });
            fetchEmployees();
        } catch (err) {
            Swal.fire("Gagal!", 'Gagal menghapus: ' + window.SupabaseUtils.formatError(err), "error");
        }
    };

    const handleView = (employee) => {
        setViewingEmployee(employee);
    };

    const handleEdit = (employee) => {
        setEditingEmployee(employee);
        setShowForm(true);
    };

    const handleAdd = () => {
        setEditingEmployee(null);
        setShowForm(true);
    };

    const handleFormClose = () => {
        setShowForm(false);
        setEditingEmployee(null);
    };

    const handleFormSave = () => {
        handleFormClose();
        fetchEmployees();
    };

    const handleImportSuccess = () => {
        setShowImport(false);
        fetchEmployees();
    };

    const handleFilterChange = (field, value) => {
        setFilters(prev => ({ ...prev, [field]: value }));
    };

    const resetFilters = () => {
        setFilters({
            global: '',
            nama: '',
            nik: '',
            satminkal: '',
            gender: '',
            kategori: '',
            jabatan: ''
        });
    };

    // Filter Logic
    const filteredEmployees = employees.filter(emp => {
        const globalMatch = !filters.global || 
            (emp.nama || '').toLowerCase().includes(filters.global.toLowerCase()) || 
            (emp.nik || '').includes(filters.global) ||
            (emp.satminkal || '').toLowerCase().includes(filters.global.toLowerCase());
        
        if (!globalMatch) return false;

        if (filters.nama && !(emp.nama || '').toLowerCase().includes(filters.nama.toLowerCase())) return false;
        if (filters.nik && !(emp.nik || '').includes(filters.nik)) return false;
        if (filters.satminkal && emp.satminkal !== filters.satminkal) return false;
        if (filters.gender && emp.jenis_kelamin !== filters.gender) return false;
        // Exact match for Kategori if selected from dropdown, or partial if typed (but we use dropdown now)
        if (filters.kategori && emp.kategori !== filters.kategori) return false;
        if (filters.jabatan && !(emp.jabatan || '').toLowerCase().includes(filters.jabatan.toLowerCase())) return false;

        return true;
    });

    const isFiltered = filteredEmployees.length !== employees.length;

    // Stats Calculation (based on filtered or full data? Usually full data provides better context, but let's use filtered for interactivity or full for overview. 
    // Requirement says "kartu jumlah total pegawai", usually implies global stats of current year.
    // Let's calculate based on ALL active employees for the current year (ignoring filters for the overview cards, unless filters are applied? 
    // Standard dashboard usually shows Total Data. If filters applied, maybe show "Filtered: X".
    // Let's stick to Year-based Total for the cards to be useful as a dashboard.
    
    const stats = React.useMemo(() => {
        const source = employees; // Use full list for the year
        const total = source.length;
        const male = source.filter(e => e.jenis_kelamin === 'L').length;
        const female = source.filter(e => e.jenis_kelamin === 'P').length;
        
        // Category Breakdown
        const cats = {};
        source.forEach(e => {
            const c = e.kategori || 'Tanpa Kategori';
            cats[c] = (cats[c] || 0) + 1;
        });
        
        return { total, male, female, cats };
    }, [employees]);

    // Pagination Logic
    const totalItems = filteredEmployees.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const paginatedEmployees = filteredEmployees.slice(startIndex, startIndex + itemsPerPage);

    const handleSelectAll = (e) => {
        if (e.target.checked) {
            const allIds = filteredEmployees.map(emp => emp.id);
            setSelectedIds(allIds);
        } else {
            setSelectedIds([]);
        }
    };

    const handleSelectOne = (id) => {
        setSelectedIds(prev => {
            if (prev.includes(id)) {
                return prev.filter(item => item !== id);
            } else {
                return [...prev, id];
            }
        });
    };

    const handleBulkDelete = async () => {
        if (selectedIds.length === 0) return;
        
        const result = await Swal.fire({
            title: `Hapus ${selectedIds.length} Data?`,
            text: "Data yang dipilih akan dihapus permanen!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Ya, Hapus Semua!",
            cancelButtonText: "Batal"
        });

        if (!result.isConfirmed) return;

        setLoading(true);
        try {
            const client = window.SupabaseUtils.getClient();
            const { error } = await client
                .from('employees')
                .delete()
                .in('id', selectedIds);
            
            if (error) throw error;
            
            setSelectedIds([]);
            fetchEmployees();
            
            Swal.fire({
                title: "Berhasil!",
                text: "Data terpilih telah dihapus.",
                icon: "success",
                timer: 1500,
                showConfirmButton: false
            });
        } catch (err) {
            Swal.fire("Gagal!", 'Gagal menghapus data massal: ' + window.SupabaseUtils.formatError(err), "error");
            setLoading(false);
        }
    };

    const handlePrintCoupons = () => {
        let dataToPrint = [];
        if (selectedIds.length > 0) {
            // Print selected only
            dataToPrint = employees.filter(e => selectedIds.includes(e.id));
        } else {
            // Print ALL current visible/filtered data
            dataToPrint = filteredEmployees;
        }

        if (dataToPrint.length === 0) {
            Swal.fire("Data Kosong", "Tidak ada data untuk dicetak.", "warning");
            return;
        }

        setCouponData(dataToPrint);
        setShowCouponModal(true);
    };

    const handleExportExcel = () => {
        try {
            // Export filtered data if filter is active, otherwise all data
            const dataToExport = filteredEmployees.length > 0 ? filteredEmployees : employees;
            
            if (dataToExport.length === 0) {
                Swal.fire("Data Kosong", "Tidak ada data untuk diexport.", "warning");
                return;
            }

            const wb = XLSX.utils.book_new();
            const header = ["No", "NIK", "Nama Lengkap", "Jenis Kelamin", "Satminkal", "Lembaga Lain", "Jabatan", "Kategori", "Status", "TMT"];
            
            const rows = dataToExport.map((emp, i) => [
                i + 1,
                emp.nik || '',
                emp.nama,
                emp.jenis_kelamin,
                emp.satminkal || '',
                emp.lembaga || '',
                emp.jabatan || '',
                emp.kategori || '',
                emp.status || '',
                emp.tmt || ''
            ]);

            const ws = XLSX.utils.aoa_to_sheet([header, ...rows]);
            
            // Auto-width adjustment
            const wscols = [
                {wch: 5},  // No
                {wch: 15}, // NIK
                {wch: 30}, // Nama
                {wch: 5},  // JK
                {wch: 25}, // Satminkal
                {wch: 25}, // Lembaga
                {wch: 20}, // Jabatan
                {wch: 15}, // Kategori
                {wch: 15}, // Status
                {wch: 12}  // TMT
            ];
            ws['!cols'] = wscols;

            XLSX.utils.book_append_sheet(wb, ws, "Data Pegawai");
            
            const dateStr = new Date().toISOString().split('T')[0];
            XLSX.writeFile(wb, `Data_Pegawai_Karangasem_${year}_${dateStr}.xlsx`);
            
            Swal.fire({
                icon: 'success',
                title: 'Export Berhasil',
                text: 'File Excel telah diunduh.',
                timer: 1500,
                showConfirmButton: false
            });
        } catch (err) {
            console.error(err);
            Swal.fire("Gagal", "Terjadi kesalahan saat export.", "error");
        }
    };

    return (
        <div className="p-8" data-name="employee-list" data-file="components/EmployeeList.js">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                <div>
                    <h2 className="text-2xl font-bold text-gray-800">Data Guru & Pegawai</h2>
                    <p className="text-gray-500">Kelola database seluruh pegawai di lingkungan PP Karangasem</p>
                </div>
                <div className="flex gap-2 w-full md:w-auto">
                    <button 
                        onClick={handleExportExcel}
                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-sm flex-1 md:flex-none justify-center"
                    >
                        <div className="icon-file-spreadsheet text-lg"></div>
                        Export Excel
                    </button>
                    <button 
                        onClick={() => setShowImport(true)}
                        className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-sm flex-1 md:flex-none justify-center"
                    >
                        <div className="icon-clipboard-paste text-lg"></div>
                        Import Excel
                    </button>

                    <button 
                        onClick={handlePrintCoupons}
                        className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-sm flex-1 md:flex-none justify-center"
                        title="Cetak kupon untuk data yang difilter"
                    >
                        <div className="icon-ticket text-lg"></div>
                        Cetak Semua
                    </button>

                    <button 
                        onClick={handleAdd}
                        className="bg-[var(--primary-color)] hover:bg-[var(--primary-hover)] text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-sm flex-1 md:flex-none justify-center"
                    >
                        <div className="icon-plus text-lg"></div>
                        Tambah Data
                    </button>
                </div>
            </div>

            {selectedIds.length > 0 && (
                <div className="bg-blue-50 border border-blue-200 p-4 rounded mb-6 flex justify-between items-center animate-pulse-once">
                    <div className="text-blue-800 font-medium text-sm">
                        {selectedIds.length} data terpilih
                    </div>
                    <div className="flex gap-2">
                        <button 
                            onClick={handlePrintCoupons}
                            className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-xs"
                        >
                            <div className="icon-ticket text-base"></div>
                            Cetak Kupon
                        </button>
                        <button 
                            onClick={handleBulkDelete}
                            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded flex items-center gap-2 shadow-sm transition-colors text-xs"
                        >
                            <div className="icon-trash-2 text-base"></div>
                            Hapus Terpilih
                        </button>
                    </div>
                </div>
            )}

            {error && (
                <div className="bg-red-50 text-red-600 p-4 rounded mb-6 border border-red-200 flex flex-col gap-3">
                    <div className="flex items-start gap-3">
                        <div className="icon-triangle-alert text-xl mt-0.5 shrink-0"></div>
                        <div>
                            <h4 className="font-bold">Terjadi Kesalahan</h4>
                            <p className="text-sm">{error}</p>
                        </div>
                    </div>
                    {/* Setup Guides */}
                    <div className="w-full space-y-4">
                        {(error.includes('Tabel') || error.includes('42P01') || error.includes('Could not find the table')) && (
                            <SqlSetupHelp />
                        )}
                        {/* Always show Update script if there is an error, just in case it's a column missing error that wasn't caught specifically */}
                         <SqlUpdateKategori />
                    </div>
                </div>
            )}

            {/* Statistics Cards */}
            {!loading && !error && (
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                    {/* Total Card */}
                    <div className="bg-white p-4 rounded-lg shadow border-l-4 border-teal-600 flex items-center justify-between">
                        <div>
                            <div className="text-gray-500 text-xs font-bold uppercase tracking-wider">Total Pegawai</div>
                            <div className="text-2xl font-bold text-gray-800 mt-1">{stats.total}</div>
                        </div>
                        <div className="w-10 h-10 rounded-full bg-teal-50 flex items-center justify-center text-teal-600">
                            <div className="icon-users text-xl"></div>
                        </div>
                    </div>

                    {/* Male Card */}
                    <div className="bg-white p-4 rounded-lg shadow border-l-4 border-blue-500 flex items-center justify-between">
                        <div>
                            <div className="text-gray-500 text-xs font-bold uppercase tracking-wider">Laki-laki</div>
                            <div className="text-2xl font-bold text-gray-800 mt-1">{stats.male}</div>
                        </div>
                        <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
                            <div className="icon-user text-xl"></div>
                        </div>
                    </div>

                    {/* Female Card */}
                    <div className="bg-white p-4 rounded-lg shadow border-l-4 border-pink-500 flex items-center justify-between">
                        <div>
                            <div className="text-gray-500 text-xs font-bold uppercase tracking-wider">Perempuan</div>
                            <div className="text-2xl font-bold text-gray-800 mt-1">{stats.female}</div>
                        </div>
                        <div className="w-10 h-10 rounded-full bg-pink-50 flex items-center justify-center text-pink-600">
                            <div className="icon-user text-xl"></div>
                        </div>
                    </div>

                    {/* Category Summary */}
                    <div className="bg-white p-4 rounded-lg shadow border border-gray-200 md:col-span-1">
                        <div className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-2">Per Kategori</div>
                        <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto custom-scrollbar">
                            {Object.entries(stats.cats).length > 0 ? (
                                Object.entries(stats.cats).map(([cat, count]) => (
                                    <span key={cat} className="inline-flex items-center px-2 py-1 rounded bg-gray-100 text-gray-600 text-xs font-medium border border-gray-200">
                                        {cat}: <strong className="ml-1 text-gray-900">{count}</strong>
                                    </span>
                                ))
                            ) : (
                                <span className="text-xs text-gray-400 italic">Belum ada kategori</span>
                            )}
                        </div>
                    </div>
                </div>
            )}

            <div className="bg-white rounded-lg shadow border border-gray-200 overflow-hidden mb-6">
                {/* Search & Filter Toggle Bar */}
                <div className="p-4 border-b border-gray-200 flex flex-col md:flex-row items-center gap-4 bg-gray-50">
                    <div className="relative flex-1 w-full">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                            <div className="icon-search text-lg"></div>
                        </div>
                        <input 
                            type="text" 
                            placeholder="Pencarian cepat (Nama, NIK, Satminkal)..."
                            className="w-full pl-10 pr-32 py-2 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 transition-all"
                            value={filters.global}
                            onChange={(e) => handleFilterChange('global', e.target.value)}
                        />
                         {(filters.global || isFiltered) && (
                            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-2 animate-fade-in pointer-events-none">
                                <span className="text-xs font-bold text-teal-700 bg-teal-50 px-2.5 py-1 rounded-full border border-teal-100 shadow-sm">
                                    {totalItems} Data Ditemukan
                                </span>
                            </div>
                         )}
                    </div>
                    <button 
                        onClick={() => setShowFilters(!showFilters)}
                        className={`flex items-center gap-2 px-4 py-2 rounded border transition-colors text-sm ${
                            showFilters 
                            ? 'bg-teal-100 border-teal-300 text-teal-800' 
                            : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-100'
                        }`}
                    >
                        <div className="icon-list-filter text-lg"></div>
                        <span>Filter Lanjutan</span>
                        {showFilters ? <div className="icon-chevron-up text-xs ml-1"></div> : <div className="icon-chevron-down text-xs ml-1"></div>}
                    </button>
                    
                    <div className="flex items-center gap-2 border-l pl-4 border-gray-300">
                        <span className="text-xs text-gray-500">Tampilkan:</span>
                        <select 
                            value={itemsPerPage}
                            onChange={(e) => setItemsPerPage(Number(e.target.value))}
                            className="text-sm border-gray-300 border rounded py-1 px-2 focus:ring-teal-500 focus:border-teal-500"
                        >
                            <option value={25}>25</option>
                            <option value={50}>50</option>
                            <option value={100}>100</option>
                            <option value={999999}>Semua</option>
                        </select>
                    </div>
                </div>

                {/* Collapsible Advanced Filters */}
                {showFilters && (
                    <div className="p-4 bg-gray-50 border-b border-gray-200 animate-fade-in">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Nama Pegawai</label>
                                <input 
                                    type="text" 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                    value={filters.nama}
                                    onChange={(e) => handleFilterChange('nama', e.target.value)}
                                    placeholder="Filter Nama..."
                                />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Nomor Induk (NIK)</label>
                                <input 
                                    type="text" 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                    value={filters.nik}
                                    onChange={(e) => handleFilterChange('nik', e.target.value)}
                                    placeholder="Cari NIK..."
                                />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Jabatan</label>
                                <input 
                                    type="text" 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none"
                                    value={filters.jabatan}
                                    onChange={(e) => handleFilterChange('jabatan', e.target.value)}
                                    placeholder="Cari Jabatan..."
                                />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Satminkal</label>
                                <select 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none cursor-pointer"
                                    value={filters.satminkal}
                                    onChange={(e) => handleFilterChange('satminkal', e.target.value)}
                                >
                                    <option value="">Semua Satminkal</option>
                                    {masterInstitutions.map(inst => (
                                        <option key={inst} value={inst}>{inst}</option>
                                    ))}
                                </select>
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Kategori Pegawai</label>
                                <select 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none cursor-pointer"
                                    value={filters.kategori}
                                    onChange={(e) => handleFilterChange('kategori', e.target.value)}
                                >
                                    <option value="">Semua Kategori</option>
                                    {masterCategories.map(cat => (
                                        <option key={cat} value={cat}>{cat}</option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-xs font-bold text-gray-500 mb-1">Jenis Kelamin</label>
                                <select 
                                    className="w-full text-sm p-2 border border-gray-300 rounded focus:border-teal-500 outline-none cursor-pointer"
                                    value={filters.gender}
                                    onChange={(e) => handleFilterChange('gender', e.target.value)}
                                >
                                    <option value="">Semua Gender</option>
                                    <option value="L">Laki-laki</option>
                                    <option value="P">Perempuan</option>
                                </select>
                            </div>
                            <div className="flex items-end">
                                <button 
                                    onClick={resetFilters}
                                    className="w-full text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 p-2 rounded transition-colors flex items-center justify-center gap-2"
                                >
                                    <div className="icon-x-circle text-base"></div>
                                    Reset Filter
                                </button>
                            </div>
                        </div>
                    </div>
                )}

                {/* Table (Desktop) */}
                <div className="hidden md:block overflow-x-auto">
                    <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-10">
                                    <input 
                                        type="checkbox" 
                                        className="rounded border-gray-300 text-teal-600 focus:ring-teal-500 w-4 h-4 cursor-pointer"
                                        checked={filteredEmployees.length > 0 && selectedIds.length === filteredEmployees.length}
                                        onChange={handleSelectAll}
                                        disabled={loading || filteredEmployees.length === 0}
                                    />
                                </th>
                                <th className="px-6 py-3">No</th>
                                <th className="px-6 py-3">NIK</th>
                                <th className="px-6 py-3">Nama Lengkap</th>
                                <th className="px-6 py-3 text-center">L/P</th>
                                <th className="px-6 py-3">Satminkal</th>
                                <th className="px-6 py-3">Jabatan</th>
                                <th className="px-6 py-3">Kategori</th>
                                <th className="px-6 py-3 text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                            {loading ? (
                                <tr>
                                    <td colSpan="8" className="px-6 py-12 text-center text-gray-500">
                                        <div className="inline-block animate-spin w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full mb-3"></div>
                                        <div>Memuat data pegawai...</div>
                                    </td>
                                </tr>
                            ) : filteredEmployees.length === 0 ? (
                                <tr>
                                    <td colSpan="8" className="px-6 py-12 text-center text-gray-500">
                                        <div className="icon-search text-4xl mb-2 mx-auto opacity-20"></div>
                                        <div>Tidak ada data yang cocok dengan filter.</div>
                                    </td>
                                </tr>
                            ) : (
                                paginatedEmployees.map((emp, index) => (
                                    <tr key={emp.id} className={`hover:bg-gray-50 group ${selectedIds.includes(emp.id) ? 'bg-teal-50' : ''}`}>
                                        <td className="px-6 py-3">
                                            <input 
                                                type="checkbox" 
                                                className="rounded border-gray-300 text-teal-600 focus:ring-teal-500 w-4 h-4 cursor-pointer"
                                                checked={selectedIds.includes(emp.id)}
                                                onChange={() => handleSelectOne(emp.id)}
                                            />
                                        </td>
                                        <td className="px-6 py-3 text-gray-400 text-xs w-12">
                                            {startIndex + index + 1}
                                        </td>
                                        <td className="px-6 py-3 font-mono text-xs text-gray-500">{emp.nik}</td>
                                        <td className="px-6 py-3 font-medium text-gray-900">{emp.nama}</td>
                                        <td className="px-6 py-3 text-center">
                                            <span className={`text-xs font-bold px-2 py-0.5 rounded ${
                                                emp.jenis_kelamin === 'L' ? 'bg-blue-100 text-blue-800' : 
                                                emp.jenis_kelamin === 'P' ? 'bg-pink-100 text-pink-800' : 'bg-gray-100 text-gray-500'
                                            }`}>
                                                {emp.jenis_kelamin || '-'}
                                            </span>
                                        </td>
                                        <td className="px-6 py-3">
                                            <span className="bg-blue-50 text-blue-700 border border-blue-100 px-2 py-0.5 rounded text-xs">
                                                {emp.satminkal}
                                            </span>
                                        </td>
                                        <td className="px-6 py-3 text-gray-600">{emp.jabatan}</td>
                                        <td className="px-6 py-3">
                                            {emp.kategori && <span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded text-[10px] uppercase font-bold">{emp.kategori}</span>}
                                        </td>
                                        <td className="px-6 py-3 text-right space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                            <button 
                                                onClick={() => handleView(emp)}
                                                className="text-teal-600 hover:text-teal-800 transition-colors"
                                                title="Lihat Detail"
                                            >
                                                <div className="icon-info text-lg"></div>
                                            </button>
                                            <button 
                                                onClick={() => handleEdit(emp)}
                                                className="text-blue-600 hover:text-blue-800 transition-colors"
                                                title="Edit"
                                            >
                                                <div className="icon-pencil text-lg"></div>
                                            </button>
                                            <button 
                                                onClick={() => handleDelete(emp.id)}
                                                className="text-red-600 hover:text-red-800 transition-colors"
                                                title="Hapus"
                                            >
                                                <div className="icon-trash text-lg"></div>
                                            </button>
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                </div>

                {/* Mobile List (Cards) */}
                <div className="md:hidden">
                    {loading ? (
                        <div className="p-8 text-center text-gray-500">
                            <div className="inline-block animate-spin w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full mb-3"></div>
                            <div>Memuat data...</div>
                        </div>
                    ) : filteredEmployees.length === 0 ? (
                        <div className="p-8 text-center text-gray-500">
                            <div className="icon-search text-4xl mb-2 mx-auto opacity-20"></div>
                            <div>Tidak ada data.</div>
                        </div>
                    ) : (
                        <div className="space-y-3 p-4 bg-gray-50">
                             {/* Mobile Select All */}
                             <div className="flex items-center gap-2 mb-2 px-1">
                                <input 
                                    type="checkbox" 
                                    id="mobileSelectAll"
                                    className="rounded border-gray-300 text-teal-600 focus:ring-teal-500 w-4 h-4"
                                    checked={filteredEmployees.length > 0 && selectedIds.length === filteredEmployees.length}
                                    onChange={handleSelectAll}
                                />
                                <label htmlFor="mobileSelectAll" className="text-sm font-bold text-gray-600">Pilih Semua ({filteredEmployees.length})</label>
                             </div>

                            {paginatedEmployees.map((emp) => (
                                <div 
                                    key={emp.id} 
                                    className={`bg-white rounded-lg shadow-sm border p-4 relative ${selectedIds.includes(emp.id) ? 'border-teal-500 ring-1 ring-teal-500 bg-teal-50/30' : 'border-gray-200'}`}
                                >
                                    {/* Checkbox Absolute */}
                                    <div className="absolute top-4 right-4">
                                        <input 
                                            type="checkbox" 
                                            className="rounded border-gray-300 text-teal-600 focus:ring-teal-500 w-5 h-5"
                                            checked={selectedIds.includes(emp.id)}
                                            onChange={() => handleSelectOne(emp.id)}
                                        />
                                    </div>

                                    <div className="flex items-start gap-3 pr-8">
                                        <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-bold shrink-0 ${
                                            emp.jenis_kelamin === 'L' ? 'bg-blue-500' : 'bg-pink-500'
                                        }`}>
                                            {emp.nama.charAt(0).toUpperCase()}
                                        </div>
                                        <div>
                                            <h3 className="font-bold text-gray-800 leading-tight">{emp.nama}</h3>
                                            <div className="text-xs text-gray-500 mt-1 font-mono">{emp.nik || 'Tanpa NIK'}</div>
                                            
                                            <div className="mt-2 flex flex-wrap gap-2">
                                                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded border border-gray-200">
                                                    {emp.jabatan || 'Tanpa Jabatan'}
                                                </span>
                                                {emp.satminkal && (
                                                    <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded border border-blue-100">
                                                        {emp.satminkal}
                                                    </span>
                                                )}
                                                {emp.kategori && (
                                                    <span className="text-xs bg-orange-50 text-orange-700 px-2 py-0.5 rounded border border-orange-100">
                                                        {emp.kategori}
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    </div>

                                    {/* Mobile Actions */}
                                    <div className="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
                                        <span className="text-xs text-gray-400">
                                            {emp.status}
                                        </span>
                                        <div className="flex gap-3">
                                            <button onClick={() => handleView(emp)} className="text-teal-600 font-bold text-xs flex items-center gap-1">
                                                <div className="icon-info text-sm"></div> Detail
                                            </button>
                                            <button onClick={() => handleEdit(emp)} className="text-blue-600 font-bold text-xs flex items-center gap-1">
                                                <div className="icon-pencil text-sm"></div> Edit
                                            </button>
                                            <button onClick={() => handleDelete(emp.id)} className="text-red-600 font-bold text-xs flex items-center gap-1">
                                                <div className="icon-trash text-sm"></div> Hapus
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                {/* Pagination Footer */}
                {!loading && filteredEmployees.length > 0 && (
                    <div className="p-4 border-t border-gray-200 bg-gray-50 flex flex-col md:flex-row justify-between items-center gap-4">
                        <div className="text-xs text-gray-500">
                            Menampilkan <strong>{startIndex + 1}</strong> sampai <strong>{Math.min(startIndex + itemsPerPage, totalItems)}</strong> dari <strong>{totalItems}</strong> data
                            {isFiltered && (
                                <span className="ml-1 text-gray-400">
                                    (Disaring dari total {employees.length} data basis)
                                </span>
                            )}
                        </div>
                        
                        {totalPages > 1 && (
                            <div className="flex gap-1 items-center">
                                <button 
                                    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                                    disabled={currentPage === 1}
                                    className="w-8 h-8 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    <div className="icon-chevron-left text-sm"></div>
                                </button>
                                
                                {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => {
                                    if (
                                        page === 1 || 
                                        page === totalPages || 
                                        (page >= currentPage - 1 && page <= currentPage + 1)
                                    ) {
                                        return (
                                            <button 
                                                key={page}
                                                onClick={() => setCurrentPage(page)}
                                                className={`w-8 h-8 flex items-center justify-center rounded text-xs font-bold ${
                                                    currentPage === page 
                                                    ? 'bg-teal-600 text-white border border-teal-600' 
                                                    : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-100'
                                                }`}
                                            >
                                                {page}
                                            </button>
                                        );
                                    } else if (
                                        page === currentPage - 2 || 
                                        page === currentPage + 2
                                    ) {
                                        return <span key={page} className="text-gray-400 text-xs px-1">...</span>;
                                    }
                                    return null;
                                })}

                                <button 
                                    onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                                    disabled={currentPage === totalPages}
                                    className="w-8 h-8 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                                >
                                    <div className="icon-chevron-right text-sm"></div>
                                </button>
                            </div>
                        )}
                    </div>
                )}
            </div>

            {showForm && (
                <EmployeeForm 
                    employee={editingEmployee} 
                    onSave={handleFormSave} 
                    onCancel={handleFormClose}
                    year={year} // Pass active year
                />
            )}

            {showImport && (
                <ExcelImport 
                    onClose={() => setShowImport(false)}
                    onSuccess={handleImportSuccess}
                    currentYear={year} // Pass active year for import target
                />
            )}

            {/* Coupon Modal */}
            <CouponPrintModal 
                isOpen={showCouponModal} 
                onClose={() => setShowCouponModal(false)}
                data={couponData}
            />

            {viewingEmployee && (
                <EmployeeDetailModal 
                    employee={viewingEmployee} 
                    onClose={() => setViewingEmployee(null)} 
                />
            )}
        </div>
    );
}