<?php
/**
 * Admin page: Plugin Documentation.
 *
 * This file contains the markup and functions for rendering
 * the Documentation admin page in the Magecomp AI Description Generator for WooCommerceplugin.
 *
 * The Documentation page provides guidance and information for:
 * 1. General Settings Page
 * 2. Product Suggestions Page
 * 3. API Usage & Logs Page
 * 4. Description Generation Page
 *
 * @package Magecomp AI Description Generator for WooCommerce
 * @since 1.0.0
 */

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

/**
 * Render the Documentation admin page UI.
 *
 * This function outputs the HTML for the plugin's Documentation page,
 * which includes instructions and guidance for all main admin pages.
 *
 * @since 1.0.0
 *
 * @return void Outputs the admin page HTML directly.
 */
function descgpt_render_documentation_page() {

	// Restrict access to administrators.
	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die(
			esc_html__( 'You do not have sufficient permissions to access this page.', 'magecomp-ai-description-generator-for-woocommerce' )
		);
	}

	$is_pro_active = defined( 'MCADGW_DESC_GEN_CHTGPT_PRO' );

	?>

	<div class="descgpt-admin-wrap">
		<!-- Main Header -->
		<div class="max-w-7xl mx-auto mb-8 bg-white border border-gray-200 space-x-6 flex items-center rounded-xl p-8 overflow-hidden">
			<div class="p-4 bg-blue-100 rounded-xl">
				<svg fill="#1c64f2" class="w-10 h-10" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve">
					<g id="SVGRepo_bgCarrier" stroke-width="0" />
					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
					<g id="SVGRepo_iconCarrier">
						<g>
							<g>
								<path d="M184.757,208.096c-11.337,0-20.529-9.193-20.529-20.529V30.187h-143.7C9.191,30.187,0,39.379,0,50.716v410.571 c0,11.336,9.191,20.529,20.529,20.529h301.086c11.337,0,20.529-9.193,20.529-20.529V208.096H184.757z M239.5,386.016H102.643 c-11.337,0-20.529-9.193-20.529-20.529c0-11.339,9.191-20.529,20.529-20.529H239.5c11.337,0,20.529,9.19,20.529,20.529 C260.028,376.823,250.837,386.016,239.5,386.016z M239.5,303.901H102.643c-11.337,0-20.529-9.193-20.529-20.529 c0-11.339,9.191-20.529,20.529-20.529H239.5c11.337,0,20.529,9.19,20.529,20.529C260.028,294.709,250.837,303.901,239.5,303.901z" />
							</g>
						</g>
						<g>
							<g>
								<polygon points="205.286,42.212 205.286,167.039 330.117,167.039 " />
							</g>
						</g>
						<g>
							<g>
								<path d="M505.988,36.199c-3.85-3.85-9.071-6.013-14.516-6.013h-87.743c-5.446,0-10.667,2.162-14.516,6.013 c-3.85,3.85-6.012,9.071-6.012,14.516l0.001,118.043v37.615l0.001,211.043c0,5.444,2.162,10.665,6.014,14.514l43.87,43.87 c4.009,4.01,9.263,6.015,14.515,6.015c5.253,0,10.508-2.005,14.515-6.015l43.87-43.87c3.85-3.85,6.013-9.071,6.013-14.514 l0.003-366.702C512,45.27,509.838,40.049,505.988,36.199z" />
							</g>
						</g>
					</g>

				</svg>
			</div>
			<div>
				<h1 class="text-3xl font-bold text-gray-900">Magecomp AI Description Generator for WooCommerce</h1>
				<p class="text-gray-500 mt-1">A complete guide to all plugin features, settings, and best practices.</p>
			</div>
		</div>

		<!-- 1. General Settings -->
		<div class="max-w-7xl mx-auto border border-gray-200 bg-white rounded-xl mb-8 p-8 border border-gray-200 overflow-hidden">
			<div class="flex items-center space-x-4 mb-6">
				<div class="p-3 bg-gray-100 rounded-xl">
					<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<g id="SVGRepo_bgCarrier" stroke-width="0" />
						<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
						<g id="SVGRepo_iconCarrier">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224ZM12.5 15C14.1695 15 15.5228 13.6569 15.5228 12C15.5228 10.3431 14.1695 9 12.5 9C10.8305 9 9.47716 10.3431 9.47716 12C9.47716 13.6569 10.8305 15 12.5 15Z" fill="#4b5563" />
						</g>
					</svg>
				</div>
				<div>
					<h2 class="text-2xl font-bold text-gray-900">General Settings</h2>
					<p class="text-sm text-gray-500 mt-1">
						Configure all core plugin options: API key, model, temperature, language, prompts, and content limits. These settings control how the AI generates content and suggestions for your WooCommerce store.
					</p>
				</div>
			</div>

			<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
				<div>
					<h3 class="text-xl font-semibold text-gray-800 mb-2">API Key & Model</h3>
					<ul class="list-disc pl-5 text-gray-700 mb-4">
						<li>
							<strong>API Key:</strong> Required for all AI features. Keep it secure and never share it publicly.
							The plugin masks and verifies your key.
							<strong>
								<a href="https://platform.openai.com/api-keys"
									target="_blank"
									rel="noopener noreferrer"
									style="color:#2271b1; text-decoration:underline;">
									Generate your OpenAI API key
								</a>
							</strong>
						</li>
						<li>
							<strong>Model:</strong> Select from available OpenAI models (GPT-4o, GPT-4 Turbo, GPT-3.5 Turbo, etc.). Higher models generally produce more accurate and creative content, but may be slower or more expensive. Choose a model that fits your quality and budget needs.
						</li>
					</ul>

					<h3 class="text-xl font-semibold text-gray-800 mb-2">Temperature</h3>
					<ul class="list-disc pl-5 text-gray-700 mb-4">
						<li>
							<strong>What is Temperature?</strong> Temperature controls the "creativity" or randomness of AI responses. It affects how varied or predictable the generated content will be.
							<ul class="list-disc pl-5">
								<li><strong>Low (0.0–0.3):</strong> Output is focused, factual, and consistent. Best for technical or formal content.</li>
								<li><strong>Medium (0.4–0.6):</strong> Balanced creativity and reliability. Good for most product descriptions.</li>
								<li><strong>High (0.7–1.0):</strong> Output is creative, diverse, and sometimes surprising. Useful for marketing, storytelling, or unique brand voice.</li>
							</ul>
						</li>
						<li>
							<strong>Range:</strong> Minimum is <code>0.0</code>, maximum is <code>1.0</code>. Default is <code>0.5</code>. Adjust according to your content needs.
						</li>
					</ul>

					<h3 class="text-xl font-semibold text-gray-800 mb-2">Language</h3>
					<p class="text-gray-700 mb-4">
						Select the language for generated content. The plugin supports over 60 languages, allowing you to create localized descriptions and suggestions for global audiences.
					</p>
				</div>

				<div>
					<h3 class="text-xl font-semibold text-gray-800 mb-2">Prompts & Content Limits</h3>
					<ul class="list-disc pl-5 text-gray-700 mb-4">
						<li>
							<strong>Content Prompt:</strong> This is the instruction sent to AI for generating product, category, tag, or brand descriptions. You can customize the prompt to match your store’s tone, style, and SEO needs.
						</li>
						<?php if ( $is_pro_active ) : ?>
							<li>
								<strong>Recommendation Prompt:</strong>
								Used for product suggestions. You can personalize results using dynamic placeholders such as
								<code>[order items]</code>, <code>[categories]</code>, <code>[tags]</code>, <code>[catalog]</code>,
								<code>[language]</code>, and <code>[num_suggestions]</code>. These are automatically replaced based on
								the customer’s order and your settings.
							</li>
						<?php endif; ?>
						<li>
							<strong>Content Limit:</strong> Set the maximum number of words, characters, or paragraphs for generated content. Note: Sometimes AI may generate content that slightly exceeds your set limit because it interprets instructions flexibly. The plugin will trim excess text, but always review the output before saving.
						</li>
						<li>
							<strong>Why AI may exceed limits:</strong> The AI model tries to follow your instructions, but may not always stop exactly at the limit. This is a known behavior of generative models. For best results, set reasonable limits and check the output before publishing.
						</li>
						<li>
							<strong>Why total token count may differ from visible text:</strong>
							<div class="pl-2 text-gray-600">
								When using the Chat API, the total token count includes more than just the words you see in the prompt and the generated output. Tokens are counted for each message, including the <strong>system prompt</strong> that sets instructions or behavior for the AI, the <strong>user prompt</strong> with the main content request, and the AI's <strong>response</strong>.<br><br>
								Additionally, there is a small overhead per message (for roles, separators, and metadata) that adds extra tokens. Punctuation, special characters, and formatting markers are also counted as tokens. As a result, the API’s total <code>tokens_used</code> can be higher than the sum of just the raw prompt and output text.<br><br>
								This is normal behavior and is explained in OpenAI’s official documentation: all system instructions, message roles, and structural formatting contribute to the total token usage, not only the visible content. Always consider this when estimating usage and limits. See more details in the OpenAI docs:
								<a href="https://platform.openai.com/docs/api-reference/chat" target="_blank" style="color:#1d4ed8; font-weight:500;">Chat Completions Guide</a> and
								<a href="https://help.openai.com/en/articles/4936856-what-are-tokens-and-how-to-count-them" target="_blank" style="color:#9333ea; font-weight:500;">Token Usage Documentation</a>.
							</div>
						</li>

					</ul>
				</div>
			</div>
			<div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded mt-8 text-blue-800">
				<strong>Best Practice:</strong>
				<ul class="list-disc pl-5 mt-2">
					<li>Use a medium temperature (0.4–0.6) for balanced, reliable content.</li>
					<li>Customize prompts for your brand and audience.</li>
					<li>Always review generated content, especially for bulk actions.</li>
					<li>Keep your API key private and rotate it if you suspect misuse.</li>
				</ul>
			</div>
		</div>

		<!-- 2. AI Description Generator -->
		<div class="max-w-7xl mx-auto bg-white rounded-3xl mb-8 p-8 border border-gray-200 overflow-hidden shadow-sm mb-12">
			<div class="flex items-center space-x-4 mb-6">
				<div class="p-3 bg-gray-100 rounded-xl">
					<svg fill="#4b5563" xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" viewBox="0 0 52 52">
						<path d="M44,4H8C5.8,4,4,5.8,4,8v36c0,2.2,1.8,4,4,4h36c2.2,0,4-1.8,4-4V8C48,5.8,46.2,4,44,4z M12,14 c0-0.6,0.4-1,1-1h10c0.6,0,1,0.4,1,1v10c0,0.6-0.4,1-1,1H13c-0.6,0-1-0.4-1-1V14z M36,40c0,0.6-0.4,1-1,1H13c-0.6,0-1-0.4-1-1v-2 c0-0.6,0.4-1,1-1h22c0.6,0,1,0.4,1,1V40z M40,32c0,0.6-0.4,1-1,1H13c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1h26c0.6,0,1,0.4,1,1V32z M40,24c0,0.6-0.4,1-1,1H29c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1h10c0.6,0,1,0.4,1,1V24z M40,16c0,0.6-0.4,1-1,1H29 c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1h10c0.6,0,1,0.4,1,1V16z" />
					</svg>
				</div>
				<div>
					<h2 class="text-2xl font-bold text-gray-900">AI Description Generator</h2>
					<p class="text-sm text-gray-500 mt-1">
						Generate SEO-friendly, engaging descriptions for your WooCommerce products, categories, tags, and brands using advanced AI. Choose between individual or bulk generation modes for maximum flexibility.
					</p>
				</div>
			</div>

			<ul class="list-disc pl-5 text-gray-700 mb-4">
				<li>
					<strong>Individual Mode:</strong> Select a single product, category, tag, or brand and generate its description. Review and edit the AI-generated content in collapsible accordion panels before saving.
				</li>
				<li>
					<strong>Bulk Mode:</strong> Generate descriptions for multiple items at once. All results are shown in separate panels for easy review and editing before saving to WooCommerce.
				</li>
				<li>
					<strong>Content Safety:</strong> The plugin automatically checks for generic, repetitive, or too-short content. Warnings are shown if the AI output may not be suitable for publishing.
				</li>
				<li>
					<strong>Accordion Panels:</strong> Each generated section (Short Description, Full Description, etc.) appears in a collapsible panel. This makes it easy to compare, edit, and approve content before saving.
				</li>
				<li>
					<strong>Save & Overwrite:</strong> When you save, the new content will overwrite any existing description for that item. Always review AI output before saving to ensure quality and relevance.
				</li>
				<li>
					<strong>Content Limits:</strong> You can set maximum words, characters, or paragraphs for generated content. Note that AI may sometimes exceed these limits; the plugin will trim excess text, but always review the final output.
				</li>
				<li>
					<strong>Why can AI exceed your set limit?</strong>
					<div class="pl-2 text-gray-600">
						The limit you set (words, characters, or paragraphs) is used as a guideline for the AI.
						However, AI models don’t always stop at an exact number, so the result may sometimes be slightly longer.
						This is normal behavior as AI generates text based on patterns rather than counting each word as it writes.<br><br>
						The plugin does its best to guide the AI toward your chosen limit and trims extra text if the output becomes too long.
						Still, it’s always a good idea to review the final result before publishing.
					</div>
				</li>
				<li>
					<strong>Why you may want to set higher limits for non-English content?</strong>
					<div class="pl-2 text-gray-600">
						Different languages often require more words or characters to express the same idea compared to English.
						For example, some languages use longer phrases or multiple words where English uses a single word.
						As a result, the AI might exceed your set limit or occasionally produce **unfinished content** if the limit is too low, because it cannot fully express the idea within the constrained number of words or characters.<br><br>
						To ensure the generated content is complete, natural, and coherent, consider setting slightly higher limits for words, characters, or paragraphs when working with non-English languages.
						This helps the AI produce full sentences and paragraphs without unnecessary truncation.
					</div>
				</li>

			</ul>

			<div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded mb-4 text-blue-800">
				<strong>Tip:</strong>
				<ul class="list-disc pl-5 mt-2">
					<li>If you set a very <strong>high temperature</strong>, expect more creative but sometimes less relevant content.</li>
					<li>If you set a very <strong>low temperature</strong>, expect more factual but less varied content.</li>
					<li>Always review generated descriptions before saving, especially for bulk actions.</li>
				</ul>
			</div>
		</div>

		<?php if ( $is_pro_active ) : ?>
			<!-- 3. Product Suggestions Settings -->
			<div class="max-w-7xl mx-auto bg-white rounded-3xl mb-8 p-8 border border-gray-200 overflow-hidden shadow-sm mb-12">
				<div class="flex items-center space-x-4 mb-6">
					<div class="p-3 bg-gray-100 rounded-xl">
						<svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<g id="SVGRepo_bgCarrier" stroke-width="0" />
							<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
							<g id="SVGRepo_iconCarrier">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224ZM12.5 15C14.1695 15 15.5228 13.6569 15.5228 12C15.5228 10.3431 14.1695 9 12.5 9C10.8305 9 9.47716 10.3431 9.47716 12C9.47716 13.6569 10.8305 15 12.5 15Z" fill="#4b5563" />
							</g>
						</svg>
					</div>
					<div>
						<h2 class="text-2xl font-bold text-gray-900">Product Suggestions Settings</h2>
						<p class="text-sm text-gray-500 mt-1">
							Configure how AI-powered product recommendations are generated and displayed on the WooCommerce Thank You page. These suggestions help customers discover related or complementary products, increasing engagement and potential sales.
						</p>
					</div>
				</div>

				<ul class="list-disc pl-5 text-gray-700 mb-4">
					<li>
						<strong>Enable/Disable Suggestions:</strong> Toggle personalized product recommendations for customers after checkout. When enabled, AI analyzes the order and suggests relevant products.
					</li>
					<li>
						<strong>Number of Suggestions:</strong> Set how many products to recommend (e.g., 3–10). More suggestions can increase upsell opportunities but may overwhelm the customer.
					</li>
					<li>
						<strong>Template Selection:</strong> Choose how suggestions are displayed:
						<ul class="list-disc pl-5">
							<li><strong>Grid:</strong> Products shown in a responsive grid layout for visual appeal.</li>
							<li><strong>Theme Style:</strong> Uses WooCommerce’s default product loop styling for seamless integration.</li>
						</ul>
					</li>
					<li>
						<strong>Section Title:</strong> Customize the heading above the suggestions to match your store’s branding or context.
					</li>
					<li>
						<strong>Caching Options:</strong>
						<ul class="list-disc pl-5">
							<li>
								<strong>What is Caching?</strong> Caching stores generated suggestions for a set period (e.g., 24 hours) so repeat customers or similar orders don’t trigger new API calls every time.
							</li>
							<li>
								<strong>Why Use Caching?</strong>
								<ul class="list-disc pl-5">
									<li><strong>Pros:</strong> Faster page loads, reduced API usage and cost, consistent suggestions for the same order.</li>
									<li><strong>Cons:</strong> Suggestions may not update instantly if your product catalog changes or new items are added. For always-fresh suggestions, disable caching.</li>
								</ul>
							</li>
							<li>
								<strong>Cache Duration:</strong> Set how long suggestions are stored (in hours). Default is 24 hours. Shorter durations mean fresher suggestions but more API calls.
							</li>
						</ul>
					</li>
				</ul>

				<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded text-yellow-800">
					<strong>Note:</strong>
					<ul class="list-disc pl-5 mt-2">
						<li>Disabling caching means every customer triggers a new API call, which may increase your OpenAI costs and slow down the Thank You page.</li>
						<li>If you change your product catalog frequently, consider a shorter cache duration or disabling caching for more up-to-date suggestions.</li>
						<li>Review your API usage in the logs to balance performance and cost.</li>
					</ul>
				</div>
			</div>

			<!-- 4. API Usage & Logs -->
			<div class="max-w-7xl mx-auto bg-white rounded-3xl mb-8 p-8 border border-gray-200 overflow-hidden shadow-sm mb-12">
				<div class="flex items-center space-x-4 mb-6">
					<div class="p-3 bg-gray-100 rounded-xl">
						<svg fill="#4b5563" class="w-10 h-10" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<g id="SVGRepo_bgCarrier" stroke-width="0" />
							<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
							<g id="SVGRepo_iconCarrier">
								<title>logs</title>
								<path d="M0 24q0 0.832 0.576 1.44t1.44 0.576h1.984q0 2.496 1.76 4.224t4.256 1.76h6.688q-2.144-1.504-3.456-4h-3.232q-0.832 0-1.44-0.576t-0.576-1.408v-20q0-0.832 0.576-1.408t1.44-0.608h16q0.8 0 1.408 0.608t0.576 1.408v7.232q2.496 1.312 4 3.456v-10.688q0-2.496-1.76-4.256t-4.224-1.76h-16q-2.496 0-4.256 1.76t-1.76 4.256h-1.984q-0.832 0-1.44 0.576t-0.576 1.408 0.576 1.44 1.44 0.576h1.984v4h-1.984q-0.832 0-1.44 0.576t-0.576 1.408 0.576 1.44 1.44 0.576h1.984v4h-1.984q-0.832 0-1.44 0.576t-0.576 1.408zM10.016 24h2.080q0-0.064-0.032-0.416t-0.064-0.576 0.064-0.544 0.032-0.448h-2.080v1.984zM10.016 20h2.464q0.288-1.088 0.768-1.984h-3.232v1.984zM10.016 16h4.576q0.992-1.216 2.112-1.984h-6.688v1.984zM10.016 12h16v-1.984h-16v1.984zM10.016 8h16v-1.984h-16v1.984zM14.016 23.008q0 1.824 0.704 3.488t1.92 2.88 2.88 1.92 3.488 0.704 3.488-0.704 2.88-1.92 1.92-2.88 0.704-3.488-0.704-3.488-1.92-2.88-2.88-1.92-3.488-0.704-3.488 0.704-2.88 1.92-1.92 2.88-0.704 3.488zM18.016 23.008q0-2.080 1.44-3.52t3.552-1.472 3.52 1.472 1.472 3.52q0 2.080-1.472 3.52t-3.52 1.472-3.552-1.472-1.44-3.52zM22.016 23.008q0 0.416 0.288 0.704t0.704 0.288h1.984q0.416 0 0.704-0.288t0.32-0.704-0.32-0.704-0.704-0.288h-0.992v-0.992q0-0.416-0.288-0.704t-0.704-0.32-0.704 0.32-0.288 0.704v1.984z" />
							</g>
						</svg>
					</div>
					<div>
						<h2 class="text-2xl font-bold text-gray-900">API Usage & Logs</h2>
						<p class="text-sm text-gray-500 mt-1">
							Monitor all plugin API calls, including content generation and product suggestions. The logs page helps you track, analyze, and troubleshoot every interaction with OpenAI, ensuring transparency and control over your AI usage and costs.
						</p>
					</div>
				</div>

				<ul class="list-disc pl-5 text-gray-700 mb-4">
					<li>
						<strong>Date of API Call:</strong> Shows when each request was made. Useful for tracking activity and identifying peak usage times.
					</li>
					<li>
						<strong>Model Used:</strong> Indicates which OpenAI model (e.g., GPT-4o, GPT-3.5 Turbo) was used for the request. Higher models may produce better content but can be more costly.
					</li>
					<li>
						<strong>Status Code:</strong> Displays the HTTP response code from OpenAI. Common codes:
						<ul class="list-disc pl-5">
							<li><strong>200:</strong> Success – The request was processed and content was returned.</li>
							<li><strong>400:</strong> Bad Request – There was an error in the request (e.g., invalid parameters or prompt).</li>
							<li><strong>401:</strong> Unauthorized – API key is missing or invalid.</li>
							<li><strong>429:</strong> Rate Limit – Too many requests in a short time; slow down or check your OpenAI quota.</li>
							<li><strong>500+:</strong> Server Error – OpenAI or network issue; try again later.</li>
						</ul>
						<span class="text-gray-500">Use status codes to quickly identify and resolve issues with API connectivity or configuration.</span>
					</li>
					<li>
						<strong>Time Taken (seconds):</strong> How long the API call took to complete. Longer times may indicate network issues or high server load.
					</li>
					<li>
						<strong>Tokens Used (Billing):</strong> Number of tokens consumed by the request. Token usage affects your OpenAI billing; monitor this to optimize costs.
					</li>
					<li>
						<strong>Action:</strong> Shows what the API call was for (e.g., content generation, product suggestions). Helps you understand plugin activity and usage patterns.
					</li>
					<li>
						<strong>Prompt & Result:</strong> Displays the prompt sent to OpenAI and the resulting output (truncated if very long). Useful for auditing and improving prompt quality.
					</li>
					<li>
						<strong>Clear Logs:</strong> Option to delete logs older than a specified number of days or clear all logs. Helps maintain performance and privacy.
					</li>
				</ul>

				<div class="bg-gray-50 border-l-4 border-gray-400 p-4 rounded text-gray-800">
					<strong>Tips for Using Logs:</strong>
					<ul class="list-disc pl-5 mt-2">
						<li>Regularly review logs to monitor API usage, spot errors, and optimize your settings for cost and performance.</li>
						<li>Use status codes and error messages to troubleshoot failed requests and ensure your API key and prompts are correct.</li>
						<li>Analyze token usage to avoid unexpected billing charges and adjust your content limits or model selection as needed.</li>
						<li>Clear old logs to keep your database lean and protect sensitive information.</li>
					</ul>
				</div>
			</div>
		<?php endif; ?>
	</div>

	<?php
}
