// src/components/Modals/TiradaFormModal.tsx
import React, { useState, useEffect, useCallback, useRef } 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 { TiradaDto } from '../../../models/dtos/Impresion/TiradaDto';
import type { CreateTiradaRequestDto } from '../../../models/dtos/Impresion/CreateTiradaRequestDto';
import type { UpdateTiradaRequestDto } from '../../../models/dtos/Impresion/UpdateTiradaRequestDto';
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'
};

interface DetalleSeccionFormState {
    idRegPublicacionSeccion: number;
    idSeccion: number | '';
    nombreSeccion?: string;
    cantPag: string;
    idTemporal: string;
}

interface TiradaFormModalProps {
    open: boolean;
    onClose: () => void;
    onSubmit: (data: any, isEdit: boolean) => Promise<void>; // Any para flexibilidad, luego tipar bien
    errorMessage?: string | null;
    clearErrorMessage: () => void;
    tiradaToEdit?: TiradaDto | null;
}

const TiradaFormModal: React.FC<TiradaFormModalProps> = ({
    open,
    onClose,
    onSubmit,
    errorMessage,
    clearErrorMessage,
    tiradaToEdit
}) => {
    const isEditMode = !!tiradaToEdit;

    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>('');
    const [seccionesDeTirada, setSeccionesDeTirada] = useState<DetalleSeccionFormState[]>([]);

    const [publicaciones, setPublicaciones] = useState<PublicacionDto[]>([]);
    const [plantas, setPlantas] = useState<PlantaDto[]>([]);
    const [seccionesPublicacion, setSeccionesPublicacion] = useState<PubliSeccionDto[]>([]);
    const tableContainerRef = useRef<HTMLDivElement>(null);
    const prevSeccionesLength = useRef(seccionesDeTirada.length);

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


    const resetForm = useCallback(() => {
        setIdPublicacion('');
        setFecha(new Date().toISOString().split('T')[0]);
        setIdPlanta('');
        setEjemplares('');
        setSeccionesDeTirada([]);
        setSeccionesPublicacion([]); // Asegurarse de limpiar esto también
        setLocalErrors({});
        clearErrorMessage();
    }, [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 {
            // No establecer a false aquí todavía, la carga de secciones es lo que realmente importa.
            // setLoadingDropdowns(false); // Eliminado o movido
        }
    }, []);

    const fetchSeccionesDePublicacion = useCallback(async (pubId: number) => {
        if (!pubId) {
            setSeccionesPublicacion([]);
            return []; // Retorna un array vacío para coherencia
        }
        setLoadingDropdowns(true); // Mantenerlo loading hasta que esto termine
        try {
            const data = await publiSeccionService.getSeccionesPorPublicacion(pubId, true);
            setSeccionesPublicacion(data);
            return data; // Retornar la data para usarla inmediatamente
        } catch (error) {
            console.error("Error al cargar secciones de la publicación", error);
            setLocalErrors(prev => ({ ...prev, secciones: 'Error al cargar secciones.' }));
            return []; // Retornar array vacío en caso de error
        } finally {
            setLoadingDropdowns(false); // Aquí se puede poner a false, ya que todas las dependencias están cargadas
        }
    }, []);

    useEffect(() => {
        // Comprobar si se ha añadido una nueva fila
        if (seccionesDeTirada.length > prevSeccionesLength.current) {
            const container = tableContainerRef.current;
            if (container) {
                // Desplazar el contenedor hasta el final
                // Esto se ejecuta después del render, por lo que scrollHeight ya está actualizado
                container.scrollTop = container.scrollHeight;
            }
        }
        // Actualizar la longitud anterior para la próxima comparación
        prevSeccionesLength.current = seccionesDeTirada.length;
    }, [seccionesDeTirada]); // Este efecto depende del array de secciones

    useEffect(() => {
        if (!open) {
            resetForm();
            return;
        }

        clearErrorMessage();
        setLocalErrors({});
        setLoadingDropdowns(true); // Siempre iniciar con loading true cuando el modal abre

        const loadData = async () => {
            // 1. Cargar datos base (Publicaciones y Plantas)
            await fetchInitialDropdowns(); // Esto actualiza el estado de `publicaciones` y `plantas`

            if (isEditMode && tiradaToEdit) {
                // Modo Edición:
                setIdPublicacion(tiradaToEdit.idPublicacion);
                setFecha(tiradaToEdit.fecha);
                setIdPlanta(tiradaToEdit.idPlanta);
                setEjemplares(String(tiradaToEdit.ejemplares));

                // 2. Cargar secciones de la publicación específica y esperar su finalización
                // `fetchSeccionesDePublicacion` ahora retorna la data.
                const loadedPubSections = await fetchSeccionesDePublicacion(tiradaToEdit.idPublicacion);

                // 3. Ahora que `seccionesPublicacion` (options para el Select) está lleno,
                // poblar `seccionesDeTirada` (values para el Select)
                const seccionesMapeadas = tiradaToEdit.seccionesImpresas.map(sec => ({
                    idRegPublicacionSeccion: sec.idRegPublicacionSeccion,
                    idSeccion: sec.idSeccion,
                    // Asegurarse de que el nombre de la sección se obtenga de las secciones cargadas
                    // para evitar "Sección Desconocida" en la UI.
                    nombreSeccion: loadedPubSections.find(ps => ps.idSeccion === sec.idSeccion)?.nombre || sec.nombreSeccion || '',
                    cantPag: String(sec.cantPag),
                    idTemporal: crypto.randomUUID()
                }));
                setSeccionesDeTirada(seccionesMapeadas);
            } else {
                // Modo Creación:
                resetForm(); // Ya hace fetchInitialDropdowns
                // Publicaciones y plantas se cargan.
                // idPublicacion aún es '', así que fetchSeccionesDePublicacion no se dispara.
                // Si el usuario selecciona una publicación, el otro useEffect lo manejará.
            }
            setLoadingDropdowns(false); // Todas las cargas asíncronas han terminado.
        };

        if (open) {
            loadData();
        }
        // Asegurarse de que fetchInitialDropdowns y resetForm estén en las dependencias
    }, [open, isEditMode, tiradaToEdit, fetchInitialDropdowns, fetchSeccionesDePublicacion, resetForm, clearErrorMessage]);

    // Este useEffect se mantiene, se encargará de reaccionar si el usuario cambia la publicación
    // en modo creación o si el idPublicacion se carga en el modo edición.
    useEffect(() => {
        if (idPublicacion && !isEditMode) { // Solo si no es modo edición y se selecciona una publicación
            fetchSeccionesDePublicacion(Number(idPublicacion));
            // Aquí no limpiamos seccionesDeTirada si no es editMode, se asume que
            // si cambian la publicación, la tabla de secciones debe resetearse.
            // Esto ya lo hace fetchSeccionesDePublicacion si idPublicacion es 0 o no tiene valor.
        } else if (!isEditMode && !idPublicacion) {
            setSeccionesPublicacion([]);
            setSeccionesDeTirada([]);
        }
    }, [idPublicacion, isEditMode, fetchSeccionesDePublicacion]);


    const validate = (): boolean => {
        const errors: { [key: string]: string | null } = {};
        if (!idPublicacion && !isEditMode) errors.idPublicacion = 'Seleccione una publicación.'; // Solo requerido en creación
        if (!fecha.trim() && !isEditMode) errors.fecha = 'La fecha es obligatoria.'; // Solo requerido en creación
        else if (!isEditMode && !/^\d{4}-\d{2}-\d{2}$/.test(fecha)) errors.fecha = 'Formato de fecha inválido.';
        if (!idPlanta && !isEditMode) errors.idPlanta = 'Seleccione una planta.'; // Solo requerido en creación
        if (!ejemplares.trim() || isNaN(parseInt(ejemplares)) || parseInt(ejemplares) <= 0) errors.ejemplares = 'Ejemplares debe ser un número positivo.';

        // Si no hay secciones en modo edición, podría ser válido si el negocio lo permite.
        // Si la lista está vacía y no es edición, sí es un error.
        if (seccionesDeTirada.length === 0 && !isEditMode) {
            errors.seccionesArray = 'Debe agregar al menos una sección a la tirada.';
        } else {
            seccionesDeTirada.forEach((sec, index) => {
                // Seccion ID es requerido siempre
                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.`;
                }
                // Validar duplicados de secciones
                const otherSections = seccionesDeTirada.filter((_, i) => i !== index);
                if (otherSections.some(s => s.idSeccion === sec.idSeccion && s.idSeccion !== '')) {
                    errors[`seccion_${index}_duplicate`] = `Fila ${index + 1}: Sección duplicada.`;
                }
            });
        }

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

    const handleAddSeccion = () => {
        setSeccionesDeTirada([...seccionesDeTirada, {
            idRegPublicacionSeccion: 0, // <-- Las nuevas secciones tienen ID de registro 0
            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 {
            let dataToSubmit: CreateTiradaRequestDto | UpdateTiradaRequestDto;

            if (isEditMode) {
                // Modo Edición: usar UpdateTiradaRequestDto y el DTO de sección detallado
                const seccionesSubmit = seccionesDeTirada.map(s => ({
                    idRegPublicacionSeccion: s.idRegPublicacionSeccion, // Pasar el ID de registro
                    idSeccion: Number(s.idSeccion),
                    cantPag: Number(s.cantPag)
                }));
                dataToSubmit = {
                    ejemplares: parseInt(ejemplares, 10),
                    secciones: seccionesSubmit
                };
            } else {
                // Modo Creación: usar CreateTiradaRequestDto
                const seccionesSubmit = seccionesDeTirada.map(s => ({
                    idSeccion: Number(s.idSeccion),
                    cantPag: Number(s.cantPag)
                }));
                dataToSubmit = {
                    idPublicacion: Number(idPublicacion),
                    fecha,
                    idPlanta: Number(idPlanta),
                    ejemplares: parseInt(ejemplares, 10),
                    secciones: seccionesSubmit
                };
            }

            await onSubmit(dataToSubmit, isEditMode); // Informar al padre si es edición
            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>
                    {isEditMode ? 'Modificar Tirada' : 'Registrar Nueva Tirada'}
                </Typography>
                <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
                    <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 || isEditMode} // Publicación siempre deshabilitada en edición
                            >
                                <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 || isEditMode} // Fecha siempre deshabilitada en edición
                            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 || isEditMode} // Planta siempre deshabilitada en edición
                            >
                                <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={{
                            mb: 2,
                            display: 'flex',
                            flexDirection: 'column',
                            maxHeight: '300px'
                        }}
                    >
                        <TableContainer ref={tableContainerRef} sx={{ flex: 1, overflowY: 'auto' }}>
                            <Table size="small" stickyHeader>
                                <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}>
                                            <TableCell sx={{ py: 0.5 }}>
                                                <FormControl fullWidth size="small" error={!!localErrors[`seccion_${index}_id`] || !!localErrors[`seccion_${index}_duplicate`]}>
                                                    <Select value={sec.idSeccion}
                                                        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>}
                                                    {localErrors[`seccion_${index}_duplicate`] && <Typography color="error" variant="caption">{localErrors[`seccion_${index}_duplicate`]}</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>

                        {/* Contenedor para el botón que actúa como un pie de página fijo */}
                        <Box
                            sx={{
                                p: 1,
                                borderTop: (theme) => `1px solid ${theme.palette.divider}`,
                                flexShrink: 0
                            }}
                        >
                            <Button
                                startIcon={<AddCircleOutlineIcon />}
                                onClick={handleAddSeccion}
                                size="small"
                                disabled={loading || !idPublicacion}
                            >
                                Agregar Sección
                            </Button>
                        </Box>
                    </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} /> : (isEditMode ? 'Guardar Cambios' : 'Registrar Tirada')}
                        </Button>
                    </Box>
                </Box>
            </Box>
        </Modal>
    );
};

export default TiradaFormModal;