import React, { useState, useEffect, useCallback } from 'react';
import { Box, Typography, Paper, CircularProgress, Alert, Select, MenuItem, FormControl, InputLabel, Table, TableContainer, TableHead, TableRow, TableCell, TableBody, Chip, IconButton, Menu, ListItemIcon, ListItemText, Collapse, TextField, Tooltip } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import PaymentIcon from '@mui/icons-material/Payment';
import EmailIcon from '@mui/icons-material/Email';
import EditNoteIcon from '@mui/icons-material/EditNote';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import MailOutlineIcon from '@mui/icons-material/MailOutline';
import facturacionService from '../../services/Suscripciones/facturacionService';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import type { ResumenCuentaSuscriptorDto, FacturaConsolidadaDto } from '../../models/dtos/Suscripciones/ResumenCuentaSuscriptorDto';
import type { CreatePagoDto } from '../../models/dtos/Suscripciones/CreatePagoDto';
import type { EmailLogDto } from '../../models/dtos/Comunicaciones/EmailLogDto';
import PagoManualModal from '../../components/Modals/Suscripciones/PagoManualModal';
import HistorialEnviosModal from '../../components/Modals/Suscripciones/HistorialEnviosModal';

const anios = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i);
const meses = [
    { value: 1, label: 'Enero' }, { value: 2, label: 'Febrero' }, { value: 3, label: 'Marzo' },
    { value: 4, label: 'Abril' }, { value: 5, label: 'Mayo' }, { value: 6, label: 'Junio' },
    { value: 7, label: 'Julio' }, { value: 8, label: 'Agosto' }, { value: 9, label: 'Septiembre' },
    { value: 10, label: 'Octubre' }, { value: 11, label: 'Noviembre' }, { value: 12, label: 'Diciembre' }
];

const estadosPago = ['Pendiente', 'Pagada', 'Pagada Parcialmente', 'Rechazada', 'Anulada'];
const estadosFacturacion = ['Pendiente de Facturar', 'Facturado'];
const tiposFactura = ['Mensual', 'Alta'];

const SuscriptorRow: React.FC<{
    resumen: ResumenCuentaSuscriptorDto;
    handleMenuOpen: (event: React.MouseEvent<HTMLElement>, factura: FacturaConsolidadaDto) => void;
    handleOpenHistorial: (factura: FacturaConsolidadaDto) => void;
}> = ({ resumen, handleMenuOpen, handleOpenHistorial }) => {
    const [open, setOpen] = useState(false);
    const formatCurrency = (value: number) => `$${value.toFixed(2)}`;

    return (
        <React.Fragment>
            <TableRow sx={{ '& > *': { borderBottom: 'unset' } }} hover>
                <TableCell><IconButton size="small" onClick={() => setOpen(!open)}>{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}</IconButton></TableCell>
                <TableCell component="th" scope="row">{resumen.nombreSuscriptor}</TableCell>
                <TableCell align="right">
                    <Typography variant="body2" sx={{ fontWeight: 'bold', color: resumen.saldoPendienteTotal > 0 ? 'error.main' : 'success.main' }}>{formatCurrency(resumen.saldoPendienteTotal)}</Typography>
                    <Typography variant="caption" color="text.secondary">de {formatCurrency(resumen.importeTotal)}</Typography>
                </TableCell>
                <TableCell colSpan={6}></TableCell>
            </TableRow>
            <TableRow>
                <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={9}> {/* <-- Ajustado para la nueva columna */}
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <Box sx={{ margin: 1, padding: 2, backgroundColor: 'grey.50', borderRadius: 1 }}>
                            <Typography variant="h6" gutterBottom component="div" sx={{ fontSize: '1rem', fontWeight: 'bold' }}>Facturas del Período para {resumen.nombreSuscriptor}</Typography>
                            <Table size="small">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Empresa</TableCell>
                                        <TableCell align="right">Importe Total</TableCell>
                                        <TableCell align="right">Pagado</TableCell>
                                        <TableCell align="right">Saldo</TableCell>
                                        <TableCell>Tipo Factura</TableCell>
                                        <TableCell>Estado Pago</TableCell>
                                        <TableCell>Estado Facturación</TableCell>
                                        <TableCell>Nro. Factura</TableCell>
                                        <TableCell align="right">Acciones</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {resumen.facturas.map((factura) => {
                                        const saldo = factura.importeFinal - factura.totalPagado;
                                        return (
                                            <TableRow key={factura.idFactura}>
                                                <TableCell sx={{ fontWeight: 'medium' }}>{factura.nombreEmpresa}</TableCell>
                                                <TableCell align="right">{formatCurrency(factura.importeFinal)}</TableCell>
                                                <TableCell align="right" sx={{ color: 'success.dark' }}>{formatCurrency(factura.totalPagado)}</TableCell>
                                                <TableCell align="right" sx={{ fontWeight: 'bold', color: saldo > 0 ? 'error.main' : 'inherit' }}>{formatCurrency(saldo)}</TableCell>
                                                <TableCell>
                                                    <Chip label={factura.tipoFactura} size="small" color={factura.tipoFactura === 'Alta' ? 'secondary' : 'default'} />
                                                </TableCell>
                                                <TableCell><Chip label={factura.estadoPago} size="small" color={factura.estadoPago === 'Pagada' ? 'success' : (factura.estadoPago === 'Pagada Parcialmente' ? 'primary' : (factura.estadoPago === 'Rechazada' ? 'error' : 'default'))} /></TableCell>
                                                <TableCell><Chip label={factura.estadoFacturacion} size="small" color={factura.estadoFacturacion === 'Facturado' ? 'info' : 'warning'} /></TableCell>
                                                <TableCell>{factura.numeroFactura || '-'}</TableCell>
                                                <TableCell align="right">
                                                    <IconButton onClick={(e) => handleMenuOpen(e, factura)} disabled={factura.estadoPago === 'Anulada'}><MoreVertIcon /></IconButton>
                                                    <Tooltip title="Ver Historial de Envíos"><IconButton onClick={() => handleOpenHistorial(factura)}><MailOutlineIcon /></IconButton></Tooltip>
                                                </TableCell>
                                            </TableRow>
                                        );
                                    })}
                                </TableBody>
                            </Table>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>
    );
};

const ConsultaFacturasPage: React.FC = () => {
    const [selectedAnio, setSelectedAnio] = useState<number>(new Date().getFullYear());
    const [selectedMes, setSelectedMes] = useState<number>(new Date().getMonth() + 1);
    const [loading, setLoading] = useState(true);
    const [apiMessage, setApiMessage] = useState<string | null>(null);
    const [apiError, setApiError] = useState<string | null>(null);
    const [resumenes, setResumenes] = useState<ResumenCuentaSuscriptorDto[]>([]);
    const { tienePermiso, isSuperAdmin } = usePermissions();
    const puedeConsultar = isSuperAdmin || tienePermiso("SU006");
    const puedeGestionarFactura = isSuperAdmin || tienePermiso("SU006");
    const puedeRegistrarPago = isSuperAdmin || tienePermiso("SU008");
    const puedeEnviarEmail = isSuperAdmin || tienePermiso("SU009");
    const [filtroNombre, setFiltroNombre] = useState('');
    const [filtroEstadoPago, setFiltroEstadoPago] = useState('');
    const [filtroEstadoFacturacion, setFiltroEstadoFacturacion] = useState('');
    const [filtroTipoFactura, setFiltroTipoFactura] = useState('');

    const [selectedFactura, setSelectedFactura] = useState<FacturaConsolidadaDto | null>(null);
    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    const [pagoModalOpen, setPagoModalOpen] = useState(false);
    const [historialModalOpen, setHistorialModalOpen] = useState(false);
    const [logs, setLogs] = useState<EmailLogDto[]>([]);
    const [loadingLogs, setLoadingLogs] = useState(false);
    const [logError, setLogError] = useState<string | null>(null);

    const cargarResumenesDelPeriodo = useCallback(async () => {
        if (!puedeConsultar) return;
        setLoading(true);
        setApiError(null);
        try {
            const data = await facturacionService.getResumenesDeCuentaPorPeriodo(
                selectedAnio,
                selectedMes,
                filtroNombre || undefined,
                filtroEstadoPago || undefined,
                filtroEstadoFacturacion || undefined,
                filtroTipoFactura || undefined
            );
            setResumenes(data);
        } catch (err) {
            setResumenes([]);
            setApiError("Error al cargar los resúmenes de cuenta del período.");
        } finally {
            setLoading(false);
        }
    }, [selectedAnio, selectedMes, puedeConsultar, filtroNombre, filtroEstadoPago, filtroEstadoFacturacion, filtroTipoFactura]);

    useEffect(() => {
        const timer = setTimeout(() => {
            cargarResumenesDelPeriodo();
        }, 500);
        return () => clearTimeout(timer);
    }, [cargarResumenesDelPeriodo]);

    const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, factura: FacturaConsolidadaDto) => {
        setAnchorEl(event.currentTarget);
        setSelectedFactura(factura);
    };

    const handleMenuClose = () => { setAnchorEl(null); };
    const handleOpenPagoModal = () => { setPagoModalOpen(true); handleMenuClose(); };
    const handleClosePagoModal = () => { setPagoModalOpen(false); setSelectedFactura(null); };

    const handleOpenHistorial = async (factura: FacturaConsolidadaDto) => {
        setSelectedFactura(factura);
        setHistorialModalOpen(true);
        setLoadingLogs(true);
        setLogError(null);
        try {
            const data = await facturacionService.getHistorialEnvios(factura.idFactura);
            setLogs(data);
        } catch (err) {
            setLogError("Error al cargar el historial de envíos.");
        } finally {
            setLoadingLogs(false);
        }
    };

    const handleSubmitPagoModal = async (data: CreatePagoDto) => {
        setApiError(null);
        try {
            await facturacionService.registrarPagoManual(data);
            setApiMessage(`Pago para la factura registrado exitosamente.`);
            cargarResumenesDelPeriodo();
        } catch (err: any) {
            const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al registrar el pago.';
            setApiError(message);
            throw err;
        }
    };

    const handleUpdateNumeroFactura = async (factura: FacturaConsolidadaDto) => {
        const nuevoNumero = prompt("Ingrese el número de factura (ARCA):", factura.numeroFactura || "");
        handleMenuClose();
        if (nuevoNumero !== null && nuevoNumero.trim() !== "") {
            setApiError(null);
            try {
                await facturacionService.actualizarNumeroFactura(factura.idFactura, nuevoNumero.trim());
                setApiMessage(`Número de factura actualizado.`);
                cargarResumenesDelPeriodo();
            } catch (err: any) {
                setApiError(err.response?.data?.message || 'Error al actualizar el número de factura.');
            }
        }
    };

    const handleSendEmail = async (idFactura: number) => {
        if (!window.confirm(`¿Está seguro de enviar la factura por email? Se adjuntará el PDF si se encuentra.`)) return;
        setApiMessage(null);
        setApiError(null);
        try {
            const respuesta = await facturacionService.enviarFacturaPdfPorEmail(idFactura);
            setApiMessage(respuesta.message);
        } catch (err: any) {
            setApiError(err.response?.data?.message || 'Error al intentar enviar el email.');
        } finally {
            handleMenuClose();
        }
    };

    if (!puedeConsultar) return <Alert severity="error">No tiene permiso para acceder a esta sección.</Alert>;

    return (
        <Box sx={{ p: 1 }}>
            <Typography variant="h5" gutterBottom>Consulta de Facturas de Suscripciones</Typography>
            <Paper sx={{ p: 2, mb: 2 }}>
                <Typography variant="h6">Filtros</Typography>
                <Box sx={{ display: 'flex', gap: 2, my: 2, alignItems: 'center', flexWrap: 'wrap' }}>
                    <FormControl sx={{ minWidth: 150 }} size="small"><InputLabel>Mes</InputLabel><Select value={selectedMes} label="Mes" onChange={(e) => setSelectedMes(e.target.value as number)}>{meses.map(m => <MenuItem key={m.value} value={m.value}>{m.label}</MenuItem>)}</Select></FormControl>
                    <FormControl sx={{ minWidth: 120 }} size="small"><InputLabel>Año</InputLabel><Select value={selectedAnio} label="Año" onChange={(e) => setSelectedAnio(e.target.value as number)}>{anios.map(a => <MenuItem key={a} value={a}>{a}</MenuItem>)}</Select></FormControl>
                    <TextField label="Buscar por Suscriptor" size="small" value={filtroNombre} onChange={(e) => setFiltroNombre(e.target.value)} sx={{ flexGrow: 1, minWidth: '200px' }} />
                    <FormControl sx={{ minWidth: 200 }} size="small"><InputLabel>Estado de Pago</InputLabel><Select value={filtroEstadoPago} label="Estado de Pago" onChange={(e) => setFiltroEstadoPago(e.target.value)}><MenuItem value=""><em>Todos</em></MenuItem>{estadosPago.map(e => <MenuItem key={e} value={e}>{e}</MenuItem>)}</Select></FormControl>
                    <FormControl sx={{ minWidth: 200 }} size="small"><InputLabel>Estado de Facturación</InputLabel><Select value={filtroEstadoFacturacion} label="Estado de Facturación" onChange={(e) => setFiltroEstadoFacturacion(e.target.value)}><MenuItem value=""><em>Todos</em></MenuItem>{estadosFacturacion.map(e => <MenuItem key={e} value={e}>{e}</MenuItem>)}</Select></FormControl>
                    <FormControl sx={{ minWidth: 200 }} size="small">
                        <InputLabel>Tipo de Factura</InputLabel>
                        <Select
                            value={filtroTipoFactura}
                            label="Tipo de Factura"
                            onChange={(e) => setFiltroTipoFactura(e.target.value)}
                        >
                            <MenuItem value=""><em>Todos</em></MenuItem>
                            {tiposFactura.map(t => <MenuItem key={t} value={t}>{t}</MenuItem>)}
                        </Select>
                    </FormControl>
                </Box>
            </Paper>

            {apiError && <Alert severity="error" sx={{ my: 2 }}>{apiError}</Alert>}
            {apiMessage && <Alert severity="success" sx={{ my: 2 }}>{apiMessage}</Alert>}

            <TableContainer component={Paper}>
                <Table aria-label="collapsible table">
                    <TableHead><TableRow><TableCell /><TableCell>Suscriptor</TableCell><TableCell align="right">Saldo Total / Importe Total</TableCell><TableCell colSpan={6}></TableCell></TableRow></TableHead>
                    <TableBody>
                        {loading ? (<TableRow><TableCell colSpan={8} align="center"><CircularProgress /></TableCell></TableRow>)
                            : resumenes.length === 0 ? (<TableRow><TableCell colSpan={8} align="center">No hay facturas para el período seleccionado.</TableCell></TableRow>)
                                : (resumenes.map(resumen => (
                                    <SuscriptorRow
                                        key={resumen.idSuscriptor}
                                        resumen={resumen}
                                        handleMenuOpen={handleMenuOpen}
                                        handleOpenHistorial={handleOpenHistorial}
                                    />
                                )))}
                    </TableBody>
                </Table>
            </TableContainer>

            <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
                {selectedFactura && puedeRegistrarPago && (<MenuItem onClick={handleOpenPagoModal} disabled={selectedFactura.estadoPago === 'Pagada' || selectedFactura.estadoPago === 'Anulada'}><ListItemIcon><PaymentIcon fontSize="small" /></ListItemIcon><ListItemText>Registrar Pago Manual</ListItemText></MenuItem>)}
                {selectedFactura && puedeGestionarFactura && (<MenuItem onClick={() => handleUpdateNumeroFactura(selectedFactura)} disabled={selectedFactura.estadoPago === 'Anulada'}><ListItemIcon><EditNoteIcon fontSize="small" /></ListItemIcon><ListItemText>Cargar/Modificar Nro. Factura</ListItemText></MenuItem>)}
                {selectedFactura && puedeEnviarEmail && (<MenuItem onClick={() => handleSendEmail(selectedFactura.idFactura)} disabled={!selectedFactura.numeroFactura || selectedFactura.estadoPago === 'Anulada'}><ListItemIcon><EmailIcon fontSize="small" /></ListItemIcon><ListItemText>Enviar Factura (PDF)</ListItemText></MenuItem>)}
            </Menu>

            <PagoManualModal
                open={pagoModalOpen}
                onClose={handleClosePagoModal}
                onSubmit={handleSubmitPagoModal}
                factura={selectedFactura}
                nombreSuscriptor={
                    resumenes.find(r => r.idSuscriptor === selectedFactura?.idSuscriptor)?.nombreSuscriptor || ''
                }
                errorMessage={apiError}
                clearErrorMessage={() => setApiError(null)}
            />

            <HistorialEnviosModal
                open={historialModalOpen}
                onClose={() => setHistorialModalOpen(false)}
                logs={logs}
                isLoading={loadingLogs}
                error={logError}
                titulo={`Historial de Envíos para Factura ${selectedFactura?.numeroFactura || `#${selectedFactura?.idFactura}`}`}
            />
        </Box>
    );
};

export default ConsultaFacturasPage;