import React, { useState, useEffect, useCallback } from 'react';
import {
  Box, Typography, TextField, Button, Paper, IconButton, MenuItem,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
  CircularProgress, Alert, Accordion, AccordionSummary, AccordionDetails, Chip,
  FormControl,
  InputLabel,
  Select,
  Backdrop
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import FilterListIcon from '@mui/icons-material/FilterList';

import tiradaService from '../../services/Impresion/tiradaService';
import publicacionService from '../../services/Distribucion/publicacionService'; // Para filtro
import plantaService from '../../services/Impresion/plantaService'; // Para filtro

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 { PublicacionDropdownDto } from '../../models/dtos/Distribucion/PublicacionDropdownDto';
import type { PlantaDropdownDto } from '../../models/dtos/Impresion/PlantaDropdownDto';

import TiradaFormModal from '../../components/Modals/Impresion/TiradaFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const toLocalDateString = (date: Date): string => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const GestionarTiradasPage: React.FC = () => {
  const [tiradas, setTiradas] = useState<TiradaDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  // Filtros
  const [filtroFecha, setFiltroFecha] = useState<string>(toLocalDateString(new Date()));
  const [filtroIdPublicacion, setFiltroIdPublicacion] = useState<number | string>('');
  const [filtroIdPlanta, setFiltroIdPlanta] = useState<number | string>('');

  const [publicaciones, setPublicaciones] = useState<PublicacionDropdownDto[]>([]);
  const [plantas, setPlantas] = useState<PlantaDropdownDto[]>([]);
  const [loadingFiltersDropdown, setLoadingFiltersDropdown] = useState(false);

  const [modalOpen, setModalOpen] = useState(false);
  const [tiradaAEditar, setTiradaAEditar] = useState<TiradaDto | null>(null);
  const [loadingEditData, setLoadingEditData] = useState(false);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVer = isSuperAdmin || tienePermiso("IT001");
  const puedeRegistrar = isSuperAdmin || tienePermiso("IT002");
  const puedeEliminar = isSuperAdmin || tienePermiso("IT003");
  const puedeModificar = isSuperAdmin || tienePermiso("IT004");

  const fetchFiltersDropdownData = useCallback(async () => {
    setLoadingFiltersDropdown(true);
    try {
      const [pubsData, plantasData] = await Promise.all([
        publicacionService.getPublicacionesForDropdown(true),
        plantaService.getPlantasForDropdown()
      ]);
      setPublicaciones(pubsData);
      setPlantas(plantasData);
    } catch (err) {
      console.error("Error cargando datos para filtros:", err);
      setError("Error al cargar opciones de filtro.");
    } finally {
      setLoadingFiltersDropdown(false);
    }
  }, []);

  useEffect(() => {
    fetchFiltersDropdownData();
  }, [fetchFiltersDropdownData]);

  const cargarTiradas = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección."); setLoading(false); return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const params = {
        fecha: filtroFecha || null,
        idPublicacion: filtroIdPublicacion ? Number(filtroIdPublicacion) : null,
        idPlanta: filtroIdPlanta ? Number(filtroIdPlanta) : null,
      };
      const data = await tiradaService.getTiradas(params);
      setTiradas(data);
    } catch (err) {
      console.error(err); setError('Error al cargar las tiradas.');
    } finally { setLoading(false); }
  }, [puedeVer, filtroFecha, filtroIdPublicacion, filtroIdPlanta]);

  useEffect(() => {
    cargarTiradas();
  }, [cargarTiradas]);

  const handleOpenModal = async (tirada: TiradaDto | null = null) => {
    setApiErrorMessage(null);

    if (tirada) { // Modo Edición
      setLoadingEditData(true);
      try {
        const params = {
          fecha: tirada.fecha,
          idPublicacion: tirada.idPublicacion,
          idPlanta: tirada.idPlanta
        };
        const tiradasActualizadas = await tiradaService.getTiradas(params);

        if (tiradasActualizadas.length > 0) {
          // *** PASO CLAVE: Actualizar el estado de los datos PRIMERO ***
          setTiradaAEditar(tiradasActualizadas[0]);
          // *** Y LUEGO, abrir el modal. ***
          // Esto asegura que cuando el modal se renderice por primera vez
          // debido a `open=true`, la prop `tiradaToEdit` ya tendrá el valor correcto.
          setModalOpen(true);
        } else {
          setError('La tirada que intenta editar ya no existe. Refrescando lista...');
          cargarTiradas();
        }
      } catch (err) {
        console.error("Error al cargar datos para editar:", err);
        setError('No se pudieron cargar los datos para la edición.');
      } finally {
        setLoadingEditData(false);
      }
    } else { // Modo Creación
      // En modo creación, no hay datos que cargar, así que es seguro hacerlo en cualquier orden.
      setTiradaAEditar(null);
      setModalOpen(true);
    }
  };

  const handleCloseModal = () => {
    setModalOpen(false);
    setTiradaAEditar(null);
  };

  const handleSubmitModal = async (data: CreateTiradaRequestDto | UpdateTiradaRequestDto, isEdit: boolean) => {
    setApiErrorMessage(null);
    try {
      if (isEdit && tiradaAEditar) {
        // Modo Edición
        await tiradaService.modificarTirada(
          tiradaAEditar.fecha,
          tiradaAEditar.idPublicacion,
          tiradaAEditar.idPlanta,
          data as UpdateTiradaRequestDto
        );
      } else {
        // Modo Creación
        await tiradaService.registrarTirada(data as CreateTiradaRequestDto);
      }
      cargarTiradas(); // Recargar la lista en ambos casos
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message
        ? err.response.data.message
        : `Error al ${isEdit ? 'modificar' : 'registrar'} la tirada.`;
      setApiErrorMessage(message);
      throw err; // Re-lanzar para que el modal no se cierre
    }
  };

  const handleDeleteTirada = async (tirada: TiradaDto) => {
    if (window.confirm(`¿Seguro de eliminar la tirada del ${tirada.fecha} para "${tirada.nombrePublicacion}" en planta "${tirada.nombrePlanta}"? Esta acción eliminará el total de ejemplares y todas sus secciones asociadas.`)) {
      setApiErrorMessage(null);
      try {
        await tiradaService.deleteTiradaCompleta(tirada.fecha, tirada.idPublicacion, tirada.idPlanta);
        cargarTiradas();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar la tirada.';
        setApiErrorMessage(message);
      }
    }
  };

  const formatDate = (dateString?: string | null) => {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleDateString('es-AR', { timeZone: 'UTC' });
  };


  if (!loading && !puedeVer && !loadingFiltersDropdown) return <Box sx={{ p: 2 }}><Alert severity="error">{error || "Acceso denegado."}</Alert></Box>;

  return (
    <Box sx={{ p: 1 }}>
      {/* Añadimos un Backdrop para el feedback visual durante la carga de los datos de edición */}
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={loadingEditData}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
      <Typography variant="h5" gutterBottom>Gestión de Tiradas</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
        <Typography variant="h6" gutterBottom>Filtros <FilterListIcon fontSize="small" /></Typography>
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center', mb: 2 }}>
          <TextField
            label="Fecha"
            type="date"
            size="small"
            value={filtroFecha}
            onChange={(e) => setFiltroFecha(e.target.value)}
            InputLabelProps={{ shrink: true }}
            sx={{ minWidth: 170 }}
          />
          <FormControl size="small" sx={{ minWidth: 200, flexGrow: 1 }} disabled={loadingFiltersDropdown}>
            <InputLabel>Publicación</InputLabel>
            <Select value={filtroIdPublicacion} label="Publicación" onChange={(e) => setFiltroIdPublicacion(e.target.value as number | string)}>
              <MenuItem value=""><em>Todas</em></MenuItem>
              {publicaciones.map(p => <MenuItem key={p.idPublicacion} value={p.idPublicacion}>{p.nombre} ({p.nombreEmpresa})</MenuItem>)}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 180, flexGrow: 1 }} disabled={loadingFiltersDropdown}>
            <InputLabel>Planta</InputLabel>
            <Select value={filtroIdPlanta} label="Planta" onChange={(e) => setFiltroIdPlanta(e.target.value as number | string)}>
              <MenuItem value=""><em>Todas</em></MenuItem>
              {plantas.map(p => <MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>)}
            </Select>
          </FormControl>
          {/* <Button variant="outlined" onClick={cargarTiradas} size="small">Buscar</Button> */}
        </Box>
        {puedeRegistrar && (<Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>Registrar Nueva Tirada</Button>)}
      </Paper>

      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
      {error && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}

      {!loading && !error && puedeVer && (
        <Box>
          {tiradas.length === 0 ? (
            <Typography sx={{ mt: 2, textAlign: 'center' }}>
              No se encontraron tiradas con los filtros aplicados.
            </Typography>
          ) : (
            tiradas.map((tirada) => (
              <Paper
                key={tirada.idRegistroTirada}
                sx={{ mb: 1.5, overflow: 'hidden' }}
                variant="outlined"
              >
                {/* 1. Contenedor principal con alineación al inicio (arriba) */}
                <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
                  <Accordion sx={{
                    flexGrow: 1,
                    boxShadow: 'none',
                    '&:before': { display: 'none' },
                  }}>
                    <AccordionSummary
                      expandIcon={<ExpandMoreIcon />}
                      aria-controls={`panel${tirada.idRegistroTirada}-content`}
                      id={`panel${tirada.idRegistroTirada}-header`}
                    >
                      {/* El contenido del summary ahora es solo el título principal */}
                      <Typography sx={{ fontWeight: 'bold' }}>
                        {formatDate(tirada.fecha)} - {tirada.nombrePublicacion} ({tirada.nombrePlanta})
                      </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                      <TableContainer>
                        <Table size="small">
                          <TableHead>
                            <TableRow>
                              <TableCell><strong>Sección</strong></TableCell>
                              <TableCell align="right"><strong>Páginas</strong></TableCell>
                            </TableRow>
                          </TableHead>
                          <TableBody>
                            {tirada.seccionesImpresas.map(sec => (
                              <TableRow key={sec.idRegPublicacionSeccion}>
                                <TableCell>{sec.nombreSeccion}</TableCell>
                                <TableCell align="right">{sec.cantPag}</TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </TableContainer>
                    </AccordionDetails>
                  </Accordion>

                  {/* Contenedor de acciones con Chips y Botones */}
                  <Box sx={{
                    display: 'flex',
                    alignItems: 'center',
                    flexShrink: 0,
                    // 3. Añadimos padding para alinear verticalmente con el texto del summary
                    // y un poco a la derecha para separarlo del acordeón.
                    // 48px es la altura mínima del AccordionSummary, esto asegura una alineación perfecta.
                    height: '48px',
                    px: 2
                  }}>
                    <Chip label={`${tirada.ejemplares} ej.`} color="primary" size="small" sx={{ mr: 1 }} />
                    <Chip label={`${tirada.totalPaginasSumadas} pág.`} size="small" sx={{ mr: 1 }} />

                    {puedeModificar && (
                      <IconButton
                        size="small"
                        onClick={() => handleOpenModal(tirada)}
                        title="Editar Tirada"
                      >
                        <EditIcon color="info" />
                      </IconButton>
                    )}
                    {puedeEliminar && (
                      <IconButton
                        size="small"
                        onClick={() => handleDeleteTirada(tirada)}
                        title="Eliminar Tirada"
                      >
                        <DeleteIcon color="error" />
                      </IconButton>
                    )}
                  </Box>
                </Box>
              </Paper>
            ))
          )}
        </Box>
      )}
      {/* No hay paginación para la lista de Acordeones por ahora */}

      <TiradaFormModal
        open={modalOpen}
        onClose={handleCloseModal}
        onSubmit={handleSubmitModal}
        errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
        tiradaToEdit={tiradaAEditar}
      />
    </Box>
  );
};

export default GestionarTiradasPage;