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'; // Icono para agregar
import MoreVertIcon from '@mui/icons-material/MoreVert'; // Icono para más opciones
import EditIcon from '@mui/icons-material/Edit'; // Icono para modificar
import DeleteIcon from '@mui/icons-material/Delete'; // Icono para eliminar
import plantaService from '../../services/Impresion/plantaService'; // Servicio de Plantas
import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
import type { CreatePlantaDto } from '../../models/dtos/Impresion/CreatePlantaDto';
import type { UpdatePlantaDto } from '../../models/dtos/Impresion/UpdatePlantaDto';
import PlantaFormModal from '../../components/Modals/Impresion/PlantaFormModal'; // Modal de Plantas
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarPlantasPage: React.FC = () => {
  const [plantas, setPlantas] = useState<PlantaDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroNombre, setFiltroNombre] = useState('');
  const [filtroDetalle, setFiltroDetalle] = useState(''); // Añadir filtro por detalle si se desea

  const [modalOpen, setModalOpen] = useState(false);
  const [editingPlanta, setEditingPlanta] = useState<PlantaDto | 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 [selectedPlantaRow, setSelectedPlantaRow] = useState<PlantaDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();

  // Permisos específicos para Plantas (IP001 a IP004)
  const puedeVer = isSuperAdmin || tienePermiso("IP001");
  const puedeCrear = isSuperAdmin || tienePermiso("IP002");
  const puedeModificar = isSuperAdmin || tienePermiso("IP003");
  const puedeEliminar = isSuperAdmin || tienePermiso("IP004");

  const cargarPlantas = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección.");
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    setApiErrorMessage(null);
    try {
      // Pasar ambos filtros al servicio
      const data = await plantaService.getAllPlantas(filtroNombre, filtroDetalle);
      setPlantas(data);
    } catch (err) {
      console.error(err);
      setError('Error al cargar las plantas de impresión.');
    } finally {
      setLoading(false);
    }
    // Añadir filtroDetalle a las dependencias si se usa
  }, [filtroNombre, filtroDetalle, puedeVer]);

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

  const handleOpenModal = (planta?: PlantaDto) => {
    setEditingPlanta(planta || null);
    setApiErrorMessage(null);
    setModalOpen(true);
  };

  const handleCloseModal = () => {
    setModalOpen(false);
    setEditingPlanta(null);
  };

  const handleSubmitModal = async (data: CreatePlantaDto | (UpdatePlantaDto & { idPlanta: number })) => {
    setApiErrorMessage(null);
    try {
      if (editingPlanta && 'idPlanta' in data) {
        await plantaService.updatePlanta(editingPlanta.idPlanta, data);
      } else {
        await plantaService.createPlanta(data as CreatePlantaDto);
      }
      cargarPlantas();
    } catch (err: any) {
      console.error("Error en submit modal (padre - Plantas):", err);
      const message = axios.isAxiosError(err) && err.response?.data?.message
        ? err.response.data.message
        : 'Ocurrió un error inesperado al guardar la planta.';
      setApiErrorMessage(message);
      throw err;
    }
  };

  const handleDelete = async (id: number) => {
    if (window.confirm(`¿Está seguro de que desea eliminar esta planta (ID: ${id})?`)) {
      setApiErrorMessage(null);
      try {
        await plantaService.deletePlanta(id);
        cargarPlantas();
      } catch (err: any) {
        console.error("Error al eliminar planta:", err);
        const message = axios.isAxiosError(err) && err.response?.data?.message
          ? err.response.data.message
          : 'Ocurrió un error inesperado al eliminar la planta.';
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, planta: PlantaDto) => {
    setAnchorEl(event.currentTarget);
    setSelectedPlantaRow(planta);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    setSelectedPlantaRow(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 = plantas.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  if (!loading && !puedeVer) {
    return (
      <Box sx={{ p: 1 }}>
        <Typography variant="h5" gutterBottom>Gestionar Plantas de Impresión</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 Plantas de Impresión
      </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)}
          />
          <TextField
            label="Filtrar por Detalle"
            variant="outlined"
            size="small"
            value={filtroDetalle}
            onChange={(e) => setFiltroDetalle(e.target.value)}
          />
          {/* <Button variant="contained" onClick={cargarPlantas}>Buscar</Button> */}
        </Box>
        {puedeCrear && (
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              onClick={() => handleOpenModal()}
              sx={{ mb: 2 }}
            >
              Agregar Nueva Planta
            </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</TableCell>
                <TableCell>Detalle</TableCell>
                {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
              </TableRow>
            </TableHead>
            <TableBody>
              {displayData.length === 0 && !loading ? (
                <TableRow><TableCell colSpan={(puedeModificar || puedeEliminar) ? 3 : 2} align="center">No se encontraron plantas de impresión.</TableCell></TableRow>
              ) : (
                displayData.map((planta) => (
                  <TableRow key={planta.idPlanta}>
                    <TableCell>{planta.nombre}</TableCell>
                    <TableCell>{planta.detalle}</TableCell> {/* Detalle no es opcional */}
                    {(puedeModificar || puedeEliminar) && (
                      <TableCell align="right">
                        <IconButton
                          onClick={(e) => handleMenuOpen(e, planta)}
                          disabled={!puedeModificar && !puedeEliminar}
                        >
                          <MoreVertIcon />
                        </IconButton>
                      </TableCell>
                    )}
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[25, 50, 100]}
            component="div"
            count={plantas.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
            labelRowsPerPage="Filas por página:"
          />
        </TableContainer>
      )}

      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleMenuClose}
      >
        {puedeModificar && (
          <MenuItem onClick={() => { handleOpenModal(selectedPlantaRow!); handleMenuClose(); }}>
            <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Modificar</ListItemText>
          </MenuItem>
        )}
        {puedeEliminar && (
          <MenuItem onClick={() => handleDelete(selectedPlantaRow!.idPlanta)}>
            <ListItemIcon><DeleteIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Eliminar</ListItemText>
          </MenuItem>
        )}
        {(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
      </Menu>

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

export default GestionarPlantasPage;