function Usuarios() {
  const toast = useToast();
  const { usuario } = useAuth();
  const [rows, setRows] = React.useState([]);
  const [roles, setRoles] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editando, setEditando] = React.useState(null);
  const [eliminando, setEliminando] = React.useState(null);

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try {
      const [r1, r2] = await Promise.all([Api.get('/usuarios'), Api.get('/roles')]);
      setRows(r1.data);
      setRoles(r2.data);
    } catch (err) { toast.error(err.message); } finally { setLoading(false); }
  }, []);
  React.useEffect(() => { cargar(); }, [cargar]);

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/usuarios/${form.id}`, form);
      else await Api.post('/usuarios', form);
      toast.success('Usuario guardado');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/usuarios/${eliminando.id}`);
      toast.success('Usuario eliminado');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Usuarios del sistema</div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nuevo usuario</button>
        </div>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'nombre', header: 'Nombre' },
              { key: 'email', header: 'Correo' },
              { key: 'rol', header: 'Rol', render: (r) => <span className="tag-chip">{r.rol}</span> },
              { key: 'estado', header: 'Estado', render: (r) => <span className="tag-chip">{r.estado}</span> },
              { key: 'acciones', header: '', render: (r) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="icon-btn" onClick={() => setEditando(r)}><IconEdit size={14} /></button>
                  {r.id !== usuario.id && <button className="icon-btn" onClick={() => setEliminando(r)}><IconTrash size={14} /></button>}
                </div>
              ) },
            ]}
            rows={rows}
            emptyTitle="Sin usuarios"
            emptyHint="Crea cuentas para tu equipo de Operadores y Supervisores."
          />
        )}
      </div>

      {editando && <UsuarioModal usuarioEdit={editando} roles={roles} onClose={() => setEditando(null)} onSave={guardar} />}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar usuario"
        message={`¿Eliminar la cuenta de "${eliminando?.nombre}"? Esta acción no se puede deshacer.`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function UsuarioModal({ usuarioEdit, roles, onClose, onSave }) {
  const [form, setForm] = React.useState({
    id: usuarioEdit.id, nombre: usuarioEdit.nombre || '', email: usuarioEdit.email || '',
    rol_id: usuarioEdit.rol_id || (roles[0]?.id ?? ''), estado: usuarioEdit.estado || 'ACTIVO', password: '',
  });

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">{usuarioEdit.id ? 'Editar usuario' : 'Nuevo usuario'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body">
          <div className="field">
            <label>Nombre completo</label>
            <input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} autoFocus />
          </div>
          <div className="field">
            <label>Correo</label>
            <input type="email" value={form.email} disabled={!!usuarioEdit.id} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="nombre@ideiperu.com" />
          </div>
          <div className="field">
            <label>Rol</label>
            <select value={form.rol_id} onChange={(e) => setForm({ ...form, rol_id: Number(e.target.value) })}>
              {roles.map((r) => <option key={r.id} value={r.id}>{r.nombre}</option>)}
            </select>
          </div>
          <div className="field">
            <label>{usuarioEdit.id ? 'Nueva contraseña (opcional)' : 'Contraseña'}</label>
            <input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder={usuarioEdit.id ? 'Dejar en blanco para no cambiar' : 'Mín. 8 caracteres, con letras y números'} autoComplete="new-password" />
          </div>
          {usuarioEdit.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activo</option>
                <option value="INACTIVO">Inactivo</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onSave(form)} disabled={!form.nombre.trim() || !form.email.trim()}>Guardar</button>
        </div>
      </div>
    </div>
  );
}