import React, { useState, useEffect, useCallback } from 'react';
import {
  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem, Switch,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
  CircularProgress, Alert, Chip, FormControl, InputLabel, Select, Tooltip,
  FormControlLabel,
  ListItemText,
  ListItemIcon
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert'; // Icono para el menú de acciones
import EditIcon from '@mui/icons-material/Edit'; // Icono para modificar
import DeleteIcon from '@mui/icons-material/Delete'; // Icono para eliminar
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; // Icono para días de semana
import LocalOfferIcon from '@mui/icons-material/LocalOffer'; // Para Precios
import AddCardIcon from '@mui/icons-material/AddCard';         // Para Recargos
import PercentIcon from '@mui/icons-material/Percent';       // Para Porcentajes
import RequestQuoteIcon from '@mui/icons-material/RequestQuote'; // Para Porc./Monto Canillita
import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';     // Para Secciones
import publicacionService from '../../services/Distribucion/publicacionService';
import type { PublicacionDto } from '../../models/dtos/Distribucion/PublicacionDto';
import type { CreatePublicacionDto } from '../../models/dtos/Distribucion/CreatePublicacionDto';
import type { UpdatePublicacionDto } from '../../models/dtos/Distribucion/UpdatePublicacionDto';
import PublicacionFormModal from '../../components/Modals/Distribucion/PublicacionFormModal';
import PublicacionDiasSemanaModal from '../../components/Modals/Distribucion/PublicacionDiasSemanaModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import type { EmpresaDto } from '../../models/dtos/Distribucion/EmpresaDto';
import empresaService from '../../services/Distribucion/empresaService';


const GestionarPublicacionesPage: React.FC = () => {
  const [publicaciones, setPublicaciones] = useState<PublicacionDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [filtroNombre, setFiltroNombre] = useState('');
  const [filtroIdEmpresa, setFiltroIdEmpresa] = useState<number | string>('');
  const [filtroSoloHabilitadas, setFiltroSoloHabilitadas] = useState<boolean | undefined>(true);
  const [empresas, setEmpresas] = useState<EmpresaDto[]>([]);
  const [loadingEmpresas, setLoadingEmpresas] = useState(false);


  const [modalOpen, setModalOpen] = useState(false);
  const [editingPublicacion, setEditingPublicacion] = useState<PublicacionDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(25);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedPublicacionRow, setSelectedPublicacionRow] = useState<PublicacionDto | null>(null);

  const [diasSemanaModalOpen, setDiasSemanaModalOpen] = useState(false);
  const [selectedPublicacionParaDias, setSelectedPublicacionParaDias] = useState<PublicacionDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const navigate = useNavigate();
  const puedeVer = isSuperAdmin || tienePermiso("DP001");
  const puedeCrear = isSuperAdmin || tienePermiso("DP002");
  const puedeModificar = isSuperAdmin || tienePermiso("DP003");
  const puedeGestionarPrecios = isSuperAdmin || tienePermiso("DP004");
  const puedeGestionarRecargos = isSuperAdmin || tienePermiso("DP005");
  const puedeGestionarPorcDist = isSuperAdmin || tienePermiso("DG004");
  const puedeEliminar = isSuperAdmin || tienePermiso("DP006");
  // Permiso DP007 para secciones
  const puedeGestionarSecciones = isSuperAdmin || tienePermiso("DP007");
  // Permiso CG004 para porcentajes/montos de pago de canillitas
  const puedeGestionarPorcCan = isSuperAdmin || tienePermiso("CG004");


  const fetchEmpresas = useCallback(async () => {
    setLoadingEmpresas(true);
    try {
      const data = await empresaService.getAllEmpresas();
      setEmpresas(data);
    } catch (err) {
      console.error("Error cargando empresas para filtro:", err);
      // Manejar error si es necesario, ej. mostrando un mensaje
    } finally {
      setLoadingEmpresas(false);
    }
  }, []);

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


  const cargarPublicaciones = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección."); setLoading(false); return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const idEmpresa = filtroIdEmpresa ? Number(filtroIdEmpresa) : undefined;
      const data = await publicacionService.getAllPublicaciones(filtroNombre, idEmpresa, filtroSoloHabilitadas);
      setPublicaciones(data);
    } catch (err) {
      console.error(err); setError('Error al cargar las publicaciones.');
    } finally { setLoading(false); }
  }, [filtroNombre, filtroIdEmpresa, filtroSoloHabilitadas, puedeVer]);

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

  const handleOpenModal = (publicacion?: PublicacionDto) => {
    setEditingPublicacion(publicacion || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingPublicacion(null);
  };

  const handleSubmitModal = async (data: CreatePublicacionDto | UpdatePublicacionDto, id?: number) => {
    setApiErrorMessage(null);
    try {
      if (id && editingPublicacion) {
        await publicacionService.updatePublicacion(id, data as UpdatePublicacionDto);
      } else {
        await publicacionService.createPublicacion(data as CreatePublicacionDto);
      }
      cargarPublicaciones();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar la publicación.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (id: number) => {
    if (window.confirm(`¿Está seguro? Esta acción eliminará la publicación (ID: ${id}) y todas sus configuraciones asociadas (precios, recargos, secciones, etc.). ESTA ACCIÓN NO SE PUEDE DESHACER.`)) {
      setApiErrorMessage(null);
      try {
        await publicacionService.deletePublicacion(id);
        cargarPublicaciones();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar la publicación.';
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleToggleHabilitada = async (publicacion: PublicacionDto) => {
    setApiErrorMessage(null);
    const datosActualizados: UpdatePublicacionDto = {
      nombre: publicacion.nombre,
      observacion: publicacion.observacion,
      idEmpresa: publicacion.idEmpresa,
      ctrlDevoluciones: publicacion.ctrlDevoluciones,
      habilitada: !publicacion.habilitada // Invertir estado
    };
    try {
      await publicacionService.updatePublicacion(publicacion.idPublicacion, datosActualizados);
      cargarPublicaciones(); // Recargar para ver el cambio
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al cambiar estado de habilitación.';
      setApiErrorMessage(message);
    }
  };


  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, publicacion: PublicacionDto) => {
    setAnchorEl(event.currentTarget); setSelectedPublicacionRow(publicacion);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedPublicacionRow(null);
  };

  // TODO: Implementar navegación a páginas de gestión de Precios, Recargos, Secciones
  const handleNavigateToPrecios = (idPub: number) => {
    console.log("Navegando a precios para ID:", idPub);
    console.log("Fila seleccionada:", selectedPublicacionRow);
    navigate(`/distribucion/publicaciones/${idPub}/precios`); // Ruta anidada
    handleMenuClose();
  };
  const handleNavigateToRecargos = (idPub: number) => {
    navigate(`/distribucion/publicaciones/${idPub}/recargos`);
    handleMenuClose();
  };

  const handleNavigateToPorcentajesPagoDist = (idPub: number) => {
    navigate(`/distribucion/publicaciones/${idPub}/porcentajes-pago-dist`);
    handleMenuClose();
  };

  const handleNavigateToPorcMonCanilla = (idPub: number) => {
    navigate(`/distribucion/publicaciones/${idPub}/porcentajes-mon-canilla`);
    handleMenuClose();
  };

  const handleNavigateToSecciones = (idPub: number) => {
    navigate(`/distribucion/publicaciones/${idPub}/secciones`);
    handleMenuClose();
  };

  const handleOpenDiasSemanaModal = (publicacion: PublicacionDto) => {
    setSelectedPublicacionParaDias(publicacion);
    setDiasSemanaModalOpen(true);
    handleMenuClose(); // Cerrar el menú de acciones si estaba abierto
  };

  const handleCloseDiasSemanaModal = () => {
    setDiasSemanaModalOpen(false);
    setSelectedPublicacionParaDias(null);
  };

  const handleConfigDiasSaved = () => {
    // Opcional: Recargar publicaciones o simplemente mostrar un mensaje de éxito.
    // Por ahora, solo cerramos el modal.
    console.log("Configuración de días guardada.");
  };


  const handleChangePage = (_event: unknown, newPage: number) => setPage(newPage);
  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRowsPerPage(parseInt(event.target.value, 10)); setPage(0);
  };
  const displayData = publicaciones.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

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

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Gestionar Publicaciones</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
        <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
          <TextField label="Filtrar por Nombre" variant="outlined" size="small" value={filtroNombre} onChange={(e) => setFiltroNombre(e.target.value)} sx={{ flexGrow: 1, minWidth: '200px' }} />
          <FormControl size="small" sx={{ flexGrow: 1, minWidth: '200px' }}>
            <InputLabel id="empresa-filter-label">Empresa</InputLabel>
            <Select
              labelId="empresa-filter-label"
              label="Empresa"
              value={filtroIdEmpresa}
              onChange={(e) => setFiltroIdEmpresa(e.target.value as number | string)}
              disabled={loadingEmpresas}
            >
              <MenuItem value=""><em>Todas</em></MenuItem>
              {empresas.map((e) => (<MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>))}
            </Select>
          </FormControl>
          <FormControlLabel
            control={<Switch checked={filtroSoloHabilitadas === undefined ? true : filtroSoloHabilitadas} onChange={(e) => setFiltroSoloHabilitadas(e.target.checked)} size="small" />}
            label="Ver Habilitadas"
          />
        </Box>
        {puedeCrear && (<Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>Agregar Publicación</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 && (
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead><TableRow>
              <TableCell>Nombre</TableCell><TableCell>Empresa</TableCell>
              <TableCell>Ctrl. Devol.</TableCell><TableCell>Habilitada</TableCell>
              <TableCell>Observación</TableCell>
              <TableCell align="right">Acciones</TableCell>
            </TableRow></TableHead>
            <TableBody>
              {displayData.length === 0 ? (
                <TableRow><TableCell colSpan={6} align="center">No se encontraron publicaciones.</TableCell></TableRow>
              ) : (
                displayData.map((p) => (
                  <TableRow key={p.idPublicacion} hover sx={{ backgroundColor: !p.habilitada ? '#fff59d' : 'inherit' }}>
                    <TableCell>{p.nombre}</TableCell><TableCell>{p.nombreEmpresa}</TableCell>
                    <TableCell align="center">{p.ctrlDevoluciones ? <Chip label="Sí" size="small" color="info" /> : <Chip label="No" size="small" />}</TableCell>
                    <TableCell align="center">
                      <Tooltip title={p.habilitada ? "Deshabilitar" : "Habilitar"}>
                        <Switch checked={p.habilitada} onChange={() => handleToggleHabilitada(p)} size="small" disabled={!puedeModificar} />
                      </Tooltip>
                    </TableCell>
                    <TableCell>{p.observacion || '-'}</TableCell>
                    <TableCell align="right">
                      <IconButton onClick={(e) => handleMenuOpen(e, p)} disabled={!puedeModificar && !puedeEliminar && !puedeGestionarPrecios && !puedeGestionarRecargos && !puedeGestionarSecciones}>
                        <MoreVertIcon />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                )))}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[25, 50, 100]} component="div" count={publicaciones.length}
            rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
          />
        </TableContainer>
      )}

      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleMenuClose}
        PaperProps={{
          style: {
            minWidth: 250, // Un ancho mínimo para que los textos no se corten tanto
          },
        }}
      >
        {puedeModificar && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleOpenModal(selectedPublicacionRow); handleMenuClose(); }}>
            <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Modificar</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarPrecios && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleNavigateToPrecios(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><LocalOfferIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Gestionar Precios</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarRecargos && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleNavigateToRecargos(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><AddCardIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Gestionar Recargos</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarPorcDist && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleNavigateToPorcentajesPagoDist(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><PercentIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Porcentajes Pago (Dist.)</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarPorcCan && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleNavigateToPorcMonCanilla(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><RequestQuoteIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Porc./Monto Canillita</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarSecciones && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleNavigateToSecciones(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><ViewQuiltIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Gestionar Secciones</ListItemText>
          </MenuItem>
        )}
        {puedeModificar && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleOpenDiasSemanaModal(selectedPublicacionRow as PublicacionDto); handleMenuClose(); }}>
            <ListItemIcon><CalendarMonthIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Días de Salida</ListItemText>
          </MenuItem>
        )}
        {puedeEliminar && selectedPublicacionRow && (
          <MenuItem onClick={() => { handleDelete(selectedPublicacionRow.idPublicacion); handleMenuClose(); }}>
            <ListItemIcon><DeleteIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Eliminar</ListItemText>
          </MenuItem>
        )}

        {/* Si no hay permisos para ninguna acción y hay una fila seleccionada */}
        {selectedPublicacionRow &&
          !puedeModificar && !puedeEliminar &&
          !puedeGestionarPrecios && !puedeGestionarRecargos &&
          !puedeGestionarPorcDist && !puedeGestionarPorcCan &&
          !puedeGestionarSecciones && (
            <MenuItem disabled>
              <ListItemText>Sin acciones disponibles</ListItemText>
            </MenuItem>
          )}
      </Menu>

      <PublicacionFormModal
        open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
        initialData={editingPublicacion} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
      <PublicacionDiasSemanaModal
        open={diasSemanaModalOpen}
        onClose={handleCloseDiasSemanaModal}
        publicacion={selectedPublicacionParaDias}
        onConfigSaved={handleConfigDiasSaved}
      />
    </Box>
  );
};

export default GestionarPublicacionesPage;