// src/components/Modals/TiradaFormModal.tsx
import React, { useState, useEffect, useCallback } from 'react';
import {
    Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
    FormControl, InputLabel, Select, MenuItem, IconButton, Paper,
    Table, TableHead, TableRow, TableCell, TableBody,
    TableContainer
} from '@mui/material';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import type { CreateTiradaRequestDto } from '../../../models/dtos/Impresion/CreateTiradaRequestDto';
import type { PublicacionDto } from '../../../models/dtos/Distribucion/PublicacionDto';
import type { PlantaDto } from '../../../models/dtos/Impresion/PlantaDto';
import type { PubliSeccionDto } from '../../../models/dtos/Distribucion/PubliSeccionDto';
import publicacionService from '../../../services/Distribucion/publicacionService';
import plantaService from '../../../services/Impresion/plantaService';
import publiSeccionService from '../../../services/Distribucion/publiSeccionService';

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

// CORREGIDO: Ajustar el tipo para los inputs. Usaremos string para los inputs,
// y convertiremos a number al hacer submit o al validar donde sea necesario.
interface DetalleSeccionFormState {
    idSeccion: number | ''; // Permitir string vacío para el Select no seleccionado
    nombreSeccion?: string;
    cantPag: string; // TextField de cantPag siempre es string
    idTemporal: string; // Para la key de React
}


interface TiradaFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateTiradaRequestDto) => Promise<void>;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const TiradaFormModal: React.FC<TiradaFormModalProps> = ({
  open,
  onClose,
  onSubmit,
  errorMessage,
  clearErrorMessage
}) => {
  const [idPublicacion, setIdPublicacion] = useState<number | string>('');
  const [fecha, setFecha] = useState<string>(new Date().toISOString().split('T')[0]);
  const [idPlanta, setIdPlanta] = useState<number | string>('');
  const [ejemplares, setEjemplares] = useState<string>('');
  // CORREGIDO: Usar el nuevo tipo para el estado del formulario de secciones
  const [seccionesDeTirada, setSeccionesDeTirada] = useState<DetalleSeccionFormState[]>([]);

  const [publicaciones, setPublicaciones] = useState<PublicacionDto[]>([]);
  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
  const [seccionesPublicacion, setSeccionesPublicacion] = useState<PubliSeccionDto[]>([]);

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

  const resetForm = () => {
    setIdPublicacion('');
    setFecha(new Date().toISOString().split('T')[0]);
    setIdPlanta('');
    setEjemplares('');
    setSeccionesDeTirada([]);
    setSeccionesPublicacion([]);
    setLocalErrors({});
    clearErrorMessage();
  };

  const fetchInitialDropdowns = useCallback(async () => {
    setLoadingDropdowns(true);
    try {
        const [pubsData, plantasData] = await Promise.all([
            publicacionService.getAllPublicaciones(undefined, undefined, true),
            plantaService.getAllPlantas()
        ]);
        setPublicaciones(pubsData);
        setPlantas(plantasData);
    } catch (error) {
        console.error("Error al cargar publicaciones/plantas", error);
        setLocalErrors(prev => ({...prev, dropdowns: 'Error al cargar datos iniciales.'}));
    } finally {
        setLoadingDropdowns(false);
    }
  }, []);

  useEffect(() => {
    if (open) {
        resetForm(); // Llama a resetForm aquí
        fetchInitialDropdowns();
    }
  }, [open, fetchInitialDropdowns]); // resetForm no necesita estar en las dependencias si su contenido no cambia basado en props/estado que también estén en las dependencias.

  const fetchSeccionesDePublicacion = useCallback(async (pubId: number) => {
    if (!pubId) {
        setSeccionesPublicacion([]);
        setSeccionesDeTirada([]);
        return;
    }
    setLoadingDropdowns(true);
    try {
        const data = await publiSeccionService.getSeccionesPorPublicacion(pubId, true);
        setSeccionesPublicacion(data);
        setSeccionesDeTirada([]);
    } catch (error) {
        console.error("Error al cargar secciones de la publicación", error);
        setLocalErrors(prev => ({...prev, secciones: 'Error al cargar secciones.'}));
    } finally {
        setLoadingDropdowns(false);
    }
  }, []);

  useEffect(() => {
    if (idPublicacion) {
        fetchSeccionesDePublicacion(Number(idPublicacion));
    } else {
        setSeccionesPublicacion([]);
        setSeccionesDeTirada([]);
    }
  }, [idPublicacion, fetchSeccionesDePublicacion]);


  const validate = (): boolean => {
    const errors: { [key: string]: string | null } = {};
    if (!idPublicacion) errors.idPublicacion = 'Seleccione una publicación.';
    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 (!idPlanta) errors.idPlanta = 'Seleccione una planta.';
    if (!ejemplares.trim() || isNaN(parseInt(ejemplares)) || parseInt(ejemplares) <= 0) errors.ejemplares = 'Ejemplares debe ser un número positivo.';
    
    if (seccionesDeTirada.length === 0) {
        errors.seccionesArray = 'Debe agregar al menos una sección a la tirada.';
    } else {
        seccionesDeTirada.forEach((sec, index) => {
            if (sec.idSeccion === '') errors[`seccion_${index}_id`] = `Fila ${index + 1}: Debe seleccionar una sección.`;
            if (!sec.cantPag.trim() || isNaN(Number(sec.cantPag)) || Number(sec.cantPag) <= 0) {
                 errors[`seccion_${index}_pag`] = `Fila ${index + 1}: Cant. Páginas debe ser un número positivo.`;
            }
        });
    }

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

  const handleAddSeccion = () => {
    setSeccionesDeTirada([...seccionesDeTirada, { idSeccion: '', cantPag: '', nombreSeccion: '', idTemporal: crypto.randomUUID() }]);
     if (localErrors.seccionesArray) setLocalErrors(prev => ({ ...prev, seccionesArray: null }));
  };
  const handleRemoveSeccion = (index: number) => {
    setSeccionesDeTirada(seccionesDeTirada.filter((_, i) => i !== index));
  };

  const handleSeccionChange = (index: number, field: 'idSeccion' | 'cantPag', value: string | number) => {
    const nuevasSecciones = [...seccionesDeTirada];
    const targetSeccion = nuevasSecciones[index];

    if (field === 'idSeccion') {
        const numValue = Number(value); // El valor del Select es string, pero lo guardamos como number | ''
        targetSeccion.idSeccion = numValue === 0 ? '' : numValue; // Si es 0 (placeholder), guardar ''
        const seccionSeleccionada = seccionesPublicacion.find(s => s.idSeccion === numValue);
        targetSeccion.nombreSeccion = seccionSeleccionada?.nombre || '';
    } else { // cantPag
        targetSeccion.cantPag = value as string; // Guardar como string, validar como número después
    }
    setSeccionesDeTirada(nuevasSecciones);
    if (localErrors[`seccion_${index}_id`]) setLocalErrors(prev => ({ ...prev, [`seccion_${index}_id`]: null }));
    if (localErrors[`seccion_${index}_pag`]) setLocalErrors(prev => ({ ...prev, [`seccion_${index}_pag`]: null }));
  };


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

    setLoading(true);
    try {
      const dataToSubmit: CreateTiradaRequestDto = {
          idPublicacion: Number(idPublicacion),
          fecha,
          idPlanta: Number(idPlanta),
          ejemplares: parseInt(ejemplares, 10),
          // CORREGIDO: Asegurar que los datos de secciones sean números
          secciones: seccionesDeTirada.map(s => ({
             idSeccion: Number(s.idSeccion), // Convertir a número aquí
             cantPag: Number(s.cantPag)     // Convertir a número aquí
            }))
      };
      await onSubmit(dataToSubmit);
      onClose();
    } catch (error: any) {
      console.error("Error en submit de TiradaFormModal:", error);
    } finally {
       setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>Registrar Nueva Tirada</Typography>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
            {/* ... (campos de Publicacion, Fecha, Planta, Ejemplares sin cambios) ... */}
             <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
                <FormControl fullWidth margin="dense" error={!!localErrors.idPublicacion} sx={{flex:1, minWidth: 200}}>
                    <InputLabel id="publicacion-tirada-select-label" required>Publicación</InputLabel>
                    <Select labelId="publicacion-tirada-select-label" label="Publicación" value={idPublicacion}
                        onChange={(e) => { setIdPublicacion(e.target.value as number); setLocalErrors(p => ({...p, idPublicacion: null})); }}
                        disabled={loading || loadingDropdowns}
                    >
                        <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" sx={{ml:1.5}}>{localErrors.idPublicacion}</Typography>}
                </FormControl>
                 <TextField label="Fecha Tirada" type="date" value={fecha} required
                    onChange={(e) => {setFecha(e.target.value); setLocalErrors(p => ({...p, fecha: null}));}}
                    margin="dense" error={!!localErrors.fecha} helperText={localErrors.fecha || ''}
                    disabled={loading} InputLabelProps={{ shrink: true }} sx={{flex:1, minWidth: 160}}
                />
            </Box>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
                 <FormControl fullWidth margin="dense" error={!!localErrors.idPlanta} sx={{flex:1, minWidth: 200}}>
                    <InputLabel id="planta-tirada-select-label" required>Planta</InputLabel>
                    <Select labelId="planta-tirada-select-label" label="Planta" value={idPlanta}
                        onChange={(e) => {setIdPlanta(e.target.value as number); setLocalErrors(p => ({...p, idPlanta: null}));}}
                        disabled={loading || loadingDropdowns}
                    >
                        <MenuItem value="" disabled><em>Seleccione</em></MenuItem>
                        {plantas.map((p) => (<MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>))}
                    </Select>
                     {localErrors.idPlanta && <Typography color="error" variant="caption" sx={{ml:1.5}}>{localErrors.idPlanta}</Typography>}
                </FormControl>
                <TextField label="Total Ejemplares" type="number" value={ejemplares} required
                    onChange={(e) => {setEjemplares(e.target.value); setLocalErrors(p => ({...p, ejemplares: null}));}}
                    margin="dense" error={!!localErrors.ejemplares} helperText={localErrors.ejemplares || ''}
                    disabled={loading} sx={{flex:1, minWidth: 150}}
                    inputProps={{min:1}}
                />
            </Box>


            <Typography variant="subtitle1" sx={{mt: 2, mb:1}}>Detalle de Secciones Impresas:</Typography>
            {localErrors.seccionesArray && <Alert severity="error" sx={{mb:1}}>{localErrors.seccionesArray}</Alert>}
            <Paper variant="outlined" sx={{p:1, mb:2, maxHeight: '250px', overflowY: 'auto'}}> {/* Permitir scroll en tabla de secciones */}
                <TableContainer>
                    <Table size="small" stickyHeader> {/* stickyHeader para que cabecera quede fija */}
                        <TableHead>
                            <TableRow>
                                <TableCell sx={{fontWeight:'bold', minWidth: 200}}>Sección</TableCell>
                                <TableCell sx={{fontWeight:'bold', width: '150px'}}>Cant. Páginas</TableCell>
                                <TableCell align="right" sx={{width: '50px'}}></TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {seccionesDeTirada.map((sec, index) => (
                                <TableRow key={sec.idTemporal || index}> {/* Usar idTemporal para key */}
                                    <TableCell sx={{py:0.5}}>
                                        <FormControl fullWidth size="small" error={!!localErrors[`seccion_${index}_id`]}>
                                            <Select value={sec.idSeccion} // Ahora idSeccion es number | ''
                                                onChange={(e) => handleSeccionChange(index, 'idSeccion', e.target.value as number | '')}
                                                disabled={loading || loadingDropdowns || seccionesPublicacion.length === 0}
                                                displayEmpty
                                            >
                                                <MenuItem value="" disabled><em>Seleccionar</em></MenuItem>
                                                {seccionesPublicacion.map(s => <MenuItem key={s.idSeccion} value={s.idSeccion}>{s.nombre}</MenuItem>)}
                                            </Select>
                                            {localErrors[`seccion_${index}_id`] && <Typography color="error" variant="caption">{localErrors[`seccion_${index}_id`]}</Typography>}
                                        </FormControl>
                                    </TableCell>
                                    <TableCell sx={{py:0.5}}>
                                         <TextField type="number" size="small" fullWidth value={sec.cantPag}
                                            onChange={(e) => handleSeccionChange(index, 'cantPag', e.target.value)}
                                            error={!!localErrors[`seccion_${index}_pag`]}
                                            helperText={localErrors[`seccion_${index}_pag`] || ''}
                                            disabled={loading}
                                            inputProps={{min:1}}
                                        />
                                    </TableCell>
                                    <TableCell align="right" sx={{py:0.5}}>
                                        <IconButton onClick={() => handleRemoveSeccion(index)} size="small" color="error" disabled={loading}>
                                            <DeleteOutlineIcon />
                                        </IconButton>
                                    </TableCell>
                                </TableRow>
                            ))}
                             {seccionesDeTirada.length === 0 && (
                                <TableRow>
                                    <TableCell colSpan={3} align="center">
                                        <Typography variant="caption" color="textSecondary">
                                            Agregue secciones a la tirada.
                                        </Typography>
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </TableContainer>
                 <Button startIcon={<AddCircleOutlineIcon />} onClick={handleAddSeccion} sx={{mt:1}} size="small" disabled={loading || !idPublicacion}>
                    Agregar Sección
                </Button>
            </Paper>

          {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} /> : 'Registrar Tirada'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default TiradaFormModal;