// Archivo: Frontend/src/pages/Suscripciones/GestionarSuscripcionesDeClientePage.tsx

import React, { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Box, Typography, Button, Paper, CircularProgress, Alert, Table, TableContainer, TableHead, TableRow, TableCell, TableBody, Chip, IconButton, Tooltip } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import LoyaltyIcon from '@mui/icons-material/Loyalty';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import suscripcionService from '../../services/Suscripciones/suscripcionService';
import suscriptorService from '../../services/Suscripciones/suscriptorService';
import type { SuscripcionDto } from '../../models/dtos/Suscripciones/SuscripcionDto';
import type { SuscriptorDto } from '../../models/dtos/Suscripciones/SuscriptorDto';
import type { CreateSuscripcionDto } from '../../models/dtos/Suscripciones/CreateSuscripcionDto';
import type { UpdateSuscripcionDto } from '../../models/dtos/Suscripciones/UpdateSuscripcionDto';
import SuscripcionFormModal from '../../components/Modals/Suscripciones/SuscripcionFormModal';
import GestionarPromocionesSuscripcionModal from '../../components/Modals/Suscripciones/GestionarPromocionesSuscripcionModal';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';

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

    const [suscriptor, setSuscriptor] = useState<SuscriptorDto | null>(null);
    const [suscripciones, setSuscripciones] = useState<SuscripcionDto[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingSuscripcion, setEditingSuscripcion] = useState<SuscripcionDto | null>(null);
    const [promocionesModalOpen, setPromocionesModalOpen] = useState(false);
    const [selectedSuscripcion, setSelectedSuscripcion] = useState<SuscripcionDto | null>(null);
    const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);

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

    const cargarDatos = useCallback(async () => {
        if (isNaN(idSuscriptor)) {
            setError("ID de Suscriptor inválido."); setLoading(false); return;
        }
        setLoading(true); setApiErrorMessage(null); setError(null);
        try {
            const [suscriptorData, suscripcionesData] = await Promise.all([
                suscriptorService.getSuscriptorById(idSuscriptor),
                suscripcionService.getSuscripcionesPorSuscriptor(idSuscriptor)
            ]);
            setSuscriptor(suscriptorData);
            setSuscripciones(suscripcionesData);
        } catch (err) {
            setError('Error al cargar los datos.');
        } finally {
            setLoading(false);
        }
    }, [idSuscriptor]);

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

    const handleOpenModal = (suscripcion?: SuscripcionDto) => {
        setEditingSuscripcion(suscripcion || null);
        setApiErrorMessage(null);
        setModalOpen(true);
    };

    const handleCloseModal = () => {
        setModalOpen(false);
        setEditingSuscripcion(null);
    };
    
    const handleSubmitModal = async (data: CreateSuscripcionDto | UpdateSuscripcionDto, id?: number) => {
        setApiErrorMessage(null);
        try {
            if (id && editingSuscripcion) {
                await suscripcionService.updateSuscripcion(id, data as UpdateSuscripcionDto);
            } else {
                await suscripcionService.createSuscripcion(data as CreateSuscripcionDto);
            }
            cargarDatos();
        } catch (err: any) {
            const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar la suscripción.';
            setApiErrorMessage(message);
            throw err;
        }
    };

    const handleOpenPromocionesModal = (suscripcion: SuscripcionDto) => {
        setSelectedSuscripcion(suscripcion);
        setPromocionesModalOpen(true);
    };

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

    if (loading) 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>Gestionar Suscripciones de:</Typography>
            <Typography variant="h4" color="primary" gutterBottom>{suscriptor?.nombreCompleto || ''}</Typography>
            
            <Paper sx={{ p: 2, mb: 2, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                {puedeGestionar && (
                    <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>
                        Nueva Suscripción
                    </Button>
                )}
            </Paper>

            {apiErrorMessage && <Alert severity="error" sx={{ mb: 2 }}>{apiErrorMessage}</Alert>}
            
            <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell sx={{ fontWeight: 'bold' }}>Publicación</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }}>Estado</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }}>Días Entrega</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }}>Inicio</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }}>Fin</TableCell>
                            <TableCell align="right" sx={{ fontWeight: 'bold' }}>Acciones</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {suscripciones.length === 0 ? (
                            <TableRow><TableCell colSpan={6} align="center">Este cliente no tiene suscripciones.</TableCell></TableRow>
                        ) : (
                            suscripciones.map((s) => (
                                <TableRow key={s.idSuscripcion} hover>
                                    <TableCell>{s.nombrePublicacion}</TableCell>
                                    <TableCell>
                                        <Chip 
                                            label={s.estado} 
                                            color={s.estado === 'Activa' ? 'success' : s.estado === 'Pausada' ? 'warning' : 'default'} 
                                            size="small" 
                                        />
                                    </TableCell>
                                    <TableCell>{s.diasEntrega.split(',').join(', ')}</TableCell>
                                    <TableCell>{formatDate(s.fechaInicio)}</TableCell>
                                    <TableCell>{formatDate(s.fechaFin)}</TableCell>
                                    <TableCell align="right">
                                        <Tooltip title="Editar Suscripción">
                                            <span>
                                                <IconButton onClick={() => handleOpenModal(s)} disabled={!puedeGestionar}><EditIcon /></IconButton>
                                            </span>
                                        </Tooltip>
                                        <Tooltip title="Gestionar Promociones">
                                            <span>
                                                <IconButton onClick={() => handleOpenPromocionesModal(s)} disabled={!puedeGestionar}><LoyaltyIcon /></IconButton>
                                            </span>
                                        </Tooltip>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </TableContainer>

            <SuscripcionFormModal
                open={modalOpen}
                onClose={handleCloseModal}
                onSubmit={handleSubmitModal}
                idSuscriptor={idSuscriptor}
                initialData={editingSuscripcion}
                errorMessage={apiErrorMessage}
                clearErrorMessage={() => setApiErrorMessage(null)}
            />

            <GestionarPromocionesSuscripcionModal
                open={promocionesModalOpen}
                onClose={() => setPromocionesModalOpen(false)}
                suscripcion={selectedSuscripcion}
            />
        </Box>
    );
};

export default GestionarSuscripcionesDeClientePage;