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, ListItemIcon, ListItemText, FormControlLabel } 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 ToggleOnIcon from '@mui/icons-material/ToggleOn';
import ToggleOffIcon from '@mui/icons-material/ToggleOff';
import suscriptorService from '../../services/Suscripciones/suscriptorService';
import type { SuscriptorDto } from '../../models/dtos/Suscripciones/SuscriptorDto';
import type { CreateSuscriptorDto } from '../../models/dtos/Suscripciones/CreateSuscriptorDto';
import type { UpdateSuscriptorDto } from '../../models/dtos/Suscripciones/UpdateSuscriptorDto';
import SuscriptorFormModal from '../../components/Modals/Suscripciones/SuscriptorFormModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import ArticleIcon from '@mui/icons-material/Article';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';

const GestionarSuscriptoresPage: React.FC = () => {
    const [suscriptores, setSuscriptores] = useState<SuscriptorDto[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [filtroNombre, setFiltroNombre] = useState('');
    const [filtroNroDoc, setFiltroNroDoc] = useState('');
    const [filtroSoloActivos, setFiltroSoloActivos] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingSuscriptor, setEditingSuscriptor] = useState<SuscriptorDto | null>(null);
    const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(15);
    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    const [selectedRow, setSelectedRow] = useState<SuscriptorDto | null>(null);

    const { tienePermiso, isSuperAdmin } = usePermissions();
    const navigate = useNavigate();

    const puedeVer = isSuperAdmin || tienePermiso("SU001");
    const puedeCrear = isSuperAdmin || tienePermiso("SU002");
    const puedeModificar = isSuperAdmin || tienePermiso("SU003");
    const puedeActivarDesactivar = isSuperAdmin || tienePermiso("SU004");
    const puedeVerSuscripciones = isSuperAdmin || tienePermiso("SU005");
    const puedeVerCuentaCorriente = isSuperAdmin || tienePermiso("SU011");

    const cargarSuscriptores = 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 suscriptorService.getAllSuscriptores(filtroNombre, filtroNroDoc, filtroSoloActivos);
            setSuscriptores(data);
        } catch (err) {
            console.error(err);
            setError('Error al cargar los suscriptores.');
        } finally {
            setLoading(false);
        }
    }, [filtroNombre, filtroNroDoc, filtroSoloActivos, puedeVer]);

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

    const handleOpenModal = (suscriptor?: SuscriptorDto) => {
        setEditingSuscriptor(suscriptor || null);
        setApiErrorMessage(null);
        setModalOpen(true);
    };

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

    const handleSubmitModal = async (data: CreateSuscriptorDto | UpdateSuscriptorDto, id?: number) => {
        setApiErrorMessage(null);
        try {
            if (id && editingSuscriptor) {
                await suscriptorService.updateSuscriptor(id, data as UpdateSuscriptorDto);
            } else {
                await suscriptorService.createSuscriptor(data as CreateSuscriptorDto);
            }
            cargarSuscriptores();
        } catch (err: any) {
            let message = 'Error al guardar el suscriptor.';
            if (axios.isAxiosError(err) && err.response?.data?.errors) {
                const validationErrors = err.response.data.errors;
                const errorMessages = Object.values(validationErrors).flat();
                message = errorMessages.join(' ');
            } else if (axios.isAxiosError(err) && err.response?.data?.message) {
                message = err.response.data.message;
            }
            setApiErrorMessage(message);
            throw err;
        }
    };

    const handleToggleActivo = async (suscriptor: SuscriptorDto) => {
        const action = suscriptor.activo ? 'desactivar' : 'activar';
        if (window.confirm(`¿Está seguro de que desea ${action} a ${suscriptor.nombreCompleto}?`)) {
            setApiErrorMessage(null);
            try {
                if (suscriptor.activo) {
                    await suscriptorService.deactivateSuscriptor(suscriptor.idSuscriptor);
                } else {
                    await suscriptorService.activateSuscriptor(suscriptor.idSuscriptor);
                }
                cargarSuscriptores();
            } catch (err: any) {
                const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : `Error al ${action} el suscriptor.`;
                setApiErrorMessage(message);
            }
        }
        handleMenuClose();
    };

    const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, suscriptor: SuscriptorDto) => {
        setAnchorEl(event.currentTarget);
        setSelectedRow(suscriptor);
    };

    const handleMenuClose = () => {
        setAnchorEl(null);
        setSelectedRow(null);
    };

    // --- INICIO DE LA CORRECCIÓN CLAVE ---
    const handleNavigateToSuscripciones = (idSuscriptor: number) => {
        // La ruta debe ser la ruta completa y final que renderiza el componente
        navigate(`/suscripciones/suscriptor/${idSuscriptor}/suscripciones`);
        handleMenuClose();
    };
    // --- FIN DE LA CORRECCIÓN CLAVE ---

    const handleNavigateToCuentaCorriente = (idSuscriptor: number) => {
        navigate(`/suscripciones/suscriptor/${idSuscriptor}/cuenta-corriente`);
        handleMenuClose();
    };

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

    const displayData = suscriptores.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

    if (!puedeVer) {
        return <Box sx={{ p: 2 }}><Alert severity="error">{error || "No tiene permiso para ver esta sección."}</Alert></Box>;
    }

    return (
        <Box sx={{ p: 1 }}>
            <Typography variant="h5" gutterBottom>Gestionar Suscriptores</Typography>
            <Paper sx={{ p: 2, mb: 2 }}>
                <Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
                    <TextField label="Filtrar por Nombre" variant="outlined" size="small" value={filtroNombre} onChange={(e) => setFiltroNombre(e.target.value)} sx={{ flexGrow: 1 }} />
                    <TextField label="Filtrar por Nro. Doc" variant="outlined" size="small" value={filtroNroDoc} onChange={(e) => setFiltroNroDoc(e.target.value)} sx={{ flexGrow: 1 }} />
                    <FormControlLabel control={<Switch checked={filtroSoloActivos} onChange={(e) => setFiltroSoloActivos(e.target.checked)} />} label="Solo Activos" />
                </Box>
                {puedeCrear && <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>Nuevo Suscriptor</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 size="small">
                            <TableHead><TableRow>
                                <TableCell>Nombre</TableCell><TableCell>Documento</TableCell><TableCell>Dirección</TableCell>
                                <TableCell>Forma de Pago</TableCell><TableCell>Mail</TableCell><TableCell>Estado</TableCell><TableCell align="right">Acciones</TableCell>
                            </TableRow></TableHead>
                            <TableBody>
                                {displayData.map((s) => (
                                    <TableRow key={s.idSuscriptor} hover>
                                        <TableCell>{s.nombreCompleto}</TableCell>
                                        <TableCell>{s.tipoDocumento} {s.nroDocumento}</TableCell>
                                        <TableCell>{s.direccion}</TableCell>
                                        <TableCell>{s.nombreFormaPagoPreferida}</TableCell>
                                        <TableCell>{s.email}</TableCell>
                                        <TableCell><Chip label={s.activo ? 'Activo' : 'Inactivo'} color={s.activo ? 'success' : 'default'} size="small" /></TableCell>
                                        <TableCell align="right">
                                            <IconButton onClick={(e) => handleMenuOpen(e, s)}><MoreVertIcon /></IconButton>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                    <TablePagination rowsPerPageOptions={[15, 25, 50]} component="div" count={suscriptores.length} rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage} onRowsPerPageChange={handleChangeRowsPerPage} />
                </>
            )}

            <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
                {selectedRow && puedeModificar && (
                    <MenuItem onClick={() => { handleOpenModal(selectedRow); handleMenuClose(); }}>
                        <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
                        <ListItemText>Editar Datos</ListItemText>
                    </MenuItem>
                )}
                {selectedRow && puedeVerSuscripciones && (
                    <MenuItem onClick={() => handleNavigateToSuscripciones(selectedRow.idSuscriptor)}>
                        <ListItemIcon><ArticleIcon fontSize="small" /></ListItemIcon>
                        <ListItemText>Ver Suscripciones</ListItemText>
                    </MenuItem>
                )}
                {selectedRow && puedeVerCuentaCorriente && (
                    <MenuItem onClick={() => handleNavigateToCuentaCorriente(selectedRow.idSuscriptor)}>
                        <ListItemIcon><AccountBalanceWalletIcon fontSize="small" /></ListItemIcon>
                        <ListItemText>Ver Cuenta Corriente</ListItemText>
                    </MenuItem>
                )}
                {selectedRow && puedeActivarDesactivar && (
                    <MenuItem onClick={() => handleToggleActivo(selectedRow)}>
                        {selectedRow.activo ? <ListItemIcon><ToggleOffIcon fontSize="small" /></ListItemIcon> : <ListItemIcon><ToggleOnIcon fontSize="small" /></ListItemIcon>}
                        <ListItemText>{selectedRow.activo ? 'Desactivar' : 'Activar'}</ListItemText>
                    </MenuItem>
                )}
            </Menu>

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

export default GestionarSuscriptoresPage;