<?php

if ( ! defined( 'ABSPATH' ) ) exit;
/**
 * Food Delivery System - Enhanced Shortcode Documentation
 */

function afdp_shortcodes_tab() {
    $scs = [
        ['t' => 'Auth & Cart Info', 'c' => '[afdp_auth_info]', 'd' => 'Header component showing Login/Register for guests, and Cart count + User Profile for logged-in users.', 'cat' => 'AUTH', 'cl' => '#7c3aed', 'bg' => '#f5f3ff'],
        ['t' => 'Main Food Menu', 'c' => '[afdp_menu]', 'd' => 'The complete category-based menu with real-time "Add to Cart" and price calculation.', 'cat' => 'CORE', 'cl' => '#059669', 'bg' => '#ecfdf5'],
        ['t' => 'Smart Checkout', 'c' => '[afdp_checkout]', 'd' => 'Multi-step checkout including order summary, customer details, and payment selection.', 'cat' => 'CORE', 'cl' => '#dc2626', 'bg' => '#fef2f2'],
        ['t' => 'Order Confirmation', 'c' => '[afdp_thanks]', 'd' => 'The dynamic "Thank You" page showing order receipt and delivery estimation.', 'cat' => 'SYSTEM', 'cl' => '#475569', 'bg' => '#f1f5f9'],
        ['t' => 'Customer Portal', 'c' => '[afdp_customer_portal]', 'd' => 'A central hub for users to track live orders and view their complete order history.', 'cat' => 'ACCOUNT', 'cl' => '#2563eb', 'bg' => '#eff6ff'],
        ['t' => 'Account Settings', 'c' => '[afdp_account]', 'd' => 'User profile management for updating names, phone numbers, and default addresses.', 'cat' => 'ACCOUNT', 'cl' => '#2563eb', 'bg' => '#eff6ff'],
        ['t' => 'Login Form', 'c' => '[afdp_login]', 'd' => 'A standalone, styled login form designed for customer authentication.', 'cat' => 'AUTH', 'cl' => '#7c3aed', 'bg' => '#f5f3ff'],
        ['t' => 'Registration', 'c' => '[afdp_registration]', 'd' => 'Frontend signup form that automatically creates a "Customer" role user.', 'cat' => 'AUTH', 'cl' => '#7c3aed', 'bg' => '#f5f3ff'],
        ['t' => 'Category Grid', 'c' => '[afdp_food_categories]', 'd' => 'Visual list of food categories. Useful for creating a "Shop by Category" homepage section.', 'cat' => 'DISPLAY', 'cl' => '#d97706', 'bg' => '#fffbeb'],
        ['t' => 'All Food Items', 'c' => '[afdp_food_items]', 'd' => 'A simple, non-grouped list of every item available in your store.', 'cat' => 'DISPLAY', 'cl' => '#d97706', 'bg' => '#fffbeb'],
        ['t' => 'Best Sellers', 'c' => '[afdp_best_sellers]', 'd' => 'Displays the top 4 most ordered items to increase conversion rates.', 'cat' => 'PROMO', 'cl' => '#db2777', 'bg' => '#fdf2f8'],
    ];
    ?>
    <div style="padding: 30px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; max-width: 1200px; margin: 20px auto; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
        
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; border-bottom: 2px solid #e2e8f0; padding-bottom: 20px;">
            <div>
                <h2 style="font-size: 28px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.5px;">Shortcode Library</h2>
                <p style="color: #64748b; margin: 5px 0 0; font-size: 15px;">Integrate these components into your site layout using the WordPress editor.</p>
            </div>
            <div style="background: #fff; padding: 8px 16px; border-radius: 99px; border: 1px solid #cbd5e1; font-size: 13px; font-weight: 600; color: #475569;">
                <span style="color: #10b981;">●</span> System Online
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px;">
            <?php foreach ($scs as $s): ?>
            <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden;"
                  onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 20px -5px rgba(0,0,0,0.1)';" 
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <span style="padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; background: <?php echo esc_attr($s['bg']); ?>; color: <?php echo esc_attr($s['cl']); ?>;"><?php echo esc_attr($s['cat']); ?></span>
                    <span style="font-size: 12px; color: #94a3b8; font-weight: 500;">Ready</span>
                </div>

                <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 700; color: #1e293b;"><?php echo esc_html($s['t']); ?></h3>
                <p style="margin: 0 0 20px 0; color: #64748b; font-size: 14px; line-height: 1.6; flex-grow: 1;"><?php echo esc_html($s['d']); ?></p>

                <div style="background: #f1f5f9; padding: 12px; border-radius: 12px; border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s;"
                      onclick="afdpCopy(this, '<?php echo esc_attr($s['c']); ?>')"
                      onmouseover="this.style.borderColor='#94a3b8'; this.style.background='#e2e8f0';"
                      onmouseout="this.style.borderColor='#cbd5e1'; this.style.background='#f1f5f9';">
                    <code style="font-family: 'Fira Code', monospace; font-size: 14px; color: #0f172a; font-weight: 600;"><?php echo esc_attr($s['c']); ?></code>
                    <svg style="width: 18px; height: 18px; color: #94a3b8;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path></svg>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div style="margin-top: 30px; text-align: center; padding: 20px; background: #eff6ff; border-radius: 12px; border: 1px solid #bfdbfe;">
            <p style="margin: 0; color: #1e40af; font-size: 14px; font-weight: 500;">
                <strong>Pro Tip:</strong> You can use these shortcodes inside Elementor, Gutenberg, or any Page Builder "Shortcode" widget.
            </p>
        </div>
    </div>

    <script>
    function afdpCopy(container, text) {
        const i = document.createElement("textarea"); i.value = text; document.body.appendChild(i); i.select(); document.execCommand("copy"); document.body.removeChild(i);
        
        const originalContent = container.innerHTML;
        container.style.background = "#dcfce7";
        container.style.borderColor = "#22c55e";
        container.innerHTML = '<span style="color: #15803d; font-weight: 700; font-size: 14px; width: 100%; text-align: center;">Copied to Clipboard!</span>';
        
        setTimeout(() => {
            container.style.background = "#f1f5f9";
            container.style.borderColor = "#cbd5e1";
            container.innerHTML = originalContent;
        }, 1500);
    }
    </script>
    <?php
}