import { Icon } from "@iconify/react";
import {
    Box,
    Button,
    Card,
    CardContent,
    Chip,
    CircularProgress,
    Grid,
    InputAdornment,
    Paper,
    TextField,
    Typography,
} from "@mui/material";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useCallback, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { useFormattedDate } from "../../../../hooks/useFormattedDate";
import { useCajasStore } from "../../../../store/CajasStore";
import { useCierreCajaStore } from "../../../../store/CierreCajaStore";
import { useMetodosPagoStore } from "../../../../store/MetodosPagoStore";
import { useMovCajaStore } from "../../../../store/MovCajaStore";
import { useUsuariosStore } from "../../../../store/UsuariosStore";
import { useMostrarSucursalAsignadasQuery } from "../../../../tanstack/AsignacionesSucursalStack";
import { useMostrarCierreCajaPorEmpresaQuery } from "../../../../tanstack/CierresCajaStack";
import { ModalPinSupervisor } from "./ModalPinSupervisor";

export function PantallaAperturaCaja() {
  // Cargar cajas asignadas al usuario
  const { data: dataSucursalesAsignadas, isLoading: isLoadingCajas } =
    useMostrarSucursalAsignadasQuery();
  const { setCajaSelectItem } = useCajasStore();
  const { setCierreCajaItemSelect, aperturarcaja } = useCierreCajaStore();
  const { data: dataCierreCajaPorEmpresa } =
    useMostrarCierreCajaPorEmpresaQuery();
  const { datausuarios } = useUsuariosStore();
  const { dataMetodosPago } = useMetodosPagoStore();
  const { insertarMovCaja } = useMovCajaStore();
  const fechaActual = useFormattedDate();
  const queryClient = useQueryClient();

  const [selectedCaja, setSelectedCaja] = useState(null);
  const [montoApertura, setMontoApertura] = useState("");
  const [showPinModal, setShowPinModal] = useState(false);
  const [tokenAutorizacion, setTokenAutorizacion] = useState(null);
  const { cargarPosConfig, requiereAutorizacionApertura } =
    useCierreCajaStore();

  const registrarMovCaja = async (idCierreCaja) => {
    const idMetodoPago = dataMetodosPago?.find(
      (m) => m.nombre === "Efectivo",
    )?.id;
    if (!idMetodoPago) return;

    await insertarMovCaja({
      fecha_movimiento: fechaActual,
      tipo_movimiento: "apertura",
      monto: parseFloat(montoApertura) || 0,
      id_metodo_pago: idMetodoPago,
      descripcion: "Apertura de caja",
      id_usuario: datausuarios?.id,
      id_cierre_caja: idCierreCaja,
    });
  };

  const mutation = useMutation({
    mutationKey: ["aperturar-caja"],
    mutationFn: async () => {
      const data = await aperturarcaja({
        fechainicio: fechaActual,
        fechacierre: fechaActual,
        id_usuario: datausuarios?.id,
        id_caja: selectedCaja?.caja_id || selectedCaja?.caja?.id,
        monto_apertura: parseFloat(montoApertura) || 0,
        token_autorizacion: tokenAutorizacion,
      });
      await registrarMovCaja(data?.id);
      return data;
    },
    onSuccess: () => {
      toast.success("Caja aperturada correctamente");
      setTokenAutorizacion(null);
      queryClient.invalidateQueries(["mostrar caja aperturada por usuario"]);
    },
    onError: (error) => {
      const msg = error?.response?.data?.message || error.message;
      toast.error(`Error: ${msg}`);
      setTokenAutorizacion(null);
    },
  });

  const handleSelectCaja = async (item, aperturaActiva, isOpen) => {
    setCajaSelectItem(item);
    setSelectedCaja(item);
    if (isOpen && aperturaActiva) {
      setCierreCajaItemSelect(aperturaActiva);
    }
    // Fase 1: cargar config POS al seleccionar caja
    const cajaId = item?.caja_id || item?.caja?.id;
    if (cajaId) {
      await cargarPosConfig(cajaId);
    }
  };

  const handleAperturar = () => {
    if (!selectedCaja) {
      toast.error("Seleccione una caja primero");
      return;
    }
    // Fase 1: si requiere autorización, mostrar modal PIN
    if (requiereAutorizacionApertura && !tokenAutorizacion) {
      setShowPinModal(true);
      return;
    }
    mutation.mutate();
  };

  const handlePinSuccess = useCallback(
    (data) => {
      setTokenAutorizacion(data.token);
      // Ejecutar apertura automáticamente con el token
      setTimeout(() => mutation.mutate(), 100);
    },
    [mutation],
  );

  // Las asignaciones ya vienen expandidas del backend (si caja_id era null, se expanden todas las cajas de la sucursal)
  const cajas = dataSucursalesAsignadas || [];

  // Mostrar loading mientras carga
  if (isLoadingCajas) {
    return (
      <Container>
        <ContentWrapper>
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              py: 8,
            }}
          >
            <CircularProgress size={48} sx={{ color: "#f88533" }} />
            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
              Cargando cajas disponibles...
            </Typography>
          </Box>
        </ContentWrapper>
      </Container>
    );
  }

  return (
    <Container>
      <ContentWrapper>
        <Header>
          <Icon icon="lucide:lock-open" width={48} color="#f88533" />
          <Typography variant="h4" fontWeight={700} sx={{ mt: 2 }}>
            Apertura de Caja
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mt: 1 }}>
            Selecciona una caja disponible para comenzar a operar
          </Typography>
        </Header>

        {cajas.length === 0 ? (
          <EmptyState>
            <Icon icon="lucide:alert-circle" width={64} color="#f88533" />
            <Typography variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
              Sin cajas disponibles
            </Typography>
            <Typography
              variant="body2"
              color="text.secondary"
              sx={{ mt: 1, maxWidth: 400 }}
            >
              No tienes sucursales o cajas asignadas a tu usuario. Solicita al
              administrador que te asigne acceso a una sucursal con cajas
              configuradas.
            </Typography>
            <Button
              variant="outlined"
              startIcon={<Icon icon="lucide:settings" />}
              sx={{ mt: 3 }}
              onClick={() => (window.location.href = "/configuracion")}
            >
              Ir a Configuración
            </Button>
          </EmptyState>
        ) : (
          <Grid container spacing={3} sx={{ mt: 2 }}>
            {cajas.map((item, index) => {
              const aperturaActiva = Array.isArray(dataCierreCajaPorEmpresa)
                ? dataCierreCajaPorEmpresa.find(
                    (a) => a.id_caja === item.caja_id,
                  )
                : null;
              const isOpen = Boolean(aperturaActiva);
              const isSelected = selectedCaja?.caja_id === item.caja_id;

              return (
                <Grid item xs={12} sm={6} md={4} key={index}>
                  <CajaCard
                    $isOpen={isOpen}
                    $isSelected={isSelected}
                    onClick={() =>
                      !isOpen && handleSelectCaja(item, aperturaActiva, isOpen)
                    }
                  >
                    <CardContent sx={{ p: 3 }}>
                      <Box
                        sx={{
                          display: "flex",
                          alignItems: "flex-start",
                          justifyContent: "space-between",
                          mb: 2,
                        }}
                      >
                        <Box
                          sx={{
                            width: 48,
                            height: 48,
                            borderRadius: 2,
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            bgcolor: isOpen
                              ? "error.main"
                              : isSelected
                                ? "warning.main"
                                : "success.main",
                          }}
                        >
                          <Icon
                            icon={isOpen ? "lucide:lock" : "lucide:unlock"}
                            width={24}
                            color="white"
                          />
                        </Box>
                        <Chip
                          label={isOpen ? "Ocupada" : "Disponible"}
                          size="small"
                          color={isOpen ? "error" : "success"}
                          variant={isOpen ? "filled" : "outlined"}
                        />
                      </Box>

                      <Typography variant="h6" fontWeight={600} gutterBottom>
                        {item.caja?.descripcion || "Caja"}
                      </Typography>

                      <Box
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          gap: 1,
                          mb: 1,
                        }}
                      >
                        <Icon icon="lucide:store" width={16} color="#888" />
                        <Typography variant="body2" color="text.secondary">
                          {item.sucursal?.descripcion || "Sin sucursal"}
                        </Typography>
                      </Box>

                      {isOpen && aperturaActiva && (
                        <Box
                          sx={{
                            mt: 2,
                            p: 1.5,
                            borderRadius: 1,
                            bgcolor: "error.main",
                            opacity: 0.1,
                          }}
                        >
                          <Typography
                            variant="caption"
                            color="error.main"
                            sx={{ opacity: 1 }}
                          >
                            En uso por: {aperturaActiva?.usuario}
                          </Typography>
                        </Box>
                      )}

                      {!isOpen && isSelected && (
                        <Box sx={{ mt: 2 }}>
                          <Chip
                            icon={<Icon icon="lucide:check" width={14} />}
                            label="Seleccionada"
                            color="warning"
                            size="small"
                          />
                        </Box>
                      )}
                    </CardContent>
                  </CajaCard>
                </Grid>
              );
            })}
          </Grid>
        )}

        {selectedCaja && (
          <AperturaPanel>
            <Paper sx={{ p: 3, borderRadius: 3 }}>
              <Typography variant="h6" fontWeight={600} gutterBottom>
                Aperturar: {selectedCaja.caja?.descripcion}
              </Typography>

              <Box sx={{ mt: 3 }}>
                <TextField
                  label="Monto inicial en efectivo"
                  type="number"
                  fullWidth
                  value={montoApertura}
                  onChange={(e) => setMontoApertura(e.target.value)}
                  placeholder="0"
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">₲</InputAdornment>
                    ),
                  }}
                  helperText="Opcional - Puedes dejarlo en 0"
                />
              </Box>

              <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
                <Button
                  variant="outlined"
                  size="large"
                  onClick={() => setSelectedCaja(null)}
                  sx={{ flex: 1 }}
                >
                  Cancelar
                </Button>
                <Button
                  variant="contained"
                  size="large"
                  onClick={handleAperturar}
                  disabled={mutation.isPending}
                  sx={{
                    flex: 2,
                    background:
                      "linear-gradient(135deg, #f88533 0%, #ff6b6b 100%)",
                    "&:hover": {
                      background:
                        "linear-gradient(135deg, #e07429 0%, #e55a5a 100%)",
                    },
                  }}
                  startIcon={<Icon icon="lucide:unlock" />}
                >
                  {mutation.isPending ? "Aperturando..." : "Aperturar Caja"}
                </Button>
              </Box>
            </Paper>
          </AperturaPanel>
        )}
      </ContentWrapper>

      <ModalPinSupervisor
        open={showPinModal}
        onClose={() => setShowPinModal(false)}
        onSuccess={handlePinSuccess}
        tipoOperacion="apertura_caja"
        contexto={{ caja_id: selectedCaja?.caja_id || selectedCaja?.caja?.id }}
      />
    </Container>
  );
}

const Container = styled.div`
  min-height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background: ${({ theme }) => theme.bgtotal};
`;

const ContentWrapper = styled.div`
  max-width: 900px;
  width: 100%;
`;

const Header = styled.div`
  text-align: center;
  margin-bottom: 24px;
`;

const EmptyState = styled.div`
  text-align: center;
  padding: 60px 20px;
  background: ${({ theme }) => theme.bg3}40;
  border-radius: 16px;
  margin-top: 24px;
`;

const CajaCard = styled(Card)`
  cursor: ${({ $isOpen }) => ($isOpen ? "not-allowed" : "pointer")};
  opacity: ${({ $isOpen }) => ($isOpen ? 0.6 : 1)};
  transition: all 0.2s ease;
  border: 2px solid
    ${({ $isSelected, $isOpen }) =>
      $isSelected && !$isOpen ? "#f88533" : "transparent"};

  &:hover {
    transform: ${({ $isOpen }) => ($isOpen ? "none" : "translateY(-4px)")};
    box-shadow: ${({ $isOpen }) =>
      $isOpen ? "none" : "0 8px 24px rgba(0, 0, 0, 0.15)"};
  }
`;

const AperturaPanel = styled.div`
  margin-top: 32px;
  animation: slideUp 0.3s ease;

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
`;