<?php defined('ABSPATH') || exit; ?>
<div class="wrap upvimeo-settings-page">
    <h2 class="wvv-mb-20"><?php esc_html_e('Upvimeo Documentation', 'upvimeo-direct-uploads'); ?></h2>

    <div class="wvv-row">
        <div class="wvv-col-60 wvv-col" style="width: 100%;">
            <div class="wvv-box">
                <!-- 1. Introduction -->
                <h3 style="margin-top: 0; color: var(--upvimeo-primary);">
                    <?php esc_html_e('1. Introduction', 'upvimeo-direct-uploads'); ?>
                </h3>
                <p><?php echo wp_kses_post(__('<strong>Upvimeo</strong> is a powerful WordPress plugin that allows you to upload, manage, and embed Vimeo videos directly from your WordPress dashboard. It integrates seamlessly with popular LMS and form plugins to streamline your video workflow.', 'upvimeo-direct-uploads')); ?>
                </p>

                <hr style="margin: 25px 0; border: 0; border-top: 1px solid #eee;">

                <!-- 2. Installation -->
                <h3 class="wvv-form-heading"><?php esc_html_e('2. Installation & Connection', 'upvimeo-direct-uploads'); ?></h3>
                <h4><?php esc_html_e('Step 1: Install', 'upvimeo-direct-uploads'); ?></h4>
                <ol>
                    <li><?php echo wp_kses_post(__('Navigate to <strong>Plugins > Add New</strong> and upload <code>upvimeo.zip</code>.', 'upvimeo-direct-uploads')); ?>
                    </li>
                    <li><?php esc_html_e('Activate the plugin.', 'upvimeo-direct-uploads'); ?></li>
                </ol>

                <h4><?php esc_html_e('Step 2: Connect to Vimeo', 'upvimeo-direct-uploads'); ?></h4>
                <ol>
                    <li><?php echo wp_kses_post(__('Go to <strong>Settings > Upvimeo Settings</strong>.', 'upvimeo-direct-uploads')); ?>
                    </li>
                    <li><?php echo wp_kses_post(__('Create a Vimeo App via the <a href="https://developer.vimeo.com/" target="_blank">Vimeo Developer Portal</a>.', 'upvimeo-direct-uploads')); ?>
                    </li>
                    <li><?php echo wp_kses_post(__('Generate an Access Token with scopes: <code>public</code>, <code>private</code>, <code>edit</code>, <code>upload</code>, <code>delete</code>, <code>interact</code>, <code>video_files</code>.', 'upvimeo-direct-uploads')); ?>
                    </li>
                    <li><?php echo wp_kses_post(__('Enter your <strong>Client ID</strong>, <strong>Client Secret</strong>, and <strong>Access Token</strong> in the plugin settings and Save.', 'upvimeo-direct-uploads')); ?>
                    </li>
                </ol>

                <hr style="margin: 25px 0; border: 0; border-top: 1px solid #eee;">

                <!-- 3. Advanced Configuration (The User's Request) -->
                <h3 class="wvv-form-heading"><?php esc_html_e('3. Advanced Configuration Options', 'upvimeo-direct-uploads'); ?></h3>
                <p><?php esc_html_e('Tailor the plugin behavior using these advanced settings found in the main Settings page:', 'upvimeo-direct-uploads'); ?>
                </p>

                <h4 style="margin-bottom: 15px;"><?php esc_html_e('A. General Upload Settings (Admin)', 'upvimeo-direct-uploads'); ?>
                </h4>
                <table class="upvimeo-stats-table"
                    style="width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 25px;">
                    <thead>
                        <tr>
                            <th style="width: 30%; background: #f8f9fa; border-bottom: 2px solid #e2e4e7;">
                                <?php esc_html_e('Option Name', 'upvimeo-direct-uploads'); ?>
                            </th>
                            <th style="background: #f8f9fa; border-bottom: 2px solid #e2e4e7;">
                                <?php esc_html_e('Description & Usage', 'upvimeo-direct-uploads'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong><?php esc_html_e('Enable video privacy option...', 'upvimeo-direct-uploads'); ?></strong><br><small>(Gutenberg
                                    / TinyMCE / Media)</small></td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Adds a dropdown menu to the upload modal allowing users to set video privacy (e.g., "Only Me") immediately during upload.', 'upvimeo-direct-uploads')); ?>
                                </p>
                                <p><span class="dashicons dashicons-thumbs-up" style="color: #46b450;"></span>
                                    <em><?php esc_html_e('Recommended for most sites to give creators control.', 'upvimeo-direct-uploads'); ?></em>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Enable Vimeo account search...', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Allows searching your <em>entire</em> Vimeo account for videos to embed, even those not uploaded via this site.', 'upvimeo-direct-uploads')); ?>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Enable local library search...', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Restricts search to only videos uploaded via this WordPress site (Media Library records).', 'upvimeo-direct-uploads')); ?>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Show only the Videos uploaded by the current user...', 'upvimeo-direct-uploads'); ?></strong>
                            </td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Restricts the Local Library search to only show videos owned by the logged-in user.', 'upvimeo-direct-uploads')); ?>
                                </p>
                                <p><span class="dashicons dashicons-lock" style="color: #ffb900;"></span>
                                    <em><?php esc_html_e('Essential for Multi-Author or Membership sites.', 'upvimeo-direct-uploads'); ?></em>
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h4 style="margin-bottom: 15px;"><?php esc_html_e('B. Frontend & Form Uploads', 'upvimeo-direct-uploads'); ?></h4>
                <div
                    style="background: #f0f9ff; border-left: 4px solid #00adef; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
                    <p style="margin: 0;"><strong><?php esc_html_e('Note:', 'upvimeo-direct-uploads'); ?></strong>
                        <?php esc_html_e('Applies to Gravity Forms, WPForms, ACF, and Shortcode uploads.', 'upvimeo-direct-uploads'); ?></p>
                </div>
                <table class="upvimeo-stats-table"
                    style="width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 25px;">
                    <thead>
                        <tr>
                            <th style="width: 30%; background: #f8f9fa; border-bottom: 2px solid #e2e4e7;">
                                <?php esc_html_e('Option Name', 'upvimeo-direct-uploads'); ?>
                            </th>
                            <th style="background: #f8f9fa; border-bottom: 2px solid #e2e4e7;">
                                <?php esc_html_e('Description & Usage', 'upvimeo-direct-uploads'); ?>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong><?php esc_html_e('Enable saving videos locally...', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Creates a "shadow" record in the Media Library for frontend uploads, allowing you to manage them in WordPress.', 'upvimeo-direct-uploads')); ?>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Enable "pull" uploads...', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td>
                                <p><?php echo wp_kses_post(__('<strong>What it does:</strong> Switches from Browser->Vimeo upload to Server->Vimeo upload (via URL pull).', 'upvimeo-direct-uploads')); ?>
                                </p>
                                <p><span class="dashicons dashicons-warning" style="color: #dba617;"></span>
                                    <strong><?php esc_html_e('Use with Caution:', 'upvimeo-direct-uploads'); ?></strong>
                                    <?php esc_html_e('Only enable if direct uploads fail. Requires your site to be public (not localhost).', 'upvimeo-direct-uploads'); ?>
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h4 style="margin-bottom: 15px;"><?php esc_html_e('C. Video Management Panels', 'upvimeo-direct-uploads'); ?></h4>
                <table class="upvimeo-stats-table" style="width: 100%; border-collapse: collapse; text-align: left;">
                    <tbody>
                        <tr>
                            <td style="width: 30%;">
                                <strong><?php esc_html_e('Enable Embed Presets panel', 'upvimeo-direct-uploads'); ?></strong>
                            </td>
                            <td><?php echo wp_kses_post(__('Apply saved Vimeo Embed Presets (player colors, buttons, etc.) to videos. <em>(Vimeo Pro+ only)</em>.', 'upvimeo-direct-uploads')); ?>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Enable Embed Privacy panel', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td><?php esc_html_e('Restrict video playback to specific domains. Essential for protecting course content.', 'upvimeo-direct-uploads'); ?>
                            </td>
                        </tr>
                        <tr>
                            <td><strong><?php esc_html_e('Enable Folders panel', 'upvimeo-direct-uploads'); ?></strong></td>
                            <td><?php esc_html_e('Organize videos into Vimeo Folders directly from the edit screen.', 'upvimeo-direct-uploads'); ?>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <hr style="margin: 25px 0; border: 0; border-top: 1px solid #eee;">

                <!-- 4. Usage -->
                <h3 class="wvv-form-heading"><?php esc_html_e('4. Uploading Videos', 'upvimeo-direct-uploads'); ?></h3>
                <div class="wvv-row" style="display: flex; gap: 20px; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 250px;">
                        <h4><?php esc_html_e('Media Library', 'upvimeo-direct-uploads'); ?></h4>
                        <ol>
                            <li><?php echo wp_kses_post(__('Go to <strong>Media > Vimeo</strong>.', 'upvimeo-direct-uploads')); ?></li>
                            <li><?php echo wp_kses_post(__('Click <strong>Upload New</strong>.', 'upvimeo-direct-uploads')); ?></li>
                            <li><?php esc_html_e('Drag & Drop your file.', 'upvimeo-direct-uploads'); ?></li>
                        </ol>
                    </div>
                    <div style="flex: 1; min-width: 250px;">
                        <h4><?php esc_html_e('Gutenberg Block', 'upvimeo-direct-uploads'); ?></h4>
                        <ol>
                            <li><?php esc_html_e('Add "Vimeo Upload" block.', 'upvimeo-direct-uploads'); ?></li>
                            <li><?php esc_html_e('Upload directly in the editor.', 'upvimeo-direct-uploads'); ?></li>
                        </ol>
                    </div>
                    <div style="flex: 1; min-width: 250px;">
                        <h4><?php esc_html_e('Classic Editor', 'upvimeo-direct-uploads'); ?></h4>
                        <ol>
                            <li><?php esc_html_e('Click the Vimeo icon in toolbar.', 'upvimeo-direct-uploads'); ?></li>
                            <li><?php esc_html_e('Upload via the modal.', 'upvimeo-direct-uploads'); ?></li>
                        </ol>
                    </div>
                </div>

                <hr style="margin: 25px 0; border: 0; border-top: 1px solid #eee;">

                <!-- 5. Integrations -->
                <h3 class="wvv-form-heading"><?php esc_html_e('5. Integrations (LMS & Forms)', 'upvimeo-direct-uploads'); ?></h3>
                <ul style="list-style: disc; margin-left: 20px;">
                    <li><strong><?php esc_html_e('Tutor LMS / LearnDash:', 'upvimeo-direct-uploads'); ?></strong>
                        <?php esc_html_e('Use the "Vimeo Upload" button in the Lesson/Course builder video section.', 'upvimeo-direct-uploads'); ?>
                    </li>
                    <li><strong><?php esc_html_e('Gravity Forms / WPForms:', 'upvimeo-direct-uploads'); ?></strong>
                        <?php esc_html_e('Add the "Vimeo Upload" field to your forms to allow user-generated content.', 'upvimeo-direct-uploads'); ?>
                    </li>
                    <li><strong><?php esc_html_e('ACF:', 'upvimeo-direct-uploads'); ?></strong>
                        <?php esc_html_e('Use "Vimeo Upload" or "Vimeo Message" fields in your custom field groups.', 'upvimeo-direct-uploads'); ?>
                    </li>
                </ul>

                <hr style="margin: 25px 0; border: 0; border-top: 1px solid #eee;">

                <!-- 6. Troubleshooting -->
                <h3 class="wvv-form-heading"><?php esc_html_e('6. Troubleshooting', 'upvimeo-direct-uploads'); ?></h3>
                <div class="wvv-problems">
                    <p><strong><?php esc_html_e('Common Issues:', 'upvimeo-direct-uploads'); ?></strong></p>
                    <ul style="margin: 0; padding-left: 20px;">
                        <li><?php echo wp_kses_post(__('<strong>Upload Fails?</strong> Check API Scopes (must have `upload`).', 'upvimeo-direct-uploads')); ?>
                        </li>
                        <li><?php echo wp_kses_post(__('<strong>Quota Error?</strong> Check your storage limits in the Settings header status table.', 'upvimeo-direct-uploads')); ?>
                        </li>
                        <li><?php echo wp_kses_post(__('<strong>Privacy not working?</strong> Ensure your specific privacy setting is allowed by your Vimeo plan level.', 'upvimeo-direct-uploads')); ?>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>