import React, { useState, useEffect } from 'react';
import './PriceModal.scss';
import PremiumModal from '../PremiumModal/PremiumModal';

const PriceModal = ({ 
    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'
}) => {

    const [isMobile, setIsMobile] = useState(false);

    // Responsive check
    useEffect(() => {
        const checkMobileView = () => {
            setIsMobile(window.innerWidth <= 768);
        };

        // Check initial load
        checkMobileView();

        // Add resize listener
        window.addEventListener('resize', checkMobileView);

        return () => {
            window.removeEventListener('resize', checkMobileView);
        };
    }, []);

    // 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 '✓';
            case 'info':
                return 'ℹ';
            case 'warning':
                return '⚠';
            case 'error':
                return '✕';
            default:
                return '✓';
        }
    };

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

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

            case 'premium':
                return (
                    <div className={`price-modal-container ${isMobile ? 'mobile' : ''}`}>
                        <div className="price-modal-header">
                            <button className="price-modal-close" onClick={onClose}>
                                ✕
                            </button>
                        </div>

                        <PremiumModal configId="shop-explorer" />

                        <div className="price-modal-guarantee">
                            <div className="price-modal-guarantee-badge">14</div>
                            <div className="price-modal-guarantee-text">
                                <h4>14-Day Money-Back Guarantee</h4>
                                <p>Try it risk-free. If you're not satisfied, get instant full refund within 14 days.</p>
                            </div>
                        </div>
                    </div>
                );

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

            default:
                return null;
        }
    };

    // Animation variants based on position
    const getAnimationClass = () => {
        if (position === 'top-right' || position === 'bottom-right') {
            return 'slide-in-right';
        } else {
            return 'fade-in';
        }
    };

    if (!isOpen) return null;

    return (
        <>
            {/* Only show overlay for center modals */}
            {position === 'center' && (
                <div
                    className="price-modal-overlay"
                    onClick={onClose}
                />
            )}

            <div
                className={`price-modal-wrapper price-modal-${position} ${getAnimationClass()}`}
            >
                {renderModalContent()}
            </div>
        </>
    );
};

export default PriceModal;