import React, { useState, useEffect } from 'react';

const GetStarted = ({ onBack, onCreateNew, onShowShortcodeGenerator }) => {
    const [stats, setStats] = useState({
        totalShowcases: 0,
        availableLayouts: 8,
        features: '∞'
    });

    const availableLayouts = [
        { key: 'grid', name: 'Grid Layout' },
        { key: 'card_grid', name: 'Card Grid Layout' },
        { key: 'slider', name: 'Slider Layout' },
        { key: 'masonry_grid', name: 'Masonry Grid Layout' },
        { key: 'gallery', name: 'Gallery Layout' },
        { key: 'table', name: 'Table Layout' },
        { key: 'list', name: 'List Layout' },
        { key: 'category_tabs', name: 'Category Tabs Layout' }
    ];

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

    const loadStats = async () => {
        try {
            const response = await fetch(proddispAdmin.ajaxUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    action: 'proddisp_get_showcases',
                    nonce: proddispAdmin.nonce
                })
            });

            const data = await response.json();
            if (data.success) {
                setStats(prev => ({
                    ...prev,
                    totalShowcases: data.data.showcases?.length || 0
                }));
            }
        } catch (error) {
            console.error('Error loading stats:', error);
        }
    };

    const features = [
        {
            icon: '🎨',
            title: 'Multiple Layouts',
            description: 'Choose from Grid, Slider, Gallery, Table, and more layouts to match your design.'
        },
        {
            icon: '🔍',
            title: 'Advanced Filtering',
            description: 'Enable category filters with AJAX support for seamless user experience.'
        },
        {
            icon: '📄',
            title: 'Smart Pagination',
            description: 'Break large product lists into pages with customizable products per page.'
        },
        {
            icon: '❤️',
            title: 'Wishlist Integration',
            description: 'Built-in wishlist functionality with modal popup and persistent storage.'
        },
        {
            icon: '⚡',
            title: 'Quick View',
            description: 'Allow customers to preview products without leaving the page.'
        },
        {
            icon: '🔄',
            title: 'Product Compare',
            description: 'Enable product comparison with side-by-side feature comparison.'
        },
        {
            icon: '📄',
            title: 'Wishlist Page',
            description: 'Create dedicated wishlist pages where customers can view and manage saved products.'
        }
    ];

    const shortcodeExamples = [
        {
            title: 'Basic Usage',
            code: '[product_display id="1"]',
            description: 'Display a specific showcase by ID'
        },
        {
            title: 'Custom Parameters',
            code: '[product_display layout="grid" columns="4" limit="8"]',
            description: 'Use custom layout and settings'
        },
        {
            title: 'With Filters & Pagination',
            code: '[product_display enable_filters="yes" enable_pagination="yes" pagination_per_page="6"]',
            description: 'Enable interactive features'
        },
        {
            title: 'Category Specific',
            code: '[product_display category="electronics,clothing" orderby="price"]',
            description: 'Show products from specific categories'
        },
        {
            title: 'Wishlist Page',
            code: '[product_wishlist title="My Wishlist"]',
            description: 'Create a dedicated wishlist page for customers'
        }
    ];

    const usageInstructions = [
        {
            title: 'Wishlist Feature',
            steps: [
                'Go to Features tab in showcase editor',
                'Enable "Show Wishlist"',
                'Choose display mode (icon only, text only, or both)',
                'Customers can add/remove products from wishlist',
                'Wishlist data is stored in browser localStorage'
            ]
        },
        {
            title: 'Create Wishlist Page',
            steps: [
                'Create a new page (Pages → Add New)',
                'Add the shortcode: [product_wishlist]',
                'Customize the title: [product_wishlist title="My Favorites"]',
                'Publish the page and add it to your menu',
                'Customers can now view and manage their wishlist items'
            ]
        },
        {
            title: 'Quick View Feature',
            steps: [
                'Enable "Show Quick View" in Features tab',
                'Customers can click quick view button',
                'Product details open in modal popup',
                'Includes product gallery, description, and add to cart'
            ]
        }
    ];

    const proTips = [
        {
            title: 'Performance Optimization',
            tips: [
                'Use pagination for large product catalogs',
                'Enable AJAX for smooth filtering experience',
                'Optimize image sizes for faster loading'
            ]
        },
        {
            title: 'Design Best Practices',
            tips: [
                'Choose layouts that match your theme design',
                'Use consistent column counts across pages',
                'Test on mobile devices for responsiveness'
            ]
        },
        {
            title: 'SEO Optimization',
            tips: [
                'Use descriptive showcase names',
                'Enable product titles and descriptions',
                'Use proper heading structure'
            ]
        },
        {
            title: 'Quick Setup Checklist',
            tips: [
                '✅ Create your first product showcase',
                '✅ Add showcase shortcode to your pages',
                '✅ Create a wishlist page with [product_wishlist]',
                '✅ Enable wishlist buttons in showcase settings',
                '✅ Test on mobile devices for responsiveness'
            ]
        }
    ];

    return (
        <div className="proddisp-get-started">
            {/* Hero Header */}
            <div className="hero-header">
                <div className="hero-content">
                    <div className="hero-text">
                        <h1>
                            <span className="hero-icon">🚀</span>
                            Welcome to Product Display
                        </h1>
                        <p className="hero-subtitle">
                            Create stunning product showcases with powerful layouts, advanced features, and seamless WooCommerce integration
                        </p>
                        <div className="hero-actions">
                            <button
                                className="button button-primary button-large hero-btn"
                                onClick={onCreateNew}
                            >
                                <i className="fas fa-plus"></i>
                                Create Your First Showcase
                            </button>
                            <button
                                className="button button-outline button-large hero-btn"
                                onClick={onBack}
                            >
                                <i className="fas fa-list"></i>
                                View All Showcases
                            </button>
                        </div>
                    </div>
                    <div className="hero-visual">
                        <div className="feature-preview">
                            <div className="preview-item">
                                <i className="fas fa-th-large"></i>
                                <span>8+ Layouts</span>
                            </div>
                            <div className="preview-item">
                                <i className="fas fa-palette"></i>
                                <span>Full Customization</span>
                            </div>
                            <div className="preview-item">
                                <i className="fas fa-mobile-alt"></i>
                                <span>Responsive Design</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Statistics */}
            <div className="stats-section">
                <div className="stats-container">
                    <div className="stat-card">
                        <div className="stat-icon">
                            <i className="fas fa-cube"></i>
                        </div>
                        <div className="stat-content">
                            <div className="stat-number">{stats.totalShowcases}</div>
                            <div className="stat-label">Showcases Created</div>
                        </div>
                    </div>
                    <div className="stat-card">
                        <div className="stat-icon">
                            <i className="fas fa-th-large"></i>
                        </div>
                        <div className="stat-content">
                            <div className="stat-number">{stats.availableLayouts}</div>
                            <div className="stat-label">Available Layouts</div>
                        </div>
                    </div>
                    <div className="stat-card">
                        <div className="stat-icon">
                            <i className="fas fa-infinity"></i>
                        </div>
                        <div className="stat-content">
                            <div className="stat-number">{stats.features}</div>
                            <div className="stat-label">Customization Options</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="proddisp-content">
                {/* Quick Start Guide */}
                <div className="proddisp-section">
                    <h2>🚀 Quick Start Guide</h2>

                    <h3>1. Create Your First Showcase</h3>
                    <p>Start by creating a new product showcase:</p>
                    <button
                        className="proddisp-button"
                        onClick={onCreateNew}
                    >
                        Create New Showcase
                    </button>

                    <h3>2. Choose Your Layout</h3>
                    <p>Select from our beautiful pre-designed layouts:</p>
                    <div className="proddisp-layouts-grid">
                        {availableLayouts.map(layout => (
                            <div key={layout.key} className="proddisp-layout-item">
                                <strong>{layout.name}</strong>
                            </div>
                        ))}
                    </div>

                    <h3>3. Use Your Shortcode</h3>
                    <p>Copy and paste the generated shortcode anywhere:</p>
                    <div className="proddisp-code">[product_display id="1"]</div>
                </div>

                {/* Shortcode Usage */}
                <div className="proddisp-section">
                    <h2>📋 Shortcode Usage</h2>

                    {shortcodeExamples.map((example, index) => (
                        <div key={index}>
                            <h3>{example.title}</h3>
                            <div className="proddisp-code">{example.code}</div>
                            {example.description && (
                                <p className="shortcode-description">{example.description}</p>
                            )}
                        </div>
                    ))}

                    <button
                        className="proddisp-button"
                        onClick={onShowShortcodeGenerator}
                    >
                        Use Shortcode Generator
                    </button>
                </div>
            </div>


            {/* Usage Instructions */}
            <div className="proddisp-content">
                <div className="proddisp-section">
                    <h2>🛠️ How to Use Features</h2>

                    {usageInstructions.map((instruction, index) => (
                        <div key={index}>
                            <h3>{instruction.title}</h3>
                            <ul>
                                {instruction.steps.map((step, stepIndex) => (
                                    <li key={stepIndex}>{step}</li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* Pro Tips */}
                <div className="proddisp-section">
                    <h2>🎯 Pro Tips</h2>

                    {proTips.map((tipSection, index) => (
                        <div key={index}>
                            <h3>{tipSection.title}</h3>
                            <ul>
                                {tipSection.tips.map((tip, tipIndex) => (
                                    <li key={tipIndex}>{tip}</li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
            </div>

            {/* Call to Action */}
            <div className="proddisp-section proddisp-cta">
                <h2>🚀 Ready to Get Started?</h2>
                <p>Create your first product showcase and start selling more products today!</p>

                <button
                    className="proddisp-button proddisp-button-large"
                    onClick={onCreateNew}
                >
                    Create Your First Showcase
                </button>

                <button
                    className="proddisp-button secondary"
                    onClick={onBack}
                >
                    View All Showcases
                </button>
            </div>
        </div>
    );
};

export default GetStarted;