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, FormControl, InputLabel, Select, Tooltip
} 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 FilterListIcon from '@mui/icons-material/FilterList';

import controlDevolucionesService from '../../services/Distribucion/controlDevolucionesService';
import empresaService from '../../services/Distribucion/empresaService';

import type { ControlDevolucionesDto } from '../../models/dtos/Distribucion/ControlDevolucionesDto';
import type { CreateControlDevolucionesDto } from '../../models/dtos/Distribucion/CreateControlDevolucionesDto';
import type { UpdateControlDevolucionesDto } from '../../models/dtos/Distribucion/UpdateControlDevolucionesDto';
import type { EmpresaDropdownDto } from '../../models/dtos/Distribucion/EmpresaDropdownDto';

import ControlDevolucionesFormModal from '../../components/Modals/Distribucion/ControlDevolucionesFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

const GestionarControlDevolucionesPage: React.FC = () => {
  // ... (estados sin cambios) ...
  const [controles, setControles] = useState<ControlDevolucionesDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

  const [filtroFechaDesde, setFiltroFechaDesde] = useState<string>(new Date().toISOString().split('T')[0]);
  const [filtroFechaHasta, setFiltroFechaHasta] = useState<string>(new Date().toISOString().split('T')[0]);
  const [filtroIdEmpresa, setFiltroIdEmpresa] = useState<number | string>('');

  const [empresas, setEmpresas] = useState<EmpresaDropdownDto[]>([]);
  const [loadingFiltersDropdown, setLoadingFiltersDropdown] = useState(true); // << CAMBIO: Iniciar en true

  const [modalOpen, setModalOpen] = useState(false);
  const [editingControl, setEditingControl] = useState<ControlDevolucionesDto | null>(null);

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(25);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [selectedRow, setSelectedRow] = useState<ControlDevolucionesDto | null>(null);

  const { tienePermiso, isSuperAdmin } = usePermissions();
  const puedeVer = isSuperAdmin || tienePermiso("CD001");
  const puedeCrear = isSuperAdmin || tienePermiso("CD002");
  const puedeModificar = isSuperAdmin || tienePermiso("CD003");
  // << CAMBIO: Permiso de eliminar debe ser diferente
  const puedeEliminar = isSuperAdmin || tienePermiso("CD004"); // Asumiendo que CD004 es para eliminar

  // ... (formatDate sin cambios) ...
  const formatDate = (dateString?: string | null): string => {
    if (!dateString) return '-';
    const datePart = dateString.split('T')[0]; 
    const parts = datePart.split('-');
    if (parts.length === 3) {
      return `${parts[2]}/${parts[1]}/${parts[0]}`;
    }
    return datePart;
  };

  const fetchFiltersDropdownData = useCallback(async () => {
    // << CAMBIO: Guardián de permisos para la carga de filtros
    if (!puedeVer) {
      setError("No tiene permiso para ver esta sección.");
      setLoading(false); // Detiene el spinner principal
      setLoadingFiltersDropdown(false); // Detiene el spinner de filtros
      return;
    }

    setLoadingFiltersDropdown(true);
    try {
      const empresasData = await empresaService.getEmpresasDropdown();
      setEmpresas(empresasData);
    } catch (err) {
      console.error("Error cargando empresas para filtro:", err);
      // El error principal se manejará en cargarControles si también falla
      setError("Error al cargar opciones de filtro.");
    } finally {
      setLoadingFiltersDropdown(false);
    }
  }, [puedeVer]); // << CAMBIO: Añadir `puedeVer` como dependencia

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

  const cargarControles = useCallback(async () => {
    // El guardián aquí ya estaba y es correcto.
    if (!puedeVer) {
      // Si ya se estableció el error en el fetch de filtros, no lo sobrescribimos.
      if (!error) setError("No tiene permiso para ver esta sección.");
      setLoading(false);
      return;
    }

    setLoading(true);
    setError(null);
    setApiErrorMessage(null);
    try {
      const params = {
        fechaDesde: filtroFechaDesde || null,
        fechaHasta: filtroFechaHasta || null,
        idEmpresa: filtroIdEmpresa ? Number(filtroIdEmpresa) : null,
      };
      const data = await controlDevolucionesService.getAllControlesDevoluciones(params);
      setControles(data);
    } catch (err) {
      console.error(err);
      setError('Error al cargar los controles de devoluciones.');
    } finally {
      setLoading(false);
    }
  }, [puedeVer, filtroFechaDesde, filtroFechaHasta, filtroIdEmpresa, error]); // << CAMBIO: Añadido `error` a dependencias

  useEffect(() => {
    // Solo cargar controles si los filtros se han cargado (o intentado cargar)
    if (!loadingFiltersDropdown) {
        cargarControles();
    }
  }, [cargarControles, loadingFiltersDropdown]); // << CAMBIO: Depende de la carga de filtros

  // ... (resto de los handlers sin cambios) ...
  const handleOpenModal = (item?: ControlDevolucionesDto) => {
    setEditingControl(item || null); setApiErrorMessage(null); setModalOpen(true);
  };
  const handleCloseModal = () => {
    setModalOpen(false); setEditingControl(null);
  };
  const handleSubmitModal = async (data: CreateControlDevolucionesDto | UpdateControlDevolucionesDto, idControl?: number) => {
    setApiErrorMessage(null);
    try {
      if (idControl && editingControl) {
        await controlDevolucionesService.updateControlDevoluciones(idControl, data as UpdateControlDevolucionesDto);
      } else {
        await controlDevolucionesService.createControlDevoluciones(data as CreateControlDevolucionesDto);
      }
      cargarControles();
    } catch (err: any) {
      const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el control.';
      setApiErrorMessage(message); throw err;
    }
  };
  const handleDelete = async (idControl: number) => {
    if (window.confirm(`¿Seguro de eliminar este control de devoluciones (ID: ${idControl})?`)) {
      setApiErrorMessage(null);
      try {
        await controlDevolucionesService.deleteControlDevoluciones(idControl);
        cargarControles();
      } catch (err: any) {
        const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar.';
        setApiErrorMessage(message);
      }
    }
    handleMenuClose();
  };
  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, item: ControlDevolucionesDto) => {
    setAnchorEl(event.currentTarget); setSelectedRow(item);
  };
  const handleMenuClose = () => {
    setAnchorEl(null); setSelectedRow(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 = controles.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
  
  // Si no tiene permiso, muestra solo la alerta y nada más.
  if (!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>Control de Devoluciones a Empresa</Typography>
      
      {/* El resto del JSX se renderizará solo si 'puedeVer' es true */}
      
      <Paper sx={{ p: 2, mb: 2 }}>
        <Typography variant="h6" gutterBottom>Filtros <FilterListIcon fontSize="small" /></Typography>
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center', mb: 2 }}>
          <TextField label="Fecha Desde" type="date" size="small" value={filtroFechaDesde} onChange={(e) => setFiltroFechaDesde(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 170 }} />
          <TextField label="Fecha Hasta" type="date" size="small" value={filtroFechaHasta} onChange={(e) => setFiltroFechaHasta(e.target.value)} InputLabelProps={{ shrink: true }} sx={{ minWidth: 170 }} />
          <FormControl size="small" sx={{ minWidth: 200, flexGrow: 1 }} disabled={loadingFiltersDropdown}>
            <InputLabel>Empresa</InputLabel>
            <Select value={filtroIdEmpresa} label="Empresa" onChange={(e) => setFiltroIdEmpresa(e.target.value as number | string)}>
              <MenuItem value=""><em>Todas</em></MenuItem>
              {empresas.map(e => <MenuItem key={e.idEmpresa} value={e.idEmpresa}>{e.nombre}</MenuItem>)}
            </Select>
          </FormControl>
        </Box>
        {puedeCrear && (<Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>Registrar Control</Button>)}
      </Paper>

      {(loading || loadingFiltersDropdown) && <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 && !loadingFiltersDropdown && !error && (
        <TableContainer component={Paper} sx={{ maxHeight: 'calc(100vh - 300px)' }}> {/* Ajusta maxHeight */}
          <Table stickyHeader size="small">
            <TableHead><TableRow>
              <TableCell>Fecha</TableCell><TableCell>Empresa</TableCell>
              <TableCell align="right">Entrada (Por Remito)</TableCell>
              <TableCell align="right">Sobrantes</TableCell>
              <TableCell align="right">Ejemplares Sin Cargo</TableCell>
              <TableCell>Detalle</TableCell>
              {(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
            </TableRow></TableHead>
            <TableBody>
              {displayData.length === 0 ? (
                <TableRow><TableCell colSpan={puedeModificar || puedeEliminar ? 7 : 6} align="center">No se encontraron controles con los filtros aplicados.</TableCell></TableRow>
              ) : (
                displayData.map((c) => (
                  <TableRow key={c.idControl} hover>
                    <TableCell>{formatDate(c.fecha)}</TableCell>
                    <TableCell>{c.nombreEmpresa}</TableCell>
                    <TableCell align="right">{c.entrada}</TableCell>
                    <TableCell align="right">{c.sobrantes}</TableCell>
                    <TableCell align="right">{c.sinCargo}</TableCell>
                    <TableCell><Tooltip title={c.detalle || ''}><Box sx={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.detalle || '-'}</Box></Tooltip></TableCell>
                    {(puedeModificar || puedeEliminar) && (
                      <TableCell align="right">
                        <IconButton onClick={(e) => handleMenuOpen(e, c)} disabled={!puedeModificar && !puedeEliminar}><MoreVertIcon /></IconButton>
                      </TableCell>
                    )}
                  </TableRow>
                )))}
            </TableBody>
          </Table>
          <TablePagination
            rowsPerPageOptions={[25, 50, 100]} component="div" count={controles.length}
            rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
          />
        </TableContainer>
      )}

      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
        {puedeModificar && selectedRow && (
          <MenuItem onClick={() => { handleOpenModal(selectedRow); handleMenuClose(); }}><EditIcon fontSize="small" sx={{ mr: 1 }} /> Modificar</MenuItem>)}
        {puedeEliminar && selectedRow && (
          <MenuItem onClick={() => { if (selectedRow) handleDelete(selectedRow.idControl) }}>
            <DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Eliminar
          </MenuItem>
        )}
      </Menu>

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

export default GestionarControlDevolucionesPage;