const { useState } = React;

window.AdminAvisos = function({ globalUsers, reminders, showToast, refreshData }) {
    const [title, setTitle] = useState('');
    const [message, setMessage] = useState('');
    const [targetUsers, setTargetUsers] = useState([]);
    const [selectAll, setSelectAll] = useState(true);

    const [isMandatory, setIsMandatory] = useState(false);
    const [auditModalReminder, setAuditModalReminder] = useState(null);
    const [auditData, setAuditData] = useState(null);
    const [loadingAudit, setLoadingAudit] = useState(false);

    const handleSendNotice = async (e) => {
        e.preventDefault();
        if (!title.trim() || !message.trim()) return showToast("Título y mensaje son requeridos.");

        const usersToSend = selectAll ? globalUsers.map(u => u.id) : targetUsers;
        if (usersToSend.length === 0) return showToast("Debes seleccionar al menos un usuario.");

        try {
            const res = await window.apiCall('save_reminder', {
                title: title.trim(),
                message: message.trim(),
                targetUsers: usersToSend,
                is_mandatory: isMandatory ? 1 : 0,
                createdAt: Date.now()
            });

            if (res && res.success) {
                setTitle('');
                setMessage('');
                setSelectAll(true);
                setTargetUsers([]);
                setIsMandatory(false);
                showToast("Aviso difundido con éxito.");
                if (refreshData) await refreshData();
            } else {
                showToast("Error al difundir: " + (res.error || "Desconocido"));
            }
        } catch (err) {
            showToast("Error de conexión al enviar aviso.");
        }
    };

    const handleOpenAudit = async (reminder) => {
        setAuditModalReminder(reminder);
        setLoadingAudit(true);
        setAuditData(null);
        try {
            const res = await window.apiCall('get_reminder_audit', { id: reminder.id });
            if (res && res.success) {
                setAuditData(res);
            } else {
                showToast("Error al cargar auditoría: " + (res?.error || ""));
            }
        } catch (err) {
            showToast("Error de red al consultar auditoría.");
        } finally {
            setLoadingAudit(false);
        }
    };

    const handleDeleteReminder = async (id) => {
        await window.apiCall('delete_reminder', { id });
        showToast("Aviso eliminado.");
        if (refreshData) await refreshData();
    };

    return (
        <div className="grid lg:grid-cols-3 gap-6 fade-in font-sans">
            {/* FORMULARIO DE DIFUSIÓN */}
            <form onSubmit={handleSendNotice} className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 space-y-4 h-fit">
                <div>
                    <h3 className="font-bold text-lg text-slate-900 tracking-tight">Nuevo Aviso General</h3>
                    <p className="text-slate-500 font-medium text-xs mt-0.5">Llegará a las notificaciones de los colaboradores seleccionados</p>
                </div>

                <div>
                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1 block">Título del Aviso</label>
                    <input 
                        value={title} 
                        onChange={e => setTitle(e.target.value)} 
                        placeholder="Título del comunicado..." 
                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white text-xs min-h-[42px] transition-all" 
                        required 
                    />
                </div>

                <div>
                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1 block">Contenido del Mensaje</label>
                    <textarea 
                        value={message} 
                        onChange={e => setMessage(e.target.value)} 
                        placeholder="Escribe el mensaje que leerán tus colaboradores..." 
                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 outline-none focus:border-slate-400 focus:bg-white text-xs h-28 resize-none transition-all" 
                        required 
                    />
                </div>

                {/* CASILLA DE OBLIGATORIEDAD LEGAL */}
                <div 
                    className={`p-3.5 rounded-xl border transition-all cursor-pointer flex items-start gap-2.5 ${
                        isMandatory ? 'bg-amber-50 border-amber-300 shadow-xs' : 'bg-slate-50 border-slate-200'
                    }`}
                    onClick={() => setIsMandatory(!isMandatory)}
                >
                    <input 
                        type="checkbox" 
                        checked={isMandatory} 
                        onChange={e => setIsMandatory(e.target.checked)} 
                        className="mt-0.5 w-4 h-4 accent-amber-600 rounded cursor-pointer" 
                    />
                    <div>
                        <span className="text-xs font-bold text-slate-900 block leading-tight">Lectura Obligatoria (Read Receipt Gate)</span>
                        <span className="text-[10px] text-slate-500 font-medium block mt-0.5 leading-snug">
                            Bloquea el panel del colaborador en pantalla completa hasta que confirme lectura formal.
                        </span>
                    </div>
                </div>

                <div>
                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1.5 block">Destinatarios</label>
                    <div className="flex items-center gap-2 mb-2 bg-slate-50 border border-slate-200 p-2.5 rounded-xl cursor-pointer" onClick={() => setSelectAll(!selectAll)}>
                        <input type="checkbox" checked={selectAll} onChange={e => setSelectAll(e.target.checked)} className="w-4 h-4 accent-slate-900 cursor-pointer" />
                        <span className="text-xs font-bold text-slate-800">Enviar a todo el personal ({globalUsers.length})</span>
                    </div>

                    {!selectAll && (
                        <div className="max-h-40 overflow-y-auto space-y-1 p-2 bg-slate-50 rounded-xl border border-slate-200 no-scrollbar">
                            {globalUsers.map(u => (
                                <label key={u.id} className="flex items-center gap-2 p-2 hover:bg-white rounded-lg cursor-pointer text-xs font-medium text-slate-700 min-h-[36px]">
                                    <input 
                                        type="checkbox" 
                                        checked={targetUsers.includes(u.id)} 
                                        onChange={() => setTargetUsers(prev => prev.includes(u.id) ? prev.filter(id => id !== u.id) : [...prev, u.id])} 
                                        className="w-4 h-4 accent-slate-900" 
                                    />
                                    <span>{u.name} (@{u.alias})</span>
                                </label>
                            ))}
                        </div>
                    )}
                </div>

                <button type="submit" className="w-full py-3 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs tracking-wide transition-all shadow-xs flex items-center justify-center cursor-pointer">
                    Difundir Aviso
                </button>
            </form>

            {/* LISTADO DE AVISOS EMITIDOS */}
            <div className="lg:col-span-2 space-y-4">
                <h3 className="font-bold text-base text-slate-900 tracking-tight pb-1 border-b border-slate-200">Avisos Emitidos Activos</h3>
                {(!reminders || reminders.length === 0) ? (
                    <div className="bg-white rounded-2xl p-8 text-center border border-slate-200/80 shadow-xs">
                        <p className="text-xs font-medium text-slate-400">No hay avisos registrados actualmente.</p>
                    </div>
                ) : (
                    reminders.map(r => {
                        const readCount = r.completedBy ? Object.keys(r.completedBy).length : 0;
                        const totalTargets = (r.targetUsers && r.targetUsers.length > 0) ? r.targetUsers.length : globalUsers.length;
                        const percent = totalTargets > 0 ? Math.round((readCount / totalTargets) * 100) : 0;
                        const isMand = Boolean(r.is_mandatory || r.isMandatory);

                        return (
                            <div key={r.id} className="bg-white p-5 sm:p-6 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 hover:border-slate-300 transition-all">
                                <div className="space-y-1.5 flex-1">
                                    <div className="flex items-center gap-2">
                                        <span className={`w-2 h-2 rounded-full ${isMand ? 'bg-amber-500' : 'bg-slate-900'}`}></span>
                                        <h4 className="font-bold text-slate-900 text-sm">{r.title}</h4>
                                        {isMand && (
                                            <span className="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-[9px] font-bold uppercase tracking-wider">
                                                Obligatorio
                                            </span>
                                        )}
                                    </div>
                                    <p className="text-xs text-slate-600 font-medium leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100">{r.message}</p>
                                    
                                    <div className="flex flex-wrap items-center gap-3 text-[11px] font-semibold text-slate-500 pt-1">
                                        <span>Confirmados: <strong className="text-slate-900">{readCount} de {totalTargets} ({percent}%)</strong></span>
                                        <button 
                                            onClick={() => handleOpenAudit(r)} 
                                            className="text-slate-900 hover:underline font-bold cursor-pointer"
                                        >
                                            Ver auditoría de lectura
                                        </button>
                                    </div>
                                </div>
                                <button onClick={() => handleDeleteReminder(r.id)} className="px-3.5 py-2 bg-rose-50 text-rose-700 hover:bg-rose-100 rounded-xl font-bold text-xs transition-colors cursor-pointer">
                                    Eliminar
                                </button>
                            </div>
                        );
                    })
                )}
            </div>

            {/* MODAL DE AUDITORÍA DETALLADA DE LECTURA */}
            {auditModalReminder && (
                <div className="fixed inset-0 bg-slate-900/80 z-[120] p-4 flex items-center justify-center fade-in" onClick={() => setAuditModalReminder(null)}>
                    <div className="bg-white rounded-2xl w-full max-w-lg p-6 shadow-xl space-y-4 border border-slate-200/80" onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start border-b border-slate-100 pb-3">
                            <div>
                                <span className="text-[10px] font-bold uppercase text-slate-400 tracking-wider block">Auditoría de Cumplimiento</span>
                                <h3 className="font-bold text-base text-slate-900 mt-0.5">{auditModalReminder.title}</h3>
                            </div>
                            <button onClick={() => setAuditModalReminder(null)} className="p-1.5 rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-600 cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        {loadingAudit ? (
                            <div className="p-8 text-center text-slate-400 font-medium text-xs">Cargando estado de confirmaciones...</div>
                        ) : !auditData ? (
                            <div className="p-8 text-center text-slate-400 font-medium text-xs">No se pudo cargar la información.</div>
                        ) : (
                            <div className="space-y-4">
                                <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/80 flex items-center justify-between">
                                    <div>
                                        <p className="text-[10px] font-bold uppercase text-slate-400">Progreso de Lectura</p>
                                        <p className="text-lg font-bold text-slate-900 mt-0.5">
                                            {auditData.readCount} <span className="text-xs text-slate-500 font-medium">de {auditData.totalTargets} colaboradores</span>
                                        </p>
                                    </div>
                                    <div className="text-right">
                                        <span className="text-2xl font-black text-slate-900">
                                            {auditData.totalTargets > 0 ? Math.round((auditData.readCount / auditData.totalTargets) * 100) : 0}%
                                        </span>
                                    </div>
                                </div>

                                <div className="max-h-64 overflow-y-auto space-y-2 no-scrollbar">
                                    {auditData.users.map(u => (
                                        <div key={u.id} className="p-3 bg-white rounded-xl border border-slate-100 flex items-center justify-between gap-3 text-xs">
                                            <div className="flex items-center gap-2.5 min-w-0">
                                                <div className="w-8 h-8 rounded-lg bg-slate-900 text-white font-bold flex items-center justify-center flex-shrink-0 text-xs uppercase">
                                                    {u.name ? u.name[0] : 'U'}
                                                </div>
                                                <div className="min-w-0">
                                                    <p className="font-bold text-slate-900 truncate">{u.name}</p>
                                                    <p className="text-[10px] text-slate-400 font-medium truncate">{u.role || 'Colaborador'}</p>
                                                </div>
                                            </div>
                                            <div className="flex-shrink-0 text-right">
                                                {u.has_read ? (
                                                    <div>
                                                        <span className="inline-block px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full font-bold text-[10px]">
                                                            Confirmado
                                                        </span>
                                                        <span className="block text-[9px] text-slate-400 font-medium mt-0.5">
                                                            {new Date(u.read_at).toLocaleString('es-NI', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit' })}
                                                        </span>
                                                    </div>
                                                ) : (
                                                    <span className="inline-block px-2 py-0.5 bg-slate-100 text-slate-500 rounded-full font-bold text-[10px]">
                                                        Pendiente
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        <button onClick={() => setAuditModalReminder(null)} className="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl text-xs transition-colors cursor-pointer">
                            Cerrar Auditoría
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};