<?php
namespace ShopyPress\Views\Admin\Settings;
if ( ! defined( 'ABSPATH' ) ) exit;

use ShopyPress\Views\Admin\Settings\BaseView;
use ShopyPress\Views\Admin\Settings\IView;

class Shortcodes extends BaseView implements IView {

    public function render(): void {
        ?>
        <div class="row shopypress-container">
            <div class="col-12 mb-4">
                <h5><?php esc_html_e('Available Shortcodes', 'synckube-products-sync-for-shopify'); ?></h5>
                <div class="text-muted"><?php esc_html_e('Use these shortcodes to display SyncKube features on your WordPress pages.', 'synckube-products-sync-for-shopify'); ?></div>
            </div>

            <!-- Product Grid Shortcode -->
            <div class="col-12 mb-4">
                <div class="custom-admin-card w-100">
                    <div class="card-body">
                        <h5 class="card-title">
                            <code class="bg-light px-2 py-1 rounded">[synckube_all_products_grid]</code>
                        </h5>
                        <div class="card-text mt-3">
                            <?php esc_html_e('Displays a responsive grid of all your Shopify products with images, titles, prices, and collections. Includes automatic pagination for easy browsing.', 'synckube-products-sync-for-shopify'); ?>
                        </div>

                        <h6 class="mt-4"><?php esc_html_e('Parameters', 'synckube-products-sync-for-shopify'); ?></h6>
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th><?php esc_html_e('Parameter', 'synckube-products-sync-for-shopify'); ?></th>
                                    <th><?php esc_html_e('Type', 'synckube-products-sync-for-shopify'); ?></th>
                                    <th><?php esc_html_e('Default', 'synckube-products-sync-for-shopify'); ?></th>
                                    <th><?php esc_html_e('Description', 'synckube-products-sync-for-shopify'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>products_per_page</code></td>
                                    <td><?php esc_html_e('Number', 'synckube-products-sync-for-shopify'); ?></td>
                                    <td><code>12</code></td>
                                    <td><?php esc_html_e('Number of products to display per page', 'synckube-products-sync-for-shopify'); ?></td>
                                </tr>
                            </tbody>
                        </table>

                        <h6 class="mt-4"><?php esc_html_e('Examples', 'synckube-products-sync-for-shopify'); ?></h6>
                        <div class="mb-2">
                            <code class="d-block bg-light p-2 rounded">[synckube_all_products_grid]</code>
                            <small class="text-muted"><?php esc_html_e('Display products with default settings (12 per page)', 'synckube-products-sync-for-shopify'); ?></small>
                        </div>
                        <div class="mb-2">
                            <code class="d-block bg-light p-2 rounded">[synckube_all_products_grid products_per_page="24"]</code>
                            <small class="text-muted"><?php esc_html_e('Display 24 products per page', 'synckube-products-sync-for-shopify'); ?></small>
                        </div>
                        <div class="mb-2">
                            <code class="d-block bg-light p-2 rounded">[synckube_all_products_grid products_per_page="6"]</code>
                            <small class="text-muted"><?php esc_html_e('Display 6 products per page', 'synckube-products-sync-for-shopify'); ?></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cart Toggle Shortcode -->
            <div class="col-12 mb-4">
                <div class="custom-admin-card w-100">
                    <div class="card-body">
                        <h5 class="card-title">
                            <code class="bg-light px-2 py-1 rounded">[synckube_cart_toggle]</code>
                        </h5>
                        <div class="card-text mt-3">
                            <?php esc_html_e('Displays a shopping cart icon button with a live item count badge. Clicking the button opens the cart modal for checkout.', 'synckube-products-sync-for-shopify'); ?>
                        </div>

                        <h6 class="mt-4"><?php esc_html_e('Usage', 'synckube-products-sync-for-shopify'); ?></h6>
                        <code class="d-block bg-light p-2 rounded mb-2">[synckube_cart_toggle]</code>
                        <small class="text-muted"><?php esc_html_e('Typically placed in your header, navigation menu, or sidebar for easy cart access.', 'synckube-products-sync-for-shopify'); ?></small>

                        <div class="alert alert-info mt-3" role="alert">
                            <strong><?php esc_html_e('Note:', 'synckube-products-sync-for-shopify'); ?></strong>
                            <?php esc_html_e('This shortcode requires cart functionality to be enabled. Make sure you have fetched collections from the Collections tab.', 'synckube-products-sync-for-shopify'); ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
}