import React, { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    Box, Typography, Button, Paper, IconButton, Menu, MenuItem, Switch,
    Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
    CircularProgress, Alert, Chip, FormControlLabel
} 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 publiSeccionService from '../../services/Distribucion/publiSeccionService';
import publicacionService from '../../services/Distribucion/publicacionService';
import type { PubliSeccionDto } from '../../models/dtos/Distribucion/PubliSeccionDto';
import type { CreatePubliSeccionDto } from '../../models/dtos/Distribucion/CreatePubliSeccionDto';
import type { UpdatePubliSeccionDto } from '../../models/dtos/Distribucion/UpdatePubliSeccionDto';
import type { PublicacionDto } from '../../models/dtos/Distribucion/PublicacionDto';
import PubliSeccionFormModal from '../../components/Modals/Distribucion/PubliSeccionFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

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

  const [publicacion, setPublicacion] = useState<PublicacionDto | null>(null);
  const [secciones, setSecciones] = useState<PubliSeccionDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroSoloActivas, setFiltroSoloActivas] = useState<boolean | undefined>(undefined); // undefined para mostrar todas

  const [modalOpen, setModalOpen] = useState(false);
  const [editingSeccion, setEditingSeccion] = useState<PubliSeccionDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedSeccionRow, setSelectedSeccionRow] = useState<PubliSeccionDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  // Permiso DP007 para gestionar secciones
  const puedeGestionar = isSuperAdmin || tienePermiso("DP007");

  const cargarDatos = useCallback(async () => {
    if (isNaN(idPublicacion)) {
      setError("ID de Publicación inválido."); setLoading(false); return;
    }
    if (!puedeGestionar) { // O también DP001 si solo quiere ver
        setError("No tiene permiso para gestionar secciones."); setLoading(false); return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const [pubData, data] = await Promise.all([
        publicacionService.getPublicacionById(idPublicacion),
        publiSeccionService.getSeccionesPorPublicacion(idPublicacion, filtroSoloActivas)
      ]);
      setPublicacion(pubData);
      setSecciones(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, filtroSoloActivas]);

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

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

  const handleSubmitModal = async (data: CreatePubliSeccionDto | UpdatePubliSeccionDto, idSeccion?: number) => {
    setApiErrorMessage(null);
    try {
      if (editingSeccion && idSeccion) {
        await publiSeccionService.updatePubliSeccion(idPublicacion, idSeccion, data as UpdatePubliSeccionDto);
      } else {
        await publiSeccionService.createPubliSeccion(idPublicacion, data as CreatePubliSeccionDto);
      }
      cargarDatos();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar la sección.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (idSeccionDelRow: number) => {
    if (window.confirm(`¿Seguro de eliminar esta sección (ID: ${idSeccionDelRow})?`)) {
       setApiErrorMessage(null);
       try {
        await publiSeccionService.deletePubliSeccion(idPublicacion, idSeccionDelRow);
        cargarDatos();
      } catch (err: any) {
         const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar la sección.';
         setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

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

  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>Secciones de: {publicacion?.nombre || 'Cargando...'}</Typography>
      <Typography variant="subtitle1" color="text.secondary" gutterBottom>Empresa: {publicacion?.nombreEmpresa || '-'}</Typography>

      <Paper sx={{ p: 2, mb: 2 }}>
        <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap'}}>
            {puedeGestionar && (
                <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: {xs: 2, sm:0} }}>
                    Agregar Sección
                </Button>
            )}
            <FormControlLabel
                control={<Switch checked={filtroSoloActivas === undefined ? false : filtroSoloActivas} onChange={(e) => setFiltroSoloActivas(e.target.checked ? true : undefined)} />}
                label="Mostrar solo activas"
            />
        </Box>
      </Paper>

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

      <TableContainer component={Paper}>
        <Table size="small">
          <TableHead><TableRow>
              <TableCell sx={{fontWeight: 'bold'}}>Nombre Sección</TableCell>
              <TableCell align="center" sx={{fontWeight: 'bold'}}>Estado</TableCell>
              <TableCell align="right" sx={{fontWeight: 'bold'}}>Acciones</TableCell>
          </TableRow></TableHead>
          <TableBody>
            {secciones.length === 0 ? (
              <TableRow><TableCell colSpan={3} align="center">No hay secciones definidas.</TableCell></TableRow>
            ) : (
              secciones.map((s) => (
                  <TableRow key={s.idSeccion} hover>
                  <TableCell>{s.nombre}</TableCell>
                  <TableCell align="center">{s.estado ? <Chip label="Activa" color="success" size="small" /> : <Chip label="Inactiva" size="small" />}</TableCell>
                  <TableCell align="right">
                    <IconButton onClick={(e) => handleMenuOpen(e, s)} disabled={!puedeGestionar}><MoreVertIcon /></IconButton>
                  </TableCell>
                  </TableRow>
              )))}
          </TableBody>
        </Table>
      </TableContainer>

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

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

export default GestionarSeccionesPublicacionPage;