window.AdminPlanilla = function({ globalUsers = [], absences = [], settings = {}, exportPayrollReport }) {
    const printReport = () => window.print();

    return (
        <div className="space-y-6 fade-in">
            <div className="flex justify-between items-center bg-white p-8 rounded-[3rem] shadow-sm border border-slate-100">
                <div>
                    <h2 className="text-2xl font-black text-slate-900">Planilla y Nómina Oficial (Leyes Nicaragua)</h2>
                    <p className="text-slate-400 font-bold uppercase text-[10px] mt-1 tracking-widest">
                        Cálculo Automático de INSS Laboral (7%), IR DGI (Ley 822) y Deducción de Séptimo Día por Faltas Injustificadas
                    </p>
                </div>
                <div className="flex gap-3">
                    <button onClick={exportPayrollReport} className="px-6 py-4 bg-emerald-600 text-white font-black rounded-2xl uppercase tracking-widest text-[10px] flex items-center gap-2 shadow-lg active:scale-95 transition-all">
                        Exportar CSV
                    </button>
                    <button onClick={printReport} className="px-6 py-4 bg-slate-900 text-white font-black rounded-2xl uppercase tracking-widest text-[10px] flex items-center gap-2 shadow-lg active:scale-95 transition-all">
                        Imprimir Planilla
                    </button>
                </div>
            </div>

            <div className="bg-white rounded-[3rem] shadow-sm overflow-hidden border border-slate-100">
                <table className="w-full text-left print-table">
                    <thead className="bg-slate-50 text-[9px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                        <tr>
                            <th className="p-5">Empleado</th>
                            <th className="p-5">Salario Base</th>
                            <th className="p-5">Días Deducidos</th>
                            <th className="p-5">Salario Devengado</th>
                            <th className="p-5 text-red-500">INSS (7%)</th>
                            <th className="p-5 text-red-500">IR DGI</th>
                            <th className="p-5 text-emerald-600 font-black">Neto a Recibir</th>
                            <th className="p-5 text-indigo-600">INSS Patronal</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-50">
                        {globalUsers.map(u => {
                            const calc = window.calculatePayrollRow(u, 30, 0, settings?.inssPatronalRate || 22.5, absences);
                            return (
                                <tr key={u.id} className="hover:bg-slate-50/50 transition-colors font-bold text-xs">
                                    <td className="p-5">
                                        <p className="font-black text-slate-800">{u.name}</p>
                                        <p className="text-[9px] text-slate-400 uppercase">@{u.alias}</p>
                                    </td>
                                    <td className="p-5">C$ {parseFloat(u.baseSalary || 0).toFixed(2)}</td>
                                    <td className="p-5">
                                        {calc.deductedDays > 0 ? (
                                            <span className="px-2.5 py-1 bg-red-100 text-red-700 rounded-lg text-[9px] font-black">
                                                -{calc.deductedDays} Días ({calc.unjustifiedCount} falta(s) = -{calc.unjustifiedCount * 2} d)
                                            </span>
                                        ) : (
                                            <span className="text-slate-400 text-[10px]">30 Días (Completo)</span>
                                        )}
                                    </td>
                                    <td className="p-5 font-black text-slate-700">C$ {calc.grossSalary}</td>
                                    <td className="p-5 text-red-500">- C$ {calc.inssLaboral}</td>
                                    <td className="p-5 text-red-500">- C$ {calc.irDGI}</td>
                                    <td className="p-5 font-black text-emerald-600 text-sm">C$ {calc.netSalary}</td>
                                    <td className="p-5 font-black text-indigo-600">C$ {calc.inssPatronal}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        </div>
    );
};