import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, RadioGroup, FormControlLabel, Radio
} from '@mui/material';
import type { EntradaSalidaDistDto } from '../../../models/dtos/Distribucion/EntradaSalidaDistDto';
import type { CreateEntradaSalidaDistDto } from '../../../models/dtos/Distribucion/CreateEntradaSalidaDistDto';
import type { UpdateEntradaSalidaDistDto } from '../../../models/dtos/Distribucion/UpdateEntradaSalidaDistDto';
import type { PublicacionDto } from '../../../models/dtos/Distribucion/PublicacionDto';
import type { DistribuidorDto } from '../../../models/dtos/Distribucion/DistribuidorDto';
import publicacionService from '../../../services/Distribucion/publicacionService';
import distribuidorService from '../../../services/Distribucion/distribuidorService';

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 EntradaSalidaDistFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateEntradaSalidaDistDto | UpdateEntradaSalidaDistDto, idParte?: number) => Promise<void>;
  initialData?: EntradaSalidaDistDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const EntradaSalidaDistFormModal: React.FC<EntradaSalidaDistFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [idPublicacion, setIdPublicacion] = useState<number | string>('');
  const [idDistribuidor, setIdDistribuidor] = useState<number | string>('');
  const [fecha, setFecha] = useState<string>(new Date().toISOString().split('T')[0]);
  const [tipoMovimiento, setTipoMovimiento] = useState<'Salida' | 'Entrada'>('Salida');
  const [cantidad, setCantidad] = useState<string>('');
  const [remito, setRemito] = useState<string>('');
  const [observacion, setObservacion] = useState('');

  const [publicaciones, setPublicaciones] = useState<PublicacionDto[]>([]);
  const [distribuidores, setDistribuidores] = useState<DistribuidorDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [loadingDropdowns, setLoadingDropdowns] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

  const isEditing = Boolean(initialData);

  useEffect(() => {
    const fetchDropdownData = async () => {
        setLoadingDropdowns(true);
        try {
            const [pubsData, distData] = await Promise.all([
                publicacionService.getAllPublicaciones(undefined, undefined, true),
                distribuidorService.getAllDistribuidores() // Asume que este servicio existe y funciona
            ]);
            setPublicaciones(pubsData);
            setDistribuidores(distData);
        } catch (error) {
            console.error("Error al cargar datos para dropdowns", error);
            setLocalErrors(prev => ({...prev, dropdowns: 'Error al cargar datos necesarios.'}));
        } finally {
            setLoadingDropdowns(false);
        }
    };

    if (open) {
        fetchDropdownData();
        setIdPublicacion(initialData?.idPublicacion || '');
        setIdDistribuidor(initialData?.idDistribuidor || '');
        setFecha(initialData?.fecha || new Date().toISOString().split('T')[0]);
        setTipoMovimiento(initialData?.tipoMovimiento || 'Salida');
        setCantidad(initialData?.cantidad?.toString() || '');
        setRemito(initialData?.remito?.toString() || '');
        setObservacion(initialData?.observacion || '');
        setLocalErrors({});
    }
  }, [open, initialData]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!idPublicacion) errors.idPublicacion = 'Seleccione una publicación.';
    if (!idDistribuidor) errors.idDistribuidor = 'Seleccione un distribuidor.';
    if (!fecha.trim()) errors.fecha = 'La fecha es obligatoria.';
    else if (!/^\d{4}-\d{2}-\d{2}$/.test(fecha)) errors.fecha = 'Formato de fecha inválido.';
    if (!tipoMovimiento) errors.tipoMovimiento = 'Seleccione un tipo de movimiento.';
    if (!cantidad.trim() || isNaN(parseInt(cantidad)) || parseInt(cantidad) <= 0) {
        errors.cantidad = 'La cantidad debe ser un número positivo.';
    }
    if (!remito.trim() || isNaN(parseInt(remito)) || parseInt(remito) <= 0) { // Remito obligatorio en creación y edición
        errors.remito = 'El Nro. Remito es obligatorio y debe ser un número positivo.';
    }
    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 {
      if (isEditing && initialData) {
        const dataToSubmit: UpdateEntradaSalidaDistDto = {
            cantidad: parseInt(cantidad, 10),
            observacion: observacion || undefined,
            // Remito no se edita según el DTO de Update
        };
        await onSubmit(dataToSubmit, initialData.idParte);
      } else {
        const dataToSubmit: CreateEntradaSalidaDistDto = {
            idPublicacion: Number(idPublicacion),
            idDistribuidor: Number(idDistribuidor),
            fecha,
            tipoMovimiento,
            cantidad: parseInt(cantidad, 10),
            remito: parseInt(remito, 10),
            observacion: observacion || undefined,
        };
        await onSubmit(dataToSubmit);
      }
      onClose();
    } catch (error: any) {
      console.error("Error en submit de EntradaSalidaDistFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Movimiento Distribuidor' : 'Registrar Movimiento Distribuidor'}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                <FormControl fullWidth margin="dense" error={!!localErrors.idPublicacion} required>
                    <InputLabel id="publicacion-esd-select-label">Publicación</InputLabel>
                    <Select labelId="publicacion-esd-select-label" label="Publicación" value={idPublicacion}
                        onChange={(e) => {setIdPublicacion(e.target.value as number); handleInputChange('idPublicacion');}}
                        disabled={loading || loadingDropdowns || isEditing}
                    >
                        <MenuItem value="" disabled><em>Seleccione</em></MenuItem>
                        {publicaciones.map((p) => (<MenuItem key={p.idPublicacion} value={p.idPublicacion}>{p.nombre} ({p.nombreEmpresa})</MenuItem>))}
                    </Select>
                    {localErrors.idPublicacion && <Typography color="error" variant="caption">{localErrors.idPublicacion}</Typography>}
                </FormControl>

                <FormControl fullWidth margin="dense" error={!!localErrors.idDistribuidor} required>
                    <InputLabel id="distribuidor-esd-select-label">Distribuidor</InputLabel>
                    <Select labelId="distribuidor-esd-select-label" label="Distribuidor" value={idDistribuidor}
                        onChange={(e) => {setIdDistribuidor(e.target.value as number); handleInputChange('idDistribuidor');}}
                        disabled={loading || loadingDropdowns || isEditing}
                    >
                        <MenuItem value="" disabled><em>Seleccione</em></MenuItem>
                        {distribuidores.map((d) => (<MenuItem key={d.idDistribuidor} value={d.idDistribuidor}>{d.nombre}</MenuItem>))}
                    </Select>
                    {localErrors.idDistribuidor && <Typography color="error" variant="caption">{localErrors.idDistribuidor}</Typography>}
                </FormControl>

                <TextField label="Fecha Movimiento" type="date" value={fecha} required
                    onChange={(e) => {setFecha(e.target.value); handleInputChange('fecha');}}
                    margin="dense" fullWidth error={!!localErrors.fecha} helperText={localErrors.fecha || ''}
                    disabled={loading || isEditing} InputLabelProps={{ shrink: true }} autoFocus={!isEditing}
                />

                <FormControl component="fieldset" margin="dense" error={!!localErrors.tipoMovimiento} required>
                    <Typography component="legend" variant="body2" sx={{mb:0.5, fontSize:'0.8rem'}}>Tipo Movimiento</Typography>
                    <RadioGroup row value={tipoMovimiento} onChange={(e) => {setTipoMovimiento(e.target.value as 'Salida' | 'Entrada'); handleInputChange('tipoMovimiento');}} >
                        <FormControlLabel value="Salida" control={<Radio size="small"/>} label="Salida" disabled={loading || isEditing}/>
                        <FormControlLabel value="Entrada" control={<Radio size="small"/>} label="Entrada" disabled={loading || isEditing}/>
                    </RadioGroup>
                     {localErrors.tipoMovimiento && <Typography color="error" variant="caption">{localErrors.tipoMovimiento}</Typography>}
                </FormControl>

                 <TextField label="Nro. Remito" type="number" value={remito} required
                    onChange={(e) => {setRemito(e.target.value); handleInputChange('remito');}}
                    margin="dense" fullWidth error={!!localErrors.remito} helperText={localErrors.remito || ''}
                    disabled={loading || isEditing} inputProps={{min:1}}
                />

                <TextField label="Cantidad" type="number" value={cantidad} required
                    onChange={(e) => {setCantidad(e.target.value); handleInputChange('cantidad');}}
                    margin="dense" fullWidth error={!!localErrors.cantidad} helperText={localErrors.cantidad || ''}
                    disabled={loading} inputProps={{min:1}}
                />
                <TextField label="Observación (Opcional)" value={observacion}
                    onChange={(e) => setObservacion(e.target.value)}
                    margin="dense" fullWidth multiline rows={2} disabled={loading}
                />
            </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} /> : (isEditing ? 'Guardar Cambios' : 'Registrar Movimiento')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default EntradaSalidaDistFormModal;