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 LockOpenIcon from '@mui/icons-material/LockOpen';
import perfilService from '../../services/Usuarios/perfilService';
import type { PerfilDto } from '../../models/dtos/Usuarios/PerfilDto';
import type { CreatePerfilDto } from '../../models/dtos/Usuarios/CreatePerfilDto';
import type { UpdatePerfilDto } from '../../models/dtos/Usuarios/UpdatePerfilDto';
import PerfilFormModal from '../../components/Modals/Usuarios/PerfilFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'; // Para navegar

const GestionarPerfilesPage: React.FC = () => {
  const [perfiles, setPerfiles] = useState<PerfilDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroNombre, setFiltroNombre] = useState('');

  const [modalOpen, setModalOpen] = useState(false);
  const [editingPerfil, setEditingPerfil] = useState<PerfilDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedPerfilRow, setSelectedPerfilRow] = useState<PerfilDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const navigate = useNavigate(); // Hook para navegación

  // Permisos para Perfiles (PU001 a PU004)
  const puedeVer = isSuperAdmin || tienePermiso("PU001");
  const puedeCrear = isSuperAdmin || tienePermiso("PU002");
  const puedeModificar = isSuperAdmin || tienePermiso("PU003"); // Modificar nombre/desc
  const puedeEliminar = isSuperAdmin || tienePermiso("PU003"); // Excel dice PU003 para eliminar
  const puedeAsignarPermisos = isSuperAdmin || tienePermiso("PU004");

  const cargarPerfiles = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección.");
      setLoading(false);
      return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const data = await perfilService.getAllPerfiles(filtroNombre);
      setPerfiles(data);
    } catch (err) {
      console.error(err); setError('Error al cargar los perfiles.');
    } finally { setLoading(false); }
  }, [filtroNombre, puedeVer]);

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

  const handleOpenModal = (perfil?: PerfilDto) => {
    setEditingPerfil(perfil || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingPerfil(null);
  };

  const handleSubmitModal = async (data: CreatePerfilDto | (UpdatePerfilDto & { id: number })) => {
    setApiErrorMessage(null);
    try {
      if (editingPerfil && 'id' in data) {
        await perfilService.updatePerfil(editingPerfil.id, data);
      } else {
        await perfilService.createPerfil(data as CreatePerfilDto);
      }
      cargarPerfiles();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el perfil.';
      setApiErrorMessage(message); throw err;
    }
  };

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

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, perfil: PerfilDto) => {
    setAnchorEl(event.currentTarget); setSelectedPerfilRow(perfil);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedPerfilRow(null);
  };

  const handleOpenPermisosModal = (perfil: PerfilDto) => {
    handleMenuClose();
    // Navegar a la página de asignación de permisos
    navigate(`/usuarios/perfiles/${perfil.id}/permisos`);
  };

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

  if (!loading && !puedeVer) {
    return (
      <Box sx={{ p: 1 }}>
        <Typography variant="h5" gutterBottom>Gestionar Perfiles</Typography>
        <Alert severity="error">{error || "No tiene permiso para acceder a esta sección."}</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Gestionar Perfiles</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
          <TextField label="Filtrar por Nombre" variant="outlined" size="small" value={filtroNombre} onChange={(e) => setFiltroNombre(e.target.value)} />
        </Box>
        {puedeCrear && (
          <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>
            Agregar Nuevo Perfil
          </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 && (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Nombre del Perfil</TableCell>
                <TableCell>Descripción</TableCell>
                {(puedeModificar || puedeEliminar || puedeAsignarPermisos) && <TableCell align="right">Acciones</TableCell>}
              </TableRow>
            </TableHead>
            <TableBody>
              {displayData.length === 0 && !loading ? (
                <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar || puedeAsignarPermisos) ? 3 : 2} align="center">No se encontraron perfiles.</TableCell></TableRow>
              ) : (
                displayData.map((perfil) => (
                  <TableRow key={perfil.id}>
                    <TableCell>{perfil.nombrePerfil}</TableCell>
                    <TableCell>{perfil.descripcion || '-'}</TableCell>
                    {(puedeModificar || puedeEliminar || puedeAsignarPermisos) && (
                      <TableCell align="right">
                        <IconButton onClick={(e) => handleMenuOpen(e, perfil)} disabled={!puedeModificar && !puedeEliminar && !puedeAsignarPermisos}>
                          <MoreVertIcon />
                        </IconButton>
                      </TableCell>
                    )}
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[5, 10, 25]} component="div" count={perfiles.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: 230, // Ajusta el ancho según el texto más largo
          },
        }}
      >
        {puedeModificar && selectedPerfilRow && (
          <MenuItem onClick={() => { handleOpenModal(selectedPerfilRow); handleMenuClose(); }}>
            <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Modificar</ListItemText>
          </MenuItem>
        )}
        {puedeEliminar && selectedPerfilRow && (
          <MenuItem onClick={() => { handleDelete(selectedPerfilRow.id); handleMenuClose(); }}>
            <ListItemIcon><DeleteIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Eliminar</ListItemText>
          </MenuItem>
        )}
        {puedeAsignarPermisos && selectedPerfilRow && (
          <MenuItem onClick={() => { handleOpenPermisosModal(selectedPerfilRow); handleMenuClose(); }}>
            <ListItemIcon><LockOpenIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Asignar Permisos</ListItemText>
          </MenuItem>
        )}

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

      <PerfilFormModal
        open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
        initialData={editingPerfil} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
      {/* {selectedPerfilForPermisos && (
          <PermisosPorPerfilModal
              open={permisosModalOpen}
              onClose={handleClosePermisosModal}
              perfil={selectedPerfilForPermisos}
              onSubmit={handleSubmitPermisos}
              // Asume que tienes un servicio para obtener todos los permisos disponibles
              // getAllPermisosDisponibles={async () => []} // Implementar esto
          />
      )} */}
    </Box>
  );
};

export default GestionarPerfilesPage;