// ROCA GOLF — Vista de Gestión de Usuarios (solo administrador)

const ROLES_RG = {
  administrador:     'Administrador',
  contralor:         'Contralor',
  auxiliarcontable:  'Auxiliar Contable',
  directorproyectos: 'Director de Proyectos',
  tesorero:          'Tesorero',
  supervisor:        'Supervisor',
  proyectos:         'Proyectos',
};

const ROL_COLORS = {
  administrador:     '#b22222',
  contralor:         '#1a4d2e',
  auxiliarcontable:  '#2563eb',
  directorproyectos: '#7c3aed',
  tesorero:          '#b45309',
  supervisor:        '#64748b',
  proyectos:         '#64748b',
};

function UsuariosView({ onNav, user, onLogout }) {
  const [users,    setUsers]    = useState([]);
  const [loading,  setLoading]  = useState(true);
  const [err,      setErr]      = useState('');

  // Modal: nueva contraseña generada
  const [pwdModal,   setPwdModal]   = useState(false);
  const [pwdNombre,  setPwdNombre]  = useState('');
  const [pwdUsuario, setPwdUsuario] = useState('');
  const [pwdPlain,   setPwdPlain]   = useState('');
  const [copied,     setCopied]     = useState(false);

  // Modal: crear usuario
  const [createModal,    setCreateModal]    = useState(false);
  const [createLoading,  setCreateLoading]  = useState(false);
  const [createForm,     setCreateForm]     = useState({ nombre: '', usuario: '', rol: 'proyectos' });

  // Modal: editar usuario
  const [editModal,   setEditModal]   = useState(false);
  const [editLoading, setEditLoading] = useState(false);
  const [editForm,    setEditForm]    = useState({ uid: 0, nombre: '', rol: 'proyectos' });

  // ── Helpers ───────────────────────────────────────────────────────────────
  // apiFetch (rg-api.jsx) refresca el CSRF y reintenta una vez sola si el
  // servidor lo rechaza por token inválido — antes esta vista hacía su propio
  // fetch() y se quedaba sin forma de recuperarse de eso sin recargar a mano.
  function loadUsers() {
    setLoading(true);
    setErr('');
    apiFetch('usuarios.php')
      .then(data => setUsers(data))
      .catch(e => setErr(e.message || 'Error cargando usuarios'))
      .finally(() => setLoading(false));
  }

  useEffect(() => { loadUsers(); }, []);

  // Muestra modal con la contraseña generada
  function mostrarPassword(nombre, usuario, plain) {
    setPwdNombre(nombre);
    setPwdUsuario(usuario);
    setPwdPlain(plain);
    setCopied(false);
    setPwdModal(true);
  }

  function copiarPassword() {
    navigator.clipboard.writeText(pwdPlain).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
    });
  }

  // ── Acciones ─────────────────────────────────────────────────────────────
  async function handleGenerar(u) {
    const ok = window.confirm(
      `¿${u.tiene_acceso_rg ? 'Resetear' : 'Generar'} contraseña de ROCA GOLF para ${u.nombre}?\n` +
      (u.tiene_acceso_rg ? 'La contraseña anterior quedará inválida.' : '')
    );
    if (!ok) return;
    try {
      const data = await apiFetch('usuarios.php', 'POST', { accion: 'generar', uid: u.id });
      mostrarPassword(u.nombre, u.usuario, data.password);
      loadUsers();
    } catch (e) {
      toast.error(e.message || 'Error generando acceso');
    }
  }

  async function handleRevocar(u) {
    if (!window.confirm(`¿Revocar el acceso de ${u.nombre} a ROCA GOLF? No podrá iniciar sesión.`)) return;
    try {
      await apiFetch('usuarios.php', 'POST', { accion: 'revocar', uid: u.id });
      toast('Acceso revocado');
      loadUsers();
    } catch (e) {
      toast.error(e.message);
    }
  }

  async function handleToggle(u) {
    if (!window.confirm(`¿${u.activo ? 'Desactivar' : 'Activar'} a ${u.nombre}?`)) return;
    try {
      await apiFetch('usuarios.php', 'POST', { accion: 'toggle', uid: u.id });
      toast(u.activo ? 'Usuario desactivado' : 'Usuario activado');
      loadUsers();
    } catch (e) {
      toast.error(e.message);
    }
  }

  async function handleCreate(e) {
    e.preventDefault();
    setCreateLoading(true);
    try {
      const data = await apiFetch('usuarios.php', 'POST', { accion: 'crear', ...createForm });
      setCreateModal(false);
      setCreateForm({ nombre: '', usuario: '', rol: 'proyectos' });
      mostrarPassword(createForm.nombre, createForm.usuario, data.password);
      loadUsers();
    } catch (err) {
      toast.error(err.message || 'Error creando usuario');
    } finally {
      setCreateLoading(false);
    }
  }

  async function handleEdit(e) {
    e.preventDefault();
    setEditLoading(true);
    try {
      await apiFetch('usuarios.php', 'POST', { accion: 'update', uid: editForm.uid, nombre: editForm.nombre, rol: editForm.rol });
      toast('Usuario actualizado');
      setEditModal(false);
      loadUsers();
    } catch (err) {
      toast.error(err.message || 'Error actualizando');
    } finally {
      setEditLoading(false);
    }
  }

  function abrirEditar(u) {
    setEditForm({ uid: u.id, nombre: u.nombre, rol: u.rol });
    setEditModal(true);
  }

  // ── Solo administradores ─────────────────────────────────────────────────
  if (user?.rol !== 'administrador') {
    return (
      <div className="rg-page">
        <Sidebar active="usuarios" onNav={onNav} user={user} onLogout={onLogout}/>
        <div className="rg-main" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ textAlign: 'center', color: 'var(--rg-muted)' }}>
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" style={{ marginBottom: 16 }}>
              <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--rg-text)' }}>Acceso restringido</div>
            <div style={{ fontSize: 13, marginTop: 6 }}>Solo los administradores pueden gestionar usuarios.</div>
          </div>
        </div>
      </div>
    );
  }

  // ── Render ────────────────────────────────────────────────────────────────
  const sinAcceso = users.filter(u => !u.tiene_acceso_rg).length;
  const conAcceso = users.filter(u =>  u.tiene_acceso_rg).length;

  return (
    <div className="rg-page">
      <Sidebar active="usuarios" onNav={onNav} user={user} onLogout={onLogout}
               alertCount={0}/>
      <div className="rg-main">
        <Topbar crumbs="Sistema / Usuarios" title="Gestión de Usuarios"
          actions={
            <button className="rg-btn primary" onClick={() => setCreateModal(true)}>
              {Icon.plus(13)} <span>Nuevo Usuario</span>
            </button>
          }
        />

        <div style={{ padding: '24px 28px' }}>

          {/* KPIs rápidos */}
          <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
            {[
              { label: 'Total usuarios',      val: users.length, color: '#1a4d2e' },
              { label: 'Con acceso RG',       val: conAcceso,     color: '#2563eb' },
              { label: 'Sin acceso RG',       val: sinAcceso,     color: '#b45309', warn: sinAcceso > 0 },
              { label: 'Inactivos',           val: users.filter(u => !u.activo).length, color: '#64748b' },
            ].map(k => (
              <div key={k.label} style={{
                background: '#fff', border: '1px solid #e8e4dc', borderRadius: 10,
                padding: '12px 20px', minWidth: 140,
              }}>
                <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#8a8580', fontWeight: 600 }}>
                  {k.label}
                </div>
                <div style={{ fontSize: 28, fontFamily: 'var(--rg-font-display)', fontWeight: 700, color: k.warn ? '#b45309' : k.color, letterSpacing: '-0.02em', marginTop: 2 }}>
                  {k.val}
                </div>
              </div>
            ))}
          </div>

          {/* Error global */}
          {err && (
            <div style={{ background: 'rgba(178,34,34,0.07)', border: '1px solid rgba(178,34,34,0.2)', borderRadius: 8, padding: '10px 14px', color: '#b22222', fontSize: 13, marginBottom: 16 }}>
              {err}
            </div>
          )}

          {/* Tabla */}
          <div style={{ background: '#fff', border: '1px solid #e8e4dc', borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid #e8e4dc', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--rg-text)' }}>
                Usuarios del sistema
              </span>
              <span style={{ fontSize: 11.5, color: 'var(--rg-muted)' }}>
                Tabla compartida con Contraloría · Las contraseñas son independientes por sistema
              </span>
            </div>

            {loading ? (
              <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--rg-muted)' }}>
                <div style={{ width: 28, height: 28, border: '2.5px solid #e8e4dc', borderTopColor: '#1a4d2e', borderRadius: '50%', animation: 'rg-spin 0.7s linear infinite', margin: '0 auto 12px' }}/>
                Cargando usuarios…
              </div>
            ) : (
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                <thead>
                  <tr style={{ background: '#f9f8f5' }}>
                    {['ID', 'Nombre', 'Usuario', 'Rol', 'Acceso RG', 'Estado', 'Acciones'].map(h => (
                      <th key={h} style={{
                        padding: '10px 14px', textAlign: 'left', fontSize: 10.5,
                        fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
                        color: '#8a8580', borderBottom: '1px solid #e8e4dc',
                        whiteSpace: 'nowrap',
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {users.length === 0 ? (
                    <tr><td colSpan={7} style={{ padding: '40px 0', textAlign: 'center', color: 'var(--rg-muted)' }}>
                      No hay usuarios registrados.
                    </td></tr>
                  ) : users.map(u => (
                    <tr key={u.id} style={{
                      borderBottom: '1px solid #f0ece4',
                      opacity: u.activo ? 1 : 0.5,
                      transition: 'background 0.1s',
                    }}
                    onMouseEnter={e => e.currentTarget.style.background = '#faf9f6'}
                    onMouseLeave={e => e.currentTarget.style.background = ''}>
                      {/* ID */}
                      <td style={{ padding: '10px 14px', color: '#b0aa9e', fontFamily: 'var(--rg-font-mono)', fontSize: 11 }}>
                        {u.id}
                      </td>
                      {/* Nombre */}
                      <td style={{ padding: '10px 14px' }}>
                        <div style={{ fontWeight: 600, color: 'var(--rg-text)' }}>{u.nombre}</div>
                        {u.id === user.id && (
                          <span style={{ fontSize: 10, background: '#e8e4dc', borderRadius: 4, padding: '1px 6px', color: '#64748b', marginTop: 2, display: 'inline-block' }}>
                            Tú
                          </span>
                        )}
                      </td>
                      {/* Usuario */}
                      <td style={{ padding: '10px 14px', fontFamily: 'var(--rg-font-mono)', fontSize: 12, color: '#64748b' }}>
                        {u.usuario}
                      </td>
                      {/* Rol */}
                      <td style={{ padding: '10px 14px' }}>
                        <span style={{
                          background: ROL_COLORS[u.rol] + '18',
                          color: ROL_COLORS[u.rol] || '#64748b',
                          border: `1px solid ${ROL_COLORS[u.rol] || '#64748b'}30`,
                          borderRadius: 6, padding: '2px 8px', fontSize: 11.5, fontWeight: 500,
                        }}>
                          {ROLES_RG[u.rol] || u.rol}
                        </span>
                      </td>
                      {/* Acceso RG */}
                      <td style={{ padding: '10px 14px' }}>
                        {u.tiene_acceso_rg ? (
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: '#1a4d2e', fontSize: 12, fontWeight: 500 }}>
                            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#2d6a44', display: 'inline-block' }}/>
                            Habilitado
                          </span>
                        ) : (
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: '#b0aa9e', fontSize: 12 }}>
                            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#d0cbbf', display: 'inline-block' }}/>
                            Sin acceso
                          </span>
                        )}
                      </td>
                      {/* Estado */}
                      <td style={{ padding: '10px 14px' }}>
                        <span style={{
                          background: u.activo ? 'rgba(26,77,46,0.1)' : '#f0ece4',
                          color:      u.activo ? '#1a4d2e' : '#8a8580',
                          borderRadius: 6, padding: '2px 8px', fontSize: 11.5, fontWeight: 500,
                        }}>
                          {u.activo ? 'Activo' : 'Inactivo'}
                        </span>
                      </td>
                      {/* Acciones */}
                      <td style={{ padding: '10px 14px' }}>
                        <div style={{ display: 'flex', gap: 6, flexWrap: 'nowrap' }}>
                          {/* Editar nombre/rol */}
                          <button onClick={() => abrirEditar(u)} title="Editar nombre y rol"
                            style={{ background: '#f0ece4', border: 'none', borderRadius: 6, padding: '5px 8px', cursor: 'pointer', color: '#3a3530', display: 'flex', alignItems: 'center' }}>
                            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                              <path d="M9.5 1.5l3 3L4 13H1v-3L9.5 1.5z"/>
                            </svg>
                          </button>
                          {/* Generar / resetear contraseña */}
                          <button onClick={() => handleGenerar(u)} title={u.tiene_acceso_rg ? 'Resetear contraseña RG' : 'Generar acceso RG'}
                            style={{ background: u.tiene_acceso_rg ? '#e8f0fe' : '#e8f5ee', border: 'none', borderRadius: 6, padding: '5px 8px', cursor: 'pointer', color: u.tiene_acceso_rg ? '#2563eb' : '#1a4d2e', display: 'flex', alignItems: 'center' }}>
                            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                              <circle cx="5" cy="9" r="3"/><path d="M14 2l-5 5M9 2h5v5"/>
                            </svg>
                          </button>
                          {/* Revocar acceso */}
                          {u.tiene_acceso_rg && u.id !== user.id && (
                            <button onClick={() => handleRevocar(u)} title="Revocar acceso ROCA GOLF"
                              style={{ background: '#fee2e2', border: 'none', borderRadius: 6, padding: '5px 8px', cursor: 'pointer', color: '#b22222', display: 'flex', alignItems: 'center' }}>
                              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                                <path d="M1 1l12 12M10 6.5A3 3 0 0 0 5.5 2M4 10a3 3 0 0 0 4.5.5"/>
                              </svg>
                            </button>
                          )}
                          {/* Toggle activo */}
                          {u.id !== user.id && (
                            <button onClick={() => handleToggle(u)} title={u.activo ? 'Desactivar' : 'Activar'}
                              style={{ background: u.activo ? '#fef3c7' : '#e8f5ee', border: 'none', borderRadius: 6, padding: '5px 8px', cursor: 'pointer', color: u.activo ? '#b45309' : '#1a4d2e', display: 'flex', alignItems: 'center' }}>
                              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                                {u.activo
                                  ? <><circle cx="7" cy="7" r="6"/><path d="M5 7h4"/></>
                                  : <><circle cx="7" cy="7" r="6"/><path d="M7 4v3l2 2"/></>
                                }
                              </svg>
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>

          {/* Nota informativa */}
          <div style={{ marginTop: 16, padding: '12px 16px', background: 'rgba(26,77,46,0.05)', border: '1px solid rgba(26,77,46,0.12)', borderRadius: 8, fontSize: 12, color: '#3a3530', lineHeight: 1.6 }}>
            <strong>Contraseñas independientes:</strong> Cada usuario tiene una contraseña para Contraloría y otra para ROCA GOLF.
            Al crear o resetear una contraseña de ROCA GOLF, la contraseña de Contraloría no se modifica.
            Los usuarios creados aquí aparecerán en Contraloría sin contraseña activa hasta que el admin de ese sistema la configure.
          </div>

        </div>
      </div>

      {/* ── Modal: Contraseña generada ── */}
      {pwdModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
          onClick={() => setPwdModal(false)}>
          <div style={{ background: '#fff', borderRadius: 14, width: '100%', maxWidth: 420, boxShadow: '0 24px 60px rgba(0,0,0,0.25)', overflow: 'hidden' }}
            onClick={e => e.stopPropagation()}>
            {/* Header */}
            <div style={{ background: '#1a4d2e', color: '#f5f1e8', padding: '18px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: 'var(--rg-font-display)', fontWeight: 600, fontSize: 16 }}>
                  Contraseña generada
                </div>
                <div style={{ fontSize: 12, color: 'rgba(245,241,232,0.65)', marginTop: 2 }}>
                  {pwdNombre} · {pwdUsuario}
                </div>
              </div>
              <button onClick={() => setPwdModal(false)}
                style={{ background: 'rgba(255,255,255,0.12)', border: 'none', color: '#f5f1e8', borderRadius: 6, width: 30, height: 30, cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                ×
              </button>
            </div>
            {/* Body */}
            <div style={{ padding: '24px' }}>
              <div style={{ background: '#f9f8f5', border: '2px solid #c9a961', borderRadius: 10, padding: '20px 24px', textAlign: 'center', marginBottom: 16 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#8a8580', marginBottom: 8, fontWeight: 600 }}>
                  Contraseña ROCA GOLF
                </div>
                <div style={{ fontSize: 28, fontFamily: 'var(--rg-font-mono)', fontWeight: 700, letterSpacing: '0.15em', color: '#1a4d2e' }}>
                  {pwdPlain}
                </div>
              </div>
              <button onClick={copiarPassword}
                style={{ width: '100%', height: 42, background: copied ? '#1a4d2e' : '#f0ece4', border: `1px solid ${copied ? '#1a4d2e' : '#e0dbd2'}`, borderRadius: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: copied ? '#fff' : '#1a4d2e', transition: 'all 0.15s', marginBottom: 14, fontFamily: 'var(--rg-font-body)' }}>
                {copied ? (
                  <><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M2 7l3 3 7-7"/></svg> ¡Copiado!</>
                ) : (
                  <><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="4" y="4" width="8" height="9" rx="1.5"/><path d="M2 10V2h8"/></svg> Copiar contraseña</>
                )}
              </button>
              <div style={{ background: '#fef3c7', border: '1px solid #f59e0b', borderRadius: 7, padding: '10px 14px', fontSize: 12, color: '#92400e', lineHeight: 1.5 }}>
                <strong>⚠ Esta contraseña se muestra solo una vez.</strong><br/>
                Cópiala y entrégala al usuario. Si se pierde, usa "Resetear contraseña" para generar una nueva.
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── Modal: Crear usuario ── */}
      {createModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
          onClick={() => setCreateModal(false)}>
          <div style={{ background: '#fff', borderRadius: 14, width: '100%', maxWidth: 440, boxShadow: '0 24px 60px rgba(0,0,0,0.25)', overflow: 'hidden' }}
            onClick={e => e.stopPropagation()}>
            <div style={{ padding: '16px 22px', borderBottom: '1px solid #e8e4dc', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--rg-text)' }}>Nuevo Usuario</span>
              <button onClick={() => setCreateModal(false)}
                style={{ background: '#f0ece4', border: 'none', borderRadius: 6, width: 28, height: 28, cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#3a3530' }}>
                ×
              </button>
            </div>
            <form onSubmit={handleCreate} style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {/* Nombre */}
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: '#3a3530', marginBottom: 5 }}>
                  Nombre completo *
                </label>
                <input required value={createForm.nombre}
                  onChange={e => setCreateForm(f => ({ ...f, nombre: e.target.value }))}
                  placeholder="Ej. Juan Pérez García"
                  style={{ width: '100%', padding: '10px 13px', border: '1.5px solid #e0dbd2', borderRadius: 8, fontSize: 13.5, fontFamily: 'var(--rg-font-body)', outline: 'none', boxSizing: 'border-box' }}
                  onFocus={e => e.target.style.borderColor = '#1a4d2e'}
                  onBlur={e => e.target.style.borderColor = '#e0dbd2'}
                />
              </div>
              {/* Usuario */}
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: '#3a3530', marginBottom: 5 }}>
                  Usuario (login) *
                </label>
                <input required value={createForm.usuario}
                  onChange={e => setCreateForm(f => ({ ...f, usuario: e.target.value.toLowerCase().replace(/[^a-z0-9_\-]/g, '') }))}
                  placeholder="Ej. jperez"
                  style={{ width: '100%', padding: '10px 13px', border: '1.5px solid #e0dbd2', borderRadius: 8, fontSize: 13.5, fontFamily: 'var(--rg-font-mono)', outline: 'none', boxSizing: 'border-box' }}
                  onFocus={e => e.target.style.borderColor = '#1a4d2e'}
                  onBlur={e => e.target.style.borderColor = '#e0dbd2'}
                />
                <div style={{ fontSize: 11, color: '#8a8580', marginTop: 4 }}>
                  Solo letras minúsculas, números y guiones. La contraseña se genera automáticamente.
                </div>
              </div>
              {/* Rol */}
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: '#3a3530', marginBottom: 5 }}>
                  Rol *
                </label>
                <select required value={createForm.rol}
                  onChange={e => setCreateForm(f => ({ ...f, rol: e.target.value }))}
                  style={{ width: '100%', padding: '10px 13px', border: '1.5px solid #e0dbd2', borderRadius: 8, fontSize: 13.5, fontFamily: 'var(--rg-font-body)', outline: 'none', boxSizing: 'border-box', background: '#fff', cursor: 'pointer' }}>
                  {Object.entries(ROLES_RG).map(([val, lbl]) => (
                    <option key={val} value={val}>{lbl}</option>
                  ))}
                </select>
              </div>
              {/* Aviso */}
              <div style={{ background: 'rgba(26,77,46,0.06)', border: '1px solid rgba(26,77,46,0.15)', borderRadius: 7, padding: '9px 12px', fontSize: 11.5, color: '#1a4d2e', lineHeight: 1.5 }}>
                La contraseña se generará automáticamente y se mostrará una sola vez al crear el usuario.
              </div>
              {/* Footer */}
              <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
                <button type="button" onClick={() => setCreateModal(false)}
                  style={{ padding: '9px 18px', background: '#f0ece4', border: '1px solid #e0dbd2', borderRadius: 8, cursor: 'pointer', fontSize: 13, color: '#3a3530', fontFamily: 'var(--rg-font-body)' }}>
                  Cancelar
                </button>
                <button type="submit" disabled={createLoading}
                  style={{ padding: '9px 22px', background: '#1a4d2e', border: 'none', borderRadius: 8, cursor: createLoading ? 'not-allowed' : 'pointer', fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: 'var(--rg-font-body)', opacity: createLoading ? 0.65 : 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                  {createLoading
                    ? <><span style={{ width: 14, height: 14, border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'rg-spin 0.65s linear infinite', display: 'inline-block' }}/> Creando…</>
                    : 'Crear usuario'
                  }
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* ── Modal: Editar usuario ── */}
      {editModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
          onClick={() => setEditModal(false)}>
          <div style={{ background: '#fff', borderRadius: 14, width: '100%', maxWidth: 400, boxShadow: '0 24px 60px rgba(0,0,0,0.25)', overflow: 'hidden' }}
            onClick={e => e.stopPropagation()}>
            <div style={{ padding: '16px 22px', borderBottom: '1px solid #e8e4dc', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--rg-text)' }}>Editar Usuario</span>
              <button onClick={() => setEditModal(false)}
                style={{ background: '#f0ece4', border: 'none', borderRadius: 6, width: 28, height: 28, cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#3a3530' }}>
                ×
              </button>
            </div>
            <form onSubmit={handleEdit} style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: '#3a3530', marginBottom: 5 }}>
                  Nombre completo *
                </label>
                <input required value={editForm.nombre}
                  onChange={e => setEditForm(f => ({ ...f, nombre: e.target.value }))}
                  style={{ width: '100%', padding: '10px 13px', border: '1.5px solid #e0dbd2', borderRadius: 8, fontSize: 13.5, fontFamily: 'var(--rg-font-body)', outline: 'none', boxSizing: 'border-box' }}
                  onFocus={e => e.target.style.borderColor = '#1a4d2e'}
                  onBlur={e => e.target.style.borderColor = '#e0dbd2'}
                />
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: '#3a3530', marginBottom: 5 }}>
                  Rol *
                </label>
                <select required value={editForm.rol}
                  onChange={e => setEditForm(f => ({ ...f, rol: e.target.value }))}
                  style={{ width: '100%', padding: '10px 13px', border: '1.5px solid #e0dbd2', borderRadius: 8, fontSize: 13.5, fontFamily: 'var(--rg-font-body)', outline: 'none', boxSizing: 'border-box', background: '#fff', cursor: 'pointer' }}>
                  {Object.entries(ROLES_RG).map(([val, lbl]) => (
                    <option key={val} value={val}>{lbl}</option>
                  ))}
                </select>
              </div>
              <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
                <button type="button" onClick={() => setEditModal(false)}
                  style={{ padding: '9px 18px', background: '#f0ece4', border: '1px solid #e0dbd2', borderRadius: 8, cursor: 'pointer', fontSize: 13, color: '#3a3530', fontFamily: 'var(--rg-font-body)' }}>
                  Cancelar
                </button>
                <button type="submit" disabled={editLoading}
                  style={{ padding: '9px 22px', background: '#1a4d2e', border: 'none', borderRadius: 8, cursor: editLoading ? 'not-allowed' : 'pointer', fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: 'var(--rg-font-body)', opacity: editLoading ? 0.65 : 1 }}>
                  {editLoading ? 'Guardando…' : 'Guardar'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { UsuariosView });