import React, { useState, useEffect } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert
} from '@mui/material';
import type { NovedadCanillaDto } from '../../../models/dtos/Distribucion/NovedadCanillaDto';
import type { CreateNovedadCanillaDto } from '../../../models/dtos/Distribucion/CreateNovedadCanillaDto';
import type { UpdateNovedadCanillaDto } from '../../../models/dtos/Distribucion/UpdateNovedadCanillaDto';

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

interface NovedadCanillaFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateNovedadCanillaDto | UpdateNovedadCanillaDto, idNovedad?: number) => Promise<void>;
  // Props para pasar datos necesarios:
  idCanilla: number | null; // Necesario para crear una nueva novedad
  nombreCanilla?: string;   // Para mostrar en el título
  initialData?: NovedadCanillaDto | null; // Para editar
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const NovedadCanillaFormModal: React.FC<NovedadCanillaFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  idCanilla,
  nombreCanilla,
  initialData,
  errorMessage,
  clearErrorMessage
}) => {
  const [fecha, setFecha] = useState<string>('');
  const [detalle, setDetalle] = useState('');
  const [loading, setLoading] = useState(false);
  const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});

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

  useEffect(() => {
    if (open) {
      setFecha(initialData?.fecha ? initialData.fecha.split('T')[0] : new Date().toISOString().split('T')[0]);
      setDetalle(initialData?.detalle || '');
      setLocalErrors({});
      clearErrorMessage();
    }
  }, [open, initialData, clearErrorMessage]);

  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    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 (YYYY-MM-DD).';
    
    if (!detalle.trim()) errors.detalle = 'El detalle es obligatorio.';
    else if (detalle.trim().length > 250) errors.detalle = 'El detalle no puede exceder los 250 caracteres.';

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

  const handleInputChange = (fieldName: 'fecha' | 'detalle') => {
    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: UpdateNovedadCanillaDto = { detalle };
        await onSubmit(dataToSubmit, initialData.idNovedad);
      } else if (idCanilla) { // Asegurarse que idCanilla esté disponible para creación
        const dataToSubmit: CreateNovedadCanillaDto = {
            idCanilla: idCanilla, // Tomado de props
            fecha,
            detalle,
        };
        await onSubmit(dataToSubmit);
      } else {
        // Esto no debería pasar si la lógica de la página que llama al modal es correcta
        setLocalErrors(prev => ({...prev, general: "No se proporcionó ID de Canillita para crear la novedad."}))
        setLoading(false);
        return;
      }
      onClose();
    } catch (error: any) {
      // El error de API es manejado por la página padre a través de 'errorMessage'
      console.error("Error en submit de NovedadCanillaFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          {isEditing ? 'Editar Novedad' : `Agregar Novedad para ${nombreCanilla || 'Canillita'}`}
        </Typography>
        <Typography variant="body2" color="text.secondary" gutterBottom>
          {isEditing && initialData ? `Editando Novedad ID: ${initialData.idNovedad}` : `Canillita ID: ${idCanilla || 'N/A'}`}
        </Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            <TextField
                label="Fecha Novedad"
                type="date"
                value={fecha}
                required
                onChange={(e) => {setFecha(e.target.value); handleInputChange('fecha');}}
                margin="normal"
                fullWidth
                error={!!localErrors.fecha}
                helperText={localErrors.fecha || ''}
                disabled={loading || isEditing} // Fecha no se edita
                InputLabelProps={{ shrink: true }}
                autoFocus={!isEditing}
            />
            <TextField
                label="Detalle Novedad"
                value={detalle}
                required
                onChange={(e) => {setDetalle(e.target.value); handleInputChange('detalle');}}
                margin="normal"
                fullWidth
                multiline
                rows={4}
                error={!!localErrors.detalle}
                helperText={localErrors.detalle || (detalle ? `${250 - detalle.length} caracteres restantes` : '')}
                disabled={loading}
                inputProps={{ maxLength: 250 }}
            />

          {errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
          {localErrors.general && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.general}</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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar Novedad')}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default NovedadCanillaFormModal;