import { SwapHoriz } from "@mui/icons-material";
import {
    Alert,
    Autocomplete,
    Box,
    Button,
    FormControl,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    TextField,
    Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { getDepositos, transferirStock } 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 TransferenciasTab() {
  const queryClient = useQueryClient();
  const { sucursalesItemSelect, selectSucursal } = useSucursalesStore();
  const { can } = usePermission("INVENTARIO");
  const canCreate = can("INV_TRF_TRANSFERENCIA_CREAR");

  const [depositoOrigenId, setDepositoOrigenId] = useState("");
  const [depositoDestinoId, setDepositoDestinoId] = useState("");
  const [productoSelect, setProductoSelect] = useState(null);
  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-transfer" });

  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 { mutate: transferir, isPending } = useMutation({
    mutationFn: transferirStock,
    onSuccess: () => {
      toast.success("Transferencia realizada correctamente");
      queryClient.invalidateQueries({ queryKey: ["stock"] });
      queryClient.invalidateQueries({ queryKey: ["movimientos-inventario"] });
      // Reset form
      setCantidad("");
      setObservaciones("");
      setProductoSelect(null);
    },
    onError: (error) => {
      toast.error(
        error.response?.data?.message || "Error al realizar la transferencia",
      );
    },
  });

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

  const handleTransferir = () => {
    if (
      !depositoOrigenId ||
      !depositoDestinoId ||
      !productoSelect?.id ||
      !cantidad
    ) {
      toast.error("Complete todos los campos requeridos");
      return;
    }
    if (depositoOrigenId === depositoDestinoId) {
      toast.error("El depósito origen y destino no pueden ser iguales");
      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;
    }

    transferir({
      deposito_origen_id: depositoOrigenId,
      deposito_destino_id: depositoDestinoId,
      producto_id: productoSelect.id,
      cantidad: cantidadNum,
      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: 600 },
            mx: "auto",
          }}
        >
          <Typography
            variant="h6"
            gutterBottom
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 1,
              fontSize: { xs: "1rem", md: "1.25rem" },
            }}
          >
            <SwapHoriz /> Nueva Transferencia
          </Typography>

          <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 2 }}>
            <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);
                  setDepositoOrigenId("");
                  setDepositoDestinoId("");
                }}
              >
                {sucursales.map((suc) => (
                  <MenuItem key={suc.id} value={suc.id}>
                    {suc.descripcion || suc.nombre}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>

            <Box
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                gap: 2,
              }}
            >
              <FormControl fullWidth size="small">
                <InputLabel>Depósito Origen</InputLabel>
                <Select
                  value={depositoOrigenId}
                  label="Depósito Origen"
                  onChange={(e) => setDepositoOrigenId(e.target.value)}
                  disabled={!sucursalesItemSelect?.id}
                >
                  {depositos.map((dep) => (
                    <MenuItem key={dep.id} value={dep.id}>
                      {dep.descripcion}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

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

            <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}
            />

            <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 >= 0) {
                  v = v.slice(0, i + 1) + v.slice(i + 1).replace(/,/g, "");
                }
                setCantidad(v);
              }}
              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)}
            />

            {depositoOrigenId === depositoDestinoId && depositoOrigenId && (
              <Alert severity="warning">
                El depósito origen y destino no pueden ser iguales
              </Alert>
            )}

            <Button
              variant="contained"
              onClick={handleTransferir}
              disabled={
                isPending ||
                !depositoOrigenId ||
                !depositoDestinoId ||
                !productoSelect ||
                !cantidad ||
                !canCreate
              }
              startIcon={<SwapHoriz />}
            >
              {!canCreate
                ? "Sin permiso para transferir"
                : isPending
                  ? "Transfiriendo..."
                  : "Realizar Transferencia"}
            </Button>
          </Box>
        </Paper>
      </Box>
    </RequiredDataGuard>
  );
}