<?php
if ( ! defined( 'ABSPATH' ) ) exit;
function easy_gpt_how_to_use_page() {
    ?>
    <div class="wrap">
        <h1>How to Use Easy GPT</h1>
        <?php
            wp_enqueue_style('easy_gpt_admin_css', esc_url(plugins_url('../styles/how-to-use.css', __FILE__)));
        ?>
        <div id="easy-gpt-how-to-use-container">
            <div id="easy-gpt-how-to-use-menu">
                <ul>
                    <li><a href="#tab-activation" class="active">Activation</a></li>
                    <li><a href="#tab-configuration">Configuration</a></li>
                    <li><a href="#tab-generate-post">Generating a New Post/Page</a></li>
                    <li><a href="#tab-bulk-generate">Bulk Post Generation</a></li>
                    <li><a href="#tab-youtube-api">YouTube API Configuration</a></li>
                    <li><a href="#tab-translations">Translations</a></li>
                    <li><a href="#tab-article-refresher">Article Refresher</a></li>
                    <li><a href="#tab-comment-moderation">Comment Moderation & Replies</a></li>
                    <li><a href="#tab-cron-job-status">Cron Job Status</a></li>
                    <li><a href="#tab-controlling-costs">Controlling API Costs</a></li>
                </ul>
            </div>
            <div id="easy-gpt-how-to-use-content">
                <div id="tab-activation" class="active">
                    <h2>Activation</h2>
                    <p>To activate the Easy GPT plugin, you first need a <b>license</b>. If it's your first time using the plugin, you can obtain a free license that lasts for 5 days without any usage limits. Otherwise, you'll need to purchase a paid license. Licenses can be obtained <a href="https://easygptforwp.com/pricing-plans/" target="_blank">here</a>.</p>
                    <p>Once you have your license, navigate to the <b>Easy GPT > License</b> section in your WordPress dashboard. Enter your license key into the 'License Key' field and click 'Validate'. Here's what this step looks like:</p>
                    <img src="<?php echo esc_url(plugins_url('../images/image-license.png', __FILE__)); ?>" alt="Entering the license key" style="width: 400px; height: auto;">
                    <p>After activating your license, you'll need an <b>API key from OpenAI</b> to use the plugin. If you do not have one, you can generate it at the <a href="https://platform.openai.com/api-keys" target="_blank">OpenAI platform</a>. Note that OpenAI charges based on usage, so you will need to have funds in your account. Enter this API key in the <b>Easy GPT > Settings</b> under the <b>'API Key'</b> field, save the changes, and you're all set to start using the plugin. Below is where you should enter the API key:</p>
                    <img src="<?php echo esc_url(plugins_url('../images/image-api.png', __FILE__)); ?>" alt="API key entry" style="width: 400px; height: auto;">
                </div>
                <div id="tab-configuration" class="active">
                    <h2>Configuration</h2>
                    <p>To configure the Easy GPT plugin, you have two options: setting default options that will apply to all articles you generate, or specifying options for each individual article or batch of articles at the time of generation. If no options are specified during generation, the default settings will be applied.</p>
                    <h3>Setting Default Options</h3>
                    <p>To set the default options, go to <b>Easy GPT > Settings</b> in your WordPress dashboard. Here you can configure the following settings:</p>
                    <img src="<?php echo esc_url(plugins_url('../images/tutorial-settings.png', __FILE__)); ?>" alt="Easy GPT Default Settings" style="width: 400px; height: auto;">
                    <ul>
                        <li><strong>Select GPT Model:</strong> gpt-4o</li>
                        <li><strong>Temperature:</strong> 0.7</li>
                        <li><strong>Default Author:</strong> editor</li>
                        <li><strong>Default Language:</strong> Spanish</li>
                        <li><strong>Minimum Number of Words:</strong> 300</li>
                        <li><strong>Maximum Number of Words:</strong> 1000</li>
                        <li><strong>Number of H2 Subheadings:</strong> 3</li>
                        <li><strong>Type of Additional Subheadings:</strong> H3, H4</li>
                        <li><strong>Format Article:</strong> Format article with bold and italic text (e.g., bold, italic)</li>
                        <li><strong>Include Links:</strong> Include relevant hyperlinks within the article content.</li>
                        <li><strong>Include Bibliography:</strong> Add a bibliography section at the end of the article with cited sources.</li>
                        <li><strong>Automatically Set Categories and Tags</strong></li>
                        <li><strong>Enable SEO Optimization:</strong> Check this box to automatically fill in the SEO title and description if a compatible SEO plugin is installed.</li>
                        <li><strong>Writing Style:</strong> Formal</li>
                        <li><strong>Writing Tone:</strong> Neutral</li>
                        <li><strong>Include Excerpt</strong></li>
                    </ul>
                    <h3>Image Generation Settings</h3>
                    <p>Configure the settings for image generation with DALL-E models here:</p>
                    <ul>
                        <li><strong>Choose DALL-E Model:</strong> dall-e-3</li>
                        <li><strong>Automatically Generate Images:</strong> To generate images, this must be checked. By default, this is disabled.</li>
                        <li><strong>Number of Images per Post:</strong> 1</li>
                        <li><strong>Set First Generated Image as Featured:</strong> If you want the first generated image to be set as the featured image, check this option.</li>
                        <li><strong>Select Image Size:</strong> 1024x1024 pixels</li>
                        <li><strong>Choose Image Quality:</strong> Standard</li>
                        <li><strong>Image Style:</strong> <!-- Add description for Image Style here if needed --></li>
                    </ul>
                    <h3>Configuring Options for Specific Articles or Batches</h3>
                    <p>When generating a specific article or batch of articles, you can edit all the settings just before generation. This can be done through <b>Post > Add a New Post</b>, <b>Pages > Add New Page</b>, or <b>Easy GPT > New Bulk Generate</b>. Inside these interfaces, you will find sections for 'Article Settings' and 'Image Settings' where all the above fields can be edited to customize the content and images generated.</p>
                    <img src="<?php echo esc_url(plugins_url('../images/tutorial-settings-post.png', __FILE__)); ?>" alt="Easy GPT Settings for Specific Posts" style="width: 400px; height: auto;">
                </div>
                <div id="tab-generate-post">
                    <h2>Generating a New Post/Page</h2>
                    <p>To generate a new article using the Easy GPT plugin, navigate to <b>Post > Add a New Post</b> or <b>Pages > Add New Page</b>. At the bottom of the page, you will find a box with various options to fill in. <b>It is mandatory to fill in the 'prompt' and 'keywords'</b>. The 'prompt' should be the instructions for generating the article, for example, "Write an article about the wild cat," and the 'keywords' are key terms you want to focus on in the article, in this case, "wild cat".</p>
                    <img src="<?php echo esc_url(plugins_url('../images/generate-new-post.png', __FILE__)); ?>" alt="Generating a New Post" style="width: 400px; height: auto;">
                    <p>You can also specify instructions for the title, outline, content, images, etc., or leave it to the AI to generate what it considers appropriate. Additionally, you can generate each section individually, for example, generate the title by clicking 'Generate Title', the outline by clicking 'Generate Outline', or generate the entire content at once by clicking the <b>'Generate Full Content'</b> button. The article takes some time to generate, and once ready, you can review it and then click the button that appears below, 'Accept and Insert Article', to fill all the fields and save, schedule, or publish your article.</p>
                    <p>The generator also shows the estimated cost, but this is an estimate and should not be taken as 100% reliable.</p>
                    <img src="<?php echo esc_url(plugins_url('../images/accept-and-insert-article.png', __FILE__)); ?>" alt="Accept and Insert Article" style="width: 400px; height: auto;">
                    <p>The <b>'Accept and Insert Article'</b> button will insert the fields from the preview into the article. After this, you can save the article as a draft, schedule it, or publish it directly.</p>
                </div>
                <div id="tab-bulk-generate">
                    <h2>Bulk Post Generation</h2>
                    <p>To <b></b>generate multiple posts</b> at once, navigate to <b>Easy GPT > New Bulk Generate</b>. This feature is designed for bulk generation of articles. Upon entering, you will find a form where you must specify the number of articles you wish to generate. <b>You will then need to fill in the prompt for each article (one per line) and the keywords for each article (one line per article)</b>. You can also provide instructions for the title, outline, content, etc.</p>
                    <img src="<?php echo esc_url(plugins_url('../images/new-bulk-generation.png', __FILE__)); ?>" alt="New Bulk Generation Form" style="width: 400px; height: auto;">
                    <p>You can choose whether the articles are left as drafts, published immediately upon generation, or scheduled. If you choose to schedule them, you can specify the frequency and the number of articles per interval.</p>
                    <p>Once everything is set up to your liking, click <b>'Generate Articles'</b> to start the generation process. This may take some time, but you can monitor the status through <b>'Easy GPT > View Bulk Generations'</b>. In this section, you'll find the bulk generations you've initiated, along with their status and cost. By clicking on a specific batch, you can view the status and cost of individual articles.</p>
                    <img src="<?php echo esc_url(plugins_url('../images/view-bulk-generation.png', __FILE__)); ?>" alt="View Bulk Generations" style="width: 400px; height: auto;">
                    <p>The articles that are generated can be found in the 'Posts' section of your WordPress dashboard.</p>
                </div>
                <div id="tab-youtube-api">
                    <h2>YouTube API Configuration</h2>
                    <p>To integrate YouTube functionalities with the Easy GPT plugin, you need to configure the YouTube API. Follow the steps below to set it up correctly.</p>
                    
                    <h3>Step 1: Create a Google Cloud Project</h3>
                    <ol>
                        <li>Go to the <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a>.</li>
                        <li>Click on the project dropdown at the top and select <strong>New Project</strong>.</li>
                        <li>Enter your project name, select your organization, and click <strong>Create</strong>.</li>
                    </ol>

                    <h3>Step 2: Enable YouTube Data API</h3>
                    <ol>
                        <li>Within your new project, navigate to the <strong>APIs & Services</strong> > <strong>Library</strong>.</li>
                        <li>Search for <strong>YouTube Data API v3</strong> and click on it.</li>
                        <li>Click the <strong>Enable</strong> button.</li>
                    </ol>

                    <h3>Step 3: Create API Credentials</h3>
                    <ol>
                        <li>Go to <strong>APIs & Services</strong> > <strong>Credentials</strong>.</li>
                        <li>Click on <strong>Create Credentials</strong> and select <strong>API Key</strong>.</li>
                        <li>Your new API key will be generated. Copy this key.</li>
                    </ol>

                    <h3>Step 4: Restrict Your API Key</h3>
                    <p>For security purposes, it's recommended to restrict your API key.</p>
                    <ol>
                        <li>In the <strong>Credentials</strong> page, click on the <strong>Edit</strong> icon next to your API key.</li>
                        <li>Under <strong>Application restrictions</strong>, select <strong>HTTP referrers (web sites)</strong> and add your website URL.</li>
                        <li>Under <strong>API restrictions</strong>, select <strong>Restrict key</strong> and choose <strong>YouTube Data API v3</strong>.</li>
                        <li>Click <strong>Save</strong>.</li>
                    </ol>

                    <h3>Step 5: Enter the API Key in Easy GPT Settings</h3>
                    <p>Now that you have your YouTube API key, enter it into the Easy GPT plugin settings:</p>
                    <ol>
                        <li>Navigate to <strong>Easy GPT > Settings</strong> in your WordPress dashboard.</li>
                        <li>Find the <strong>YouTube API Key</strong> field.</li>
                        <li>Paste your API key into this field and click <strong>Save Changes</strong>.</li>
                    </ol>

                    <p>Your YouTube API is now configured and ready to use with the Easy GPT plugin.</p>
                </div>
                <div id="tab-translations">
                    <h2>Translations</h2>
                    <p>The Easy GPT plugin allows you to automatically translate existing posts into other languages using Polylang. To activate this feature:</p>
                    <ol>
                        <li>Go to <strong>Easy GPT > Settings</strong> and scroll down to the <strong>Translation Settings</strong> section.</li>
                        <li>Enable the translation feature and select which Polylang languages (except the default) to target.</li>
                        <li>Set how many posts to translate per day and configure optional behaviors like image or SEO translation.</li>
                    </ol>
                
                    <p>Once activated, the system will translate one article at a time through a background process (cron job).</p>
                
                    <p>You can monitor the status and view the history of completed translations in <strong>Easy GPT > Translations</strong>.</p>
                
                    <p><strong>Note:</strong> If translations are not running, check the cron job status in <strong>Easy GPT > Cron Job Status</strong>. The job responsible for this task is called <strong>Article Translation Cron</strong>.</p>
                </div>
                
                <div id="tab-article-refresher">
                    <h2>Article Refresher</h2>
                    <p>This feature allows you to automatically update old posts using AI, improving content quality, structure, images, SEO, and more.</p>
                
                    <p><strong>⚠️ Important:</strong> We recommend creating a backup before enabling automatic article updates, in case you want to revert the changes.</p>
                
                    <ol>
                        <li>Go to <strong>Easy GPT > Settings</strong> and enable the <strong>Article Refresher</strong>.</li>
                        <li>Define how often to refresh (daily, weekly, etc.), how many articles per interval, and whether to prioritize older or newer content.</li>
                        <li>You can choose whether to <strong>add new images</strong>, <strong>replace existing ones</strong>, and <strong>add YouTube videos</strong>.</li>
                        <li>You can also enable automatic SEO updates or leave it unchanged.</li>
                        <li>If you specify a minimum age like <strong>6 months</strong>, the plugin will only refresh articles that haven't been edited in the last 6 months (not based on creation date).</li>
                    </ol>
                
                    <p>You can monitor progress and results in the section <strong>Easy GPT > Article Refresher</strong>.</p>
                
                    <p><strong>Note:</strong> If the refresher doesn’t start, check the status in <strong>Easy GPT > Cron Job Status</strong>. If the refresher cron job is not active, you can manually start it from there.</p>
                </div>
                <div id="tab-comment-moderation">
                    <h2>Comment Moderation & Replies</h2>
                    <p>Easy GPT can help you manage your site's comments automatically using AI. There are two optional features you can enable:</p>
                
                    <ol>
                        <li><strong>Enable Moderation:</strong> The plugin will use AI to review new comments and decide whether to approve them or mark them as spam.</li>
                        <li><strong>Enable Auto Replies:</strong> The plugin can generate and publish replies to approved comments automatically using AI.</li>
                    </ol>
                
                    <p>To configure these options, go to <strong>Easy GPT > Settings</strong> and open the section <strong>Comment Moderation & Replies Settings</strong>. There you can enable or disable each feature and customize their behavior — including the AI model, moderation filters, reply language, tone, and more.</p>
                
                    <p>Both features rely on background tasks. Make sure the following jobs are active in <strong>Easy GPT > Cron Job Status</strong>:</p>
                    <ul>
                        <li><strong>Comment Moderation Cron</strong></li>
                        <li><strong>Auto Reply Cron</strong></li>
                    </ul>
                
                    <p>You can view the moderation and reply history in <strong>Easy GPT > Comments</strong>.</p>
                </div>
                
                <div id="tab-cron-job-status">
                    <h2>Cron Job Status</h2>
                    <p>Easy GPT relies on background tasks (cron jobs) for features like article refreshing, translations, bulk article generation, comment moderation, and auto-replies. You can check and control the status of these jobs in <strong>Easy GPT > Cron Job Status</strong>.</p>
                
                    <h3>Available Cron Jobs</h3>
                    <ul>
                        <li><strong>Batch Generation Cron:</strong> Handles scheduled bulk article generation.</li>
                        <li><strong>Article Translation Cron:</strong> Translates one article at a time based on your Translation settings.</li>
                        <li><strong>Article Refresher Cron:</strong> Automatically updates older posts based on your Article Refresher settings.</li>
                        <li><strong>Auto Reply Cron:</strong> Automatically replies to new comments if enabled.</li>
                        <li><strong>Comment Moderation Cron:</strong> Reviews and moderates new comments if configured.</li>
                    </ul>
                
                    <p>If something is not running as expected, make sure that WP Cron is working correctly and your plugin settings are saved. You can manually start or stop each job from this screen.</p>
                </div>
                <div id="tab-controlling-costs">
                    <h2>Controlling API Costs</h2>
                    <p>Easy GPT uses external APIs (like OpenAI, Gemini, DeepSeek) that charge based on usage. To avoid unexpected charges, we recommend setting limits or alerts in your API provider accounts.</p>
                
                    <ul>
                        <li>🔒 <strong>Set a hard limit:</strong> Most providers let you set a maximum monthly spending cap.</li>
                        <li>🔔 <strong>Enable alerts:</strong> You can configure email warnings when you reach certain usage thresholds (e.g., 80% of your monthly limit).</li>
                        <li>🧾 <strong>Monitor usage:</strong> Check your API dashboard regularly to track token consumption and spending.</li>
                    </ul>
                
                    <p>⚠️ <strong>Important:</strong> Easy GPT does not charge you directly. All costs come from your API provider. Protect your budget by enabling these controls early on.</p>
                </div>
            </div>
        </div>
    <?php
        wp_enqueue_script('how-to-use-js', esc_url(plugins_url('../js/how-to-use.js', __FILE__)), array('jquery'), false, true);
    ?>
    </div>
    <?php
}
?>
