import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
import type { StockBobinaDto } from '../../../models/dtos/Impresion/StockBobinaDto';
import type { UpdateFechaRemitoLoteDto } from '../../../models/dtos/Impresion/UpdateFechaRemitoLoteDto';

const modalStyle = {
  position: 'absolute' as 'absolute',
  top: '50%', left: '50%',
  transform: 'translate(-50%, -50%)',
  width: { xs: '90%', sm: 450 },
  bgcolor: 'background.paper',
  border: '2px solid #000', boxShadow: 24, p: 4
};

interface Props {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: UpdateFechaRemitoLoteDto) => Promise<void>;
  bobinaContexto: StockBobinaDto | null;
  errorMessage: string | null;
  clearErrorMessage: () => void;
}

const StockBobinaFechaRemitoModal: React.FC<Props> = ({ open, onClose, onSubmit, bobinaContexto, errorMessage, clearErrorMessage }) => {
  const [nuevaFecha, setNuevaFecha] = useState('');
  const [loading, setLoading] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);

  useEffect(() => {
    if (open && bobinaContexto) {
      setNuevaFecha(bobinaContexto.fechaRemito.split('T')[0]); // Iniciar con la fecha actual
      setLocalError(null);
      clearErrorMessage();
    }
  }, [open, bobinaContexto, clearErrorMessage]);

  if (!bobinaContexto) return null;

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!nuevaFecha) {
      setLocalError('Debe seleccionar una nueva fecha.');
      return;
    }
    setLoading(true);
    try {
      const data: UpdateFechaRemitoLoteDto = {
        idPlanta: bobinaContexto.idPlanta,
        remito: bobinaContexto.remito,
        fechaRemitoActual: bobinaContexto.fechaRemito.split('T')[0],
        nuevaFechaRemito: nuevaFecha
      };
      await onSubmit(data);
      onClose();
    } catch (err) {
      // El error de la API es manejado por el prop `errorMessage`
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2">Corregir Fecha de Remito</Typography>
        <Typography variant="body2" sx={{ mt: 1 }}>
          Esto cambiará la fecha para <strong>todas</strong> las bobinas del remito <strong>{bobinaContexto.remito}</strong> en la planta <strong>{bobinaContexto.nombrePlanta}</strong>.
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
          <TextField label="Fecha Actual" value={new Date(bobinaContexto.fechaRemito).toLocaleDateString('es-AR', { timeZone: 'UTC' })} disabled fullWidth margin="normal" />
          <TextField label="Nueva Fecha de Remito" type="date" value={nuevaFecha}
            onChange={e => { setNuevaFecha(e.target.value); setLocalError(null); }}
            required fullWidth margin="normal" InputLabelProps={{ shrink: true }}
            error={!!localError} helperText={localError} autoFocus
          />
          {errorMessage && <Alert severity="error" sx={{ mt: 2 }}>{errorMessage}</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}>
              {loading ? <CircularProgress size={24} /> : 'Guardar Nueva Fecha'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default StockBobinaFechaRemitoModal;