import React, { useState, useEffect, useCallback } from 'react';
import { Box, Typography, Button, Paper, CircularProgress, Alert, Table, TableContainer, TableHead, TableRow, TableCell, TableBody, Chip, IconButton, Switch, FormControlLabel, Tooltip } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import promocionService from '../../services/Suscripciones/promocionService';
import { usePermissions } from '../../hooks/usePermissions';
import axios from 'axios';
import type { PromocionDto } from '../../models/dtos/Suscripciones/PromocionDto';
import type { CreatePromocionDto, UpdatePromocionDto } from '../../models/dtos/Suscripciones/CreatePromocionDto';
import PromocionFormModal from '../../components/Modals/Suscripciones/PromocionFormModal';

const GestionarPromocionesPage: React.FC = () => {
    const [promociones, setPromociones] = useState<PromocionDto[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [filtroSoloActivas, setFiltroSoloActivas] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingPromocion, setEditingPromocion] = useState<PromocionDto | null>(null);
    const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
    
    const { tienePermiso, isSuperAdmin } = usePermissions();
    const puedeGestionar = isSuperAdmin || tienePermiso("SU010");

    const cargarDatos = useCallback(async () => {
        if (!puedeGestionar) { 
            setError("No tiene permiso para gestionar promociones."); 
            setLoading(false); 
            return; 
        }
        setLoading(true);
        setError(null);
        setApiErrorMessage(null);
        try {
            const data = await promocionService.getAllPromociones(filtroSoloActivas);
            setPromociones(data);
        } catch (err) { 
            setError("Error al cargar las promociones."); 
        } finally { 
            setLoading(false); 
        }
    }, [filtroSoloActivas, puedeGestionar]);

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

    const handleOpenModal = (promocion?: PromocionDto) => {
        setEditingPromocion(promocion || null);
        setApiErrorMessage(null);
        setModalOpen(true);
    };

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

    const handleSubmitModal = async (data: CreatePromocionDto | UpdatePromocionDto, id?: number) => {
        setApiErrorMessage(null);
        try {
            if (id && editingPromocion) {
                await promocionService.updatePromocion(id, data as UpdatePromocionDto);
            } else {
                await promocionService.createPromocion(data as CreatePromocionDto);
            }
            cargarDatos();
        } catch (err: any) {
            const message = axios.isAxiosError(err) && err.response?.data?.message
                ? err.response.data.message
                : 'Error al guardar la promoción.';
            setApiErrorMessage(message);
            throw err;
        }
    };
    
    const formatDate = (dateString?: string | null) => {
        if (!dateString) return 'Indefinido';
        const parts = dateString.split('-');
        return `${parts[2]}/${parts[1]}/${parts[0]}`;
    };

    const formatTipo = (tipo: PromocionDto['tipoEfecto']) => {
        switch(tipo) {
            case 'DescuentoMontoFijoTotal': return 'Monto Fijo';
            case 'DescuentoPorcentajeTotal': return 'Porcentaje';
            case 'BonificarEntregaDia': return 'Día Bonificado';
            default: return tipo;
        }
    };

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

    return (
        <Box sx={{ p: 1 }}>
            <Typography variant="h5" gutterBottom>Gestionar Promociones</Typography>
            <Paper sx={{ p: 2, mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <FormControlLabel control={<Switch checked={filtroSoloActivas} onChange={(e) => setFiltroSoloActivas(e.target.checked)} />} label="Ver Solo Activas" />
                <Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()}>
                    Nueva Promoción
                </Button>
            </Paper>
            
            {apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}

            <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell sx={{fontWeight: 'bold'}}>Descripción</TableCell>
                            <TableCell sx={{fontWeight: 'bold'}}>Efecto</TableCell>
                            <TableCell align="right" sx={{fontWeight: 'bold'}}>Valor</TableCell>
                            <TableCell sx={{fontWeight: 'bold'}}>Inicio</TableCell>
                            <TableCell sx={{fontWeight: 'bold'}}>Fin</TableCell>
                            <TableCell align="center" sx={{fontWeight: 'bold'}}>Estado</TableCell>
                            <TableCell align="right" sx={{fontWeight: 'bold'}}>Acciones</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {promociones.length === 0 ? (
                            <TableRow><TableCell colSpan={7} align="center">No se encontraron promociones.</TableCell></TableRow>
                        ) : (
                            promociones.map(p => (
                                <TableRow key={p.idPromocion} hover>
                                    <TableCell>{p.descripcion}</TableCell>
                                    <TableCell>{formatTipo(p.tipoEfecto)}</TableCell>
                                    <TableCell align="right">
                                        {p.tipoEfecto === 'DescuentoPorcentajeTotal' ? `${p.valorEfecto}%` : 
                                         p.tipoEfecto === 'DescuentoMontoFijoTotal' ? `$${p.valorEfecto.toFixed(2)}` : 
                                         '-'}
                                    </TableCell>
                                    <TableCell>{formatDate(p.fechaInicio)}</TableCell>
                                    <TableCell>{formatDate(p.fechaFin)}</TableCell>
                                    <TableCell align="center">
                                        <Chip label={p.activa ? 'Activa' : 'Inactiva'} color={p.activa ? 'success' : 'default'} size="small" />
                                    </TableCell>
                                    <TableCell align="right">
                                        <Tooltip title="Editar Promoción">
                                            <span>
                                                <IconButton onClick={() => handleOpenModal(p)} disabled={!puedeGestionar}>
                                                    <EditIcon />
                                                </IconButton>
                                            </span>
                                        </Tooltip>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </TableContainer>
            
            <PromocionFormModal 
                open={modalOpen}
                onClose={handleCloseModal}
                onSubmit={handleSubmitModal}
                initialData={editingPromocion}
                errorMessage={apiErrorMessage}
                clearErrorMessage={() => setApiErrorMessage(null)}
            />
        </Box>
    );
};

export default GestionarPromocionesPage;