import {
    Add,
    Business,
    Edit,
    Person,
    PowerSettingsNew,
    Store,
    Verified,
} from "@mui/icons-material";
import {
    Box,
    Button,
    Card,
    CardContent,
    Chip,
    CircularProgress,
    IconButton,
    Paper,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { useState } from "react";
import { useEmpresa } from "../../../context/EmpresaContext";
import { usePermission } from "../../../hooks/usePermission";
import {
    useToggleUsuarioMutation,
    useUsuariosQuery,
} from "../../../tanstack/UsuariosStack";
import { AccesoRestringido } from "../../common/AccesoRestringido";
import { AsignacionesDialog } from "./AsignacionesDialog";
import { EmpresasAccesoDialog } from "./EmpresasAccesoDialog";
import { UsuarioFormDialog } from "./UsuarioFormDialog";
import { RowActions } from "../../_standards";

export const UsuariosListConfig = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const { empresaId } = useEmpresa();
  const { can: canUsuarios } = usePermission("ADMINISTRACION");
  const canRead = canUsuarios("ADM_USR_USUARIO_VER");
  const canCreate = canUsuarios("ADM_USR_USUARIO_CREAR");
  const canEdit = canUsuarios("ADM_USR_USUARIO_EDITAR");
  const canAsignar = canUsuarios("ADM_USR_USUARIO_EDITAR");
  const { data, isLoading } = useUsuariosQuery(empresaId);
  const toggleMutation = useToggleUsuarioMutation();

  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedUsuario, setSelectedUsuario] = useState(null);
  const [asignacionesOpen, setAsignacionesOpen] = useState(false);
  const [usuarioAsignaciones, setUsuarioAsignaciones] = useState(null);
  const [empresasAccesoOpen, setEmpresasAccesoOpen] = useState(false);
  const [usuarioEmpresas, setUsuarioEmpresas] = useState(null);

  const usuarios = data?.data || [];

  const handleOpenCreate = () => {
    setSelectedUsuario(null);
    setDialogOpen(true);
  };

  const handleOpenEdit = (usuario) => {
    setSelectedUsuario(usuario);
    setDialogOpen(true);
  };

  const handleCloseDialog = () => {
    setDialogOpen(false);
    setSelectedUsuario(null);
  };

  const handleOpenAsignaciones = (usuario) => {
    setUsuarioAsignaciones(usuario);
    setAsignacionesOpen(true);
  };

  const handleCloseAsignaciones = () => {
    setAsignacionesOpen(false);
    setUsuarioAsignaciones(null);
  };

  const handleOpenEmpresasAcceso = (usuario) => {
    setUsuarioEmpresas(usuario);
    setEmpresasAccesoOpen(true);
  };

  const handleCloseEmpresasAcceso = () => {
    setEmpresasAccesoOpen(false);
    setUsuarioEmpresas(null);
  };

  const getPerfilesChips = (usuarioPerfiles) => {
    if (!usuarioPerfiles || usuarioPerfiles.length === 0) {
      return (
        <Typography variant="caption" color="text.secondary">
          Sin perfil
        </Typography>
      );
    }
    return usuarioPerfiles.map((up) => (
      <Chip
        key={up.id}
        label={up.perfiles?.perfil || "Perfil"}
        size="small"
        variant="outlined"
        sx={{ mr: 0.5 }}
      />
    ));
  };

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver los usuarios." />
    );
  }

  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box sx={{ maxWidth: 1200, mx: "auto" }}>
      {/* Header */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
          gap: 1,
        }}
      >
        <Box>
          <Typography
            variant="h5"
            fontWeight={600}
            sx={{ fontSize: { xs: "1.1rem", sm: "1.5rem" } }}
          >
            Gestión de Usuarios
          </Typography>
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ fontSize: { xs: "0.75rem", sm: "0.875rem" } }}
          >
            Administra los usuarios de tu empresa
          </Typography>
        </Box>
        {canCreate && (
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={handleOpenCreate}
            size={isMobile ? "small" : "medium"}
            sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
          >
            {isMobile ? "Nuevo" : "Nuevo Usuario"}
          </Button>
        )}
      </Box>

      {/* Vista mobile: cards */}
      {isMobile ? (
        <Stack spacing={1.5}>
          {usuarios.length === 0 ? (
            <Box sx={{ textAlign: "center", py: 4 }}>
              <Person sx={{ fontSize: 40, color: "text.secondary", mb: 1 }} />
              <Typography color="text.secondary" variant="body2">
                No hay usuarios registrados
              </Typography>
            </Box>
          ) : (
            usuarios.map((usuario) => (
              <Card
                key={usuario.id}
                variant="outlined"
                sx={{ borderRadius: 2, opacity: usuario.active ? 1 : 0.6 }}
              >
                <CardContent sx={{ p: "12px !important" }}>
                  {/* Nombre + estado */}
                  <Box
                    sx={{
                      display: "flex",
                      alignItems: "flex-start",
                      justifyContent: "space-between",
                      mb: 0.75,
                      gap: 1,
                    }}
                  >
                    <Box sx={{ minWidth: 0 }}>
                      <Box
                        sx={{ display: "flex", alignItems: "center", gap: 0.5 }}
                      >
                        <Typography variant="subtitle2" fontWeight={600} noWrap>
                          {usuario.nombres} {usuario.apellidos}
                        </Typography>
                        {usuario.es_supervisor && (
                          <Chip
                            label="Sup."
                            size="small"
                            color="warning"
                            variant="outlined"
                            sx={{ fontSize: "0.6rem", height: 18 }}
                          />
                        )}
                      </Box>
                      <Typography variant="caption" color="text.secondary">
                        @{usuario.username}
                      </Typography>
                    </Box>
                    <Box sx={{ display: "flex", gap: 0.5, flexShrink: 0 }}>
                      <Chip
                        label={usuario.active ? "Activo" : "Inactivo"}
                        size="small"
                        color={usuario.active ? "success" : "default"}
                      />
                      {usuario.verificado ? (
                        <Chip
                          icon={<Verified fontSize="small" />}
                          label="Verificado"
                          size="small"
                          color="success"
                          variant="outlined"
                        />
                      ) : (
                        <Chip
                          label="Pendiente"
                          size="small"
                          color="warning"
                          variant="outlined"
                        />
                      )}
                    </Box>
                  </Box>
                  {/* Email */}
                  {usuario.email && (
                    <Typography
                      variant="caption"
                      color="text.secondary"
                      sx={{ display: "block", mb: 0.75 }}
                    >
                      ✉️ {usuario.email}
                    </Typography>
                  )}
                  {/* Perfiles */}
                  <Box sx={{ mb: 0.5 }}>
                    {getPerfilesChips(usuario.usuario_perfiles)}
                  </Box>
                  {/* Acciones */}
                  <Box
                    sx={{
                      display: "flex",
                      gap: 0.5,
                      justifyContent: "flex-end",
                      borderTop: "1px solid",
                      borderColor: "divider",
                      pt: 1,
                      mt: 0.5,
                    }}
                  >
                    {canAsignar && (
                      <Tooltip title="Acceso a Empresas">
                        <IconButton
                          size="small"
                          onClick={() => handleOpenEmpresasAcceso(usuario)}
                        >
                          <Business fontSize="small" color="secondary" />
                        </IconButton>
                      </Tooltip>
                    )}
                    {canAsignar && (
                      <Tooltip title="Asignaciones">
                        <IconButton
                          size="small"
                          onClick={() => handleOpenAsignaciones(usuario)}
                        >
                          <Store fontSize="small" color="primary" />
                        </IconButton>
                      </Tooltip>
                    )}
                    {canEdit && (
                      <Tooltip title="Editar">
                        <IconButton
                          size="small"
                          onClick={() => handleOpenEdit(usuario)}
                        >
                          <Edit fontSize="small" />
                        </IconButton>
                      </Tooltip>
                    )}
                    <Tooltip title={usuario.active ? "Desactivar" : "Activar"}>
                      <IconButton
                        size="small"
                        onClick={() => toggleMutation.mutate(usuario.id)}
                        disabled={toggleMutation.isPending}
                      >
                        <PowerSettingsNew
                          fontSize="small"
                          color={usuario.active ? "success" : "disabled"}
                        />
                      </IconButton>
                    </Tooltip>
                  </Box>
                </CardContent>
              </Card>
            ))
          )}
        </Stack>
      ) : (
        /* Vista desktop: tabla */
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Usuario</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Perfiles</TableCell>
                <TableCell>Verificado</TableCell>
                <TableCell>Estado</TableCell>
                <TableCell align="right">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {usuarios.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} align="center" sx={{ py: 4 }}>
                    <Person
                      sx={{ fontSize: 48, color: "text.secondary", mb: 1 }}
                    />
                    <Typography color="text.secondary">
                      No hay usuarios registrados
                    </Typography>
                  </TableCell>
                </TableRow>
              ) : (
                usuarios.map((usuario) => (
                  <TableRow
                    key={usuario.id}
                    sx={{ opacity: usuario.active ? 1 : 0.6 }}
                  >
                    <TableCell>
                      <Box>
                        <Box
                          sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: 0.5,
                          }}
                        >
                          <Typography fontWeight={500}>
                            {usuario.nombres} {usuario.apellidos}
                          </Typography>
                          {usuario.es_supervisor && (
                            <Chip
                              label="Supervisor"
                              size="small"
                              color="warning"
                              variant="outlined"
                              sx={{ fontSize: "0.65rem", height: 20 }}
                            />
                          )}
                        </Box>
                        <Typography variant="caption" color="text.secondary">
                          @{usuario.username}
                        </Typography>
                      </Box>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2">
                        {usuario.email || "-"}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      {getPerfilesChips(usuario.usuario_perfiles)}
                    </TableCell>
                    <TableCell>
                      {usuario.verificado ? (
                        <Chip
                          icon={<Verified fontSize="small" />}
                          label="Verificado"
                          size="small"
                          color="success"
                          variant="outlined"
                        />
                      ) : (
                        <Chip
                          label="Pendiente"
                          size="small"
                          color="warning"
                          variant="outlined"
                        />
                      )}
                    </TableCell>
                    <TableCell>
                      <Chip
                        label={usuario.active ? "Activo" : "Inactivo"}
                        size="small"
                        color={usuario.active ? "success" : "default"}
                      />
                    </TableCell>
                    <TableCell align="right">
                      {/* Cuatro acciones: con iconos había que pasar el mouse por
                          cada uno. Ver docs/ui-standards.md. */}
                      <RowActions
                        row={usuario}
                        actions={[
                          {
                            key: "empresas",
                            label: "Acceso a empresas",
                            icon: <Business fontSize="small" color="secondary" />,
                            show: () => canAsignar,
                            onClick: () => handleOpenEmpresasAcceso(usuario),
                          },
                          {
                            key: "asignaciones",
                            label: "Asignaciones de sucursal",
                            icon: <Store fontSize="small" color="primary" />,
                            show: () => canAsignar,
                            onClick: () => handleOpenAsignaciones(usuario),
                          },
                          {
                            key: "editar",
                            label: "Editar usuario",
                            icon: <Edit fontSize="small" />,
                            show: () => canEdit,
                            onClick: () => handleOpenEdit(usuario),
                          },
                          {
                            key: "estado",
                            label: usuario.active ? "Desactivar usuario" : "Activar usuario",
                            color: usuario.active ? "warning" : "success",
                            icon: (
                              <PowerSettingsNew
                                fontSize="small"
                                color={usuario.active ? "success" : "disabled"}
                              />
                            ),
                            disabled: () => toggleMutation.isPending,
                            onClick: () => toggleMutation.mutate(usuario.id),
                          },
                        ]}
                      />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      <UsuarioFormDialog
        open={dialogOpen}
        onClose={handleCloseDialog}
        usuario={selectedUsuario}
        empresaId={empresaId}
      />

      <AsignacionesDialog
        open={asignacionesOpen}
        onClose={handleCloseAsignaciones}
        usuario={usuarioAsignaciones}
      />

      <EmpresasAccesoDialog
        open={empresasAccesoOpen}
        onClose={handleCloseEmpresasAcceso}
        usuario={usuarioEmpresas}
      />
    </Box>
  );
};