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, FormControlLabel, ListItemIcon, ListItemText // << AÑADIR ListItemIcon, ListItemText
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import ToggleOnIcon from '@mui/icons-material/ToggleOn';
import HistoryIcon from '@mui/icons-material/History';
import ToggleOffIcon from '@mui/icons-material/ToggleOff';
import EditIcon from '@mui/icons-material/Edit';
import EventNoteIcon from '@mui/icons-material/EventNote'; // << AÑADIR IMPORTACIÓN DEL ICONO
import { useNavigate } from 'react-router-dom'; // << AÑADIR IMPORTACIÓN DE useNavigate

import canillaService from '../../services/Distribucion/canillaService';
import type { CanillaDto } from '../../models/dtos/Distribucion/CanillaDto';
import type { CreateCanillaDto } from '../../models/dtos/Distribucion/CreateCanillaDto';
import type { UpdateCanillaDto } from '../../models/dtos/Distribucion/UpdateCanillaDto';
import CanillaFormModal from '../../components/Modals/Distribucion/CanillaFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarCanillitasPage: React.FC = () => {
  const [canillitas, setCanillitas] = useState<CanillaDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filtroNomApe, setFiltroNomApe] = useState('');
  const [filtroLegajo, setFiltroLegajo] = useState<string>('');
  const [filtroSoloActivos, setFiltroSoloActivos] = useState<boolean | undefined>(true);


  const [modalOpen, setModalOpen] = useState(false);
  const [editingCanillita, setEditingCanillita] = useState<CanillaDto | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(25); // << CAMBIADO DE 5 a 25 (valor más común)
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedCanillitaRow, setSelectedCanillitaRow] = useState<CanillaDto | null>(null);

  const navigate = useNavigate(); // << INICIALIZAR useNavigate

  const { tienePermiso, isSuperAdmin } = usePermissions();

  const puedeVer = isSuperAdmin || tienePermiso("CG001");
  const puedeCrear = isSuperAdmin || tienePermiso("CG002");
  const puedeModificar = isSuperAdmin || tienePermiso("CG003");
  const puedeDarBaja = isSuperAdmin || tienePermiso("CG005");
  const puedeGestionarParadas = isSuperAdmin || tienePermiso("CG007");
  const puedeGestionarNovedades = isSuperAdmin || tienePermiso("CG006");
  const puedeVerNovedadesCanilla = puedeVer || puedeGestionarNovedades; // << LÓGICA PARA MOSTRAR LA OPCIÓN


  const cargarCanillitas = useCallback(async () => {
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección.");
      setLoading(false);
      return;
    }
    setLoading(true); setError(null); setApiErrorMessage(null);
    try {
      const legajoNum = filtroLegajo ? parseInt(filtroLegajo, 10) : undefined; // << CORREGIDO: parseInt con base 10
      if (filtroLegajo && isNaN(legajoNum!)) {
        setApiErrorMessage("Legajo debe ser un número.");
        setCanillitas([]);
        setLoading(false);
        return;
      }
      const data = await canillaService.getAllCanillas(filtroNomApe, legajoNum, filtroSoloActivos);
      setCanillitas(data);
    } catch (err) {
      console.error(err); setError('Error al cargar los canillitas.');
    } finally { setLoading(false); }
  }, [filtroNomApe, filtroLegajo, filtroSoloActivos, puedeVer]);

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

  const handleOpenModal = (canillita?: CanillaDto) => {
    setEditingCanillita(canillita || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingCanillita(null);
  };

  const handleSubmitModal = async (data: CreateCanillaDto | UpdateCanillaDto, id?: number) => {
    setApiErrorMessage(null);
    try {
      if (id && editingCanillita) {
        await canillaService.updateCanilla(id, data as UpdateCanillaDto);
      } else {
        await canillaService.createCanilla(data as CreateCanillaDto);
      }
      cargarCanillitas();
      // No es necesario llamar a handleCloseModal aquí si el modal se cierra solo en éxito
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el canillita.';
      setApiErrorMessage(message); throw err;
    }
  };

  const handleToggleBaja = async (canillita: CanillaDto) => {
    setApiErrorMessage(null);
    const accion = canillita.baja ? "reactivar" : "dar de baja";
    if (window.confirm(`¿Está seguro de que desea ${accion} a ${canillita.nomApe}?`)) {
      try {
        await canillaService.toggleBajaCanilla(canillita.idCanilla, { darDeBaja: !canillita.baja });
        cargarCanillitas();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : `Error al ${accion} el canillita.`;
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };

  const handleOpenNovedades = (idCan: number) => {
    navigate(`/distribucion/canillas/${idCan}/novedades`);
    handleMenuClose();
  };

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, canillita: CanillaDto) => {
    setAnchorEl(event.currentTarget); setSelectedCanillitaRow(canillita);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedCanillitaRow(null);
  };

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

  const handleOpenParadas = (idCan: number) => {
    navigate(`/distribucion/canillas/${idCan}/paradas`);
    handleMenuClose();
  };

  const displayData = canillitas.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>; // Mensaje más genérico
  }

  return (
    <Box sx={{ p: 1 }}>
      <Typography variant="h5" gutterBottom>Gestionar Canillitas</Typography>
      <Paper sx={{ p: 2, mb: 2 }}>
        <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
          <TextField
            label="Filtrar por Nombre/Apellido"
            variant="outlined"
            size="small"
            value={filtroNomApe}
            onChange={(e) => setFiltroNomApe(e.target.value)}
            sx={{ flex: 2, minWidth: '250px' }}
          />
          <TextField
            label="Filtrar por Legajo"
            type="number" // Mantener como number para el input, la conversión se hace al usarlo
            variant="outlined"
            size="small"
            value={filtroLegajo}
            onChange={(e) => setFiltroLegajo(e.target.value)}
            sx={{ flex: 1, minWidth: '150px' }}
          />
          <FormControlLabel
            control={
              <Switch
                checked={filtroSoloActivos === undefined ? true : filtroSoloActivos} // Default a true
                onChange={(e) => setFiltroSoloActivos(e.target.checked)}
                size="small"
              />
            }
            label="Ver Activos" // Cambiado el label para más claridad
            sx={{ flexShrink: 0 }}
          />
        </Box>
        {puedeCrear && (
          <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>Agregar Canillita</Button>
        )}
      </Paper>

      {loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
      {/* Mostrar error general si no hay error de API específico */}
      {error && !apiErrorMessage && !loading && <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>}
      {apiErrorMessage && <Alert severity="error" sx={{ my: 2 }}>{apiErrorMessage}</Alert>}

      {!loading && !error && puedeVer && ( // Asegurar que puedeVer sea true también acá
        <TableContainer component={Paper}>
          <Table size="small">
            <TableHead><TableRow>
              <TableCell>Legajo</TableCell><TableCell>Nombre y Apellido</TableCell>
              <TableCell>Zona</TableCell><TableCell>Empresa</TableCell>
              <TableCell>Accionista</TableCell><TableCell>Estado</TableCell>
              {/* Mostrar acciones solo si tiene algún permiso para el menú */}
              {(puedeModificar || puedeDarBaja || puedeVerNovedadesCanilla) && <TableCell align="right">Acciones</TableCell>}
            </TableRow></TableHead>
            <TableBody>
              {displayData.length === 0 ? (
                <TableRow><TableCell colSpan={(puedeModificar || puedeDarBaja || puedeVerNovedadesCanilla) ? 7 : 6} align="center">No se encontraron canillitas.</TableCell></TableRow>
              ) : (
                displayData.map((c) => (
                  <TableRow key={c.idCanilla} hover sx={{ backgroundColor: c.baja ? '#ffebee' : 'inherit' }}>
                    <TableCell>{c.legajo || '-'}</TableCell><TableCell>{c.nomApe}</TableCell>
                    <TableCell>{c.nombreZona}</TableCell><TableCell>{c.empresa === 0 ? '-' : c.nombreEmpresa}</TableCell>
                    <TableCell>{c.accionista ? <Chip label="Sí" color="success" size="small" variant="outlined" /> : <Chip label="No" color="default" size="small" variant="outlined" />}</TableCell>
                    <TableCell>{c.baja ? <Chip label="Baja" color="error" size="small" /> : <Chip label="Activo" color="success" size="small" />}</TableCell>
                    {(puedeModificar || puedeDarBaja || puedeVerNovedadesCanilla) && (
                      <TableCell align="right">
                        <IconButton onClick={(e) => handleMenuOpen(e, c)}
                          // Deshabilitar si NO tiene NINGUNO de los permisos para las acciones del menú
                          disabled={!puedeModificar && !puedeDarBaja && !puedeVerNovedadesCanilla}
                        >
                          <MoreVertIcon />
                        </IconButton>
                      </TableCell>
                    )}
                  </TableRow>
                )))}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[25, 50, 100]} component="div" count={canillitas.length}
            rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
          />
        </TableContainer>
      )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {/* Mostrar opción de Novedades si tiene permiso de ver canillitas o gestionar novedades */}
        {puedeVerNovedadesCanilla && selectedCanillitaRow && (
          <MenuItem onClick={() => handleOpenNovedades(selectedCanillitaRow.idCanilla)}>
            <ListItemIcon><EventNoteIcon /></ListItemIcon>
            <ListItemText>Novedades</ListItemText>
          </MenuItem>
        )}
        {puedeGestionarParadas && selectedCanillitaRow && (
          <MenuItem onClick={() => handleOpenParadas(selectedCanillitaRow.idCanilla)}>
            <ListItemIcon><HistoryIcon /></ListItemIcon> {/* Cambiar ícono si es necesario */}
            <ListItemText>Gestionar Paradas</ListItemText>
          </MenuItem>
        )}
        {puedeModificar && selectedCanillitaRow && ( // Asegurar que selectedCanillitaRow existe
          <MenuItem onClick={() => { handleOpenModal(selectedCanillitaRow); handleMenuClose(); }}>
            <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
            <ListItemText>Modificar</ListItemText>
          </MenuItem>
        )}
        {puedeDarBaja && selectedCanillitaRow && (
          <MenuItem onClick={() => handleToggleBaja(selectedCanillitaRow)}>
            <ListItemIcon>{selectedCanillitaRow.baja ? <ToggleOnIcon /> : <ToggleOffIcon />}</ListItemIcon>
            <ListItemText>{selectedCanillitaRow.baja ? 'Reactivar' : 'Dar de Baja'}</ListItemText>
          </MenuItem>
        )}

        {/* Mostrar "Sin acciones" si no hay ninguna acción permitida para la fila seleccionada */}
        {selectedCanillitaRow && !puedeModificar && !puedeDarBaja && !puedeVerNovedadesCanilla && (
          <MenuItem disabled>Sin acciones</MenuItem>
        )}
      </Menu>

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

export default GestionarCanillitasPage;