'use client';

import { useAuth } from '@/components/providers';
import { useConfirm } from '@/components/confirm-provider';
import {
  DashboardEmptyState,
  DashboardListRow,
  DashboardPageIntro,
  DashboardSection,
  DashboardToolbar,
} from '@/components/dashboard-page';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { ErrorState } from '@/components/ui/error-state';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { SkeletonListRow } from '@/components/ui/skeleton';
import { useToast } from '@/hooks/use-toast';
import { authApi } from '@/lib/api';
import { getEstadoLabel } from '@/lib/utils';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { MoreVertical, Plus, Shield, UserCog, Users } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useMemo, useState } from 'react';

type PermissionLevel = 'none' | 'read' | 'write';

// Mismos 7 valores que el enum EstadoOT del backend
// (ots/entities/orden-trabajo.entity.ts) -- usado para restringir qué
// estados de OT puede ver un usuario puntual (null = sin restricción).
const ESTADOS_OT = [
  'borrador',
  'en_proceso',
  'cotizada',
  'aprobada',
  'terminada',
  'facturada',
  'entregada',
] as const;

type ModulePermission = {
  key: string;
  label: string;
  hint?: string;
};

const roles = ['super_admin', 'admin', 'operativo', 'recepcion', 'mecanico'] as const;

// El valor crudo del rol (usado tal cual en permisos y filtros) no es lo
// mismo que su nombre para mostrar -- antes se armaba con
// `role.replace('_', ' ')`, que dejaba "super admin" sin mayuscula y
// "recepcion"/"mecanico" sin tilde en el selector y en el badge de rol.
const roleLabels: Record<(typeof roles)[number], string> = {
  super_admin: 'Super admin',
  admin: 'Administrador',
  operativo: 'Operativo',
  recepcion: 'Recepción',
  mecanico: 'Mecánico',
};

function getRoleLabel(role: string): string {
  return roleLabels[role as (typeof roles)[number]] || role;
}

const permissionModules: ModulePermission[] = [
  { key: 'usuarios', label: 'Usuarios' },
  { key: 'configuracion.facturacion', label: 'Configuración — Facturación' },
  { key: 'configuracion.inventario', label: 'Configuración — Inventario' },
  { key: 'configuracion.productos', label: 'Configuración — Productos' },
  { key: 'configuracion.tiendas', label: 'Configuración — Tiendas' },
  { key: 'configuracion.notificaciones', label: 'Configuración — Notificaciones (WhatsApp)' },
  { key: 'configuracion.operacion', label: 'Configuración — Operación' },
  { key: 'clientes', label: 'Clientes' },
  { key: 'vehiculos', label: 'Vehículos' },
  { key: 'ots', label: 'Órdenes de trabajo' },
  { key: 'catalogos', label: 'Catálogos' },
  { key: 'productos', label: 'Productos' },
  { key: 'historial', label: 'Historial' },
  { key: 'logs', label: 'Logs / bitácora' },
  { key: 'cotizaciones', label: 'Cotizaciones' },
  { key: 'uploads', label: 'Archivos' },
  { key: 'sync', label: 'Sincronización' },
  { key: 'reportes', label: 'Reportes' },
  {
    key: 'productoLibre',
    label: 'Producto por ingresar (precio manual)',
    hint: 'Permite agregar en una cotización un producto que no existe en el catálogo, con un precio escrito a mano. Sin este permiso, la persona solo puede cotizar con productos ya cargados.',
  },
  {
    key: 'confirmarPago',
    label: 'Confirmar pago de OT facturada',
    hint: 'Permite marcar como pagada una OT ya facturada. Sin este permiso, la persona no puede liberar la entrega de una OT que exige pago confirmado.',
  },
];

const roleTemplates: Record<string, Record<string, PermissionLevel>> = {
  super_admin: {
    usuarios: 'write',
    'configuracion.facturacion': 'write', 'configuracion.inventario': 'write', 'configuracion.productos': 'write',
    'configuracion.tiendas': 'write', 'configuracion.notificaciones': 'write', 'configuracion.operacion': 'write',
    clientes: 'write', vehiculos: 'write', ots: 'write', catalogos: 'write',
    productos: 'write', historial: 'write', logs: 'write', cotizaciones: 'write', uploads: 'write', sync: 'write', reportes: 'write',
    productoLibre: 'write', confirmarPago: 'write',
  },
  admin: {
    usuarios: 'read',
    'configuracion.facturacion': 'write', 'configuracion.inventario': 'write', 'configuracion.productos': 'write',
    'configuracion.tiendas': 'write', 'configuracion.notificaciones': 'write', 'configuracion.operacion': 'write',
    clientes: 'write', vehiculos: 'write', ots: 'write', catalogos: 'write',
    productos: 'write', historial: 'read', logs: 'read', cotizaciones: 'write', uploads: 'write', sync: 'write', reportes: 'write',
    productoLibre: 'write', confirmarPago: 'write',
  },
  operativo: {
    usuarios: 'none',
    'configuracion.facturacion': 'none', 'configuracion.inventario': 'none', 'configuracion.productos': 'none',
    'configuracion.tiendas': 'none', 'configuracion.notificaciones': 'none', 'configuracion.operacion': 'none',
    clientes: 'read', vehiculos: 'read', ots: 'write', catalogos: 'read',
    productos: 'read', historial: 'read', logs: 'none', cotizaciones: 'write', uploads: 'write', sync: 'write', reportes: 'read',
    productoLibre: 'none', confirmarPago: 'none',
  },
  recepcion: {
    usuarios: 'none',
    'configuracion.facturacion': 'none', 'configuracion.inventario': 'none', 'configuracion.productos': 'none',
    'configuracion.tiendas': 'none', 'configuracion.notificaciones': 'none', 'configuracion.operacion': 'none',
    clientes: 'read', vehiculos: 'read', ots: 'write', catalogos: 'read',
    productos: 'read', historial: 'read', logs: 'none', cotizaciones: 'write', uploads: 'write', sync: 'write', reportes: 'read',
    productoLibre: 'none', confirmarPago: 'none',
  },
  mecanico: {
    usuarios: 'none',
    'configuracion.facturacion': 'none', 'configuracion.inventario': 'none', 'configuracion.productos': 'none',
    'configuracion.tiendas': 'none', 'configuracion.notificaciones': 'none', 'configuracion.operacion': 'none',
    clientes: 'read', vehiculos: 'read', ots: 'write', catalogos: 'read',
    productos: 'read', historial: 'read', logs: 'none', cotizaciones: 'write', uploads: 'write', sync: 'write', reportes: 'none',
    productoLibre: 'none', confirmarPago: 'none',
  },
};

function buildPermissions(rol: string, current?: Record<string, PermissionLevel>) {
  return {
    ...(roleTemplates[rol] || roleTemplates.operativo),
    ...(current || {}),
  };
}

function emptyForm() {
  return {
    username: '',
    nombre: '',
    email: '',
    password: '',
    rol: 'operativo',
    tiendaId: '',
    permisos: buildPermissions('operativo'),
    // null = sin restricción (ver comentario en providers.tsx / usuario.entity.ts)
    facturacionPosTiendaIds: null as number[] | null,
    estadosVisibles: null as string[] | null,
  };
}

function RequiredMark() {
  return <span className="ml-0.5 text-destructive">*</span>;
}

export default function UsuariosPage() {
  const router = useRouter();
  const { toast } = useToast();
  const { user, canRead, canWrite } = useAuth();
  const queryClient = useQueryClient();
  const confirm = useConfirm();

  // Ya no se decide por rol crudo (super_admin/admin) sino por el permiso
  // granular "usuarios" -- el mismo que el editor de más abajo permite
  // pisar por usuario (ver providers.tsx / default-permissions.ts). Ver
  // canEditUsers para las acciones de escritura (crear/editar/dar de baja).
  const canViewUsers = canRead('usuarios');
  const canEditUsers = canWrite('usuarios');

  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [userSearch, setUserSearch] = useState('');
  const [form, setForm] = useState<{
    username: string;
    nombre: string;
    email: string;
    password: string;
    rol: string;
    tiendaId: string;
    permisos: Record<string, PermissionLevel>;
    facturacionPosTiendaIds: number[] | null;
    estadosVisibles: string[] | null;
  }>(emptyForm());

  const closeForm = () => {
    setShowForm(false);
    setEditing(null);
    setForm(emptyForm());
  };

  const { data: users = [], isLoading, isError, refetch } = useQuery({
    queryKey: ['users'],
    queryFn: authApi.users,
    enabled: canViewUsers,
  });

  const { data: tiendas = [] } = useQuery({
    queryKey: ['tiendas'],
    queryFn: authApi.tiendas,
    enabled: canViewUsers,
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      const payload = {
        username: form.username,
        nombre: form.nombre,
        email: form.email || undefined,
        password: form.password || undefined,
        rol: form.rol,
        tiendaId: form.tiendaId ? Number(form.tiendaId) : undefined,
        permisos: form.permisos,
        facturacionPosTiendaIds: form.facturacionPosTiendaIds,
        estadosVisibles: form.estadosVisibles,
      };

      if (editing) {
        return authApi.updateUser(editing.id, payload);
      }

      return authApi.createUser({ ...payload, password: form.password });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
      closeForm();
      toast({ title: 'Usuario guardado correctamente' });
    },
    onError: (e: any) => toast({ variant: 'destructive', title: 'Error', description: e.message }),
  });

  const activeMutation = useMutation({
    mutationFn: ({ id, value }: { id: number; value: boolean }) => authApi.setUserActive(id, value),
    onSuccess: (_result, variables) => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
      toast({ title: variables.value ? 'Usuario dado de alta' : 'Usuario dado de baja' });
    },
    onError: (e: any) => toast({ variant: 'destructive', title: 'Error', description: e.message }),
  });

  // super_admin solo lo puede asignar otro super_admin -- un admin no deberia
  // poder crear una cuenta con mas privilegios que la suya.
  const rolesOptions = useMemo(
    () =>
      roles
        .filter((role) => role !== 'super_admin' || user?.rol === 'super_admin')
        .map((role) => ({ value: role, label: getRoleLabel(role) })),
    [user?.rol],
  );
  const normalizedUserSearch = userSearch.trim().toLowerCase();
  const filteredUsers = users.filter((item: any) => {
    if (!normalizedUserSearch) return true;
    return [
      item.nombre,
      item.username,
      item.email,
      item.rol,
      item.tienda?.nombre,
    ]
      .filter(Boolean)
      .join(' ')
      .toLowerCase()
      .includes(normalizedUserSearch);
  });
  const activeUserList = filteredUsers.filter((item: any) => item.activo);
  const inactiveUserList = filteredUsers.filter((item: any) => !item.activo);
  const activeUsers = users.filter((item: any) => item.activo).length;
  const adminUsers = users.filter((item: any) => item.rol === 'admin' || item.rol === 'super_admin').length;

  if (!canViewUsers) {
    return (
      <div className="min-h-full">
        <main className="mx-auto max-w-4xl p-6">
          <DashboardEmptyState
            title="Sin acceso"
            description="No tenés permiso para ver la gestión de usuarios y permisos."
            icon={Shield}
          />
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-6xl flex-col gap-6 p-4 md:p-6">
        <DashboardPageIntro
          title="Usuarios y permisos"
          description="La configuración de acceso ahora se presenta como una sola vista operativa: quién entra, con qué rol y a qué módulos puede escribir."
          icon={Shield}
          tone="slate"
          badge="Seguridad operativa"
          onBack={() => router.push('/dashboard')}
          filters={
            <DashboardToolbar
              searchValue={userSearch}
              onSearchChange={setUserSearch}
              searchPlaceholder="Buscar usuario, rol o tienda"
              action={
                canEditUsers ? (
                  <Button
                    onClick={() => {
                      setEditing(null);
                      setForm(emptyForm());
                      setShowForm(true);
                    }}
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    Nuevo usuario
                  </Button>
                ) : undefined
              }
            />
          }
          stats={[
            { label: 'Usuarios totales', value: users.length, hint: 'Registrados en el sistema', icon: Users },
            { label: 'Activos', value: activeUsers, hint: 'Con acceso habilitado', icon: UserCog },
            { label: 'Administradores', value: adminUsers, hint: 'Admin y super admin', icon: Shield },
            { label: 'Módulos controlados', value: permissionModules.length, hint: 'Permisos configurables', icon: Shield },
          ]}
        />

        <Dialog open={showForm} onOpenChange={(open) => (open ? setShowForm(true) : closeForm())}>
          <DialogContent className="sm:max-w-2xl">
            <DialogHeader>
              <DialogTitle>{editing ? 'Editar usuario' : 'Crear usuario'}</DialogTitle>
              <DialogDescription>Completa los datos básicos y luego ajusta permisos por módulo.</DialogDescription>
            </DialogHeader>
            
            <DialogBody>
            <div className="space-y-5">
              <div className="grid gap-3 md:grid-cols-2">
                <div className="space-y-1.5">
                  <label htmlFor="usuario-username" className="text-sm font-medium text-foreground">
                    Usuario
                    <RequiredMark />
                  </label>
                  <Input id="usuario-username" placeholder="ej. jperez" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} className="h-11 rounded-xl" />
                </div>
                <div className="space-y-1.5">
                  <label htmlFor="usuario-nombre" className="text-sm font-medium text-foreground">
                    Nombre completo
                    <RequiredMark />
                  </label>
                  <Input id="usuario-nombre" placeholder="Nombre y apellido" value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} className="h-11 rounded-xl" />
                </div>
              </div>

              <div className="grid gap-3 md:grid-cols-2">
                <div className="space-y-1.5">
                  <label htmlFor="usuario-email" className="text-sm font-medium text-foreground">
                    Correo
                    {!editing ? <RequiredMark /> : null}
                  </label>
                  <Input
                    id="usuario-email"
                    placeholder="correo@ejemplo.com"
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                  {editing ? (
                    <p className="text-xs text-muted-foreground">Necesario para poder ingresar. Cambiarlo actualiza el correo con el que inicia sesión.</p>
                  ) : (
                    <p className="text-xs text-muted-foreground">Obligatorio: es lo que usará para poder ingresar.</p>
                  )}
                </div>
                <div className="space-y-1.5">
                  <label htmlFor="usuario-password" className="text-sm font-medium text-foreground">
                    Contraseña
                    {!editing ? <RequiredMark /> : null}
                  </label>
                  <Input
                    id="usuario-password"
                    placeholder={editing ? 'Dejar en blanco para no cambiarla' : 'Contraseña'}
                    type="password"
                    value={form.password}
                    onChange={(e) => setForm({ ...form, password: e.target.value })}
                    className="h-11 rounded-xl"
                  />
                  {editing ? (
                    <p className="text-xs text-muted-foreground">Solo se actualiza si escribís una nueva.</p>
                  ) : null}
                </div>
              </div>

              <div className="grid gap-3 md:grid-cols-2">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-foreground">Rol</label>
                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
                    {rolesOptions.map((role) => {
                      const active = form.rol === role.value;
                      return (
                        <button
                          key={role.value}
                          type="button"
                          onClick={() => setForm({ ...form, rol: role.value, permisos: buildPermissions(role.value) })}
                          className={`h-10 rounded-xl border px-3 text-sm font-semibold capitalize transition-colors ${
                            active
                              ? 'border-border-strong bg-foreground text-background'
                              : 'border-border bg-surface text-muted-foreground hover:border-border-strong hover:bg-muted'
                          }`}
                        >
                          {role.label}
                        </button>
                      );
                    })}
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-foreground">Tienda</label>
                  <Select
                    value={form.tiendaId || 'none'}
                    onValueChange={(value) => setForm({ ...form, tiendaId: value === 'none' ? '' : value })}
                  >
                    <SelectTrigger aria-label="Tienda">
                      <SelectValue placeholder="Sin tienda" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">Sin tienda</SelectItem>
                      {tiendas.map((tienda: any) => (
                        <SelectItem key={tienda.id} value={String(tienda.id)}>
                          {tienda.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="rounded-xl border border-border bg-surface p-3">
                <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <p className="text-sm font-bold text-foreground">Permisos</p>
                    <p className="text-xs text-muted-foreground">El rol carga una plantilla; ajusta solo lo especial.</p>
                  </div>
                  <Button
                    type="button"
                    variant="outline"
                    className="h-9 rounded-xl"
                    onClick={() => setForm({ ...form, permisos: buildPermissions(form.rol) })}
                  >
                    Restaurar rol
                  </Button>
                </div>
                <div className="grid gap-2 md:grid-cols-2">
                  {permissionModules.map((module) => (
                    <div key={module.key} className="rounded-xl border border-border bg-muted p-3">
                      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                          <span className="font-medium text-foreground">{module.label}</span>
                          {module.hint ? <p className="mt-1 text-xs text-muted-foreground sm:max-w-xs">{module.hint}</p> : null}
                        </div>
                        <div className="grid grid-cols-3 overflow-hidden rounded-xl border border-border bg-surface">
                          {([
                            ['none', 'Sin'],
                            ['read', 'Ver'],
                            ['write', 'Editar'],
                          ] as [PermissionLevel, string][]).map(([level, label]) => {
                            const active = (form.permisos[module.key] || 'none') === level;
                            return (
                              <button
                                key={level}
                                type="button"
                                onClick={() => setForm({ ...form, permisos: { ...form.permisos, [module.key]: level } })}
                                className={`min-w-16 px-3 py-2 text-xs font-bold transition-colors ${
                                  active
                                    ? 'bg-foreground text-background'
                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                                }`}
                              >
                                {label}
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {form.permisos['configuracion.facturacion'] !== 'none' ? (
                <div className="rounded-xl border border-border bg-surface p-3">
                  <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                      <p className="text-sm font-bold text-foreground">Tiendas permitidas (Facturación POS)</p>
                      <p className="text-xs text-muted-foreground">Sin restricción: puede operar la facturación POS de cualquier tienda.</p>
                    </div>
                    <label className="flex items-center gap-2 text-xs font-semibold text-foreground">
                      <input
                        type="checkbox"
                        checked={form.facturacionPosTiendaIds === null}
                        onChange={(e) =>
                          setForm({ ...form, facturacionPosTiendaIds: e.target.checked ? null : [] })
                        }
                      />
                      Sin restricción
                    </label>
                  </div>
                  {form.facturacionPosTiendaIds !== null ? (
                    <div className="grid gap-2 sm:grid-cols-2">
                      {tiendas.map((tienda: any) => {
                        const checked = form.facturacionPosTiendaIds?.includes(tienda.id) ?? false;
                        return (
                          <label
                            key={tienda.id}
                            className="flex items-center gap-2 rounded-xl border border-border bg-muted px-3 py-2 text-sm text-foreground"
                          >
                            <input
                              type="checkbox"
                              checked={checked}
                              onChange={(e) => {
                                const current = form.facturacionPosTiendaIds || [];
                                setForm({
                                  ...form,
                                  facturacionPosTiendaIds: e.target.checked
                                    ? [...current, tienda.id]
                                    : current.filter((id) => id !== tienda.id),
                                });
                              }}
                            />
                            {tienda.nombre}
                          </label>
                        );
                      })}
                      {tiendas.length === 0 ? (
                        <p className="text-xs text-muted-foreground">No hay tiendas registradas.</p>
                      ) : null}
                    </div>
                  ) : null}
                </div>
              ) : null}

              <div className="rounded-xl border border-border bg-surface p-3">
                <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <p className="text-sm font-bold text-foreground">Estados de OT visibles</p>
                    <p className="text-xs text-muted-foreground">Sin restricción: puede ver órdenes de trabajo en cualquier estado.</p>
                  </div>
                  <label className="flex items-center gap-2 text-xs font-semibold text-foreground">
                    <input
                      type="checkbox"
                      checked={form.estadosVisibles === null}
                      onChange={(e) => setForm({ ...form, estadosVisibles: e.target.checked ? null : [] })}
                    />
                    Sin restricción
                  </label>
                </div>
                {form.estadosVisibles !== null ? (
                  <div className="grid gap-2 sm:grid-cols-3">
                    {ESTADOS_OT.map((estado) => {
                      const checked = form.estadosVisibles?.includes(estado) ?? false;
                      return (
                        <label
                          key={estado}
                          className="flex items-center gap-2 rounded-xl border border-border bg-muted px-3 py-2 text-sm text-foreground"
                        >
                          <input
                            type="checkbox"
                            checked={checked}
                            onChange={(e) => {
                              const current = form.estadosVisibles || [];
                              setForm({
                                ...form,
                                estadosVisibles: e.target.checked
                                  ? [...current, estado]
                                  : current.filter((v) => v !== estado),
                              });
                            }}
                          />
                          {getEstadoLabel(estado)}
                        </label>
                      );
                    })}
                  </div>
                ) : null}
              </div>

            </div>
            </DialogBody>

            <DialogFooter>
              <Button type="button" variant="outline" className="h-11 rounded-xl" onClick={closeForm}>
                Cancelar
              </Button>
              <Button
                className="h-11 rounded-xl font-semibold"
                disabled={
                  saveMutation.isPending ||
                  !form.username.trim() ||
                  !form.nombre.trim() ||
                  (!editing && !form.password.trim()) ||
                  (!editing && !form.email.trim())
                }
                onClick={() => saveMutation.mutate()}
              >
                {saveMutation.isPending ? 'Guardando...' : 'Guardar usuario'}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        <DashboardSection title="Usuarios" description="Busca por nombre, usuario, rol o tienda y edita sin recorrer toda la lista.">
          {isLoading ? (
            <div className="divide-y divide-border rounded-xl border border-border">
              {Array.from({ length: 4 }).map((_, index) => (
                <SkeletonListRow key={index} />
              ))}
            </div>
          ) : isError ? (
            <ErrorState onRetry={() => refetch()} description="No se pudo cargar la lista de usuarios." />
          ) : activeUserList.length === 0 ? (
            <DashboardEmptyState
              title={userSearch.trim() ? 'No se encontraron usuarios' : 'No hay usuarios activos'}
              description={
                userSearch.trim()
                  ? 'Prueba con otro nombre, rol o tienda.'
                  : 'Crea un usuario o da de alta uno existente para permitir acceso al sistema.'
              }
              icon={Users}
              className="border-none bg-muted shadow-none"
              action={
                !userSearch.trim() && canEditUsers ? (
                  <Button
                    onClick={() => {
                      setEditing(null);
                      setForm(emptyForm());
                      setShowForm(true);
                    }}
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    Crear el primero
                  </Button>
                ) : undefined
              }
            />
          ) : (
            <div className="overflow-hidden rounded-xl border border-border">
              {activeUserList.map((currentUser: any) => (
                <DashboardListRow
                  key={currentUser.id}
                  icon={<UserCog className="h-4 w-4" />}
                  title={`${currentUser.nombre} (${currentUser.username})`}
                  meta={
                    <span className="flex flex-wrap items-center gap-2">
                      <Badge variant="neutral">Rol: {getRoleLabel(currentUser.rol)}</Badge>
                      <Badge variant="neutral">Tienda: {currentUser.tienda?.nombre || 'Sin tienda'}</Badge>
                      <Badge variant={currentUser.activo ? 'success' : 'neutral'}>
                        {currentUser.activo ? 'Activo' : 'Inactivo'}
                      </Badge>
                    </span>
                  }
                  actions={
                    canEditUsers ? (
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" aria-label="Más acciones">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem
                          onClick={() => {
                            setEditing(currentUser);
                            setShowForm(true);
                            setForm({
                              username: currentUser.username,
                              nombre: currentUser.nombre,
                              email: currentUser.email || '',
                              password: '',
                              rol: currentUser.rol,
                              tiendaId: currentUser.tiendaId ? String(currentUser.tiendaId) : '',
                              permisos: buildPermissions(currentUser.rol, currentUser.permissions),
                              facturacionPosTiendaIds: currentUser.facturacionPosTiendaIds ?? null,
                              estadosVisibles: currentUser.estadosVisibles ?? null,
                            });
                          }}
                        >
                          Editar
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          variant="destructive"
                          onClick={async () => {
                            const confirmed = await confirm({
                              title: `¿Dar de baja a ${currentUser.nombre}?`,
                              description: 'Pierde acceso al sistema hasta que alguien lo vuelva a dar de alta.',
                              confirmLabel: 'Dar de baja',
                              tone: 'destructive',
                            });
                            if (confirmed) {
                              activeMutation.mutate({ id: currentUser.id, value: !currentUser.activo });
                            }
                          }}
                        >
                          Dar de baja
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                    ) : null
                  }
                />
              ))}
            </div>
          )}
        </DashboardSection>

        {inactiveUserList.length > 0 ? (
          <DashboardSection title="Dados de baja" description="Usuarios inactivos que pueden volver a tener acceso sin recrear permisos.">
            <div className="overflow-hidden rounded-xl border border-border bg-muted">
              {inactiveUserList.map((currentUser: any) => (
                <DashboardListRow
                  key={currentUser.id}
                  icon={<UserCog className="h-4 w-4" />}
                  title={`${currentUser.nombre} (${currentUser.username})`}
                  meta={
                    <span className="flex flex-wrap items-center gap-2">
                      <Badge variant="neutral">Rol: {getRoleLabel(currentUser.rol)}</Badge>
                      <Badge variant="neutral">Tienda: {currentUser.tienda?.nombre || 'Sin tienda'}</Badge>
                    </span>
                  }
                  actions={
                    canEditUsers ? (
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={activeMutation.isPending}
                        onClick={() => activeMutation.mutate({ id: currentUser.id, value: true })}
                      >
                        Dar de alta
                      </Button>
                    ) : undefined
                  }
                />
              ))}
            </div>
          </DashboardSection>
        ) : null}
      </main>
    </div>
  );
}