<?php
/**
 * NewsSync Documentation Section
 * Complete documentation for shortcode parameters
 *
 * @package NewsSync
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// If the main settings is opened with ?pro=1 we should show PRO docs (if present)
// instead of the FREE documentation to avoid duplication. This implements a
// simple show/hide approach: the PRO submenu redirects here with ?pro=1.
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- UI-only GET read, no state change
$newssync_current_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : '';
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- UI-only GET read, no state change
$newssync_is_pro_request = isset( $_GET['pro'] ) && '1' === sanitize_text_field( wp_unslash( $_GET['pro'] ) );

// Prepare PRO doc html if available. We'll render it hidden and provide a
// Show/Hide control so users can toggle PRO docs without a separate submenu.
$newssync_pro_doc_html = '';

if ( defined( 'NEWSSYNC_PRO_DIR' ) ) {
    // If PRO exposes a helper returning the docs text, prefer it.
    if ( function_exists( 'newssync_pro_unlimited_markdown' ) ) {
        $newssync_md = newssync_pro_unlimited_markdown();
        if ( $newssync_md !== '' ) {
            $newssync_md = str_replace( array( "\r\n", "\r" ), "\n", $newssync_md );
            $newssync_parts = preg_split('/\n\s*\n/', trim( $newssync_md ) );
            $newssync_html = '';
            foreach ( $newssync_parts as $newssync_p ) {
                $newssync_p = trim( $newssync_p );
                if ( preg_match('/^<(h1|h2|h3|pre|ul)/', $newssync_p ) ) {
                    $newssync_html .= $newssync_p . "\n";
                } else {
                    $newssync_html .= '<p>' . nl2br( esc_html( $newssync_p ) ) . '</p>' . "\n";
                }
            }
            // Remove a top-level H1 if present to avoid duplicated titles
            $newssync_pro_doc_html = preg_replace('/^\s*<h1[^>]*>.*?<\/h1>\s*/is', '', $newssync_html, 1);
        }
    }
} elseif ( $newssync_is_pro_request ) {
    // If user explicitly requested PRO but PRO isn't installed, show a short notice
    $newssync_pro_doc_html = '<div style="background:#fff;padding:20px;border-radius:8px;">' . esc_html__( 'PRO documentation not installed. Please activate NewsSync PRO or install its docs file.', 'daazsync' ) . '</div>';
}
?>

<!-- Documentation Section -->
<div class="newssync-content-section<?php echo ( isset( $newssync_active_tab ) && $newssync_active_tab === 'documentation' ) ? ' active' : ''; ?>" data-section="documentation" style="display:<?php echo ( isset( $newssync_active_tab ) && $newssync_active_tab === 'documentation' ) ? 'block' : 'none'; ?>;">
    <!-- Inline debug script removed for WordPress.org compliance -->

    <?php if ( ! empty( $newssync_pro_doc_html ) ) : ?>
        <div style="margin-bottom:14px;">
            <button type="button" id="newssync-toggle-pro-docs" class="button-secondary"><?php echo esc_html__( 'Show PRO documentation', 'daazsync' ); ?></button>
        </div>
        <div id="newssync-pro-docs" style="display:<?php echo $newssync_is_pro_request ? 'block' : 'none'; ?>; margin-bottom:18px;">
            <?php echo wp_kses_post( $newssync_pro_doc_html ); ?>
        </div>
    <?php endif; ?>

    <div style="background:#fff; padding:35px; border-radius:12px; box-shadow:0 4px 25px rgba(0,0,0,0.08); max-width:1100px;">

        <h1><?php esc_html_e( 'RSS NewsSync – Complete Documentation', 'daazsync' ); ?></h1>

        <h2><?php esc_html_e( '1. Basic Shortcode', 'daazsync' ); ?></h2>
        <pre style="background:#f0f0f0; padding:18px; border-radius:8px; font-size:1.1em;">[newssync]</pre>
        <p><?php esc_html_e( 'Uses your default settings from the admin panel.', 'daazsync' ); ?></p>

        <h2><?php esc_html_e( '2. Main Parameters (work in ALL layouts)', 'daazsync' ); ?></h2>
        <table class="widefat fixed" style="margin:20px 0;">
            <thead>
                <tr>
                    <th><?php esc_html_e( 'Parameter', 'daazsync' ); ?></th>
                    <th><?php esc_html_e( 'Example', 'daazsync' ); ?></th>
                    <th><?php esc_html_e( 'Description', 'daazsync' ); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>layout</code></td>
                    <td><code>grid</code>, <code>list</code>, <code>carousel</code>, <code>hero</code>, <code>minimal</code></td>
                    <td><?php esc_html_e( 'Choose the visual style', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>limit</code></td>
                    <td><code>limit="6"</code></td>
                    <td><?php esc_html_e( 'Maximum number of items (Hero/Carousel limited to 6)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>category</code></td>
                    <td><code>category="CNBC"</code></td>
                    <td><?php esc_html_e( 'Show only one source (must match the category name you set)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>source</code></td>
                    <td><code>source="posts"</code></td>
                    <td><?php esc_html_e( 'Use imported posts instead of live RSS', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>autoplay</code></td>
                    <td><code>autoplay="on"</code></td>
                    <td><?php esc_html_e( 'Enable/disable carousel autoplay (on/off)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>cache_ttl</code></td>
                    <td><code>cache_ttl="3600"</code></td>
                    <td><?php esc_html_e( 'Cache duration in seconds (overrides global setting)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>orderby</code></td>
                    <td><code>orderby="date"</code></td>
                    <td><?php esc_html_e( 'Order by date or title', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>order</code></td>
                    <td><code>order="DESC"</code></td>
                    <td><?php esc_html_e( 'Sort order: DESC (newest first) or ASC (oldest first)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>offset</code></td>
                    <td><code>offset="3"</code></td>
                    <td><?php esc_html_e( 'Skip first N items', 'daazsync' ); ?> <em style="color:#d63638;"><?php esc_html_e( '(limited in FREE version due to per-feed restrictions)', 'daazsync' ); ?></em></td>
                </tr>
                <tr>
                    <td><code>show_image</code></td>
                    <td><code>show_image="no"</code></td>
                    <td><?php esc_html_e( 'Show/hide images. Works in all layouts: grid, list, carousel, hero.', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>hide_image</code></td>
                    <td><code>hide_image="yes"</code></td>
                    <td><?php esc_html_e( 'Alternative way to hide images — same as show_image="no".', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>custom_css_class</code></td>
                    <td><code>custom_css_class="my-dark"</code></td>
                    <td><?php esc_html_e( 'Adds a custom CSS class to the container. Use it to target the feed with your own CSS rules (e.g. for dark themes).', 'daazsync' ); ?></td>
                </tr>
            </tbody>
        </table>

        <h2><?php esc_html_e( '3. List Mode (only when layout="list")', 'daazsync' ); ?></h2>
        <ul style="font-size:1.1em; line-height:1.8;">
            <li><code>list_mode="standard"</code> → <?php esc_html_e( 'Classic list with image', 'daazsync' ); ?></li>
            <li><code>list_mode="minimal"</code> → <?php esc_html_e( 'Ultra-compact (title + time + source)', 'daazsync' ); ?></li>
            <li><code>list_mode="custom"</code> → <?php esc_html_e( 'Full control!', 'daazsync' ); ?></li>
        </ul>

        <h2><?php esc_html_e( '4. CUSTOM MODE – Full Control', 'daazsync' ); ?></h2>
        <p><?php esc_html_e( 'Use', 'daazsync' ); ?> <code>list_mode="custom"</code> <?php esc_html_e( 'and combine any of these parameters:', 'daazsync' ); ?> <?php esc_html_e( 'Note: show_image and hide_image also work in grid, carousel and hero layouts.', 'daazsync' ); ?></p>
        <pre style="background:#222; color:#0f0; padding:20px; border-radius:10px; font-size:0.95em; line-height:1.6;">[newssync layout="list" list_mode="custom"
 limit="8"
 category="CNN"
 show_image="no"
 show_excerpt="yes"
 excerpt_length="20"
 show_date="yes"
 show_source="yes"
 date_format="H:i - d/m"
 show_readmore="yes"
 compact="yes"]</pre>

        <h3><?php esc_html_e( 'All available parameters:', 'daazsync' ); ?></h3>
        <table class="widefat" style="margin:25px 0;">
            <thead>
                <tr>
                    <th style="width:35%;"><?php esc_html_e( 'Parameter', 'daazsync' ); ?></th>
                    <th><?php esc_html_e( 'Description', 'daazsync' ); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>show_title="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show/hide title', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>show_image="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show/hide image. Works in all layouts (grid, list, carousel, hero).', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>hide_image="yes/no"</code></td>
                    <td><?php esc_html_e( 'Alternative way to hide images — same as show_image="no". Works in all layouts.', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>show_excerpt="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show/hide description', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>show_date="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show/hide date/time', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>show_source="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show/hide source (CNBC, etc.)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>show_readmore="yes/no"</code></td>
                    <td><?php esc_html_e( 'Show "Read more" link', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>compact="yes"</code></td>
                    <td><?php esc_html_e( 'Ultra-compact layout (perfect for 30% columns)', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><code>date_format="H:i - d/m"</code></td>
                    <td><?php esc_html_e( 'Any PHP date format', 'daazsync' ); ?> (<a href="https://www.php.net/manual/en/datetime.format.php" target="_blank">ver formatos</a>)</td>
                </tr>
                <tr>
                    <td><code>excerpt_length="20"</code></td>
                    <td><?php esc_html_e( 'Maximum number of words in excerpt (max 25)', 'daazsync' ); ?></td>
                </tr>
            </tbody>
        </table>

        <hr style="margin: 40px 0; border: 0; border-top: 2px solid #ddd;">

        <h2><?php esc_html_e( '5. Complete Examples', 'daazsync' ); ?></h2>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 1: Grid with 6 items', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="grid" limit="6"]</pre>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 2: Carousel with autoplay', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="carousel" autoplay="on" limit="6"]</pre>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 3: List with specific source', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="list" category="BBC News" limit="10"]</pre>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 4: Ultra-compact sidebar', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="minimal" limit="5"]</pre>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 5: Custom list without images', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="list" list_mode="custom" show_image="no" show_date="yes" show_source="yes" compact="yes"]</pre>
            <p style="margin-bottom:0;"><em><?php esc_html_e( 'Tip: show_image="no" also works with layout="grid" and layout="carousel".', 'daazsync' ); ?></em></p>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 6: Hero banner', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync layout="hero" limit="3"]</pre>
        </div>

        <div style="background:#f9f9f9; padding:20px; border-radius:8px; margin:20px 0;">
            <h3 style="margin-top:0; color:#2271b1;"><?php esc_html_e( 'Example 7: Using imported posts', 'daazsync' ); ?></h3>
            <pre style="background:#fff; padding:15px; border-left:4px solid #2271b1;">[newssync source="posts" limit="8" layout="grid"]</pre>
            <p style="margin-bottom:0;"><em><?php esc_html_e( 'Requires "Save RSS Items as Posts" enabled in Settings', 'daazsync' ); ?></em></p>
        </div>

        <hr style="margin: 40px 0; border: 0; border-top: 2px solid #ddd;">

        <h2><?php esc_html_e( '6. Layout Comparison', 'daazsync' ); ?></h2>
        <table class="widefat" style="margin:25px 0;">
            <thead>
                <tr>
                    <th style="width:20%;"><?php esc_html_e( 'Layout', 'daazsync' ); ?></th>
                    <th style="width:40%;"><?php esc_html_e( 'Best For', 'daazsync' ); ?></th>
                    <th style="width:40%;"><?php esc_html_e( 'Characteristics', 'daazsync' ); ?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Grid</strong></td>
                    <td><?php esc_html_e( 'Main content areas, magazine style', 'daazsync' ); ?></td>
                    <td><?php esc_html_e( 'Responsive columns, images, excerpts', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><strong>List</strong></td>
                    <td><?php esc_html_e( 'Archives, news feeds, blog lists', 'daazsync' ); ?></td>
                    <td><?php esc_html_e( 'Vertical list, customizable fields', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><strong>Carousel</strong></td>
                    <td><?php esc_html_e( 'Featured content, homepage highlights', 'daazsync' ); ?></td>
                    <td><?php esc_html_e( 'Sliding items, autoplay, navigation', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><strong>Hero</strong></td>
                    <td><?php esc_html_e( 'Top banner, breaking news', 'daazsync' ); ?></td>
                    <td><?php esc_html_e( 'Large images, prominent headlines', 'daazsync' ); ?></td>
                </tr>
                <tr>
                    <td><strong>Minimal</strong></td>
                    <td><?php esc_html_e( 'Sidebars, widgets, compact spaces', 'daazsync' ); ?></td>
                    <td><?php esc_html_e( 'Title + date + source only, no images', 'daazsync' ); ?></td>
                </tr>
            </tbody>
        </table>

        <hr style="margin: 40px 0; border: 0; border-top: 2px solid #ddd;">

        <div style="background:#e7f3ff; border-left:4px solid #2271b1; padding:20px; margin:30px 0;">
            <h3 style="margin-top:0;"><?php esc_html_e( '💡 Pro Tip: Combining Parameters', 'daazsync' ); ?></h3>
            <p style="margin-bottom:0;"><?php esc_html_e( 'You can combine multiple parameters to create exactly the layout you need. Start with a basic layout, then add customizations one by one until you get the perfect result!', 'daazsync' ); ?></p>
        </div>

    </div>
