// src/pages/Distribucion/Publicaciones/GestionarRecargosPublicacionPage.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
} 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 recargoZonaService from '../../services/Distribucion/recargoZonaService';
import publicacionService from '../../services/Distribucion/publicacionService';
import type { RecargoZonaDto } from '../../models/dtos/Distribucion/RecargoZonaDto';
import type { CreateRecargoZonaDto } from '../../models/dtos/Distribucion/CreateRecargoZonaDto';
import type { UpdateRecargoZonaDto } from '../../models/dtos/Distribucion/UpdateRecargoZonaDto';
import type { PublicacionDto } from '../../models/dtos/Distribucion/PublicacionDto';
import RecargoZonaFormModal from '../../components/Modals/Distribucion/RecargoZonaFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

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

  const [publicacion, setPublicacion] = useState<PublicacionDto | null>(null);
  const [recargos, setRecargos] = useState<RecargoZonaDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [modalOpen, setModalOpen] = useState(false);
  const [editingRecargo, setEditingRecargo] = useState<RecargoZonaDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedRecargoRow, setSelectedRecargoRow] = useState<RecargoZonaDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeGestionarRecargos = isSuperAdmin || tienePermiso("DP005");

  const cargarDatos = useCallback(async () => {
    if (isNaN(idPublicacion)) {
      setError("ID de Publicación inválido."); setLoading(false); return;
    }
    if (!puedeGestionarRecargos) {
      setError("No tiene permiso para gestionar recargos."); setLoading(false); return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const [pubData, recargosData] = await Promise.all([
        publicacionService.getPublicacionById(idPublicacion),
        recargoZonaService.getRecargosPorPublicacion(idPublicacion)
      ]);
      setPublicacion(pubData);
      setRecargos(recargosData);
    } catch (err: any) {
      console.error(err);
      if (axios.isAxiosError(err) && err.response?.status === 404) {
        setError(`Publicación ID ${idPublicacion} no encontrada o sin acceso a sus recargos.`);
      } else {
        setError('Error al cargar los datos de recargos.');
      }
    } finally { setLoading(false); }
  }, [idPublicacion, puedeGestionarRecargos]);

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

  const handleOpenModal = (recargo?: RecargoZonaDto) => {
    setEditingRecargo(recargo || null);
    setApiErrorMessage(null); // Limpiar error al abrir el modal
    setModalOpen(true);
  };

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

  const handleSubmitModal = async (data: CreateRecargoZonaDto | UpdateRecargoZonaDto, idRecargo?: number) => {
    setApiErrorMessage(null);
    try {
      if (editingRecargo && idRecargo) {
        await recargoZonaService.updateRecargoZona(idPublicacion, idRecargo, data as UpdateRecargoZonaDto);
      } else {
        await recargoZonaService.createRecargoZona(idPublicacion, data as CreateRecargoZonaDto);
      }
      cargarDatos();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el recargo.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (idRecargoDelRow: number) => {
    if (window.confirm(`¿Seguro de eliminar este recargo (ID: ${idRecargoDelRow})? Puede afectar vigencias.`)) {
      setApiErrorMessage(null);
      try {
        await recargoZonaService.deleteRecargoZona(idPublicacion, idRecargoDelRow);
        cargarDatos();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar el recargo.';
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, recargo: RecargoZonaDto) => {
    setAnchorEl(event.currentTarget); setSelectedRecargoRow(recargo);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedRecargoRow(null);
  };

  const formatDate = (dateString?: string | null) => {
    if (!dateString) return '-';
    // Asume que dateString es "yyyy-MM-dd" del backend, ya formateado por el DTO.
    // Si viniera como DateTime completo, necesitarías parsearlo y formatearlo.
    const parts = dateString.split('-');
    if (parts.length === 3) {
      return `${parts[2]}/${parts[1]}/${parts[0]}`; // dd/MM/yyyy
    }
    return dateString; // Devolver como está si no es el formato esperado
  };


  if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}><CircularProgress /></Box>;
  if (error) return <Alert severity="error" sx={{ m: 2 }}>{error}</Alert>;
  if (!puedeGestionarRecargos) return <Alert severity="error" sx={{ m: 2 }}>Acceso denegado.</Alert>;

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

      <Paper sx={{ p: 2, mb: 2 }}>
        {puedeGestionarRecargos && (
          <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>
            Agregar Nuevo Recargo
          </Button>
        )}
      </Paper>

      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead><TableRow>
            <TableCell sx={{ fontWeight: 'bold' }}>Zona</TableCell>
            <TableCell sx={{ fontWeight: 'bold' }}>Vigencia Desde</TableCell>
            <TableCell sx={{ fontWeight: 'bold' }}>Vigencia Hasta</TableCell>
            <TableCell align="right" sx={{ fontWeight: 'bold' }}>Valor</TableCell>
            <TableCell align="center" sx={{ fontWeight: 'bold' }}>Estado</TableCell>
            <TableCell align="right" sx={{ fontWeight: 'bold' }}>Acciones</TableCell>
          </TableRow></TableHead>
          <TableBody>
            {recargos.length === 0 ? (
              <TableRow><TableCell colSpan={6} align="center">No hay recargos definidos para esta publicación.</TableCell></TableRow>
            ) : (
              recargos.sort((a, b) => new Date(b.vigenciaD).getTime() - new Date(a.vigenciaD).getTime() || a.nombreZona.localeCompare(b.nombreZona)) // Ordenar por fecha desc, luego zona asc
                .map((r) => (
                  <TableRow key={r.idRecargo} hover>
                    <TableCell>{r.nombreZona}</TableCell><TableCell>{formatDate(r.vigenciaD)}</TableCell>
                    <TableCell>{formatDate(r.vigenciaH)}</TableCell>
                    <TableCell align="right">${r.valor.toFixed(2)}</TableCell>
                    <TableCell align="center">{!r.vigenciaH ? <Chip label="Activo" color="success" size="small" /> : <Chip label="Cerrado" size="small" />}</TableCell>
                    <TableCell align="right">
                      <IconButton onClick={(e) => handleMenuOpen(e, r)} disabled={!puedeGestionarRecargos}><MoreVertIcon /></IconButton>
                    </TableCell>
                  </TableRow>
                )))}
          </TableBody>
        </Table>
      </TableContainer>

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {puedeGestionarRecargos && selectedRecargoRow && (
          <MenuItem onClick={() => { handleOpenModal(selectedRecargoRow); handleMenuClose(); }}><EditIcon fontSize="small" sx={{ mr: 1 }} /> Editar/Cerrar</MenuItem>)}
        {puedeGestionarRecargos && selectedRecargoRow && (
          <MenuItem onClick={() => handleDelete(selectedRecargoRow.idRecargo)}><DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Eliminar</MenuItem>)}
      </Menu>

      {/* Alert para errores de acciones DELETE (cuando el modal no está abierto) */ }
      {apiErrorMessage && !modalOpen && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}

      {idPublicacion &&
        <RecargoZonaFormModal
          open={modalOpen}
          onClose={handleCloseModal}
          onSubmit={handleSubmitModal}
          idPublicacion={idPublicacion}
          initialData={editingRecargo}
          errorMessage={apiErrorMessage} // Se pasa el error al modal
          clearErrorMessage={() => setApiErrorMessage(null)}
        />
      }
    </Box>
  );
};

export default GestionarRecargosPublicacionPage;