import React, { useState, useEffect } from 'react';
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import type { CreateStockBobinaDto } from '../../../models/dtos/Impresion/CreateStockBobinaDto';
import type { TipoBobinaDto } from '../../../models/dtos/Impresion/TipoBobinaDto';
import type { PlantaDto } from '../../../models/dtos/Impresion/PlantaDto';
import tipoBobinaService from '../../../services/Impresion/tipoBobinaService';
import plantaService from '../../../services/Impresion/plantaService';

const modalStyle = { /* ... (mismo estilo) ... */
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: { xs: '90%', sm: 550 },
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
    maxHeight: '90vh',
    overflowY: 'auto'
};

interface StockBobinaIngresoFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateStockBobinaDto) => Promise<void>; // Solo para crear
  errorMessage?: string | null;
  clearErrorMessage: () => void;
  // initialData no es necesario para un modal de solo creación
}

const StockBobinaIngresoFormModal: React.FC<StockBobinaIngresoFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  errorMessage,
  clearErrorMessage
}) => {
  const [idTipoBobina, setIdTipoBobina] = useState<number | string>('');
  const [nroBobina, setNroBobina] = useState('');
  const [peso, setPeso] = useState<string>('');
  const [idPlanta, setIdPlanta] = useState<number | string>('');
  const [remito, setRemito] = useState('');
  const [fechaRemito, setFechaRemito] = useState(''); // yyyy-MM-dd

  const [tiposBobina, setTiposBobina] = useState<TipoBobinaDto[]>([]);
  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  useEffect(() => {
    const fetchDropdownData = async () => {
        setLoadingDropdowns(true);
        try {
            const [tiposData, plantasData] = await Promise.all([
                tipoBobinaService.getAllTiposBobina(),
                plantaService.getAllPlantas()
            ]);
            setTiposBobina(tiposData);
            setPlantas(plantasData);
        } catch (error) {
            console.error("Error al cargar datos para dropdowns (StockBobina)", error);
            setLocalErrors(prev => ({...prev, dropdowns: 'Error al cargar tipos/plantas.'}));
        } finally {
            setLoadingDropdowns(false);
        }
    };

    if (open) {
        fetchDropdownData();
        // Resetear campos
        setIdTipoBobina(''); setNroBobina(''); setPeso(''); setIdPlanta('');
        setRemito(''); setFechaRemito(new Date().toISOString().split('T')[0]); // Default a hoy
        setLocalErrors({});
        clearErrorMessage();
    }
  }, [open, clearErrorMessage]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!idTipoBobina) errors.idTipoBobina = 'Seleccione un tipo.';
    if (!nroBobina.trim()) errors.nroBobina = 'Nro. Bobina es obligatorio.';
    if (!peso.trim() || isNaN(parseInt(peso)) || parseInt(peso) <= 0) errors.peso = 'Peso debe ser un número positivo.';
    if (!idPlanta) errors.idPlanta = 'Seleccione una planta.';
    if (!remito.trim()) errors.remito = 'Remito es obligatorio.';
    if (!fechaRemito.trim()) errors.fechaRemito = 'Fecha de Remito es obligatoria.';
    else if (!/^\d{4}-\d{2}-\d{2}$/.test(fechaRemito)) errors.fechaRemito = 'Formato de fecha inválido.';

    setLocalErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleInputChange = (fieldName: string) => {
    if (localErrors[fieldName]) setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
    if (errorMessage) clearErrorMessage();
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearErrorMessage();
    if (!validate()) return;

    setLoading(true);
    try {
      const dataToSubmit: CreateStockBobinaDto = {
          idTipoBobina: Number(idTipoBobina),
          nroBobina,
          peso: parseInt(peso, 10),
          idPlanta: Number(idPlanta),
          remito,
          fechaRemito,
      };
      await onSubmit(dataToSubmit);
      onClose();
    } catch (error: any) {
      console.error("Error en submit de StockBobinaIngresoFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>Ingresar Nueva Bobina a Stock</Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
                <FormControl fullWidth margin="dense" error={!!localErrors.idTipoBobina} sx={{flex:1, minWidth: '200px'}}>
                    <InputLabel id="tipo-bobina-select-label" required>Tipo Bobina</InputLabel>
                    <Select labelId="tipo-bobina-select-label" label="Tipo Bobina" value={idTipoBobina}
                        onChange={(e) => {setIdTipoBobina(e.target.value as number); handleInputChange('idTipoBobina');}}
                        disabled={loading || loadingDropdowns}
                    >
                        <MenuItem value="" disabled><em>Seleccione un tipo</em></MenuItem>
                        {tiposBobina.map((t) => (<MenuItem key={t.idTipoBobina} value={t.idTipoBobina}>{t.denominacion}</MenuItem>))}
                    </Select>
                    {localErrors.idTipoBobina && <Typography color="error" variant="caption">{localErrors.idTipoBobina}</Typography>}
                </FormControl>
                <TextField label="Nro. Bobina" value={nroBobina} required
                    onChange={(e) => {setNroBobina(e.target.value); handleInputChange('nroBobina');}}
                    margin="dense" fullWidth error={!!localErrors.nroBobina} helperText={localErrors.nroBobina || ''}
                    disabled={loading} sx={{flex:1, minWidth: '200px'}}
                />
            </Box>
            <Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
                <TextField label="Peso (Kg)" type="number" value={peso} required
                    onChange={(e) => {setPeso(e.target.value); handleInputChange('peso');}}
                    margin="dense" fullWidth error={!!localErrors.peso} helperText={localErrors.peso || ''}
                    disabled={loading} sx={{flex:1, minWidth: '150px'}}
                />
                <FormControl fullWidth margin="dense" error={!!localErrors.idPlanta} sx={{flex:1, minWidth: '200px'}}>
                    <InputLabel id="planta-select-label" required>Planta Destino</InputLabel>
                    <Select labelId="planta-select-label" label="Planta Destino" value={idPlanta}
                        onChange={(e) => {setIdPlanta(e.target.value as number); handleInputChange('idPlanta');}}
                        disabled={loading || loadingDropdowns}
                    >
                        <MenuItem value="" disabled><em>Seleccione una planta</em></MenuItem>
                        {plantas.map((p) => (<MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>))}
                    </Select>
                    {localErrors.idPlanta && <Typography color="error" variant="caption">{localErrors.idPlanta}</Typography>}
                </FormControl>
            </Box>
            <Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
                 <TextField label="Nro. Remito" value={remito} required
                    onChange={(e) => {setRemito(e.target.value); handleInputChange('remito');}}
                    margin="dense" fullWidth error={!!localErrors.remito} helperText={localErrors.remito || ''}
                    disabled={loading} sx={{flex:1, minWidth: '200px'}}
                />
                <TextField label="Fecha Remito" type="date" value={fechaRemito} required
                    onChange={(e) => {setFechaRemito(e.target.value); handleInputChange('fechaRemito');}}
                    margin="dense" fullWidth error={!!localErrors.fechaRemito} helperText={localErrors.fechaRemito || ''}
                    disabled={loading} InputLabelProps={{ shrink: true }} sx={{flex:1, minWidth: '200px'}}
                />
            </Box>

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</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} /> : 'Ingresar Bobina'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default StockBobinaIngresoFormModal;