import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    Box, Typography, Button, Paper, CircularProgress, Alert, Table, TableContainer, TableHead,
    TableRow, TableCell, TableBody, Chip, Tooltip, IconButton, TextField,
    FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import EditIcon from '@mui/icons-material/Edit';
import CancelIcon from '@mui/icons-material/Cancel';
import ajusteService from '../../services/Suscripciones/ajusteService';
import suscriptorService from '../../services/Suscripciones/suscriptorService';
import empresaService from '../../services/Distribucion/empresaService';
import type { EmpresaDropdownDto } from '../../models/dtos/Distribucion/EmpresaDropdownDto';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import type { AjusteDto } from '../../models/dtos/Suscripciones/AjusteDto';
import type { CreateAjusteDto } from '../../models/dtos/Suscripciones/CreateAjusteDto';
import type { UpdateAjusteDto } from '../../models/dtos/Suscripciones/UpdateAjusteDto';
import type { SuscriptorDto } from '../../models/dtos/Suscripciones/SuscriptorDto';
import AjusteFormModal from '../../components/Modals/Suscripciones/AjusteFormModal';

const getInitialDateRange = () => {
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    const formatDate = (date: Date) => date.toISOString().split('T')[0];
    return {
        fechaDesde: formatDate(firstDay),
        fechaHasta: formatDate(lastDay)
    };
};

const CuentaCorrienteSuscriptorPage: React.FC = () => {
    const { idSuscriptor: idSuscriptorStr } = useParams<{ idSuscriptor: string }>();
    const navigate = useNavigate();
    const idSuscriptor = Number(idSuscriptorStr);

    const [suscriptor, setSuscriptor] = useState<SuscriptorDto | null>(null);
    const [ajustes, setAjustes] = useState<AjusteDto[]>([]);
    const [empresas, setEmpresas] = useState<EmpresaDropdownDto[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingAjuste, setEditingAjuste] = useState<AjusteDto | null>(null);
    const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
    const [filtroFechaDesde, setFiltroFechaDesde] = useState<string>(getInitialDateRange().fechaDesde);
    const [filtroFechaHasta, setFiltroFechaHasta] = useState<string>(getInitialDateRange().fechaHasta);

    const [filtroEstado, setFiltroEstado] = useState<string>('Todos'); // 'Todos', 'Pendiente', etc.
    const [filtroTipo, setFiltroTipo] = useState<string>('Todos');     // 'Todos', 'Credito', 'Debito'

    const { tienePermiso, isSuperAdmin } = usePermissions();
    const puedeGestionar = isSuperAdmin || tienePermiso("SU011");

    const cargarDatos = useCallback(async () => {
        const params = new URLSearchParams();
        if (filtroFechaDesde) params.append('fechaDesde', filtroFechaDesde);
        if (filtroFechaHasta) params.append('fechaHasta', filtroFechaHasta);
        // NOTA: El filtrado por estado y tipo se hará en el frontend por simplicidad,
        // pero si la cantidad de ajustes es muy grande, se deberían pasar estos filtros al backend.
        if (isNaN(idSuscriptor)) {
            setError("ID de Suscriptor inválido."); setLoading(false); return;
        }
        setLoading(true); setApiErrorMessage(null); setError(null);
        try {
            const [suscriptorData, ajustesData, empresasData] = await Promise.all([
                suscriptorService.getSuscriptorById(idSuscriptor),
                ajusteService.getAjustesPorSuscriptor(idSuscriptor, filtroFechaDesde || undefined, filtroFechaHasta || undefined),
                empresaService.getEmpresasDropdown()
            ]);

            setSuscriptor(suscriptorData);
            setAjustes(ajustesData);
            setEmpresas(empresasData);
        } catch (err) {
            setError("Error al cargar los datos.");
        } finally {
            setLoading(false);
        }
    }, [idSuscriptor, filtroFechaDesde, filtroFechaHasta]);

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

    // Lógica de filtrado en el cliente usando useMemo para eficiencia
    const ajustesFiltrados = useMemo(() => {
        return ajustes.filter(a => {
            const estadoMatch = filtroEstado === 'Todos' || a.estado === filtroEstado;
            const tipoMatch = filtroTipo === 'Todos' || a.tipoAjuste === filtroTipo;
            return estadoMatch && tipoMatch;
        });
    }, [ajustes, filtroEstado, filtroTipo]);

    // Función para renderizar la celda de Estado de forma inteligente
    const renderEstadoCell = (ajuste: AjusteDto) => {
        if (ajuste.estado !== 'Aplicado' || !ajuste.idFacturaAplicado) {
            return ajuste.estado;
        }
        if (ajuste.numeroFacturaAplicado) {
            return `Aplicado (Fact. ${ajuste.numeroFacturaAplicado})`;
        }
        return `Aplicado (ID Interno #${ajuste.idFacturaAplicado})`;
    };

    // --- INICIO DE LA LÓGICA DE SINCRONIZACIÓN DE FECHAS ---
    const handleFechaDesdeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const nuevaFechaDesde = e.target.value;
        setFiltroFechaDesde(nuevaFechaDesde);
        // Si la nueva fecha "desde" es posterior a la fecha "hasta", ajusta la fecha "hasta"
        if (nuevaFechaDesde && filtroFechaHasta && new Date(nuevaFechaDesde) > new Date(filtroFechaHasta)) {
            setFiltroFechaHasta(nuevaFechaDesde);
        }
    };

    const handleFechaHastaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const nuevaFechaHasta = e.target.value;
        setFiltroFechaHasta(nuevaFechaHasta);
        // Si la nueva fecha "hasta" es anterior a la fecha "desde", ajusta la fecha "desde"
        if (nuevaFechaHasta && filtroFechaDesde && new Date(nuevaFechaHasta) < new Date(filtroFechaDesde)) {
            setFiltroFechaDesde(nuevaFechaHasta);
        }
    };

    const handleOpenModal = (ajuste?: AjusteDto) => {
        setEditingAjuste(ajuste || null);
        setModalOpen(true);
    };

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

    const handleSubmitModal = async (data: CreateAjusteDto | UpdateAjusteDto, id?: number) => {
        setApiErrorMessage(null);
        try {
            if (id && editingAjuste) {
                await ajusteService.updateAjuste(id, data as UpdateAjusteDto);
            } else {
                await ajusteService.createAjusteManual(data as CreateAjusteDto);
            }
            cargarDatos();
        } catch (err: any) {
            const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el ajuste.';
            setApiErrorMessage(message);
            throw err;
        }
    };

    const handleAnularAjuste = async (idAjuste: number) => {
        if (window.confirm("¿Está seguro de que desea anular este ajuste? Esta acción no se puede deshacer.")) {
            setApiErrorMessage(null);
            try {
                await ajusteService.anularAjuste(idAjuste);
                cargarDatos();
            } catch (err: any) {
                setApiErrorMessage(err.response?.data?.message || "Error al anular el ajuste.");
            }
        }
    };

    const formatDisplayDate = (dateString: string): string => {
        if (!dateString) return '';
        const datePart = dateString.split(' ')[0];
        const parts = datePart.split('-');
        if (parts.length === 3) {
            return `${parts[2]}/${parts[1]}/${parts[0]}`;
        }
        return dateString;
    };

    if (loading && !suscriptor) return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
    if (error) return <Alert severity="error" sx={{ m: 2 }}>{error}</Alert>;

    return (
        <Box>
            <Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/suscripciones/suscriptores')} sx={{ mb: 2 }}>
                Volver a Suscriptores
            </Button>
            <Typography variant="h5" gutterBottom>Cuenta Corriente de:</Typography>
            <Typography variant="h4" color="primary" gutterBottom>{suscriptor?.nombreCompleto || ''}</Typography>

            <Paper sx={{ p: 2, mb: 2 }}>
                {/* Panel de filtros reorganizado */}
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap' }}>
                    <Box>
                        <Typography variant="subtitle1" gutterBottom>Filtros</Typography>
                        <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
                            <TextField
                                label="Fecha Desde"
                                type="date"
                                size="small"
                                value={filtroFechaDesde}
                                onChange={handleFechaDesdeChange}
                                InputLabelProps={{ shrink: true }}
                            />
                            <TextField
                                label="Fecha Hasta"
                                type="date"
                                size="small"
                                value={filtroFechaHasta}
                                onChange={handleFechaHastaChange}
                                InputLabelProps={{ shrink: true }}
                            />
                            <FormControl size="small" sx={{ minWidth: 150 }}>
                                <InputLabel>Estado</InputLabel>
                                <Select value={filtroEstado} label="Estado" onChange={(e) => setFiltroEstado(e.target.value)}>
                                    <MenuItem value="Todos">Todos</MenuItem>
                                    <MenuItem value="Pendiente">Pendiente</MenuItem>
                                    <MenuItem value="Aplicado">Aplicado</MenuItem>
                                    <MenuItem value="Anulado">Anulado</MenuItem>
                                </Select>
                            </FormControl>
                            <FormControl size="small" sx={{ minWidth: 150 }}>
                                <InputLabel>Tipo</InputLabel>
                                <Select value={filtroTipo} label="Tipo" onChange={(e) => setFiltroTipo(e.target.value)}>
                                    <MenuItem value="Todos">Todos</MenuItem>
                                    <MenuItem value="Credito">Crédito</MenuItem>
                                    <MenuItem value="Debito">Débito</MenuItem>
                                </Select>
                            </FormControl>
                        </Box>
                    </Box>
                    {puedeGestionar && (
                        <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mt: { xs: 2, md: 3.5 } }}>
                            Nuevo Ajuste
                        </Button>
                    )}
                </Box>
            </Paper>

            {apiErrorMessage && <Alert severity="error" sx={{ mb: 2 }}>{apiErrorMessage}</Alert>}

            <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell>Fecha Ajuste</TableCell>
                            <TableCell>Empresa</TableCell>
                            <TableCell>Tipo</TableCell>
                            <TableCell>Motivo</TableCell>
                            <TableCell align="right">Monto</TableCell>
                            <TableCell>Estado</TableCell>
                            <TableCell>Usuario Carga</TableCell>
                            <TableCell align="right">Acciones</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {loading ? (
                            <TableRow><TableCell colSpan={8} align="center"><CircularProgress size={24} /></TableCell></TableRow>
                        ) : ajustesFiltrados.length === 0 ? (
                            <TableRow><TableCell colSpan={8} align="center">No se encontraron ajustes para los filtros seleccionados.</TableCell></TableRow>
                        ) : (
                            ajustesFiltrados.map(a => (
                                <TableRow key={a.idAjuste} sx={{ '& .MuiTableCell-root': { color: a.estado === 'Anulado' ? 'text.disabled' : 'inherit' }, textDecoration: a.estado === 'Anulado' ? 'line-through' : 'none' }}>
                                    <TableCell>{formatDisplayDate(a.fechaAjuste)}</TableCell>
                                    <TableCell>{a.nombreEmpresa || 'N/A'}</TableCell>
                                    <TableCell>
                                        <Chip label={a.tipoAjuste} size="small" color={a.tipoAjuste === 'Credito' ? 'success' : 'error'} />
                                    </TableCell>
                                    <TableCell>{a.motivo}</TableCell>
                                    <TableCell align="right">${a.monto.toFixed(2)}</TableCell>
                                    <TableCell>{renderEstadoCell(a)}</TableCell>
                                    <TableCell>{a.nombreUsuarioAlta}</TableCell>
                                    <TableCell align="right">
                                        {a.estado === 'Pendiente' && puedeGestionar && (
                                            <>
                                                <Tooltip title="Editar Ajuste">
                                                    <IconButton onClick={() => handleOpenModal(a)} size="small">
                                                        <EditIcon />
                                                    </IconButton>
                                                </Tooltip>
                                                <Tooltip title="Anular Ajuste">
                                                    <IconButton onClick={() => handleAnularAjuste(a.idAjuste)} size="small">
                                                        <CancelIcon color="error" />
                                                    </IconButton>
                                                </Tooltip>
                                            </>
                                        )}
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </TableContainer>

            <AjusteFormModal
                open={modalOpen}
                onClose={handleCloseModal}
                onSubmit={handleSubmitModal}
                idSuscriptor={idSuscriptor}
                initialData={editingAjuste}
                errorMessage={apiErrorMessage}
                clearErrorMessage={() => setApiErrorMessage(null)}
                empresas={empresas}
            />
        </Box>
    );
};

export default CuentaCorrienteSuscriptorPage;