import React, { useState } from 'react';

const ShortcodeGenerator = ({ onBack }) => {
    const [shortcodeType, setShortcodeType] = useState('basic');
    const [shortcodeSettings, setShortcodeSettings] = useState({
        layout: 'grid',
        mode: 'basic-grid',
        columns: 3,
        limit: 12,
        orderby: 'date',
        order: 'DESC',
        show_title: 'yes',
        show_price: 'yes',
        show_rating: 'yes',
        show_addtocart: 'yes'
    });

    const generateShortcode = () => {
        let shortcode = '[product_display';

        Object.entries(shortcodeSettings).forEach(([key, value]) => {
            if (value && value !== '') {
                shortcode += ` ${key}="${value}"`;
            }
        });

        shortcode += ']';
        return shortcode;
    };

    const copyToClipboard = async (shortcode, name = '') => {
        try {
            await navigator.clipboard.writeText(shortcode);
            if (window.proddispToast) {
                window.proddispToast.success(`Shortcode copied to clipboard! ${name ? `(${name})` : ''}`);
            }
        } catch (err) {
            // Fallback for older browsers
            const textArea = document.createElement('textarea');
            textArea.value = shortcode;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);

            if (window.proddispToast) {
                window.proddispToast.success(`Shortcode copied to clipboard! ${name ? `(${name})` : ''}`);
            }
        }
    };

    const handleSettingChange = (key, value) => {
        setShortcodeSettings(prev => ({
            ...prev,
            [key]: value
        }));
    };

    const presetShortcodes = [
        {
            name: 'Basic Grid - 3 Columns',
            shortcode: '[product_display layout="grid" mode="basic-grid" columns="3" limit="12"]'
        },
        {
            name: 'Product Slider',
            shortcode: '[product_display layout="slider" mode="slider" columns="4" autoplay="yes" arrows="yes"]'
        },
        {
            name: 'Card Grid - 4 Columns',
            shortcode: '[product_display layout="card_grid" mode="card-grid" columns="4" limit="16"]'
        },
        {
            name: 'List Layout',
            shortcode: '[product_display layout="list" mode="list-layout" columns="1" show_description="yes"]'
        },
        {
            name: 'Category Tabs',
            shortcode: '[product_display layout="category_tabs" mode="category_tabs" columns="3"]'
        }
    ];

    return (
        <div className="proddisp-shortcode-generator">
            {/* Modern Header */}
            <div className="proddisp-modern-header">
                <div className="header-content">
                    <div className="header-title">
                        <button
                            className="button button-outline back-button"
                            onClick={onBack}
                        >
                            <i className="fas fa-arrow-left"></i>
                            Back to List
                        </button>
                        <h1>
                            <i className="fas fa-code"></i>
                            Shortcode Generator
                        </h1>
                        <p>Generate custom shortcodes for your product displays without creating saved showcases</p>
                    </div>
                </div>
            </div>

            <div className="modern-tabs">
                <div className="tabs-container">
                    <button
                        className={`tab-button ${shortcodeType === 'basic' ? 'active' : ''}`}
                        onClick={() => setShortcodeType('basic')}
                    >
                        <i className="fas fa-sliders-h"></i>
                        Custom Generator
                    </button>
                    <button
                        className={`tab-button ${shortcodeType === 'presets' ? 'active' : ''}`}
                        onClick={() => setShortcodeType('presets')}
                    >
                        <i className="fas fa-magic"></i>
                        Ready-to-Use Presets
                    </button>
                </div>
            </div>

            {shortcodeType === 'basic' && (
                <div className="generator-layout">
                    <div className="settings-panel">
                        <div className="panel-header">
                            <h3>
                                <i className="fas fa-cog"></i>
                                Customize Settings
                            </h3>
                            <p>Configure your shortcode parameters</p>
                        </div>

                        <div className="settings-grid">
                            <div className="setting-group">
                                <label>
                                    <i className="fas fa-th-large"></i>
                                    Layout Type
                                </label>
                                <select
                                    value={shortcodeSettings.layout}
                                    onChange={(e) => handleSettingChange('layout', e.target.value)}
                                >
                                    <option value="grid">Basic Grid</option>
                                    <option value="card_grid">Card Grid</option>
                                    <option value="slider">Slider</option>
                                    <option value="masonry_grid">Masonry Grid</option>
                                    <option value="gallery">Gallery</option>
                                    <option value="table">Table</option>
                                    <option value="list">List</option>
                                    <option value="category_tabs">Category Tabs</option>
                                </select>
                            </div>

                            <div className="setting-group">
                                <label>
                                    <i className="fas fa-columns"></i>
                                    Columns
                                </label>
                                <select
                                    value={shortcodeSettings.columns}
                                    onChange={(e) => handleSettingChange('columns', e.target.value)}
                                >
                                    <option value="1">1 Column</option>
                                    <option value="2">2 Columns</option>
                                    <option value="3">3 Columns</option>
                                    <option value="4">4 Columns</option>
                                    <option value="6">6 Columns</option>
                                </select>
                            </div>

                            <div className="setting-group">
                                <label>
                                    <i className="fas fa-hashtag"></i>
                                    Products Limit
                                </label>
                                <input
                                    type="number"
                                    value={shortcodeSettings.limit}
                                    onChange={(e) => handleSettingChange('limit', e.target.value)}
                                    min="1"
                                    max="100"
                                    placeholder="12"
                                />
                            </div>

                            <div className="setting-group">
                                <label>
                                    <i className="fas fa-sort"></i>
                                    Order By
                                </label>
                                <select
                                    value={shortcodeSettings.orderby}
                                    onChange={(e) => handleSettingChange('orderby', e.target.value)}
                                >
                                    <option value="date">Date</option>
                                    <option value="title">Title</option>
                                    <option value="price">Price</option>
                                    <option value="popularity">Popularity</option>
                                    <option value="rating">Rating</option>
                                    <option value="rand">Random</option>
                                </select>
                            </div>

                            <div className="setting-group">
                                <label>
                                    <i className="fas fa-arrow-up"></i>
                                    Sort Order
                                </label>
                                <select
                                    value={shortcodeSettings.order}
                                    onChange={(e) => handleSettingChange('order', e.target.value)}
                                >
                                    <option value="DESC">Descending</option>
                                    <option value="ASC">Ascending</option>
                                </select>
                            </div>
                        </div>

                        <div className="display-options">
                            <h4>
                                <i className="fas fa-eye"></i>
                                Display Options
                            </h4>
                            <div className="checkbox-grid">
                                <label className="checkbox-item">
                                    <input
                                        type="checkbox"
                                        checked={shortcodeSettings.show_title === 'yes'}
                                        onChange={(e) => handleSettingChange('show_title', e.target.checked ? 'yes' : 'no')}
                                    />
                                    <span className="checkmark"></span>
                                    <span className="label-text">
                                        <i className="fas fa-heading"></i>
                                        Show Title
                                    </span>
                                </label>
                                <label className="checkbox-item">
                                    <input
                                        type="checkbox"
                                        checked={shortcodeSettings.show_price === 'yes'}
                                        onChange={(e) => handleSettingChange('show_price', e.target.checked ? 'yes' : 'no')}
                                    />
                                    <span className="checkmark"></span>
                                    <span className="label-text">
                                        <i className="fas fa-dollar-sign"></i>
                                        Show Price
                                    </span>
                                </label>
                                <label className="checkbox-item">
                                    <input
                                        type="checkbox"
                                        checked={shortcodeSettings.show_rating === 'yes'}
                                        onChange={(e) => handleSettingChange('show_rating', e.target.checked ? 'yes' : 'no')}
                                    />
                                    <span className="checkmark"></span>
                                    <span className="label-text">
                                        <i className="fas fa-star"></i>
                                        Show Rating
                                    </span>
                                </label>
                                <label className="checkbox-item">
                                    <input
                                        type="checkbox"
                                        checked={shortcodeSettings.show_addtocart === 'yes'}
                                        onChange={(e) => handleSettingChange('show_addtocart', e.target.checked ? 'yes' : 'no')}
                                    />
                                    <span className="checkmark"></span>
                                    <span className="label-text">
                                        <i className="fas fa-shopping-cart"></i>
                                        Show Add to Cart
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div className="output-panel">
                        <div className="panel-header">
                            <h3>
                                <i className="fas fa-code"></i>
                                Generated Shortcode
                            </h3>
                            <p>Copy and paste this shortcode anywhere</p>
                        </div>

                        <div className="shortcode-output">
                            <div className="shortcode-preview">
                                <code className="shortcode-code">
                                    {generateShortcode()}
                                </code>
                            </div>
                            <button
                                className="button button-primary copy-button"
                                onClick={() => copyToClipboard(generateShortcode(), 'Custom Shortcode')}
                            >
                                <i className="fas fa-copy"></i>
                                Copy Shortcode
                            </button>
                        </div>

                        <div className="usage-info">
                            <h4>
                                <i className="fas fa-info-circle"></i>
                                How to Use
                            </h4>
                            <ul>
                                <li><strong>Posts/Pages:</strong> Paste directly into content</li>
                                <li><strong>Widgets:</strong> Use Custom HTML widget</li>
                                <li><strong>PHP:</strong> <code>echo do_shortcode('[shortcode]');</code></li>
                            </ul>
                        </div>
                    </div>
                </div>
            )}

            {shortcodeType === 'presets' && (
                <div className="preset-shortcodes">
                    <div className="presets-header">
                        <h3>
                            <i className="fas fa-magic"></i>
                            Ready-to-Use Shortcodes
                        </h3>
                        <p>Quick start with these pre-configured shortcodes</p>
                    </div>

                    <div className="presets-grid">
                        {presetShortcodes.map((preset, index) => (
                            <div key={index} className="preset-card">
                                <div className="preset-header">
                                    <h4>{preset.name}</h4>
                                    <button
                                        className="copy-btn"
                                        onClick={() => copyToClipboard(preset.shortcode, preset.name)}
                                        title="Copy shortcode"
                                    >
                                        <i className="fas fa-copy"></i>
                                    </button>
                                </div>
                                <div className="preset-body">
                                    <div className="preset-shortcode">
                                        <code>{preset.shortcode}</code>
                                    </div>
                                    <button
                                        className="button button-primary button-small"
                                        onClick={() => copyToClipboard(preset.shortcode, preset.name)}
                                    >
                                        <i className="fas fa-copy"></i>
                                        Copy Shortcode
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            <div className="shortcode-help">
                <div className="help-container">
                    <div className="help-header">
                        <h3>
                            <i className="fas fa-question-circle"></i>
                            How to Use Shortcodes
                        </h3>
                        <p>Learn how to implement your generated shortcodes</p>
                    </div>
                    <div className="help-content">
                        <div className="help-section">
                            <h4>
                                <i className="fas fa-file-alt"></i>
                                In Posts/Pages
                            </h4>
                            <p>Copy the shortcode and paste it directly into your post or page content.</p>
                        </div>
                        <div className="help-section">
                            <h4>
                                <i className="fas fa-th"></i>
                                In Widgets
                            </h4>
                            <p>Use the "Custom HTML" widget and paste the shortcode inside.</p>
                        </div>
                        <div className="help-section">
                            <h4>
                                <i className="fas fa-code"></i>
                                In PHP Templates
                            </h4>
                            <p>Use: <code>echo do_shortcode('[your_shortcode_here]');</code></p>
                        </div>
                        <div className="help-section">
                            <h4>
                                <i className="fas fa-cogs"></i>
                                Available Parameters
                            </h4>
                            <ul>
                                <li><strong>layout:</strong> grid, card_grid, slider, masonry_grid, gallery, table, list, category_tabs</li>
                                <li><strong>columns:</strong> 1, 2, 3, 4, 6</li>
                                <li><strong>limit:</strong> Number of products to show</li>
                                <li><strong>orderby:</strong> date, title, price, popularity, rating, rand</li>
                                <li><strong>order:</strong> ASC, DESC</li>
                                <li><strong>show_title, show_price, show_rating:</strong> yes, no</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShortcodeGenerator;