const { useState } = React;

window.AdminAusencias = function({ globalUsers, absences, saveAbsence, confirmAction, showToast }) {
    const [absenceUser, setAbsenceUser] = useState('');
    const [absenceDate, setAbsenceDate] = useState(window.getNICDate());
    const [absenceType, setAbsenceType] = useState('injustificada');
    const [absenceNotes, setAbsenceNotes] = useState('');

    const handleFormSubmit = (e) => {
        e.preventDefault();
        saveAbsence(e, absenceUser, absenceDate, absenceType, absenceNotes);
        setAbsenceUser(''); setAbsenceNotes('');
    };

    return (
        <div className="grid lg:grid-cols-3 gap-6 fade-in">
            <form onSubmit={handleFormSubmit} className="bg-white p-8 rounded-[3rem] shadow-sm space-y-4 h-fit border-t-[12px] border-red-500">
                <h3 className="font-black text-lg">Registrar Ausencia</h3>
                <p className="text-[10px] text-slate-400 font-bold uppercase leading-relaxed mb-4">Si seleccionas "Descontar", se restará automáticamente 1 día de las vacaciones del empleado.</p>
                
                <select value={absenceUser} onChange={e=>setAbsenceUser(e.target.value)} className="w-full p-4 bg-slate-50 rounded-2xl font-bold outline-none focus:ring-2 focus:ring-red-100" required>
                    <option value="">Seleccionar Consultor...</option>
                    {globalUsers.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                </select>
                
                <input type="date" value={absenceDate} onChange={e=>setAbsenceDate(e.target.value)} className="w-full p-4 bg-slate-50 rounded-2xl font-bold outline-none focus:ring-2 focus:ring-red-100" required />
                
                <select value={absenceType} onChange={e=>setAbsenceType(e.target.value)} className="w-full p-4 bg-slate-50 rounded-2xl font-bold outline-none uppercase text-[10px] focus:ring-2 focus:ring-red-100">
                    <option value="injustificada">Falta Injustificada</option>
                    <option value="justificada">Falta Justificada</option>
                    <option value="descontada">Descontar de Vacaciones (-1 Día)</option>
                </select>

                <textarea value={absenceNotes} onChange={e=>setAbsenceNotes(e.target.value)} placeholder="Motivo o nota (opcional)..." className="w-full p-4 bg-slate-50 rounded-2xl font-bold outline-none h-24 resize-none focus:ring-2 focus:ring-red-100" />

                <button type="submit" className="w-full py-4 bg-red-600 text-white font-black rounded-2xl uppercase tracking-widest text-[10px] shadow-lg active:scale-95 transition-all">Aplicar Registro</button>
            </form>
            
            <div className="lg:col-span-2 space-y-4">
                <h3 className="font-black text-lg uppercase tracking-widest text-slate-800 border-b pb-2 mb-4">Historial de Ausencias</h3>
                {absences.length === 0 ? <p className="text-xs font-bold text-slate-400">Sin registros de ausencias.</p> :
                    absences.sort((a,b)=>b.createdAt - a.createdAt).map(a => (
                        <div key={a.id} className="bg-white p-6 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center shadow-sm border-l-8 border-red-500 gap-4 hover:border-slate-200 transition-colors">
                            <div>
                                <h4 className="font-black text-slate-800">{a.userName}</h4>
                                <p className="text-[10px] text-slate-500 font-bold uppercase mt-1 tracking-widest">Fecha de falta: {window.formatDateToNIC?window.formatDateToNIC(a.date):a.date}</p>
                                <p className={`text-[9px] font-black uppercase mt-3 tracking-widest px-3 py-1.5 inline-block rounded-lg shadow-sm border ${a.type==='injustificada'?'bg-white text-red-600 border-red-100':a.type==='justificada'?'bg-white text-emerald-600 border-emerald-100':'bg-white text-orange-600 border-orange-100'}`}>
                                    {a.type.replace('_', ' ')}
                                </p>
                                {a.notes && <p className="text-[11px] text-slate-600 italic mt-3 bg-slate-50 p-3 rounded-xl">"{a.notes}"</p>}
                            </div>
                            <button onClick={()=>confirmAction("¿Borrar este registro de ausencia?", async ()=>{ await window.apiCall('delete_absence', {id: a.id}); showToast("Eliminado."); })} className="text-slate-400 font-black text-[9px] uppercase tracking-widest underline hover:text-red-500 transition-colors">Borrar Registro</button>
                        </div>
                    ))
                }
            </div>
        </div>
    );
};