import { Add, Business, Delete, PowerSettingsNew } from "@mui/icons-material";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputLabel,
  List,
  ListItem,
  ListItemIcon,
  ListItemSecondaryAction,
  ListItemText,
  MenuItem,
  Select,
  Tooltip,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { getEmpresasAccesibles } from "../../../api/auth.service";
import {
  asignarEmpresa,
  getEmpresasAsignadas,
  revocarEmpresa,
  toggleAccesoEmpresa,
} from "../../../api/usuarios.service";

const ROLES = [
  { value: "admin", label: "Administrador" },
  { value: "operador", label: "Operador" },
  { value: "visor", label: "Visor" },
];

export const EmpresasAccesoDialog = ({ open, onClose, usuario }) => {
  const queryClient = useQueryClient();
  const [selectedEmpresa, setSelectedEmpresa] = useState("");
  const [selectedRol, setSelectedRol] = useState("operador");

  const { data: asignacionesData, isLoading: loadingAsignaciones } = useQuery({
    queryKey: ["usuario-empresas", usuario?.id],
    queryFn: () => getEmpresasAsignadas(usuario.id),
    enabled: !!usuario?.id && open,
  });

  const { data: empresasData, isLoading: loadingEmpresas } = useQuery({
    queryKey: ["empresas-accesibles"],
    queryFn: getEmpresasAccesibles,
    enabled: open,
  });

  const asignaciones = asignacionesData?.asignaciones || [];
  const empresaPrincipalUsuario = asignacionesData?.empresa_principal;
  // Usar empresas accesibles del superadmin actual
  const empresasAccesibles = empresasData?.empresas || [];
  // Filtrar: activas, no es la empresa principal del usuario a editar, y no está ya asignada
  const empresasDisponibles = empresasAccesibles.filter(
    (e) =>
      e.active &&
      e.id !== empresaPrincipalUsuario &&
      !asignaciones.some((a) => a.empresa_id === e.id),
  );

  const asignarMutation = useMutation({
    mutationFn: () => asignarEmpresa(usuario.id, selectedEmpresa, selectedRol),
    onSuccess: () => {
      toast.success("Acceso asignado correctamente");
      queryClient.invalidateQueries({
        queryKey: ["usuario-empresas", usuario?.id],
      });
      setSelectedEmpresa("");
      setSelectedRol("operador");
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al asignar acceso");
    },
  });

  const revocarMutation = useMutation({
    mutationFn: (empresaId) => revocarEmpresa(usuario.id, empresaId),
    onSuccess: () => {
      toast.success("Acceso revocado");
      queryClient.invalidateQueries({
        queryKey: ["usuario-empresas", usuario?.id],
      });
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al revocar acceso");
    },
  });

  const toggleMutation = useMutation({
    mutationFn: (empresaId) => toggleAccesoEmpresa(usuario.id, empresaId),
    onSuccess: (data) => {
      toast.success(data.message);
      queryClient.invalidateQueries({
        queryKey: ["usuario-empresas", usuario?.id],
      });
    },
    onError: (err) => {
      toast.error(err.response?.data?.message || "Error al cambiar estado");
    },
  });

  const handleAsignar = () => {
    if (!selectedEmpresa) {
      toast.error("Selecciona una empresa");
      return;
    }
    asignarMutation.mutate();
  };

  const getRolLabel = (rol) => ROLES.find((r) => r.value === rol)?.label || rol;

  if (!usuario) return null;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Business color="primary" />
          <Box>
            <Typography variant="h6">Acceso a Empresas</Typography>
            <Typography variant="caption" color="text.secondary">
              {usuario.nombres} {usuario.apellidos} (@{usuario.username})
            </Typography>
          </Box>
        </Box>
      </DialogTitle>

      <DialogContent dividers>
        {loadingAsignaciones || loadingEmpresas ? (
          <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
            <CircularProgress />
          </Box>
        ) : (
          <>
            <Typography
              variant="subtitle2"
              color="text.secondary"
              sx={{ mb: 2 }}
            >
              Empresas con acceso asignado
            </Typography>

            {asignaciones.length === 0 ? (
              <Typography
                variant="body2"
                color="text.secondary"
                sx={{ mb: 3, textAlign: "center" }}
              >
                No tiene acceso a empresas adicionales
              </Typography>
            ) : (
              <List dense sx={{ mb: 3 }}>
                {asignaciones.map((asignacion) => (
                  <ListItem
                    key={asignacion.id}
                    sx={{
                      bgcolor: "background.paper",
                      borderRadius: 1,
                      mb: 1,
                      border: "1px solid",
                      borderColor: asignacion.active
                        ? "divider"
                        : "error.light",
                      opacity: asignacion.active ? 1 : 0.6,
                    }}
                  >
                    <ListItemIcon>
                      <Business
                        color={asignacion.active ? "primary" : "disabled"}
                      />
                    </ListItemIcon>
                    <ListItemText
                      primary={asignacion.empresa?.razon_social}
                      secondaryTypographyProps={{ component: "div" }}
                      secondary={
                        <Box
                          sx={{
                            display: "flex",
                            gap: 1,
                            alignItems: "center",
                            mt: 0.5,
                          }}
                        >
                          <Chip
                            label={getRolLabel(asignacion.rol)}
                            size="small"
                            variant="outlined"
                            color="primary"
                          />
                          <Chip
                            label={asignacion.active ? "Activo" : "Inactivo"}
                            size="small"
                            color={asignacion.active ? "success" : "default"}
                          />
                        </Box>
                      }
                    />
                    <ListItemSecondaryAction>
                      <Tooltip
                        title={asignacion.active ? "Desactivar" : "Activar"}
                      >
                        <IconButton
                          size="small"
                          onClick={() =>
                            toggleMutation.mutate(asignacion.empresa_id)
                          }
                          disabled={toggleMutation.isPending}
                        >
                          <PowerSettingsNew
                            fontSize="small"
                            color={asignacion.active ? "success" : "disabled"}
                          />
                        </IconButton>
                      </Tooltip>
                      <Tooltip title="Revocar acceso">
                        <IconButton
                          size="small"
                          onClick={() =>
                            revocarMutation.mutate(asignacion.empresa_id)
                          }
                          disabled={revocarMutation.isPending}
                          color="error"
                        >
                          <Delete fontSize="small" />
                        </IconButton>
                      </Tooltip>
                    </ListItemSecondaryAction>
                  </ListItem>
                ))}
              </List>
            )}

            <Typography
              variant="subtitle2"
              color="text.secondary"
              sx={{ mb: 2 }}
            >
              Asignar nueva empresa
            </Typography>

            {empresasDisponibles.length === 0 ? (
              <Box
                sx={{
                  p: 2,
                  bgcolor: "action.hover",
                  borderRadius: 1,
                  textAlign: "center",
                }}
              >
                <Typography variant="body2" color="text.secondary">
                  No hay más empresas disponibles para asignar.
                </Typography>
                <Typography
                  variant="caption"
                  color="text.disabled"
                  sx={{ mt: 0.5, display: "block" }}
                >
                  El usuario ya tiene acceso a todas las empresas disponibles o
                  no hay empresas adicionales en tu organización.
                </Typography>
              </Box>
            ) : (
              <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
                <FormControl size="small" sx={{ flex: 2 }}>
                  <InputLabel>Empresa</InputLabel>
                  <Select
                    value={selectedEmpresa}
                    onChange={(e) => setSelectedEmpresa(e.target.value)}
                    label="Empresa"
                  >
                    {empresasDisponibles.map((empresa) => (
                      <MenuItem key={empresa.id} value={empresa.id}>
                        {empresa.razon_social}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                <FormControl size="small" sx={{ flex: 1 }}>
                  <InputLabel>Rol</InputLabel>
                  <Select
                    value={selectedRol}
                    onChange={(e) => setSelectedRol(e.target.value)}
                    label="Rol"
                  >
                    {ROLES.map((rol) => (
                      <MenuItem key={rol.value} value={rol.value}>
                        {rol.label}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                <Button
                  variant="contained"
                  startIcon={<Add />}
                  onClick={handleAsignar}
                  disabled={!selectedEmpresa || asignarMutation.isPending}
                >
                  Asignar
                </Button>
              </Box>
            )}
          </>
        )}
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose}>Cerrar</Button>
      </DialogActions>
    </Dialog>
  );
};