import React, { useState, useEffect } from 'react';
import {
  Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
  FormControl, InputLabel, Select, MenuItem
} from '@mui/material';
import type { StockBobinaDto } from '../../../models/dtos/Impresion/StockBobinaDto';
import type { UpdateStockBobinaDto } from '../../../models/dtos/Impresion/UpdateStockBobinaDto';
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 que StockBobinaIngresoFormModal) ... */
  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 StockBobinaEditFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (idBobina: number, data: UpdateStockBobinaDto) => Promise<void>;
  initialData: StockBobinaDto | null; // Siempre habrá initialData para editar
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const StockBobinaEditFormModal: React.FC<StockBobinaEditFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  initialData,
  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); // Ya está arriba, pero por claridad
      try {
        // --- CAMBIO: Usar los servicios que devuelven DTOs de dropdown si los tienes ---
        const [tiposData, plantasData] = await Promise.all([
          tipoBobinaService.getAllTiposBobina(), // Asume que existe y devuelve TipoBobinaDropdownDto[]
          plantaService.getAllPlantas()        // Asume que existe y devuelve PlantaDropdownDto[]
        ]);
        setTiposBobina(tiposData);
        setPlantas(plantasData);
      } catch (error) {
        console.error("Error al cargar datos para dropdowns (StockBobina Edit)", error);
        setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar tipos/plantas.' }));
      } finally {
        setLoadingDropdowns(false);
      }
    };
    if (open) { // Solo fetchear si el modal está abierto
      fetchDropdownData();
    }
  }, [open]);

  useEffect(() => {
    if (open && initialData && !loadingDropdowns) { // <<--- ESPERAR A QUE loadingDropdowns SEA FALSE
      setIdTipoBobina(initialData.idTipoBobina || '');
      setNroBobina(initialData.nroBobina || '');
      setPeso(initialData.peso?.toString() || '');
      setIdPlanta(initialData.idPlanta || '');
      setRemito(initialData.remito || '');
      setFechaRemito(initialData.fechaRemito ? initialData.fechaRemito.split('T')[0] : ''); // Formatear si es necesario
      setLocalErrors({});
      clearErrorMessage();
    } else if (open && !initialData) { // Si se abre para crear (aunque este modal es de edición)
      // Resetear o manejar como prefieras
      setIdTipoBobina(''); setNroBobina(''); setPeso(''); setIdPlanta('');
      setRemito(''); setFechaRemito(new Date().toISOString().split('T')[0]);
    }
  }, [open, initialData, loadingDropdowns, clearErrorMessage]); // Añadir loadingDropdowns

  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() || !initialData) return; // initialData siempre debería existir aquí

    setLoading(true);
    try {
      const dataToSubmit: UpdateStockBobinaDto = {
        idTipoBobina: Number(idTipoBobina),
        nroBobina,
        peso: parseInt(peso, 10),
        idPlanta: Number(idPlanta),
        remito,
        fechaRemito,
      };
      await onSubmit(initialData.idBobina, dataToSubmit);
      onClose();
    } catch (error: any) {
      console.error("Error en submit de StockBobinaEditFormModal:", error);
      // El error de API lo maneja la página que llama a este modal
    } finally {
      setLoading(false);
    }
  };

  if (!initialData && open) { // Si se abre sin initialData (no debería pasar para un modal de EDICIÓN)
    return <Modal open={open} onClose={onClose}><Box sx={modalStyle}><Alert severity="error">Error: No se proporcionaron datos iniciales para editar.</Alert></Box></Modal>;
  }
  if (!open) return null; // No renderizar nada si no está abierto

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          Editar Datos de Bobina (ID: {initialData?.idBobina || 'N/A'}) {/* Usar initialData?.idBobina */}
        </Typography>
        {loadingDropdowns ? <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box> : (
          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
              <Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
                <FormControl fullWidth margin="dense" error={!!localErrors.idTipoBobina} sx={{ flex: 1, minWidth: '200px' }}>
                  <InputLabel id="edit-tipo-bobina-select-label" required>Tipo Bobina</InputLabel>
                  <Select
                    labelId="edit-tipo-bobina-select-label"
                    label="Tipo Bobina"
                    value={idTipoBobina} // MUI Select maneja bien number/string si los values de MenuItem son consistentes
                    onChange={(e) => { setIdTipoBobina(e.target.value as number | string); 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' }} autoFocus
                />
              </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="edit-planta-select-label" required>Planta Destino</InputLabel>
                  <Select
                    labelId="edit-planta-select-label"
                    label="Planta Destino"
                    value={idPlanta}
                    onChange={(e) => { setIdPlanta(e.target.value as number | string); 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>
            </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} /> : 'Guardar Cambios'}
              </Button>
            </Box>
          </Box>
        )}
      </Box>
    </Modal>
  );
};

export default StockBobinaEditFormModal;