import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem, Chip,
  Alert, FormControl, InputLabel, Select, FormControlLabel, Checkbox
} from '@mui/material';
import { DataGrid, type GridColDef, type GridRenderCellParams } from '@mui/x-data-grid';
import { esES } from '@mui/x-data-grid/locales';

import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import EditCalendarIcon from '@mui/icons-material/EditCalendar';

import stockBobinaService from '../../services/Impresion/stockBobinaService';
import tipoBobinaService from '../../services/Impresion/tipoBobinaService';
import plantaService from '../../services/Impresion/plantaService';
import estadoBobinaService from '../../services/Impresion/estadoBobinaService';

import type { StockBobinaDto } from '../../models/dtos/Impresion/StockBobinaDto';
import type { CreateStockBobinaDto } from '../../models/dtos/Impresion/CreateStockBobinaDto';
import type { UpdateStockBobinaDto } from '../../models/dtos/Impresion/UpdateStockBobinaDto';
import type { CambiarEstadoBobinaDto } from '../../models/dtos/Impresion/CambiarEstadoBobinaDto';
import type { TipoBobinaDto } from '../../models/dtos/Impresion/TipoBobinaDto';
import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
import type { EstadoBobinaDto } from '../../models/dtos/Impresion/EstadoBobinaDto';
import type { UpdateFechaRemitoLoteDto } from '../../models/dtos/Impresion/UpdateFechaRemitoLoteDto';

import StockBobinaFechaRemitoModal from '../../components/Modals/Impresion/StockBobinaFechaRemitoModal';
import StockBobinaIngresoFormModal from '../../components/Modals/Impresion/StockBobinaIngresoFormModal';
import StockBobinaEditFormModal from '../../components/Modals/Impresion/StockBobinaEditFormModal';
import StockBobinaCambioEstadoModal from '../../components/Modals/Impresion/StockBobinaCambioEstadoModal';
import StockBobinaLoteFormModal from '../../components/Modals/Impresion/StockBobinaLoteFormModal';

import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const ID_ESTADO_DISPONIBLE = 1;
const ID_ESTADO_UTILIZADA = 2;
const ID_ESTADO_DANADA = 3;

const GestionarStockBobinasPage: React.FC = () => {
  const [stock, setStock] = useState<StockBobinaDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  // --- Estados de los filtros ---
  const [filtroTipoBobina, setFiltroTipoBobina] = useState<number | string>('');
  const [filtroNroBobina, setFiltroNroBobina] = useState('');
  const [filtroPlanta, setFiltroPlanta] = useState<number | string>('');
  const [filtroEstadoBobina, setFiltroEstadoBobina] = useState<number | string>('');
  const [filtroRemito, setFiltroRemito] = useState('');

  // Filtro Fechas Remito
  const [filtroFechaHabilitado, setFiltroFechaHabilitado] = useState<boolean>(false);
  const [filtroFechaDesde, setFiltroFechaDesde] = useState<string>(new Date().toISOString().split('T')[0]);
  const [filtroFechaHasta, setFiltroFechaHasta] = useState<string>(new Date().toISOString().split('T')[0]);

  // Nuevo Filtro: Fechas Estado
  const [filtroFechaEstadoHabilitado, setFiltroFechaEstadoHabilitado] = useState<boolean>(false);
  const [filtroFechaEstadoDesde, setFiltroFechaEstadoDesde] = useState<string>(new Date().toISOString().split('T')[0]);
  const [filtroFechaEstadoHasta, setFiltroFechaEstadoHasta] = useState<string>(new Date().toISOString().split('T')[0]);

  // Estados para datos de dropdowns
  const [tiposBobina, setTiposBobina] = useState<TipoBobinaDto[]>([]);
  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
  const [estadosBobina, setEstadosBobina] = useState<EstadoBobinaDto[]>([]);
  const [loadingFiltersDropdown, setLoadingFiltersDropdown] = useState(false);

  // Estados de los modales
  const [ingresoModalOpen, setIngresoModalOpen] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);
  const [cambioEstadoModalOpen, setCambioEstadoModalOpen] = useState(false);
  const [loteModalOpen, setLoteModalOpen] = useState(false);
  const [fechaRemitoModalOpen, setFechaRemitoModalOpen] = useState(false);

  // Menú de acciones
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedBobinaForRowMenu, setSelectedBobinaForRowMenu] = useState<StockBobinaDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVer = isSuperAdmin || tienePermiso("IB001");
  const puedeIngresar = isSuperAdmin || tienePermiso("IB002");
  const puedeCambiarEstado = isSuperAdmin || tienePermiso("IB003");
  const puedeModificarDatos = isSuperAdmin || tienePermiso("IB004");
  const puedeEliminar = isSuperAdmin || tienePermiso("IB005");

  const fetchFiltersDropdownData = useCallback(async () => {
    setLoadingFiltersDropdown(true);
    try {
      const [tiposData, plantasData, estadosData] = await Promise.all([
        tipoBobinaService.getAllTiposBobina(),
        plantaService.getAllPlantas(),
        estadoBobinaService.getAllEstadosBobina()
      ]);
      setTiposBobina(tiposData);
      setPlantas(plantasData);
      setEstadosBobina(estadosData);
    } catch (err) {
      console.error("Error cargando datos para filtros:", err);
      setError("Error al cargar opciones de filtro.");
    } finally {
      setLoadingFiltersDropdown(false);
    }
  }, []);

  useEffect(() => {
    fetchFiltersDropdownData();
  }, [fetchFiltersDropdownData]);

  const cargarStock = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección.");
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    setApiErrorMessage(null);
    try {
      const params = {
        idTipoBobina: filtroTipoBobina ? Number(filtroTipoBobina) : null,
        nroBobinaFilter: filtroNroBobina || null,
        idPlanta: filtroPlanta ? Number(filtroPlanta) : null,
        idEstadoBobina: filtroEstadoBobina ? Number(filtroEstadoBobina) : null,
        remitoFilter: filtroRemito || null,
        // Fechas Remito
        fechaDesde: filtroFechaHabilitado ? filtroFechaDesde : null,
        fechaHasta: filtroFechaHabilitado ? filtroFechaHasta : null,
        // Fechas Estado (Nuevos parametros, asegurar que el backend los reciba)
        fechaEstadoDesde: filtroFechaEstadoHabilitado ? filtroFechaEstadoDesde : null,
        fechaEstadoHasta: filtroFechaEstadoHabilitado ? filtroFechaEstadoHasta : null,
      };
      const data = await stockBobinaService.getAllStockBobinas(params);
      setStock(data);
      if (data.length === 0) {
        // No setteamos error bloqueante, solo aviso visual si se desea, o dejar tabla vacía.
        // setError("No se encontraron resultados con los filtros aplicados.");
      }
    } catch (err) {
      console.error(err);
      setError('Error al cargar el stock de bobinas.');
    } finally {
      setLoading(false);
    }
  }, [
    puedeVer,
    filtroTipoBobina, filtroNroBobina, filtroPlanta, filtroEstadoBobina, filtroRemito,
    filtroFechaHabilitado, filtroFechaDesde, filtroFechaHasta,
    filtroFechaEstadoHabilitado, filtroFechaEstadoDesde, filtroFechaEstadoHasta
  ]);

  const handleBuscarClick = () => {
    cargarStock();
  };

  const handleLimpiarFiltros = () => {
    setFiltroTipoBobina('');
    setFiltroNroBobina('');
    setFiltroPlanta('');
    setFiltroEstadoBobina('');
    setFiltroRemito('');

    setFiltroFechaHabilitado(false);
    setFiltroFechaDesde(new Date().toISOString().split('T')[0]);
    setFiltroFechaHasta(new Date().toISOString().split('T')[0]);

    setFiltroFechaEstadoHabilitado(false);
    setFiltroFechaEstadoDesde(new Date().toISOString().split('T')[0]);
    setFiltroFechaEstadoHasta(new Date().toISOString().split('T')[0]);

    setStock([]);
    setError(null);
  };

  const handleCloseIngresoModal = () => setIngresoModalOpen(false);
  const handleSubmitIngresoModal = async (data: CreateStockBobinaDto) => {
    setApiErrorMessage(null);
    try { await stockBobinaService.ingresarBobina(data); cargarStock(); }
    catch (err: any) { const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al ingresar bobina.'; setApiErrorMessage(msg); throw err; }
  };

  const handleLoteModalClose = (refrescar: boolean) => {
    setLoteModalOpen(false);
    if (refrescar) {
      cargarStock();
    }
  };

  const handleSubmitEditModal = async (idBobina: number, data: UpdateStockBobinaDto) => {
    setApiErrorMessage(null);
    try { await stockBobinaService.updateDatosBobinaDisponible(idBobina, data); cargarStock(); }
    catch (err: any) { const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al actualizar bobina.'; setApiErrorMessage(msg); throw err; }
  };

  const handleSubmitCambioEstadoModal = async (idBobina: number, data: CambiarEstadoBobinaDto) => {
    setApiErrorMessage(null);
    try { await stockBobinaService.cambiarEstadoBobina(idBobina, data); cargarStock(); }
    catch (err: any) { const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al cambiar estado.'; setApiErrorMessage(msg); throw err; }
  };

  const handleDeleteBobina = () => {
    if (!selectedBobinaForRowMenu) return;

    if (selectedBobinaForRowMenu.idEstadoBobina !== ID_ESTADO_DISPONIBLE && selectedBobinaForRowMenu.idEstadoBobina !== ID_ESTADO_DANADA) {
      alert("Solo se pueden eliminar bobinas en estado 'Disponible' o 'Dañada'.");
      handleMenuClose();
      return;
    }
    if (window.confirm(`¿Seguro de eliminar este ingreso de bobina (ID: ${selectedBobinaForRowMenu.idBobina})?`)) {
      setApiErrorMessage(null);
      stockBobinaService.deleteIngresoBobina(selectedBobinaForRowMenu.idBobina)
        .then(() => cargarStock())
        .catch((err: any) => {
          const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar.';
          setApiErrorMessage(msg);
        });
    }
    handleMenuClose();
  };

  const handleSubmitFechaRemitoModal = async (data: UpdateFechaRemitoLoteDto) => {
    setApiErrorMessage(null);
    try {
      await stockBobinaService.actualizarFechaRemitoLote(data);
      cargarStock();
    } catch (err: any) {
      const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al actualizar la fecha del remito.';
      setApiErrorMessage(msg);
      throw err;
    }
  };

  // --- Handlers Menú Acciones ---
  const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>, bobina: StockBobinaDto) => {
    event.stopPropagation(); // Evitar selección de fila al abrir menú
    setAnchorEl(event.currentTarget);
    setSelectedBobinaForRowMenu(bobina);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleOpenEditModal = () => { setEditModalOpen(true); handleMenuClose(); };
  const handleOpenCambioEstadoModal = () => { setCambioEstadoModalOpen(true); handleMenuClose(); };
  const handleOpenFechaRemitoModal = () => { setFechaRemitoModalOpen(true); handleMenuClose(); };

  const handleCloseEditModal = () => { setEditModalOpen(false); setSelectedBobinaForRowMenu(null); };
  const handleCloseCambioEstadoModal = () => { setCambioEstadoModalOpen(false); setSelectedBobinaForRowMenu(null); };
  const handleCloseFechaRemitoModal = () => { setFechaRemitoModalOpen(false); setSelectedBobinaForRowMenu(null); };

  // --- Definición de Columnas DataGrid ---
  const columns = useMemo<GridColDef<StockBobinaDto>[]>(() => [
    { field: 'nroBobina', headerName: 'Nro. Bobina', width: 130 },
    { field: 'nombreTipoBobina', headerName: 'Tipo', width: 200, flex: 1 },
    { field: 'peso', headerName: 'Peso (Kg)', width: 100, align: 'right', headerAlign: 'right', type: 'number' },
    { field: 'nombrePlanta', headerName: 'Planta', width: 120 },
    {
      field: 'nombreEstadoBobina',
      headerName: 'Estado',
      width: 130,
      renderCell: (params) => {
        const idEstado = params.row.idEstadoBobina;
        let color: "success" | "primary" | "error" | "default" = "default";
        if (idEstado === ID_ESTADO_DISPONIBLE) color = "success";
        else if (idEstado === ID_ESTADO_UTILIZADA) color = "primary";
        else if (idEstado === ID_ESTADO_DANADA) color = "error";

        return <Chip label={params.value} size="small" color={color} variant="outlined" />;
      }
    },
    { field: 'remito', headerName: 'Remito', width: 120 },
    {
      field: 'fechaRemito',
      headerName: 'F. Remito',
      width: 110,
      type: 'date',
      valueGetter: (value: string) => {
        if (!value) return null;
        const datePart = value.toString().split('T')[0];
        const [year, month, day] = datePart.split('-');
        return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
      },
      valueFormatter: (value: Date) => {
        return value ? value.toLocaleDateString('es-AR') : '-';
      }
    },
    {
      field: 'fechaEstado',
      headerName: 'F. Estado',
      width: 110,
      type: 'date',
      valueGetter: (value: string) => {
        if (!value) return null;
        const datePart = value.toString().split('T')[0];
        const [year, month, day] = datePart.split('-');
        return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
      },
      valueFormatter: (value: Date) => {
        return value ? value.toLocaleDateString('es-AR') : '-';
      }
    },

    { field: 'nombrePublicacion', headerName: 'Publicación', width: 150 },
    { field: 'nombreSeccion', headerName: 'Sección', width: 120 },
    { field: 'obs', headerName: 'Obs.', width: 200, flex: 1 },
    {
      field: 'acciones',
      headerName: 'Acciones',
      width: 80,
      sortable: false,
      filterable: false,
      align: 'right',
      renderCell: (params: GridRenderCellParams<StockBobinaDto>) => {
        const b = params.row;
        const disabled = !(puedeModificarDatos) &&
          !(puedeCambiarEstado) &&
          !((b.idEstadoBobina === ID_ESTADO_DISPONIBLE || b.idEstadoBobina === ID_ESTADO_DANADA) && puedeEliminar);

        if (disabled) return null;

        return (
          <IconButton onClick={(e) => handleMenuOpen(e, b)} size="small">
            <MoreVertIcon fontSize="small" />
          </IconButton>
        );
      }
    }
  ], [puedeModificarDatos, puedeCambiarEstado, puedeEliminar]);

  if (!puedeVer) return <Box sx={{ p: 2 }}><Alert severity="error">{error || "Acceso denegado."}</Alert></Box>;

  return (
    <Box sx={{ p: 2 }}>
      <Typography variant="h5" gutterBottom>Stock de Bobinas</Typography>

      {/* Panel de Filtros */}
      <Paper sx={{ p: 2, mb: 2 }}>
        <Typography variant="h6" gutterBottom>Filtros</Typography>

        {/* Fila 1: Filtros generales */}
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
          <FormControl size="small" sx={{ minWidth: 180, flexGrow: 1 }}>
            <InputLabel>Tipo Bobina</InputLabel>
            <Select value={filtroTipoBobina} label="Tipo Bobina" onChange={(e) => setFiltroTipoBobina(e.target.value)} disabled={loadingFiltersDropdown}>
              <MenuItem value=""><em>Todos</em></MenuItem>
              {tiposBobina.map(t => <MenuItem key={t.idTipoBobina} value={t.idTipoBobina}>{t.denominacion}</MenuItem>)}
            </Select>
          </FormControl>
          <TextField label="Nro. Bobina" size="small" value={filtroNroBobina} onChange={(e) => setFiltroNroBobina(e.target.value)} sx={{ minWidth: 150, flexGrow: 1 }} />
          <FormControl size="small" sx={{ minWidth: 180, flexGrow: 1 }}>
            <InputLabel>Planta</InputLabel>
            <Select value={filtroPlanta} label="Planta" onChange={(e) => setFiltroPlanta(e.target.value)} disabled={loadingFiltersDropdown}>
              <MenuItem value=""><em>Todas</em></MenuItem>
              {plantas.map(p => <MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 180, flexGrow: 1 }}>
            <InputLabel>Estado</InputLabel>
            <Select value={filtroEstadoBobina} label="Estado" onChange={(e) => setFiltroEstadoBobina(e.target.value)} disabled={loadingFiltersDropdown}>
              <MenuItem value=""><em>Todos</em></MenuItem>
              {estadosBobina.map(e => <MenuItem key={e.idEstadoBobina} value={e.idEstadoBobina}>{e.denominacion}</MenuItem>)}
            </Select>
          </FormControl>
          <TextField label="Remito" size="small" value={filtroRemito} onChange={(e) => setFiltroRemito(e.target.value)} sx={{ minWidth: 150, flexGrow: 1 }} />
        </Box>

        {/* Fila 2: Filtros de Fechas */}
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 2, alignItems: 'center' }}>
          {/* Fechas Remito */}
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', border: '1px dashed #ccc', p: 1, borderRadius: 1 }}>
            <FormControlLabel
              control={<Checkbox checked={filtroFechaHabilitado} onChange={(e) => setFiltroFechaHabilitado(e.target.checked)} />}
              label="Filtrar por Fecha Remito"
            />
            <TextField label="Desde" type="date" size="small" value={filtroFechaDesde} onChange={(e) => setFiltroFechaDesde(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 140 }} disabled={!filtroFechaHabilitado} />
            <TextField label="Hasta" type="date" size="small" value={filtroFechaHasta} onChange={(e) => setFiltroFechaHasta(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 140 }} disabled={!filtroFechaHabilitado} />
          </Box>

          {/* Fechas Estado (Nuevo) */}
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', border: '1px dashed #ccc', p: 1, borderRadius: 1 }}>
            <FormControlLabel
              control={<Checkbox checked={filtroFechaEstadoHabilitado} onChange={(e) => setFiltroFechaEstadoHabilitado(e.target.checked)} />}
              label="Filtrar por Fecha Estado"
            />
            <TextField label="Desde" type="date" size="small" value={filtroFechaEstadoDesde} onChange={(e) => setFiltroFechaEstadoDesde(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 140 }} disabled={!filtroFechaEstadoHabilitado} />
            <TextField label="Hasta" type="date" size="small" value={filtroFechaEstadoHasta} onChange={(e) => setFiltroFechaEstadoHasta(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 140 }} disabled={!filtroFechaEstadoHabilitado} />
          </Box>
        </Box>

        {/* Botones de acción del filtro */}
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2, mt: 2 }}>
          <Box sx={{ display: 'flex', gap: 2 }}>
            <Button variant="contained" startIcon={<SearchIcon />} onClick={handleBuscarClick} disabled={loading}>
              Buscar
            </Button>
            <Button variant="outlined" startIcon={<ClearIcon />} onClick={handleLimpiarFiltros} disabled={loading}>
              Limpiar Filtros
            </Button>
          </Box>
          {puedeIngresar && (
            <Box sx={{ display: 'flex', gap: 2 }}>
              <Button variant="contained" color="secondary" startIcon={<AddIcon />} onClick={() => setLoteModalOpen(true)}>
                Ingreso por Remito (Lote)
              </Button>
            </Box>
          )}
        </Box>
      </Paper>

      {error && !loading && <Alert severity="warning" sx={{ my: 2 }}>{error}</Alert>}
      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}

      {/* Tabla DataGrid */}
      <Paper sx={{ width: '100%', height: 600 }}>
        <DataGrid
          rows={stock}
          columns={columns}
          getRowId={(row) => row.idBobina} // Importante: especificar el ID único
          loading={loading}
          localeText={esES.components.MuiDataGrid.defaultProps.localeText}
          density="compact"
          disableRowSelectionOnClick
          initialState={{
            pagination: { paginationModel: { pageSize: 25 } },
          }}
          pageSizeOptions={[25, 50, 100]}
          sx={{ border: 0 }}
        />
      </Paper>

      {/* Menú Contextual de Fila */}
      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {selectedBobinaForRowMenu && puedeModificarDatos && (
          <MenuItem onClick={handleOpenFechaRemitoModal}>
            <EditCalendarIcon fontSize="small" sx={{ mr: 1 }} /> Corregir Fecha Remito
          </MenuItem>
        )}
        {selectedBobinaForRowMenu && puedeModificarDatos && selectedBobinaForRowMenu.idEstadoBobina === ID_ESTADO_DISPONIBLE && (
          <MenuItem onClick={handleOpenEditModal}>
            <EditIcon fontSize="small" sx={{ mr: 1 }} /> Editar Datos Bobina
          </MenuItem>
        )}
        {selectedBobinaForRowMenu && puedeCambiarEstado && (
          <MenuItem onClick={handleOpenCambioEstadoModal}>
            <SwapHorizIcon fontSize="small" sx={{ mr: 1 }} /> Cambiar Estado
          </MenuItem>
        )}
        {selectedBobinaForRowMenu && puedeEliminar &&
          (selectedBobinaForRowMenu.idEstadoBobina === ID_ESTADO_DISPONIBLE || selectedBobinaForRowMenu.idEstadoBobina === ID_ESTADO_DANADA) && (
            <MenuItem onClick={handleDeleteBobina}>
              <DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Eliminar Ingreso
            </MenuItem>
          )}
      </Menu>

      {/* Modales */}
      <StockBobinaIngresoFormModal
        open={ingresoModalOpen} onClose={handleCloseIngresoModal} onSubmit={handleSubmitIngresoModal}
        errorMessage={apiErrorMessage} clearErrorMessage={() => setApiErrorMessage(null)}
      />
      <StockBobinaEditFormModal
        open={editModalOpen} onClose={handleCloseEditModal} onSubmit={handleSubmitEditModal}
        initialData={selectedBobinaForRowMenu} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
      <StockBobinaCambioEstadoModal
        open={cambioEstadoModalOpen} onClose={handleCloseCambioEstadoModal} onSubmit={handleSubmitCambioEstadoModal}
        bobinaActual={selectedBobinaForRowMenu} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
      <StockBobinaLoteFormModal
        open={loteModalOpen}
        onClose={handleLoteModalClose}
      />
      <StockBobinaFechaRemitoModal
        open={fechaRemitoModalOpen}
        onClose={handleCloseFechaRemitoModal}
        onSubmit={handleSubmitFechaRemitoModal}
        bobinaContexto={selectedBobinaForRowMenu}
        errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
    </Box>
  );
};

export default GestionarStockBobinasPage;