// src/components/Modals/Distribucion/EntradaSalidaCanillaFormModal.tsx
import React, { useState, useEffect } from 'react';
import {
  Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
  FormControl, InputLabel, Select, MenuItem, Paper, IconButton, FormHelperText
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import type { EntradaSalidaCanillaDto } from '../../../models/dtos/Distribucion/EntradaSalidaCanillaDto';
import type { UpdateEntradaSalidaCanillaDto } from '../../../models/dtos/Distribucion/UpdateEntradaSalidaCanillaDto';
// import type { CanillaDto } from '../../../models/dtos/Distribucion/CanillaDto'; // Ya no es necesario cargar todos los canillitas aquí
import publicacionService from '../../../services/Distribucion/publicacionService';
// import canillaService from '../../../services/Distribucion/canillaService'; // Ya no es necesario
import entradaSalidaCanillaService from '../../../services/Distribucion/entradaSalidaCanillaService';
import type { CreateBulkEntradaSalidaCanillaDto } from '../../../models/dtos/Distribucion/CreateBulkEntradaSalidaCanillaDto';
import type { EntradaSalidaCanillaItemDto } from '../../../models/dtos/Distribucion/EntradaSalidaCanillaItemDto';
import axios from 'axios';
import type { PublicacionDropdownDto } from '../../../models/dtos/Distribucion/PublicacionDropdownDto';

const modalStyle = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: { xs: '95%', sm: '80%', md: '750px' },
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 2.5,
  maxHeight: '90vh',
  overflowY: 'auto'
};

interface EntradaSalidaCanillaFormModalProps {
  open: boolean;
  onClose: () => void;
  // El onSubmit de la página padre se usa solo para edición. La creación se maneja internamente.
  onSubmit: (data: UpdateEntradaSalidaCanillaDto, idParte: number) => Promise<void>;
  initialData?: EntradaSalidaCanillaDto | null; // Para edición
  prefillData?: { // Para creación, prellenar desde la página padre
    fecha?: string; // YYYY-MM-DD
    idCanilla?: number | string;
    nombreCanilla?: string; // << AÑADIR NOMBRE PARA MOSTRAR
    idPublicacion?: number | string; // Para pre-seleccionar la primera publicación en la lista de items
  } | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

interface FormRowItem {
  id: string; // ID temporal para el frontend
  idPublicacion: number | string;
  cantSalida: string;
  cantEntrada: string;
  observacion: string;
}

const EntradaSalidaCanillaFormModal: React.FC<EntradaSalidaCanillaFormModalProps> = ({
  open,
  onClose,
  onSubmit: onSubmitEdit, // Renombrar para claridad, ya que solo se usa para editar
  initialData,
  prefillData,
  errorMessage: parentErrorMessage,
  clearErrorMessage
}) => {
  // Estados para los campos que SÍ son editables o parte del formulario de items
  const [editIdPublicacion, setEditIdPublicacion] = useState<number | string>(''); // Solo para modo edición
  const [editCantSalida, setEditCantSalida] = useState<string>('0');
  const [editCantEntrada, setEditCantEntrada] = useState<string>('0');
  const [editObservacion, setEditObservacion] = useState('');
  const [items, setItems] = useState<FormRowItem[]>([{ id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);

  // Estados para datos de dropdowns
  const [publicaciones, setPublicaciones] = useState<PublicacionDropdownDto[]>([]); // Sigue siendo necesario para la lista de items
  
  // Estados de carga y error
  const [loading, setLoading] = useState(false);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false); // Solo para publicaciones
  const [loadingItems, setLoadingItems] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
  const [modalSpecificApiError, setModalSpecificApiError] = useState<string | null>(null);

  const isEditing = Boolean(initialData && initialData.idParte);

  // Datos que vienen prellenados y no son editables en el modal (Fecha y Canillita)
  const displayFecha = isEditing ? (initialData?.fecha ? initialData.fecha.split('T')[0] : '') : (prefillData?.fecha || '');
  const displayIdCanilla = isEditing ? initialData?.idCanilla : prefillData?.idCanilla;
  const displayNombreCanilla = isEditing ? initialData?.nomApeCanilla : prefillData?.nombreCanilla;


  // Cargar publicaciones para el dropdown de items
  useEffect(() => {
    const fetchPublicacionesDropdown = async () => {
      setLoadingDropdowns(true);
      setLocalErrors(prev => ({ ...prev, dropdowns: null }));
      try {
        // Usar getPublicacionesForDropdown si lo tienes, sino getAllPublicaciones
        const pubsData = await publicacionService.getPublicacionesForDropdown(true);
        setPublicaciones(pubsData);
      } catch (error) {
        console.error("Error al cargar publicaciones para dropdown", error);
        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar publicaciones.' }));
      } finally {
        setLoadingDropdowns(false);
      }
    };

    if (open) {
      fetchPublicacionesDropdown();
    }
  }, [open]);


  // Inicializar formulario y/o pre-cargar items
  useEffect(() => {
    if (open) {
      clearErrorMessage();
      setModalSpecificApiError(null);
      setLocalErrors({});

      if (isEditing && initialData) {
        setEditIdPublicacion(initialData.idPublicacion || '');
        setEditCantSalida(initialData.cantSalida?.toString() || '0');
        setEditCantEntrada(initialData.cantEntrada?.toString() || '0');
        setEditObservacion(initialData.observacion || '');
        setItems([]); // No hay lista de items en modo edición de un solo movimiento
      } else { // Modo Creación
        // Limpiar campos de edición
        setEditIdPublicacion('');
        setEditCantSalida('0');
        setEditCantEntrada('0');
        setEditObservacion('');

        // Lógica para pre-cargar items basada en displayFecha y prefillData.idPublicacion
        // (Esta lógica se mueve al siguiente useEffect que depende de displayFecha y publicaciones)
        // Por ahora, solo aseguramos que `items` se resetee si es necesario.
        const idPubPrefill = prefillData?.idPublicacion;
        if (idPubPrefill && publicaciones.length > 0) {
             // Si ya tenemos publicaciones, y un prefill de publicación, intentamos setearlo
             const diaSemana = new Date(displayFecha + 'T00:00:00Z').getUTCDay();
             setLoadingItems(true);
             publicacionService.getPublicacionesPorDiaSemana(diaSemana)
                 .then(pubsPorDefecto => {
                     let itemsIniciales: FormRowItem[];
                     if (pubsPorDefecto.find(p => p.idPublicacion === Number(idPubPrefill))) {
                         // Si la publicación prellenada está en las de por defecto, la usamos
                         itemsIniciales = [{ id: Date.now().toString(), idPublicacion: Number(idPubPrefill), cantSalida: '0', cantEntrada: '0', observacion: '' }];
                     } else if (pubsPorDefecto.length > 0) {
                         // Si no, pero hay otras por defecto, usamos la primera de ellas
                         itemsIniciales = pubsPorDefecto.map(pub => ({
                             id: `${Date.now().toString()}-${pub.idPublicacion}`,
                             idPublicacion: pub.idPublicacion,
                             cantSalida: '0', cantEntrada: '0', observacion: ''
                         }));
                     } else {
                         // Si no hay ninguna por defecto, y la prellenada no aplica, usamos la prellenada sola o vacía
                         itemsIniciales = [{ id: Date.now().toString(), idPublicacion: idPubPrefill || '', cantSalida: '0', cantEntrada: '0', observacion: '' }];
                     }
                     setItems(itemsIniciales.length > 0 ? itemsIniciales : [{ id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);
                 })
                 .catch(() => setItems([{ id: Date.now().toString(), idPublicacion: idPubPrefill || '', cantSalida: '0', cantEntrada: '0', observacion: '' }])) // Fallback
                 .finally(() => setLoadingItems(false));
        } else if (publicaciones.length === 0 && !loadingDropdowns) { // Si no hay prefill de pub o no hay pubs aún
             setItems([{ id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);
        }
      }
    }
  }, [open, initialData, isEditing, prefillData, clearErrorMessage, publicaciones, loadingDropdowns, displayFecha]); // Añadir displayFecha

  // Efecto para pre-cargar items por defecto cuando cambia la FECHA (displayFecha) en modo NUEVO
  useEffect(() => {
    if (open && !isEditing && publicaciones.length > 0 && displayFecha) {
      const diaSemana = new Date(displayFecha + 'T00:00:00Z').getUTCDay();
      setLoadingItems(true);
      publicacionService.getPublicacionesPorDiaSemana(diaSemana)
        .then(pubsPorDefecto => {
          const itemsPorDefecto = pubsPorDefecto.map(pub => ({
            id: `${Date.now().toString()}-${pub.idPublicacion}`,
            idPublicacion: pub.idPublicacion,
            cantSalida: '0',
            cantEntrada: '0',
            observacion: ''
          }));
          setItems(itemsPorDefecto.length > 0 ? itemsPorDefecto : [{ id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);
        })
        .catch(err => {
          console.error("Error al cargar publicaciones por defecto para el día:", err);
          setLocalErrors(prev => ({ ...prev, general: 'Error al pre-cargar publicaciones del día.' }));
          setItems([{ id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);
        })
        .finally(() => setLoadingItems(false));
    }
  }, [open, isEditing, displayFecha, publicaciones]); // Dependencia de displayFecha y publicaciones


  const validate = (): boolean => {
    // ... (lógica de validación sin cambios, pero 'idCanilla' y 'fecha' ya no son estados del modal)
    const currentErrors: { [key: string]: string | null } = {};
    // Validar displayIdCanilla y displayFecha si es modo creación
    if (!isEditing) {
        if (!displayIdCanilla) currentErrors.idCanilla = 'El canillita es obligatorio (provisto por la página).';
        if (!displayFecha || !displayFecha.trim()) currentErrors.fecha = 'La fecha es obligatoria (provista por la página).';
        else if (!/^\d{4}-\d{2}-\d{2}$/.test(displayFecha)) currentErrors.fecha = 'Formato de fecha inválido.';
    }
    // ... resto de la validación para items (modo creación) o campos edit (modo edición) ...
    if (isEditing) {
      const salidaNum = parseInt(editCantSalida, 10);
      const entradaNum = parseInt(editCantEntrada, 10);
      if (editCantSalida.trim() === '' || isNaN(salidaNum) || salidaNum < 0) {
        currentErrors.editCantSalida = 'Cant. Salida debe ser un número >= 0.';
      }
      if (editCantEntrada.trim() === '' || isNaN(entradaNum) || entradaNum < 0) {
        currentErrors.editCantEntrada = 'Cant. Entrada debe ser un número >= 0.';
      } else if (!isNaN(salidaNum) && !isNaN(entradaNum) && entradaNum > salidaNum) {
        currentErrors.editCantEntrada = 'Cant. Entrada no puede ser mayor a Cant. Salida.';
      }
      if (!editIdPublicacion) { // En edición, la publicación es fija, pero debe existir
        currentErrors.editIdPublicacion = 'Error: Publicación no especificada para edición.';
      }
    } else { // Modo Creación (Bulk)
      let hasValidItemWithQuantityOrPub = false;
      const publicacionIdsEnLote = new Set<number>();
      if (items.length === 0) {
        currentErrors.general = "Debe agregar al menos una publicación.";
      }
      items.forEach((item, index) => {
        const salidaNum = parseInt(item.cantSalida, 10);
        const entradaNum = parseInt(item.cantEntrada, 10);
        const hasQuantity = !isNaN(salidaNum) && salidaNum >= 0 && !isNaN(entradaNum) && entradaNum >= 0 && (salidaNum > 0 || entradaNum > 0);
        const hasObservation = item.observacion.trim() !== '';

        if (item.idPublicacion === '') {
          if (hasQuantity || hasObservation) {
            currentErrors[`item_${item.id}_idPublicacion`] = `Pub. ${index + 1} obligatoria si hay datos.`;
          }
        } else {
          const pubIdNum = Number(item.idPublicacion);
          if (publicacionIdsEnLote.has(pubIdNum)) {
            currentErrors[`item_${item.id}_idPublicacion`] = `Pub. ${index + 1} duplicada.`;
          } else { publicacionIdsEnLote.add(pubIdNum); }

          if (item.cantSalida.trim() === '' || isNaN(salidaNum) || salidaNum < 0) {
            currentErrors[`item_${item.id}_cantSalida`] = `Salida Pub. ${index + 1} inválida.`;
          }
          if (item.cantEntrada.trim() === '' || isNaN(entradaNum) || entradaNum < 0) {
            currentErrors[`item_${item.id}_cantEntrada`] = `Entrada Pub. ${index + 1} inválida.`;
          } else if (!isNaN(salidaNum) && !isNaN(entradaNum) && entradaNum > salidaNum) {
            currentErrors[`item_${item.id}_cantEntrada`] = `Dev. Pub. ${index + 1} > Salida.`;
          }
          if (item.idPublicacion !== '') hasValidItemWithQuantityOrPub = true;
        }
      });
      const allItemsAreEmptyAndNoPubSelected = items.every(itm => itm.idPublicacion === '' && (itm.cantSalida.trim() === '' || parseInt(itm.cantSalida, 10) === 0) && (itm.cantEntrada.trim() === '' || parseInt(itm.cantEntrada, 10) === 0) && itm.observacion.trim() === '');
      if (!hasValidItemWithQuantityOrPub && !allItemsAreEmptyAndNoPubSelected) {
        currentErrors.general = "Debe seleccionar una publicación para los ítems con cantidades y/o observaciones.";
      } else if (items.length > 0 && !items.some(i => i.idPublicacion !== '' && (parseInt(i.cantSalida, 10) > 0 || parseInt(i.cantEntrada, 10) > 0 || i.observacion.trim() !== '')) && !allItemsAreEmptyAndNoPubSelected) {
        currentErrors.general = "Debe ingresar datos significativos (cantidades u observación) para al menos una publicación seleccionada.";
      }
    }
    setLocalErrors(currentErrors);
    return Object.keys(currentErrors).length === 0;
  };

  const handleInputChange = (fieldName: string) => {
    // ... (sin cambios)
    if (localErrors[fieldName]) setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    if (parentErrorMessage) clearErrorMessage();
    if (modalSpecificApiError) setModalSpecificApiError(null);
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearErrorMessage();
    setModalSpecificApiError(null);
    if (!validate()) return;
    setLoading(true);
    try {
      if (isEditing && initialData) {
        const salidaNum = parseInt(editCantSalida, 10);
        const entradaNum = parseInt(editCantEntrada, 10);
        const dataToSubmitSingle: UpdateEntradaSalidaCanillaDto = {
          cantSalida: salidaNum,
          cantEntrada: entradaNum,
          observacion: editObservacion.trim() || undefined,
        };
        await onSubmitEdit(dataToSubmitSingle, initialData.idParte);
      } else { // Modo Creación
        if (!displayIdCanilla || !displayFecha) {
            setModalSpecificApiError("Faltan datos del canillita o la fecha para crear los movimientos.");
            setLoading(false);
            return;
        }
        const itemsToSubmit: EntradaSalidaCanillaItemDto[] = items
          .filter(item =>
            item.idPublicacion && Number(item.idPublicacion) > 0 &&
            ( (parseInt(item.cantSalida, 10) >= 0 && parseInt(item.cantEntrada, 10) >= 0) && (parseInt(item.cantSalida, 10) > 0 || parseInt(item.cantEntrada, 10) > 0) || item.observacion.trim() !== '' )
          )
          .map(item => ({
            idPublicacion: Number(item.idPublicacion),
            cantSalida: parseInt(item.cantSalida, 10) || 0,
            cantEntrada: parseInt(item.cantEntrada, 10) || 0,
            observacion: item.observacion.trim() || undefined,
          }));

        if (itemsToSubmit.length === 0) {
          setLocalErrors(prev => ({ ...prev, general: "No hay movimientos válidos para registrar." }));
          setLoading(false);
          return;
        }
        const bulkData: CreateBulkEntradaSalidaCanillaDto = {
          idCanilla: Number(displayIdCanilla), // Usar el displayIdCanilla
          fecha: displayFecha,               // Usar el displayFecha
          items: itemsToSubmit,
        };
        await entradaSalidaCanillaService.createBulkEntradasSalidasCanilla(bulkData);
      }
      onClose();
    } catch (error: any) {
      console.error("Error en submit de EntradaSalidaCanillaFormModal:", error);
      const message = axios.isAxiosError(error) && error.response?.data?.message 
        ? error.response.data.message 
        : 'Ocurrió un error inesperado al procesar la solicitud.';
      setModalSpecificApiError(message);
    } finally {
      setLoading(false);
    }
  };

  const handleAddRow = () => { /* ... (sin cambios) ... */ 
    if (items.length >= publicaciones.length) {
      setLocalErrors(prev => ({ ...prev, general: "No se pueden agregar más filas que publicaciones disponibles." }));
      return;
    }
    setItems([...items, { id: Date.now().toString(), idPublicacion: '', cantSalida: '0', cantEntrada: '0', observacion: '' }]);
    setLocalErrors(prev => ({ ...prev, general: null }));
  };
  const handleRemoveRow = (idToRemove: string) => { /* ... (sin cambios) ... */ 
    if (items.length <= 1 && !isEditing) return;
    setItems(items.filter(item => item.id !== idToRemove));
  };
  const handleItemChange = (id: string, field: keyof Omit<FormRowItem, 'id'>, value: string | number) => { /* ... (sin cambios) ... */
    setItems(items.map(itemRow => itemRow.id === id ? { ...itemRow, [field]: value } : itemRow));
    if (localErrors[`item_${id}_${field}`]) {
      setLocalErrors(prev => ({ ...prev, [`item_${id}_${field}`]: null }));
    }
    if (localErrors.general) setLocalErrors(prev => ({ ...prev, general: null }));
    if (parentErrorMessage) clearErrorMessage();
    if (modalSpecificApiError) setModalSpecificApiError(null);
  };


  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? `Editar Movimiento (ID: ${initialData?.idParte})` : 'Registrar Nuevos Movimientos'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
          {/* --- MOSTRAR DATOS PRELLENADOS/FIJOS --- */}
          <Paper variant="outlined" sx={{ p: 1.5, mb: 2, backgroundColor: 'grey.100' }}>
            <Typography variant="body1" component="div" sx={{ display: 'flex', justifyContent: 'space-between', flexWrap:'wrap' }}>
                <Box><strong>{isEditing ? "Canillita:" : "Para Canillita:"}</strong> {displayNombreCanilla || 'N/A'}</Box>
                <Box><strong>{isEditing ? "Fecha Movimiento:" : "Para Fecha:"}</strong> {displayFecha ? new Date(displayFecha + 'T00:00:00Z').toLocaleDateString('es-AR', {timeZone: 'UTC'}) : 'N/A'}</Box>
            </Typography>
            {localErrors.idCanilla && <Typography color="error" variant="caption" display="block">{localErrors.idCanilla}</Typography>}
            {localErrors.fecha && <Typography color="error" variant="caption" display="block">{localErrors.fecha}</Typography>}
          </Paper>
          {/* --- FIN DATOS PRELLENADOS --- */}

          {/* El Select de Canillita y TextField de Fecha se eliminan de aquí si son fijos */}

          {isEditing && initialData && (
            <Paper elevation={1} sx={{ p: 1.5, mt: 1 }}>
              <Typography variant="body2" gutterBottom color="text.secondary">
                Editando para Publicación: {publicaciones.find(p => p.idPublicacion === editIdPublicacion)?.nombre || `ID ${editIdPublicacion}`}
              </Typography>
              <Box sx={{ display: 'flex', gap: 2, mt: 0.5, flexWrap: 'wrap' }}>
                <TextField label="Cant. Salida" type="number" value={editCantSalida}
                  onChange={(e) => { setEditCantSalida(e.target.value); handleInputChange('editCantSalida'); }}
                  margin="dense" error={!!localErrors.editCantSalida} helperText={localErrors.editCantSalida || ''}
                  disabled={loading} inputProps={{ min: 0 }} sx={{ flex: 1, minWidth:'120px' }}
                />
                <TextField label="Cant. Entrada" type="number" value={editCantEntrada}
                  onChange={(e) => { setEditCantEntrada(e.target.value); handleInputChange('editCantEntrada'); }}
                  margin="dense" error={!!localErrors.editCantEntrada} helperText={localErrors.editCantEntrada || ''}
                  disabled={loading} inputProps={{ min: 0 }} sx={{ flex: 1, minWidth:'120px' }}
                />
              </Box>
              <TextField label="Observación (Movimiento)" value={editObservacion} // Label cambiado
                onChange={(e) => setEditObservacion(e.target.value)}
                margin="dense" fullWidth multiline rows={2} disabled={loading} sx={{ mt: 1 }}
              />
            </Paper>
          )}

          {!isEditing && (
            <Box>
              <Typography variant="subtitle2" sx={{ mt: 1.5, mb: 0.5 }}>Movimientos por Publicación:</Typography>
              {loadingItems && <Box sx={{ display: 'flex', justifyContent: 'center', my: 1 }}><CircularProgress size={20} /></Box>}
              {!loadingItems && items.map((itemRow, index) => (
                // ... (Renderizado de la fila de items sin cambios significativos,
                //      solo asegúrate que el Select de Publicación use `publicaciones` y no `canillitas`)
                <Paper key={itemRow.id} elevation={1} sx={{ p: 1.5, mb: 1, }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', flexGrow: 1, }}>
                        <FormControl sx={{ minWidth: 160, flexBasis: 'calc(40% - 8px)', flexGrow: 1, minHeight: 0 }} size="small" error={!!localErrors[`item_${itemRow.id}_idPublicacion`]} >
                          <InputLabel required={ parseInt(itemRow.cantSalida) > 0 || parseInt(itemRow.cantEntrada) > 0 || itemRow.observacion.trim() !== '' } >
                            Pub. {index + 1}
                          </InputLabel>
                          <Select value={itemRow.idPublicacion} label={`Publicación ${index + 1}`}
                            onChange={(e) => handleItemChange(itemRow.id, 'idPublicacion', e.target.value as number)}
                            disabled={loading || loadingDropdowns} sx={{ minWidth: 0 }} >
                            <MenuItem value="" disabled> <em>Seleccione</em> </MenuItem>
                            {publicaciones.map((p) => ( <MenuItem key={p.idPublicacion} value={p.idPublicacion}> {p.nombre} </MenuItem> ))}
                          </Select>
                          {localErrors[`item_${itemRow.id}_idPublicacion`] && ( <FormHelperText> {localErrors[`item_${itemRow.id}_idPublicacion`]} </FormHelperText> )}
                        </FormControl>
                        <TextField label="Llevados" type="number" size="small" value={itemRow.cantSalida}
                          onChange={(e) => handleItemChange(itemRow.id, 'cantSalida', e.target.value)}
                          error={!!localErrors[`item_${itemRow.id}_cantSalida`]} helperText={localErrors[`item_${itemRow.id}_cantSalida`]}
                          inputProps={{ min: 0 }} sx={{ flexBasis: 'calc(15% - 8px)', minWidth: '80px', minHeight: 0, }}
                        />
                        <TextField label="Devueltos" type="number" size="small" value={itemRow.cantEntrada}
                          onChange={(e) => handleItemChange(itemRow.id, 'cantEntrada', e.target.value)}
                          error={!!localErrors[`item_${itemRow.id}_cantEntrada`]} helperText={localErrors[`item_${itemRow.id}_cantEntrada`]}
                          inputProps={{ min: 0 }} sx={{ flexBasis: 'calc(15% - 8px)', minWidth: '80px', minHeight: 0, }}
                        />
                        <TextField label="Obs." value={itemRow.observacion} onChange={(e) => handleItemChange(itemRow.id, 'observacion', e.target.value)}
                          size="small" sx={{ flexGrow: 1, flexBasis: 'calc(25% - 8px)', minWidth: '120px', minHeight: 0, }}
                          multiline maxRows={1}
                        />
                      </Box>
                      {items.length > 1 && (
                        <IconButton onClick={() => handleRemoveRow(itemRow.id)} color="error" aria-label="Quitar fila" sx={{ alignSelf: 'center', }} >
                          <DeleteIcon fontSize="medium" />
                        </IconButton>
                      )}
                    </Box>
                  </Paper>
              ))}
              {localErrors.general && <Alert severity="error" sx={{ mt: 1 }}>{localErrors.general}</Alert>}
              <Button onClick={handleAddRow} startIcon={<AddIcon />} sx={{ mt: 1, alignSelf: 'flex-start' }} disabled={loading || loadingDropdowns || items.length >= publicaciones.length}>
                Agregar Publicación
              </Button>
            </Box>
          )}

          {parentErrorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{parentErrorMessage}</Alert>}
          {modalSpecificApiError && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{modalSpecificApiError}</Alert>}
          {localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</Alert>}

          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            <Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
            <Button type="submit" variant="contained" disabled={loading || loadingDropdowns}>
              {loading ? <CircularProgress size={24} /> : (isEditing ? 'Guardar Cambios' : 'Registrar Movimientos')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default EntradaSalidaCanillaFormModal;