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 porcPagoService from '../../services/Distribucion/porcPagoService';
import publicacionService from '../../services/Distribucion/publicacionService';
import type { PorcPagoDto } from '../../models/dtos/Distribucion/PorcPagoDto';
import type { CreatePorcPagoDto } from '../../models/dtos/Distribucion/CreatePorcPagoDto';
import type { UpdatePorcPagoDto } from '../../models/dtos/Distribucion/UpdatePorcPagoDto';
import type { PublicacionDto } from '../../models/dtos/Distribucion/PublicacionDto';
import PorcPagoFormModal from '../../components/Modals/Distribucion/PorcPagoFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

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

  const [publicacion, setPublicacion] = useState<PublicacionDto | null>(null);
  const [porcentajes, setPorcentajes] = useState<PorcPagoDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [modalOpen, setModalOpen] = useState(false);
  const [editingPorcentaje, setEditingPorcentaje] = useState<PorcPagoDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedPorcentajeRow, setSelectedPorcentajeRow] = useState<PorcPagoDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  // Permiso DG004 para porcentajes de pago de distribuidores
  const puedeGestionar = isSuperAdmin || tienePermiso("DG004");

  const cargarDatos = useCallback(async () => {
    if (isNaN(idPublicacion)) {
      setError("ID de Publicación inválido."); setLoading(false); return;
    }
    if (!puedeGestionar) { // Permiso para ver precios de una publicacion (DP004) o el específico de porcentajes (DG004)
        setError("No tiene permiso para gestionar porcentajes de pago."); setLoading(false); return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const [pubData, data] = await Promise.all([
        publicacionService.getPublicacionById(idPublicacion),
        porcPagoService.getPorcentajesPorPublicacion(idPublicacion)
      ]);
      setPublicacion(pubData);
      setPorcentajes(data);
    } catch (err: any) {
      console.error(err);
      if (axios.isAxiosError(err) && err.response?.status === 404) {
        setError(`Publicación ID ${idPublicacion} no encontrada.`);
      } else {
        setError('Error al cargar los datos.');
      }
    } finally { setLoading(false); }
  }, [idPublicacion, puedeGestionar]);

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

  const handleOpenModal = (item?: PorcPagoDto) => {
    setEditingPorcentaje(item || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingPorcentaje(null);
  };

  const handleSubmitModal = async (data: CreatePorcPagoDto | UpdatePorcPagoDto, idPorcentaje?: number) => {
    setApiErrorMessage(null);
    try {
      if (editingPorcentaje && idPorcentaje) {
        await porcPagoService.updatePorcPago(idPublicacion, idPorcentaje, data as UpdatePorcPagoDto);
      } else {
        await porcPagoService.createPorcPago(idPublicacion, data as CreatePorcPagoDto);
      }
      cargarDatos();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (idPorcentajeDelRow: number) => {
    if (window.confirm(`¿Seguro de eliminar este porcentaje de pago (ID: ${idPorcentajeDelRow})?`)) {
       setApiErrorMessage(null);
       try {
        await porcPagoService.deletePorcPago(idPublicacion, idPorcentajeDelRow);
        cargarDatos();
      } catch (err: any) {
         const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar.';
         setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, item: PorcPagoDto) => {
    setAnchorEl(event.currentTarget); setSelectedPorcentajeRow(item);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedPorcentajeRow(null);
  };

  const formatDate = (dateString?: string | null) => dateString ? new Date(dateString + 'T00:00:00').toLocaleDateString('es-AR') : '-';

  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 (!puedeGestionar) 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>Porcentajes Pago Distribuidor: {publicacion?.nombre || 'Cargando...'}</Typography>
      <Typography variant="subtitle1" color="text.secondary" gutterBottom>Empresa: {publicacion?.nombreEmpresa || '-'}</Typography>

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

      {apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}

      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead><TableRow>
              <TableCell sx={{fontWeight: 'bold'}}>Distribuidor</TableCell>
              <TableCell sx={{fontWeight: 'bold'}}>Vigencia Desde</TableCell>
              <TableCell sx={{fontWeight: 'bold'}}>Vigencia Hasta</TableCell>
              <TableCell align="right" sx={{fontWeight: 'bold'}}>Porcentaje (%)</TableCell>
              <TableCell align="center" sx={{fontWeight: 'bold'}}>Estado</TableCell>
              <TableCell align="right" sx={{fontWeight: 'bold'}}>Acciones</TableCell>
          </TableRow></TableHead>
          <TableBody>
            {porcentajes.length === 0 ? (
              <TableRow><TableCell colSpan={6} align="center">No hay porcentajes definidos.</TableCell></TableRow>
            ) : (
              porcentajes.sort((a,b) => new Date(b.vigenciaD).getTime() - new Date(a.vigenciaD).getTime() || a.nombreDistribuidor.localeCompare(b.nombreDistribuidor))
              .map((p) => (
                  <TableRow key={p.idPorcentaje} hover>
                  <TableCell>{p.nombreDistribuidor}</TableCell><TableCell>{formatDate(p.vigenciaD)}</TableCell>
                  <TableCell>{formatDate(p.vigenciaH)}</TableCell>
                  <TableCell align="right">{p.porcentaje.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={!puedeGestionar}><MoreVertIcon /></IconButton>
                  </TableCell>
                  </TableRow>
              )))}
          </TableBody>
        </Table>
      </TableContainer>

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

      {idPublicacion &&
        <PorcPagoFormModal
            open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
            idPublicacion={idPublicacion} initialData={editingPorcentaje}
            errorMessage={apiErrorMessage} clearErrorMessage={() => setApiErrorMessage(null)}
        />
      }
    </Box>
  );
};

export default GestionarPorcentajesPagoPage;