import { WarningAmber } from "@mui/icons-material";
import { Alert, Box, Button, Typography } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { validarDepositoPrincipal } from "../api/depositos.service";
import { PantallaAperturaCaja } from "../components/organismos/POSDesign/CajaDesign/PantallaAperturaCaja";
import { POSTemplateDynamic } from "../components/templates/POSTemplateDynamic";
import { SpinnerSecundario } from "../index";
import { useAuthStore } from "../store/AuthStore";

import { useMostrarAperturasCajaPorUsuarioQuery } from "../tanstack/CierresCajaStack";
import { useMostrarMetodosPagoQuery } from "../tanstack/MetodosPagoStack";

export function POS() {
  useMostrarMetodosPagoQuery();
  const { user } = useAuthStore();

  const {
    data: dataCierreCaja,
    isLoading,
    error,
  } = useMostrarAperturasCajaPorUsuarioQuery();

  // Validar depósito principal de la sucursal
  const {
    data: depositoValidacion,
    isLoading: isLoadingDeposito,
    error: errorDeposito,
  } = useQuery({
    queryKey: ["deposito-principal-validacion", user?.sucursal_id],
    queryFn: () => validarDepositoPrincipal(user?.sucursal_id),
    enabled: !!user?.sucursal_id,
    staleTime: 1000 * 60 * 5, // 5 minutos
  });

  // Mostrar spinner mientras alguna de las consultas está cargando
  if (isLoading || isLoadingDeposito) {
    return <SpinnerSecundario texto="Verificando configuración del POS" />;
  }

  // Manejar errores de la consulta de cierre de caja
  if (error) {
    return <span>Error caja: {error.message}</span>;
  }

  // Manejar error de depósito
  if (errorDeposito) {
    return <span>Error al validar depósito: {errorDeposito.message}</span>;
  }

  // Validar que exista depósito principal configurado
  if (depositoValidacion && !depositoValidacion.existe) {
    return (
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          height: "100vh",
          gap: 3,
          p: 4,
          bgcolor: "background.default",
        }}
      >
        <WarningAmber sx={{ fontSize: 80, color: "warning.main" }} />
        <Typography variant="h4" fontWeight={600} textAlign="center">
          Configuración Incompleta
        </Typography>
        <Alert severity="warning" sx={{ maxWidth: 500 }}>
          <Typography variant="body1" fontWeight={500} gutterBottom>
            No hay depósito principal configurado
          </Typography>
          <Typography variant="body2">
            Para utilizar el POS es necesario configurar un depósito principal
            en la sucursal actual. Esto permite el control automático del
            inventario al realizar ventas.
          </Typography>
        </Alert>
        <Typography variant="body2" color="text.secondary" textAlign="center">
          Contacte al administrador para configurar el depósito principal en:
          <br />
          <strong>Configuración → Almacenes → Marcar como Principal</strong>
        </Typography>
        <Button
          variant="contained"
          onClick={() => window.location.reload()}
          sx={{ mt: 2 }}
        >
          Reintentar
        </Button>
      </Box>
    );
  }

  return dataCierreCaja ? <POSTemplateDynamic /> : <PantallaAperturaCaja />;
}