import { Add, Remove } from "@mui/icons-material";
import {
    Alert,
    Autocomplete,
    Box,
    Button,
    FormControl,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    TextField,
    ToggleButton,
    ToggleButtonGroup,
    Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { ajustarStock, getDepositos, getStock } from "../../api";
import { useBuscarProductos } from "../../hooks/useBuscarProductos";
import { usePermission } from "../../hooks/usePermission";
import { useSucursalesStore } from "../../store/SucursalesStore";
import { useMostrarSucursalesQuery } from "../../tanstack/SucursalesStack";
import { getErrorApi } from "../../utils/errorUtils";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { RequiredDataGuard } from "../common/RequiredDataGuard";

export function AjusteStockTab() {
  const queryClient = useQueryClient();
  const { sucursalesItemSelect, selectSucursal } = useSucursalesStore();
  const { can } = usePermission("INVENTARIO");
  const canCreate = can("INV_AJU_AJUSTE_CREAR");

  const [depositoId, setDepositoId] = useState("");
  const [productoSelect, setProductoSelect] = useState(null);
  const [tipoAjuste, setTipoAjuste] = useState("entrada");
  const [cantidad, setCantidad] = useState("");
  const [observaciones, setObservaciones] = useState("");

  // Hook reutilizable para búsqueda de productos
  const {
    setBuscador,
    productos: dataProductos,
    isLoading: buscandoProductos,
    noOptionsText,
  } = useBuscarProductos({ queryKey: "buscar-productos-ajuste" });

  const { data: sucursales = [] } = useMostrarSucursalesQuery();

  const { data: depositos = [], error: depositosError } = useQuery({
    queryKey: ["depositos", sucursalesItemSelect?.id],
    queryFn: () => getDepositos(sucursalesItemSelect?.id),
    enabled: !!sucursalesItemSelect?.id,
  });

  const errorModulo = getErrorApi(depositosError);

  const { data: stockActual } = useQuery({
    queryKey: ["stock", depositoId, productoSelect?.id],
    queryFn: () => getStock(depositoId, productoSelect?.id),
    enabled: !!depositoId && !!productoSelect?.id,
  });

  const { mutate: ajustar, isPending } = useMutation({
    mutationFn: ajustarStock,
    onSuccess: () => {
      toast.success(
        `${tipoAjuste === "entrada" ? "Entrada" : "Salida"} registrada correctamente`,
      );
      queryClient.invalidateQueries({ queryKey: ["stock"] });
      queryClient.invalidateQueries({ queryKey: ["movimientos-inventario"] });
      // Reset form
      setCantidad("");
      setObservaciones("");
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al ajustar stock");
    },
  });

  // Solo coma como decimal. Ej: "75223,5" -> 75223.5
  const parseCantidadPY = (valor) => {
    if (valor === null || valor === undefined) return NaN;
    return Number(String(valor).trim().replace(",", "."));
  };

  const handleAjustar = () => {
    if (!depositoId || !productoSelect?.id || !cantidad) {
      toast.error("Complete todos los campos requeridos");
      return;
    }

    const cantidadNum = parseCantidadPY(cantidad);
    if (!Number.isFinite(cantidadNum) || cantidadNum <= 0) {
      toast.error("Cantidad inválida. Use coma para decimales (ej: 75223 o 75223,5)");
      return;
    }

    const cantidadFinal = tipoAjuste === "entrada" ? cantidadNum : -cantidadNum;

    ajustar({
      deposito_id: depositoId,
      producto_id: productoSelect.id,
      cantidad: cantidadFinal,
      observaciones,
    });
  };

  // Solo verificar que haya sucursales, los depósitos se cargan al seleccionar sucursal
  const hasRequiredData = sucursales.length > 0;

  if (errorModulo) {
    return (
      <AccesoRestringido titulo="Módulo no disponible" mensaje={errorModulo} />
    );
  }

  return (
    <RequiredDataGuard
      hasRequiredData={hasRequiredData}
      title="Configuración requerida"
      message="Necesitas crear al menos una Sucursal para gestionar el stock."
      buttonText="Ir a Configuración"
      buttonRoute="/configuracion"
    >
      <Box sx={{ p: { xs: 0, md: 2 } }}>
        <Paper
          sx={{
            p: { xs: 2, md: 3 },
            maxWidth: { xs: "100%", sm: 500 },
            mx: "auto",
          }}
        >
          <Typography
            variant="h6"
            gutterBottom
            sx={{ fontSize: { xs: "1rem", md: "1.25rem" } }}
          >
            Ajuste de Stock
          </Typography>

          <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 2 }}>
            <ToggleButtonGroup
              value={tipoAjuste}
              exclusive
              onChange={(_, value) => value && setTipoAjuste(value)}
              fullWidth
              size="small"
            >
              <ToggleButton value="entrada" color="success">
                <Add sx={{ mr: 1 }} /> Entrada
              </ToggleButton>
              <ToggleButton value="salida" color="error">
                <Remove sx={{ mr: 1 }} /> Salida
              </ToggleButton>
            </ToggleButtonGroup>

            <FormControl fullWidth size="small">
              <InputLabel>Sucursal</InputLabel>
              <Select
                value={sucursalesItemSelect?.id || ""}
                label="Sucursal"
                onChange={(e) => {
                  const suc = sucursales.find((s) => s.id === e.target.value);
                  selectSucursal(suc);
                  setDepositoId("");
                }}
              >
                {sucursales.map((suc) => (
                  <MenuItem key={suc.id} value={suc.id}>
                    {suc.descripcion || suc.nombre}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>

            <FormControl fullWidth size="small">
              <InputLabel>Depósito</InputLabel>
              <Select
                value={depositoId}
                label="Depósito"
                onChange={(e) => setDepositoId(e.target.value)}
                disabled={!sucursalesItemSelect?.id}
              >
                {depositos.map((dep) => (
                  <MenuItem key={dep.id} value={dep.id}>
                    {dep.descripcion}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>

            <Autocomplete
              size="small"
              options={dataProductos || []}
              getOptionLabel={(option) =>
                option.descripcion || option.cod_producto || ""
              }
              value={productoSelect}
              onChange={(_, newValue) => setProductoSelect(newValue)}
              onInputChange={(_, value) => setBuscador(value)}
              loading={buscandoProductos}
              loadingText="Buscando..."
              noOptionsText={noOptionsText}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Buscar Producto"
                  placeholder="Nombre, código o código de barra"
                />
              )}
              renderOption={(props, option) => (
                <li {...props} key={option.id}>
                  <Box>
                    <Typography variant="body2">
                      {option.descripcion}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      Código: {option.cod_producto || "-"} | Precio:{" "}
                      {Number(option.precio || 0).toLocaleString("es-PY")} Gs.
                    </Typography>
                  </Box>
                </li>
              )}
              isOptionEqualToValue={(option, value) => option.id === value?.id}
            />

            {stockActual && (
              <Alert severity="info" sx={{ py: 0 }}>
                Stock actual:{" "}
                <strong>
                  {Number(stockActual.cantidad_disponible || 0).toLocaleString(
                    "es-PY",
                    { maximumFractionDigits: 4 },
                  )}
                </strong>
                {stockActual.cantidad_reservada > 0 && (
                  <span>
                    {" "}
                    (Reservado:{" "}
                    {Number(stockActual.cantidad_reservada).toLocaleString(
                      "es-PY",
                      { maximumFractionDigits: 4 },
                    )}
                    )
                  </span>
                )}
              </Alert>
            )}

            <TextField
              size="small"
              label="Cantidad"
              type="text"
              inputMode="decimal"
              value={cantidad}
              onChange={(e) => {
                // Solo dígitos y una única coma para decimales
                let v = e.target.value.replace(/[^0-9,]/g, "");
                const i = v.indexOf(",");
                if (i !== -1) {
                  v = v.slice(0, i + 1) + v.slice(i + 1).replace(/,/g, "");
                }
                setCantidad(v);
              }}
              placeholder="Ej: 75223 o 75223,5"
              helperText="Use coma para decimales (ej: 75223,5). Sin separador de miles."
            />

            <TextField
              size="small"
              label="Observaciones"
              multiline
              rows={2}
              value={observaciones}
              onChange={(e) => setObservaciones(e.target.value)}
            />

            <Button
              variant="contained"
              color={tipoAjuste === "entrada" ? "success" : "error"}
              onClick={handleAjustar}
              disabled={
                isPending ||
                !depositoId ||
                !productoSelect ||
                !cantidad ||
                !canCreate
              }
              startIcon={tipoAjuste === "entrada" ? <Add /> : <Remove />}
            >
              {!canCreate
                ? "Sin permiso para ajustar"
                : isPending
                  ? "Guardando..."
                  : `Registrar ${tipoAjuste === "entrada" ? "Entrada" : "Salida"}`}
            </Button>
          </Box>
        </Paper>
      </Box>
    </RequiredDataGuard>
  );
}