import React, { useState, useEffect, useCallback } from 'react';
import {
  Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
  CircularProgress, Alert,
  ListItemIcon,
  ListItemText
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import permisoService from '../../services/Usuarios/permisoService';
import type { PermisoDto } from '../../models/dtos/Usuarios/PermisoDto';
import type { CreatePermisoDto } from '../../models/dtos/Usuarios/CreatePermisoDto';
import type { UpdatePermisoDto } from '../../models/dtos/Usuarios/UpdatePermisoDto';
import PermisoFormModal from '../../components/Modals/Usuarios/PermisoFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarPermisosPage: React.FC = () => {
  const [permisos, setPermisos] = useState<PermisoDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroModulo, setFiltroModulo] = useState('');
  const [filtroCodAcc, setFiltroCodAcc] = useState('');

  const [modalOpen, setModalOpen] = useState(false);
  const [editingPermiso, setEditingPermiso] = useState<PermisoDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10); // Un poco más para esta tabla

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedPermisoRow, setSelectedPermisoRow] = useState<PermisoDto | null>(null);

  const { isSuperAdmin } = usePermissions(); // Solo SuperAdmin puede acceder

  const cargarPermisos = useCallback(async () => {
    if (!isSuperAdmin) {
      setError("Acceso denegado. Solo SuperAdmin puede gestionar permisos.");
      setLoading(false);
      return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const data = await permisoService.getAllPermisos(filtroModulo, filtroCodAcc);
      setPermisos(data);
    } catch (err) {
      console.error(err); setError('Error al cargar los permisos.');
    } finally { setLoading(false); }
  }, [filtroModulo, filtroCodAcc, isSuperAdmin]);

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

  const handleOpenModal = (permiso?: PermisoDto) => {
    setEditingPermiso(permiso || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingPermiso(null);
  };

  const handleSubmitModal = async (data: CreatePermisoDto | (UpdatePermisoDto & { id: number })) => {
    setApiErrorMessage(null);
    try {
      if (editingPermiso && 'id' in data) {
        await permisoService.updatePermiso(editingPermiso.id, data);
      } else {
        await permisoService.createPermiso(data as CreatePermisoDto);
      }
      cargarPermisos();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el permiso.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleDelete = async (id: number) => {
    if (window.confirm(`¿Está seguro de eliminar este permiso (ID: ${id})?`)) {
      setApiErrorMessage(null);
      try {
        await permisoService.deletePermiso(id);
        cargarPermisos();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar el permiso.';
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, permiso: PermisoDto) => {
    setAnchorEl(event.currentTarget); setSelectedPermisoRow(permiso);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedPermisoRow(null);
  };

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

  if (!loading && !isSuperAdmin) {
    return (
      <Box sx={{ p: 1 }}>
        <Typography variant="h5" gutterBottom>Definición de Permisos</Typography>
        <Alert severity="error">{error || "Acceso denegado."}</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Definición de Permisos (SuperAdmin)</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
        <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
          <TextField
            label="Filtrar por Módulo"
            variant="outlined"
            size="small"
            value={filtroModulo}
            onChange={(e) => setFiltroModulo(e.target.value)}
            sx={{ flexGrow: 1, minWidth: '200px' }} // Para que se adapte mejor
          />
          <TextField
            label="Filtrar por CodAcc"
            variant="outlined"
            size="small"
            value={filtroCodAcc}
            onChange={(e) => setFiltroCodAcc(e.target.value)}
            sx={{ flexGrow: 1, minWidth: '200px' }}
          />
          {/* El botón de búsqueda es opcional si el filtro es en tiempo real */}
          {/* <Button variant="contained" onClick={cargarPermisos}>Buscar</Button> */}
        </Box>
        {isSuperAdmin && (
          <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>
            Agregar Nuevo Permiso
          </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 && isSuperAdmin && (
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Módulo</TableCell>
                <TableCell>Descripción</TableCell>
                <TableCell>CodAcc</TableCell>
                <TableCell align="right">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {displayData.length === 0 && !loading ? (
                <TableRow><TableCell colSpan={4} align="center">No se encontraron permisos.</TableCell></TableRow>
              ) : (
                displayData.map((permiso) => (
                  <TableRow key={permiso.id}>
                    <TableCell>{permiso.modulo}</TableCell>
                    <TableCell>{permiso.descPermiso}</TableCell>
                    <TableCell>{permiso.codAcc}</TableCell>
                    <TableCell align="right">
                      <IconButton onClick={(e) => handleMenuOpen(e, permiso)}>
                        <MoreVertIcon />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[5, 10, 25, 50]} component="div" count={permisos.length}
            rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
          />
        </TableContainer>
      )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        <MenuItem onClick={() => { handleOpenModal(selectedPermisoRow!); handleMenuClose(); }}>
          <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Modificar</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleDelete(selectedPermisoRow!.id)}>
          <ListItemIcon><DeleteIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Eliminar</ListItemText>
        </MenuItem>
      </Menu>

      <PermisoFormModal
        open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
        initialData={editingPermiso} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
    </Box>
  );
};

export default GestionarPermisosPage;