import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FaTimes, FaCheck, FaArrowRight, FaInfoCircle, FaExclamationTriangle } from 'react-icons/fa';
import './noticemodal.scss';
import PremiumModal from '../PremiumModal/PremiumModal';

const NoticeModal = ({
    isOpen,
    onClose,
    onConfirm,
    onDecline,
    type = 'confirmation', // 'confirmation', 'premium', 'toast'
    title,
    message,
    confirmText = 'Confirm',
    declineText = 'Cancel',
    position = 'center', // 'center', 'top-right', 'bottom-right'
    autoClose = false,
    autoCloseTime = 3000,
    icon = null,
    mode = 'success', // 'success', 'info', 'warning', 'error'
}) => {
    // Close modal when Escape key is pressed
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) onClose();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, [onClose]);

    // Prevent body scrolling when modal is open (only for center modals)
    useEffect(() => {
        if (isOpen && position === 'center') {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [isOpen, position]);

    // Auto close for toast notifications
    useEffect(() => {
        if (isOpen && autoClose) {
            const timer = setTimeout(() => {
                onClose();
            }, autoCloseTime);

            return () => clearTimeout(timer);
        }
    }, [isOpen, autoClose, autoCloseTime, onClose]);

    // Get the appropriate icon for toasts based on type
    const getToastIcon = () => {
        if (icon) return icon;

        switch (mode) {
            case 'success':
                return <FaCheck />;
            case 'info':
                return <FaInfoCircle />;
            case 'warning':
                return <FaExclamationTriangle />;
            case 'error':
                return <FaExclamationTriangle />;
            default:
                return <FaCheck />;
        }
    };

    // Render different modal types
    const renderModalContent = () => {
        switch (type) {
            case 'confirmation':
                return (
                    <div className="notice-modal-confirmation">
                        <div className="notice-modal-header">
                            <h2>{title || 'Confirmation'}</h2>
                            <p>{message || 'Are you sure you want to proceed?'}</p>
                            <button className="notice-modal-close" onClick={onClose}>
                                <FaTimes />
                            </button>
                        </div>

                        <div className="notice-modal-actions">
                            <button
                                className="notice-modal-decline"
                                onClick={onDecline || onClose}
                            >
                                {declineText}
                            </button>
                            <button
                                className="notice-modal-confirm"
                                onClick={onConfirm}
                            >
                                {confirmText} <FaArrowRight className="arrow-icon" />
                            </button>
                        </div>
                    </div>
                );

            case 'premium':
                return (
                    <div className="notice-modal-premium">
                        <div className="notice-modal-header">
                            <h2>{title || '🔥 Premium Feature'}</h2>
                            <p>{message || 'Upgrade now to unlock this premium feature!'}</p>
                            <button className="notice-modal-close" onClick={onClose}>
                                <FaTimes />
                            </button>
                        </div>

                        <PremiumModal />
                    </div>
                );

            case 'toast':
                return (
                    <div className={`notice-modal-toast notice-modal-toast-${position} notice-border-left-${mode}`}>
                        <div className={`notice-modal-toast-icon ${mode}`}>
                            {getToastIcon()}
                        </div>
                        <div className="notice-modal-toast-content">
                            <h4 className={`${mode}`}>{title || 'Notification'}</h4>
                            <p>{message || 'Operation completed successfully.'}</p>
                        </div>
                        <button className="notice-modal-toast-close" onClick={onClose}>
                            <FaTimes />
                        </button>
                    </div>
                );

            default:
                return null;
        }
    };

    // Animation variants based on position
    const getAnimationVariants = () => {
        if (position === 'top-right') {
            return {
                initial: { opacity: 0, x: 50 },
                animate: { opacity: 1, x: 0 },
                exit: { opacity: 0, x: 50 }
            };
        } else if (position === 'bottom-right') {
            return {
                initial: { opacity: 0, x: 50 },
                animate: { opacity: 1, x: 0 },
                exit: { opacity: 0, x: 50 }
            };
        } else {
            return {
                initial: { opacity: 0, y: 50 },
                animate: { opacity: 1, y: 0 },
                exit: { opacity: 0, y: 50 }
            };
        }
    };

    return (
        <AnimatePresence>
            {isOpen && (
                <>
                    {/* Only show overlay for center modals */}
                    {position === 'center' && (
                        <motion.div
                            className="notice-modal-overlay"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            onClick={onClose}
                        />
                    )}

                    <motion.div
                        className={`notice-modal-container notice-modal-${position}`}
                        {...getAnimationVariants()}
                        transition={{ type: 'spring', damping: 25, stiffness: 500 }}
                    >
                        {renderModalContent()}
                    </motion.div>
                </>
            )}
        </AnimatePresence>
    );
};

export default NoticeModal;