// Automatizaciones, usuarios/roles y auditoría
function AutomationsView({ user, toast }) {
  const db = S.db;
  const R = db.settings.rules;
  const I = db.settings.integrations;
  const can = S.can(user, 'config');
  const [tab, setTab] = React.useState('rules');
  const setRule = (k, v) => { S.setSettings({ rules: { [k]: v } }, user); toast('Regla actualizada.'); };
  const RULES = [
    { k: 'confirmApplicant', ic: 'mail', t: 'Confirmación de recepción al solicitante', p: 'Envía un correo con el número de solicitud y el resumen al responsable.', trig: 'Nueva solicitud', to: 'Correo del responsable' },
    { k: 'notifyNew', ic: 'bolt', t: 'Notificación interna de nueva solicitud', p: 'Avisa al equipo de crédito cuando ingresa una solicitud desde el formulario.', trig: 'Nueva solicitud', to: 'Equipo de crédito' },
    { k: 'notifyAssign', ic: 'users', t: 'Aviso de asignación', p: 'Notifica al colaborador cuando se le asigna una solicitud.', trig: 'Asignación', to: 'Colaborador asignado' },
    { k: 'pendingAlerts', ic: 'alert', t: 'Alertas de solicitudes pendientes de atención', p: `Marca y lista las solicitudes abiertas sin movimiento por más de ${R.pendingHours} horas.`, trig: 'Revisión periódica', to: 'Panel + supervisores', extra: true },
    { k: 'statusEmails', ic: 'send', t: 'Correos de actualización de estado', p: 'Permite notificar al solicitante cuando cambia el estado. Requiere autorización y plantillas aprobadas.', trig: 'Cambio de estado', to: 'Correo del responsable' },
  ];
  return (
    <>
      <div className="ga-card">
        <div className="ga-tabs">
          {[['rules', 'Reglas'], ['outbox', `Bandeja de salida (${db.outbox.length})`], ['int', 'Integraciones']].map(([k, l]) => <button key={k} className={tab === k ? 'on' : ''} onClick={() => setTab(k)}>{l}</button>)}
        </div>
        <div className="ga-card-b">
          {tab === 'rules' && <>
            {!can && <div className="ga-info" style={{ marginBottom: 16 }}><Icon name="lock" size={16} /> Solo administradores pueden modificar las reglas.</div>}
            {RULES.map(x => (
              <div className="ga-rule" key={x.k}>
                <span className="ga-rule-ic"><Icon name={x.ic} size={20} /></span>
                <div className="ga-rule-t">
                  <b>{x.t}</b><p>{x.p}</p>
                  <div className="trig">Disparador <code>{x.trig}</code> → Destino <code>{x.to}</code>
                    {x.extra && <>· Umbral <select className="select" style={{ height: 30, width: 100, fontSize: 12, padding: '0 28px 0 10px', backgroundPosition: 'right 6px center', borderRadius: 7 }} value={R.pendingHours} disabled={!can} onChange={e => S.setSettings({ rules: { pendingHours: +e.target.value } }, user)}>{[24, 48, 72, 120].map(h => <option key={h} value={h}>{h} horas</option>)}</select></>}
                  </div>
                </div>
                <Toggle checked={R[x.k]} disabled={!can} onChange={v => setRule(x.k, v)} label={x.t} />
              </div>))}
            <div className="ga-rule"><span className="ga-rule-ic"><Icon name="shield" size={20} /></span>
              <div className="ga-rule-t"><b>Registro automático de cambios</b><p>Cada cambio de estado, asignación y observación queda registrado con fecha, hora y usuario. No se puede desactivar.</p></div>
              <Toggle checked disabled label="Siempre activo" /></div>
          </>}
          {tab === 'outbox' && (db.outbox.length === 0 ? <div className="ga-empty"><b>Sin mensajes</b>Los correos generados por las reglas aparecerán aquí.</div> :
            <div className="ga-table-wrap" style={{ display: 'block' }}>
              <table className="ga-table ga-msg" style={{ minWidth: 760 }}>
                <thead><tr><th>Fecha</th><th>Plantilla</th><th>Para</th><th>Asunto</th><th>Estado</th></tr></thead>
                <tbody>{db.outbox.slice(0, 50).map(m => <tr key={m.id} style={{ cursor: 'default' }}>
                  <td className="muted">{GFmt.dateTime(m.at)}</td><td>{m.template}</td><td className="muted">{m.to}</td><td className="strong" style={{ maxWidth: 280 }}>{m.subject}</td>
                  <td><span className="pill" style={m.status === 'retenido' ? { color: '#8A5A00', background: 'var(--yellow-50)' } : { color: 'var(--green)', background: 'var(--green-50)' }}>{m.status === 'retenido' ? 'Retenido · sin integración' : 'Simulado'}</span></td>
                </tr>)}</tbody>
              </table>
            </div>)}
          {tab === 'int' && <>
            <div className="ga-int"><span className="ga-int-ic"><Icon name="mail" size={20} /></span><div className="ga-int-t"><b>Servidor de correo (SMTP / API transaccional)</b><span>{I.email.configured ? 'Configurado' : 'Sin configurar · requiere credenciales y dominio verificado'}</span></div><button className="btn btn-ghost btn-sm" disabled={!can} onClick={() => toast('La configuración de credenciales se realiza en el backend por el equipo de TI.')}><Icon name="plug" size={16} /> Configurar</button></div>
            <div className="ga-int"><span className="ga-int-ic"><Icon name="message" size={20} /></span><div className="ga-int-t"><b>Notificaciones internas (Teams / Slack / WhatsApp Business)</b><span>Sin configurar</span></div><button className="btn btn-ghost btn-sm" disabled={!can} onClick={() => toast('Pendiente de definir con TI.')}><Icon name="plug" size={16} /> Configurar</button></div>
            <div className="ga-int"><span className="ga-int-ic"><Icon name="grid" size={20} /></span><div className="ga-int-t"><b>Sistema comercial / ERP de La Guaca</b><span>API REST disponible para integración futura (creación automática del código)</span></div><span className="pill no-dot" style={{ background: 'var(--gray-50)', color: 'var(--gray-600)' }}>Próximamente</span></div>
          </>}
        </div>
      </div>
    </>
  );
}

function UsersView({ user, toast }) {
  const db = S.db;
  const can = S.can(user, 'users');
  const PERMS = [['view', 'Ver solicitudes'], ['manage', 'Gestionar estados y observaciones'], ['assign', 'Asignar y reasignar'], ['export', 'Exportar Excel / CSV'], ['audit', 'Ver auditoría'], ['config', 'Configurar automatizaciones'], ['users', 'Administrar usuarios']];
  return (
    <>
      <div className="ga-card">
        <div className="ga-card-h"><div><h2>Colaboradores</h2><p>{db.users.length} usuarios con acceso al panel</p></div>
          <button className="btn btn-primary btn-sm" disabled={!can} onClick={() => toast('Las invitaciones se envían cuando el correo esté configurado.')}><Icon name="user" size={16} /> Invitar colaborador</button></div>
        <div className="ga-card-b">
          <div className="ga-table-wrap" style={{ display: 'block' }}>
            <table className="ga-table" style={{ minWidth: 680 }}>
              <thead><tr><th>Nombre</th><th>Correo</th><th>Rol</th><th>Abiertas asignadas</th><th>Acceso</th></tr></thead>
              <tbody>{db.users.map(u => <tr key={u.id} style={{ cursor: 'default' }}>
                <td><span className="ga-assignee"><Avatar uid={u.id} size="sm" blue /> <b style={{ fontWeight: 500 }}>{u.name}</b>{u.id === user.id && <span className="muted" style={{ fontSize: 12 }}>(vos)</span>}</span></td>
                <td className="muted">{u.email}</td>
                <td>{can && u.id !== user.id ? <select className="select" style={{ height: 36, fontSize: 13, width: 170, borderRadius: 9 }} value={u.role} onChange={e => { S.updateUser(u.id, { role: e.target.value }, user); toast('Rol actualizado.'); }}>{Object.entries(S.ROLES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}</select> : S.ROLES[u.role].label}</td>
                <td className="tnum">{db.requests.filter(r => r.assignee === u.id && !['aprobada', 'rechazada'].includes(r.status)).length}</td>
                <td><Toggle checked={u.active} disabled={!can || u.id === user.id} onChange={v => { S.updateUser(u.id, { active: v }, user); toast(v ? 'Acceso habilitado.' : 'Acceso deshabilitado.'); }} label="Acceso" /></td>
              </tr>)}</tbody>
            </table>
          </div>
        </div>
      </div>
      <div className="ga-card">
        <div className="ga-card-h"><div><h2>Permisos por rol</h2><p>Las restricciones se aplican también en el servidor.</p></div></div>
        <div className="ga-card-b" style={{ overflowX: 'auto' }}>
          <table className="ga-perm" style={{ minWidth: 560 }}>
            <thead><tr><th>Permiso</th>{Object.values(S.ROLES).map(r => <th key={r.label}>{r.label}</th>)}</tr></thead>
            <tbody>{PERMS.map(([p, l]) => <tr key={p}><td>{l}</td>{Object.values(S.ROLES).map(r => <td key={r.label}>{r.perms.includes(p) ? <Icon name="check" size={18} stroke={2.6} className="y" /> : <span className="n">—</span>}</td>)}</tr>)}</tbody>
          </table>
          <p style={{ fontSize: 12.5, color: 'var(--gray-500)', marginTop: 12 }}>Los analistas solo pueden cambiar el estado de solicitudes asignadas a ellos o sin asignar.</p>
        </div>
      </div>
    </>
  );
}

function AuditView({ user }) {
  const [q, setQ] = React.useState('');
  const rows = S.db.audit.filter(a => !q || (S.userName(a.by) + a.action + (a.reqId || '')).toLowerCase().includes(q.toLowerCase())).slice(0, 200);
  return (
    <div className="ga-card" style={{ overflow: 'hidden' }}>
      <div className="ga-filters"><div className="ga-search"><Icon name="search" size={18} /><input className="input" placeholder="Buscar en el registro de auditoría" value={q} onChange={e => setQ(e.target.value)} /></div>
        <span style={{ fontSize: 12.5, color: 'var(--gray-500)', marginLeft: 'auto' }}>Registro inalterable · {S.db.audit.length} eventos</span></div>
      <div className="ga-table-wrap" style={{ display: 'block' }}>
        <table className="ga-table" style={{ minWidth: 720 }}>
          <thead><tr><th>Fecha y hora</th><th>Usuario</th><th>Acción</th><th>Solicitud</th></tr></thead>
          <tbody>{rows.map((a, i) => <tr key={i} style={{ cursor: 'default' }}>
            <td className="muted tnum">{GFmt.dateTime(a.at)}</td><td>{S.userName(a.by)}</td><td style={{ whiteSpace: 'normal' }}>{a.action}</td><td>{a.reqId ? <span className="id mono">{a.reqId}</span> : <span className="muted">—</span>}</td>
          </tr>)}</tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { AutomationsView, UsersView, AuditView });