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, Tooltip,
    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 VpnKeyIcon from '@mui/icons-material/VpnKey'; // Para resetear clave
import usuarioService from '../../services/Usuarios/usuarioService';
import type { UsuarioDto } from '../../models/dtos/Usuarios/UsuarioDto';
import type { CreateUsuarioRequestDto } from '../../models/dtos/Usuarios/CreateUsuarioRequestDto';
import type { UpdateUsuarioRequestDto } from '../../models/dtos/Usuarios/UpdateUsuarioRequestDto';
import type { SetPasswordRequestDto } from '../../models/dtos/Usuarios/SetPasswordRequestDto';
import UsuarioFormModal from '../../components/Modals/Usuarios/UsuarioFormModal';
import SetPasswordModal from '../../components/Modals/Usuarios/SetPasswordModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarUsuariosPage: React.FC = () => {
  const [usuarios, setUsuarios] = useState<UsuarioDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroUser, setFiltroUser] = useState('');
  const [filtroNombre, setFiltroNombre] = useState('');

  const [usuarioModalOpen, setUsuarioModalOpen] = useState(false);
  const [editingUsuario, setEditingUsuario] = useState<UsuarioDto | null>(null);

  const [setPasswordModalOpen, setSetPasswordModalOpen] = useState(false);
  const [selectedUsuarioForPassword, setSelectedUsuarioForPassword] = useState<UsuarioDto | 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 [selectedUsuarioRow, setSelectedUsuarioRow] = useState<UsuarioDto | null>(null);

  const { tienePermiso, isSuperAdmin, currentUser } = usePermissions();

  const puedeVer = isSuperAdmin || tienePermiso("CU001");
  const puedeCrear = isSuperAdmin || tienePermiso("CU002");
  const puedeModificar = isSuperAdmin || tienePermiso("CU003"); // Modificar datos básicos
  const puedeAsignarPerfil = isSuperAdmin || tienePermiso("CU004"); // Modificar perfil
  // Resetear clave es típicamente SuperAdmin
  const puedeResetearClave = isSuperAdmin;

  const cargarUsuarios = 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 usuarioService.getAllUsuarios(filtroUser, filtroNombre);
      setUsuarios(data);
    } catch (err) {
      console.error(err); setError('Error al cargar los usuarios.');
    } finally { setLoading(false); }
  }, [filtroUser, filtroNombre, puedeVer]);

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

  const handleOpenUsuarioModal = (usuario?: UsuarioDto) => {
    setEditingUsuario(usuario || null); setApiErrorMessage(null); setUsuarioModalOpen(true);
  };
  const handleCloseUsuarioModal = () => {
    setUsuarioModalOpen(false); setEditingUsuario(null);
  };

  const handleSubmitUsuarioModal = async (data: CreateUsuarioRequestDto | UpdateUsuarioRequestDto, id?: number) => {
    setApiErrorMessage(null);
    try {
      if (id && editingUsuario) { // Es Update
        await usuarioService.updateUsuario(id, data as UpdateUsuarioRequestDto);
      } else { // Es Create
        await usuarioService.createUsuario(data as CreateUsuarioRequestDto);
      }
      cargarUsuarios();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el usuario.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleOpenSetPasswordModal = (usuario: UsuarioDto) => {
    setSelectedUsuarioForPassword(usuario);
    setApiErrorMessage(null);
    setSetPasswordModalOpen(true);
    handleMenuClose();
  };
  const handleCloseSetPasswordModal = () => {
    setSetPasswordModalOpen(false); setSelectedUsuarioForPassword(null);
  };
  const handleSubmitSetPassword = async (userId: number, data: SetPasswordRequestDto) => {
    setApiErrorMessage(null);
    try {
        await usuarioService.setPassword(userId, data);
        cargarUsuarios(); // Para reflejar el cambio en 'DebeCambiarClave'
    } catch (err:any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al establecer la contraseña.';
        setApiErrorMessage(message); throw err;
    }
  };

  const handleToggleHabilitado = async (usuario: UsuarioDto) => {
    setApiErrorMessage(null);
    // Un usuario no puede deshabilitarse a sí mismo
    if (currentUser?.userId === usuario.id) {
        setApiErrorMessage("No puede cambiar el estado de habilitación de su propio usuario.");
        return;
    }
    try {
        await usuarioService.toggleHabilitado(usuario.id, !usuario.habilitada);
        cargarUsuarios();
    } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al cambiar el estado del usuario.';
        setApiErrorMessage(message);
    }
  };


  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, usuario: UsuarioDto) => {
    setAnchorEl(event.currentTarget); setSelectedUsuarioRow(usuario);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedUsuarioRow(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 = usuarios.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  if (!loading && !puedeVer) {
      return <Box sx={{ p: 2 }}><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 Usuarios</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
         <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
            <TextField
                label="Filtrar por Usuario"
                variant="outlined"
                size="small"
                value={filtroUser}
                onChange={(e) => setFiltroUser(e.target.value)}
                sx={{ flexGrow: 1, minWidth: '200px' }}
            />
            <TextField
                label="Filtrar por Nombre/Apellido"
                variant="outlined"
                size="small"
                value={filtroNombre}
                onChange={(e) => setFiltroNombre(e.target.value)}
                sx={{ flexGrow: 1, minWidth: '200px' }}
            />
         </Box>
         {puedeCrear && (
             <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenUsuarioModal()} sx={{ mb: 2 }}>
                Agregar Nuevo Usuario
             </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>Usuario</TableCell>
                 <TableCell>Nombre Completo</TableCell>
                 <TableCell>Perfil</TableCell>
                 <TableCell>Habilitado</TableCell>
                 <TableCell>Cambiar Clave</TableCell>
                 <TableCell>SuperAdmin</TableCell>
                 <TableCell align="right">Acciones</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {displayData.length === 0 && !loading ? (
                  <TableRow><TableCell colSpan={7} align="center">No se encontraron usuarios.</TableCell></TableRow>
               ) : (
                 displayData.map((usr) => (
                     <TableRow key={usr.id}>
                     <TableCell>{usr.user}</TableCell>
                     <TableCell>{`${usr.nombre} ${usr.apellido}`}</TableCell>
                     <TableCell>{usr.nombrePerfil}</TableCell>
                     <TableCell>
                        <Tooltip title={usr.habilitada ? "Deshabilitar" : "Habilitar"}>
                            <Switch
                                checked={usr.habilitada}
                                onChange={() => handleToggleHabilitado(usr)}
                                disabled={!puedeModificar || currentUser?.userId === usr.id}
                                size="small"
                            />
                        </Tooltip>
                     </TableCell>
                     <TableCell>{usr.debeCambiarClave ? 'Sí' : 'No'}</TableCell>
                     <TableCell>{usr.supAdmin ? 'Sí' : 'No'}</TableCell>
                     <TableCell align="right">
                        <IconButton onClick={(e) => handleMenuOpen(e, usr)} disabled={!puedeModificar && !puedeAsignarPerfil && !puedeResetearClave}>
                            <MoreVertIcon />
                        </IconButton>
                     </TableCell>
                     </TableRow>
                 ))
               )}
             </TableBody>
           </Table>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25]} component="div" count={usuarios.length}
             rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
             onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
           />
         </TableContainer>
       )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {(puedeModificar || puedeAsignarPerfil) && (
            <MenuItem onClick={() => { handleOpenUsuarioModal(selectedUsuarioRow!); handleMenuClose(); }}>
              <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Modificar</ListItemText>
            </MenuItem>
        )}
        {puedeResetearClave && selectedUsuarioRow && currentUser?.userId !== selectedUsuarioRow.id && (
            <MenuItem onClick={() => handleOpenSetPasswordModal(selectedUsuarioRow!)}>
                <VpnKeyIcon fontSize="small" sx={{ mr: 1 }} /> Resetear Contraseña
            </MenuItem>
        )}
         {/* No hay "Eliminar" directo, se usa el switch de Habilitado */}
        {(!puedeModificar && !puedeAsignarPerfil && !puedeResetearClave) && <MenuItem disabled>Sin acciones</MenuItem>}
      </Menu>

      <UsuarioFormModal
        open={usuarioModalOpen} onClose={handleCloseUsuarioModal} onSubmit={handleSubmitUsuarioModal}
        initialData={editingUsuario} errorMessage={apiErrorMessage}
        clearErrorMessage={() => setApiErrorMessage(null)}
      />
      {selectedUsuarioForPassword && (
        <SetPasswordModal
            open={setPasswordModalOpen}
            onClose={handleCloseSetPasswordModal}
            onSubmit={handleSubmitSetPassword}
            usuario={selectedUsuarioForPassword}
            errorMessage={apiErrorMessage}
            clearErrorMessage={() => setApiErrorMessage(null)}
        />
      )}
    </Box>
  );
};

export default GestionarUsuariosPage;