// src/pages/Distribucion/Publicaciones/GestionarPreciosPublicacionPage.tsx
import React, { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    Box, Typography, Button, Paper, IconButton, Menu, MenuItem,
    Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
    CircularProgress, Alert, Chip, // Alert se sigue usando para el error de carga general
    ListItemIcon,
    ListItemText
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

import precioService from '../../services/Distribucion/precioService';
import publicacionService from '../../services/Distribucion/publicacionService';
import type { PrecioDto } from '../../models/dtos/Distribucion/PrecioDto';
import type { CreatePrecioDto } from '../../models/dtos/Distribucion/CreatePrecioDto';
import type { UpdatePrecioDto } from '../../models/dtos/Distribucion/UpdatePrecioDto';
import type { PublicacionDto } from '../../models/dtos/Distribucion/PublicacionDto';
import PrecioFormModal from '../../components/Modals/Distribucion/PrecioFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarPreciosPublicacionPage: React.FC = () => {
  const { idPublicacion: idPublicacionStr } = useParams<{ idPublicacion: string }>();
  const navigate = useNavigate();
  const idPublicacion = Number(idPublicacionStr);

  const [publicacion, setPublicacion] = useState<PublicacionDto | null>(null);
  const [precios, setPrecios] = useState<PrecioDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null); // Para errores de carga de datos

  const [modalOpen, setModalOpen] = useState(false);
  const [editingPrecio, setEditingPrecio] = useState<PrecioDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null); // Este se pasa al modal

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedPrecioRow, setSelectedPrecioRow] = useState<PrecioDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeGestionarPrecios = isSuperAdmin || tienePermiso("DP004");

  const cargarDatos = useCallback(async () => {
    if (isNaN(idPublicacion)) {
      setError("ID de Publicación inválido.");
      setLoading(false);
      return;
    }
    if (!puedeGestionarPrecios) {
        setError("No tiene permiso para gestionar precios.");
        setLoading(false);
        return;
    }

    setLoading(true); 
    setError(null); // Limpiar error de carga al reintentar
    setApiErrorMessage(null); // Limpiar error de API de acciones previas
    try {
      const [pubData, preciosData] = await Promise.all([
        publicacionService.getPublicacionById(idPublicacion),
        precioService.getPreciosPorPublicacion(idPublicacion)
      ]);
      setPublicacion(pubData);
      setPrecios(preciosData);
    } catch (err: any) {
      console.error(err);
      if (axios.isAxiosError(err) && err.response?.status === 404) {
        setError(`Publicación con ID ${idPublicacion} no encontrada o sin acceso a sus precios.`);
      } else {
        setError('Error al cargar los datos de precios.');
      }
    } finally {
      setLoading(false);
    }
  }, [idPublicacion, puedeGestionarPrecios]);

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

  const handleOpenModal = (precio?: PrecioDto) => {
    setEditingPrecio(precio || null);
    setApiErrorMessage(null); // Limpiar error de API al abrir el modal
    setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false);
    setEditingPrecio(null);
    // No limpiar apiErrorMessage aquí, el modal lo hace o se limpia al abrir de nuevo
  };

  const handleSubmitModal = async (data: CreatePrecioDto | UpdatePrecioDto, idPrecio?: number) => {
    setApiErrorMessage(null);
    try {
      if (idPrecio && editingPrecio) {
        await precioService.updatePrecio(idPublicacion, idPrecio, data as UpdatePrecioDto);
      } else {
        await precioService.createPrecio(idPublicacion, data as CreatePrecioDto);
      }
      cargarDatos();
      // El modal se cerrará solo si el submit es exitoso (controlado en el modal)
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message 
                        ? err.response.data.message 
                        : 'Error al guardar el período de precio.';
      setApiErrorMessage(message); // Pasar el error al estado que se pasa al modal
      throw err; // Re-lanzar para que el modal NO se cierre
    }
  };

  const handleDelete = async (idPrecio: number) => {
    if (window.confirm(`¿Está seguro de eliminar este período de precio (ID: ${idPrecio})? Esta acción puede afectar la vigencia de períodos anteriores.`)) {
       setApiErrorMessage(null); // Limpiar antes de la acción
       try {
        await precioService.deletePrecio(idPublicacion, idPrecio);
        cargarDatos();
      } catch (err: any) {
         const message = axios.isAxiosError(err) && err.response?.data?.message 
                            ? err.response.data.message 
                            : 'Error al eliminar el período de precio.';
         setApiErrorMessage(message); // Establecer error para mostrar EN EL MODAL si fuera necesario, o en un Alert genérico de la PÁGINA SI EL MODAL NO ESTÁ ABIERTO
         // Si el modal de confirmación no es parte de un modal de formulario, este apiErrorMessage se mostraría en la página.
         // Como es un window.confirm, el error se mostrará en el Alert de la página principal.
      }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, precio: PrecioDto) => {
    setAnchorEl(event.currentTarget); setSelectedPrecioRow(precio);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedPrecioRow(null);
  };

  const formatDate = (dateString?: string | null) => {
    if (!dateString) return '-';
    const date = new Date(dateString);
    const day = String(date.getUTCDate()).padStart(2, '0');
    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
    const year = date.getUTCFullYear();
    return `${day}/${month}/${year}`;
  };

  if (loading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}><CircularProgress /></Box>;
  }
  // Mostrar error de carga de datos de la página
  if (error) { 
    return (
        <Box sx={{p:2}}>
             <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/distribucion/publicaciones')} sx={{ mb: 2 }}>
                Volver a Publicaciones
            </Button>
            <Alert severity="error">{error}</Alert>
        </Box>
    );
  }
  if (!puedeGestionarPrecios) {
     return (
        <Box sx={{p:2}}>
             <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/distribucion/publicaciones')} sx={{ mb: 2 }}>
                Volver a Publicaciones
            </Button>
            <Alert severity="error">No tiene permiso para gestionar precios.</Alert>
        </Box>
     );
  }

  return (
    <Box sx={{ p: 2 }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/distribucion/publicaciones')} sx={{ mb: 2 }}>
            Volver a Publicaciones
        </Button>
      <Typography variant="h4" gutterBottom>
        Gestionar Precios para: {publicacion?.nombre || 'Cargando...'}
      </Typography>
       <Typography variant="subtitle1" color="text.secondary" gutterBottom>
        Empresa: {publicacion?.nombreEmpresa || '-'}
      </Typography>

      <Paper sx={{ p: 2, mb: 2 }}>
         {puedeGestionarPrecios && (
            <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>
                Agregar Nuevo Período de Precio
            </Button>
        )}
      </Paper>

      {/* --- Alert para apiErrorMessage eliminado de acá --- */}
      {/* {apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>} */}
      
      {/* Mostrar error general si es de carga Y no hay error de API de acción (para no duplicar mensajes) */}
      {error && !loading && !apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}


      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead><TableRow>
              <TableCell>Vigencia Desde</TableCell><TableCell>Vigencia Hasta</TableCell>
              <TableCell align="right">Lunes</TableCell><TableCell align="right">Martes</TableCell>
              <TableCell align="right">Miércoles</TableCell><TableCell align="right">Jueves</TableCell>
              <TableCell align="right">Viernes</TableCell><TableCell align="right">Sábado</TableCell>
              <TableCell align="right">Domingo</TableCell>
              <TableCell align="center">Estado</TableCell>
              <TableCell align="right">Acciones</TableCell>
          </TableRow></TableHead>
          <TableBody>
            {precios.length === 0 ? (
              <TableRow><TableCell colSpan={11} align="center">No hay períodos de precios definidos para esta publicación.</TableCell></TableRow>
            ) : (
              precios.map((p) => (
                  <TableRow key={p.idPrecio} hover>
                  <TableCell>{formatDate(p.vigenciaD)}</TableCell>
                  <TableCell>{formatDate(p.vigenciaH)}</TableCell>
                  <TableCell align="right">{p.lunes?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.martes?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.miercoles?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.jueves?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.viernes?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.sabado?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="right">{p.domingo?.toFixed(2) || '-'}</TableCell>
                  <TableCell align="center">
                    {!p.vigenciaH ? <Chip label="Activo" color="success" size="small" /> : <Chip label="Cerrado" size="small" />}
                  </TableCell>
                  <TableCell align="right">
                    <IconButton onClick={(e) => handleMenuOpen(e, p)} disabled={!puedeGestionarPrecios}>
                        <MoreVertIcon />
                    </IconButton>
                  </TableCell>
                  </TableRow>
              )))}
          </TableBody>
        </Table>
      </TableContainer>

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {puedeGestionarPrecios && selectedPrecioRow && (
            <MenuItem onClick={() => { handleOpenModal(selectedPrecioRow); handleMenuClose(); }}>
                <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
                <ListItemText>Editar Precios/Cerrar Período</ListItemText>
            </MenuItem>
        )}
        {puedeGestionarPrecios && selectedPrecioRow && (
            <MenuItem onClick={() => handleDelete(selectedPrecioRow.idPrecio)}>
                <ListItemIcon><DeleteIcon fontSize="small" /></ListItemIcon>
                <ListItemText>Eliminar Período</ListItemText>
            </MenuItem>
        )}
      </Menu>

      {/* El Alert para errores de API de acciones como handleDelete se mostrará aquí si ocurre. */}
      {/* Se podría refinar para que apiErrorMessage solo se muestre si el modal NO está abierto,
          pero por ahora, si hay un error en handleDelete (modal no abierto), se mostrará aquí. */}
      {apiErrorMessage && !modalOpen && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}


      {idPublicacion &&
        <PrecioFormModal
            open={modalOpen}
            onClose={handleCloseModal}
            onSubmit={handleSubmitModal}
            idPublicacion={idPublicacion}
            initialData={editingPrecio}
            errorMessage={apiErrorMessage} // El modal recibe el apiErrorMessage
            clearErrorMessage={() => setApiErrorMessage(null)} // El modal puede limpiar este error
        />
      }
    </Box>
  );
};

export default GestionarPreciosPublicacionPage;