<?php
/**
 * Admin page: AI Description Generator.
 *
 * This file contains the markup and functions for rendering
 * the AI Description Generator admin panel in the
 * Magecomp AI Description Generator for WooCommerce plugin.
 *
 * @package Magecomp AI Description Generator for WooCommerce
 * @since 1.0.0
 */

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

/**
 * Render the AI Description Generator admin UI.
 *
 * This function outputs the complete HTML structure for the
 * AI Description Generator admin panel, including:
 * 1. Settings toggles (enable AI for products and taxonomies)
 * 2. Content type and item selectors
 * 3. Feedback and content limit areas
 * 4. Individual and bulk generation tabs
 * 5. Loading spinners, logs, and action buttons
 *
 * @since 1.0.0
 *
 * @return void Outputs the admin page HTML directly.
 */
function descgpt_render_description_generation_settings() {

	// Restrict access.
	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' )
		);
	}

	?>
<div class="descgpt-admin-wrap descgpt-desc-wrapper">
	<div class="max-w-7xl rounded-xl mb-8 mx-auto bg-white p-8 border border-gray-200 overflow-hidden">
		<!--===== Header with Icon, Title, Subtitle, and Action Button =====-->
		<div class="flex items-center justify-between">
			<div class="flex items-center space-x-4">
				<div class="p-3 bg-blue-100 from-blue-100 to-blue-200 rounded-xl shadow-sm">
					<!--===== Gear Icon (Settings / AI) =====-->
					<svg class="w-10 h-10  text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
					</svg>
				</div>
				<div>
					<h1 class="text-3xl font-bold text-gray-900"><?php esc_html_e( 'AI Description Generator', 'magecomp-ai-description-generator-for-woocommerce' ); ?></h1>
					<p class="text-sm text-gray-500 mt-1"><?php esc_html_e( 'Automatically generate product descriptions using your selected AI provider.', 'magecomp-ai-description-generator-for-woocommerce' ); ?></p>
				</div>
			</div>
		</div>
	</div>

	<div class="max-w-7xl mx-auto bg-white rounded-xl p-8 border border-gray-200 overflow-hidden">
		<!--===== Toast Notification =====-->
		<div id="descgpt-toast" class="fixed bottom-4 right-4 z-50 max-w-sm p-4 rounded-lg shadow-lg text-white hidden transition-all duration-300">
			<span id="descgpt-toast-message"></span>
		</div>

		<div class="grid grid-cols-3 gap-6">
			<!--===== Settings Card =====-->
			<div class="col-span-1 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
				<h2 id="descgpt-description-settings-header" class="text-xl border-b border-gray-200 pb-2 font-semibold mb-5 text-gray-700 flex items-center gap-2">
					Settings
					
				</h2>

				<!--===== Enable Toggles =====-->
				<div class="space-y-4">
					<!--===== Enable AI for Products =====-->
					<label class="flex items-center justify-between">
						<div class="flex items-center space-x-2">
							<input type="checkbox" id="descgpt-enable-products"
								class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" checked>
							<span class="text-gray-700"><?php esc_html_e( 'Enable AI for Products', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
						</div>

						<i data-tooltip-target="tooltip-products" class="fas fa-info-circle " aria-label="<?php esc_html_e( 'Products AI toggle info', 'magecomp-ai-description-generator-for-woocommerce' ); ?>"></i>

						<div id="tooltip-products" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
							<?php esc_html_e( 'Toggle to enable/disable AI generation for products.', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<div class="tooltip-arrow" data-popper-arrow></div>
						</div>
					</label>

					<!--===== Enable AI for Taxonomies =====-->
					<label class="flex items-center justify-between">
						<div class="flex items-center space-x-2">
							<input type="checkbox" id="descgpt-enable-taxonomies"
								class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500" checked>
							<span class="text-gray-700"><?php esc_html_e( 'Enable AI for Taxonomies', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
						</div>

						<i data-tooltip-target="tooltip-taxonomies" class="fas fa-info-circle " aria-label="<?php esc_attr_e( 'Taxonomies AI toggle info', 'magecomp-ai-description-generator-for-woocommerce' ); ?>"></i>

						<div id="tooltip-taxonomies" role="tooltip"
							class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
							<?php esc_html_e( 'Toggle to enable/disable AI generation for categories, tags, brands.', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<div class="tooltip-arrow" data-popper-arrow></div>
						</div>
					</label>
				</div>

				<!--===== Content Type & Item Select =====-->
				<div class="mt-5 space-y-4">
					<div>
						<label for="descgpt-content-type" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
							<?php esc_html_e( 'Content Type', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<i data-tooltip-target="tooltip-content-type" class="fas fa-info-circle " aria-label="<?php esc_attr_e( 'Content type info', 'magecomp-ai-description-generator-for-woocommerce' ); ?>"></i>
						</label>
						<select id="descgpt-content-type" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 text-sm transition">
							<option value="product"><?php esc_html_e( 'Product', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
							<option value="category"><?php esc_html_e( 'Product Category', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
							<option value="tag"><?php esc_html_e( 'Product Tag', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
							<option value="brand"><?php esc_html_e( 'Product Brand', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
						</select>
						<div id="tooltip-content-type" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
							<?php esc_html_e( 'Select the type of content to generate.', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<div class="tooltip-arrow" data-popper-arrow></div>
						</div>
					</div>

					<div>
						<label for="descgpt-item-select" class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
							<?php esc_html_e( 'Select Item(s)', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<i data-tooltip-target="tooltip-item-select" data-tooltip-placement="right" class="fas fa-info-circle " aria-label="<?php esc_attr_e( 'Select item(s) info', 'magecomp-ai-description-generator-for-woocommerce' ); ?>"></i>
						</label>
						<select id="descgpt-item-select" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 text-sm transition">
							<option value=""><?php esc_html_e( 'Select an item', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
						</select>
						<div id="tooltip-item-select" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
							<?php esc_html_e( 'Select one or more items for generation (multi-select for taxonomies).', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
							<div class="tooltip-arrow" data-popper-arrow></div>
						</div>
					</div>

					<!--===== Feedback Area =====-->
					<div id="descgpt-feedback-area" class="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200 text-sm text-gray-700 space-y-1">
						<p id="descgpt-selection-summary" class="flex items-center gap-1">
							<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
							</svg>
							<span><?php esc_html_e( 'No items selected', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
						</p>
						<p id="last-generated" class="flex items-center gap-1 hidden">
							<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
							</svg>
							<span><?php esc_html_e( 'Last updated', 'magecomp-ai-description-generator-for-woocommerce' ); ?>: <span id="last-generated-timestamp"></span></span>
							<span id="last-generated-loading" class="hidden ml-2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></span>
						</p>
					</div>
				</div>

				<!--===== Content Limit =====-->
				<div class="mt-5">
					<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
						<?php esc_html_e( 'Content Limit', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						<i data-tooltip-target="tooltip-limit" class="fas fa-info-circle " aria-label="<?php esc_attr_e( 'Content limit info', 'magecomp-ai-description-generator-for-woocommerce' ); ?>"></i>
					</label>
					<div class="flex items-center space-x-2">
						<select id="descgpt-limit-type" class="rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 text-sm">
							<option value="words"><?php esc_html_e( 'Words(Recommended)', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
							<option value="tokens"><?php esc_html_e( 'Tokens', 'magecomp-ai-description-generator-for-woocommerce' ); ?></option>
						</select>
						<input type="number" id="descgpt-limit-value" min="50" max="1000" value="100" class="w-24 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 text-sm" />
					</div>
					<p class="text-xs text-gray-500 mt-1"><?php esc_html_e( 'Specify the desired limit for the generated content.', 'magecomp-ai-description-generator-for-woocommerce' ); ?></p>
					<div id="tooltip-limit" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
						<?php esc_html_e( 'Choose limit type and value for content generation.', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						<div class="tooltip-arrow" data-popper-arrow></div>
					</div>
				</div>
			</div>

			<!--===== Content Card =====-->
			<div class="col-span-2 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
				<!--===== Tabs =====-->
				<div class="flex space-x-2 mb-5 border-b border-gray-200">
					<button id="descgpt-tab-individual" class="descgpt-tab text-xl pb-2 font-semibold text-blue-600 border-b-4 border-blue-600 transition-colors">
						<?php esc_html_e( 'Individual', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
					</button>
					<button id="descgpt-tab-bulk" class="descgpt-tab text-xl pb-2 px-1 font-semibold text-gray-500 hover:text-gray-700 transition-colors">
						<?php esc_html_e( 'Bulk', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
					</button>
				</div>

				<!--===== Individual Generation Tab =====-->
				<div id="descgpt-individual-panel">
					<h3 class="text-lg font-semibold text-gray-700 mb-3"><?php esc_html_e( 'Individual Generated Content', 'magecomp-ai-description-generator-for-woocommerce' ); ?></h3>

					<div id="generatedAccordion" data-accordion="collapse" class="space-y-2">
						<div>
							<h3 id="accordion-short-desc-heading" class="bg-gray-100 rounded-lg shadow p-3 cursor-pointer">
								<button type="button" class="flex items-center justify-between w-full font-medium text-gray-700" data-accordion-target="#accordion-short-desc-body" aria-expanded="false" aria-controls="accordion-short-desc-body">
									<span><?php esc_html_e( 'Short Description', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
									<svg class="w-4 h-4 transform transition-transform duration-200" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
									</svg>
								</button>
							</h3>
							<div id="accordion-short-desc-body" class="hidden" aria-labelledby="accordion-short-desc-heading">
								<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg">
									<textarea id="short-desc-panel" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" rows="4"></textarea>
								</div>
							</div>
						</div>

						<div>
							<h3 id="accordion-full-desc-heading" class="bg-gray-100 rounded-lg shadow p-3 cursor-pointer">
								<button type="button" class="flex items-center justify-between w-full font-medium text-gray-700" data-accordion-target="#accordion-full-desc-body" aria-expanded="false" aria-controls="accordion-full-desc-body">
									<span><?php esc_html_e( 'Full Description', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
									<svg class="w-4 h-4 transform transition-transform duration-200" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
									</svg>
								</button>
							</h3>
							<div id="accordion-full-desc-body" class="hidden" aria-labelledby="accordion-full-desc-heading">
								<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg">
									<textarea id="full-desc-panel" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" rows="6"></textarea>
								</div>
							</div>
						</div>

						<div>
							<h3 id="accordion-category-desc-heading" class="bg-gray-100 rounded-lg shadow p-3 cursor-pointer">
								<button type="button" class="flex items-center justify-between w-full font-medium text-gray-700" data-accordion-target="#accordion-category-desc-body" aria-expanded="false" aria-controls="accordion-category-desc-body">
									<span><?php esc_html_e( 'Category Description', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
									<svg class="w-4 h-4 transform transition-transform duration-200" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
									</svg>
								</button>
							</h3>
							<div id="accordion-category-desc-body" class="hidden" aria-labelledby="accordion-category-desc-heading">
								<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg">
									<textarea id="category-desc-panel" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" rows="4"></textarea>
								</div>
							</div>
						</div>

						<div>
							<h3 id="accordion-tag-descs-heading" class="bg-gray-100 rounded-lg shadow p-3 cursor-pointer">
								<button type="button" class="flex items-center justify-between w-full font-medium text-gray-700" data-accordion-target="#accordion-tag-descs-body" aria-expanded="false" aria-controls="accordion-tag-descs-body">
									<span><?php esc_html_e( 'Tag Descriptions', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
									<svg class="w-4 h-4 transform transition-transform duration-200" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
									</svg>
								</button>
							</h3>
							<div id="accordion-tag-descs-body" class="hidden" aria-labelledby="accordion-tag-descs-heading">
								<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg">
									<textarea id="tag-descs-panel" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" rows="4"></textarea>
								</div>
							</div>
						</div>

						<div>
							<h3 id="accordion-brand-desc-heading" class="bg-gray-100 rounded-lg shadow p-3 cursor-pointer">
								<button type="button" class="flex items-center justify-between w-full font-medium text-gray-700" data-accordion-target="#accordion-brand-desc-body" aria-expanded="false" aria-controls="accordion-brand-desc-body">
									<span><?php esc_html_e( 'Brand Description', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
									<svg class="w-4 h-4 transform transition-transform duration-200" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
									</svg>
								</button>
							</h3>
							<div id="accordion-brand-desc-body" class="hidden" aria-labelledby="accordion-brand-desc-heading">
								<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg">
									<textarea id="brand-desc-panel" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" rows="4"></textarea>
								</div>
							</div>
						</div>
					</div>

					<div class="mt-4">
						<div id="descgpt-loading-spinner" class="flex items-center justify-center space-x-2 animate__animated animate__pulse animate__infinite hidden">
							<div class="relative">
								<div class="w-8 h-8 border-4 border-blue-200 rounded-full animate-spin"></div>
								<div class="w-8 h-8 border-4 border-t-blue-600 rounded-full animate-spin absolute top-0 left-0"></div>
							</div>
							<span class="text-gray-700 font-semibold"><?php esc_html_e( 'Generating content...', 'magecomp-ai-description-generator-for-woocommerce' ); ?></span>
						</div>
						<p id="content-stats" class="text-sm text-gray-500 mt-2 hidden"><?php esc_html_e( 'Words: 0 | Characters: 0', 'magecomp-ai-description-generator-for-woocommerce' ); ?></p>
						<div id="descgpt-content-warning" class="text-red-600 bg-red-100 p-2 rounded-lg mt-2 hidden"></div>
					</div>

					<div class="flex space-x-3 mt-4">
						<button id="descgpt-generate-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200">
							<?php esc_html_e( 'Generate', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						</button>
						<button id="descgpt-regenerate-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200 hidden">
							<?php esc_html_e( 'Regenerate', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						</button>
						<button id="descgpt-save-btn" class="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200 hidden">
							<?php esc_html_e( 'Save to Item', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						</button>
						<button id="descgpt-cancel-btn"
							class="bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200 hidden">
							<?php esc_html_e( 'Cancel', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						</button>
					</div>
				</div>

				<!--===== Bulk Generation Tab =====-->
				<div id="descgpt-bulk-panel" class="hidden">
					<h3 class="text-lg font-semibold text-gray-700 mb-3"><?php esc_html_e( 'Bulk Generation', 'magecomp-ai-description-generator-for-woocommerce' ); ?></h3>

					<div id="descgpt-bulk-accordion" data-accordion="collapse" class="space-y-2"></div>

					<!-- inside the loop that builds the bulk accordion -->
					<div id="${panelId}-body" class="hidden" aria-labelledby="${panelId}-heading">
						<div class="p-3 border border-t-0 border-gray-200 rounded-b-lg bulk-item-container">
							<textarea class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 bulk-textarea" rows="4">${content}</textarea>
							<!-- stats will be injected here -->
						</div>
					</div>

					<div class="mt-4">
						<div id="descgpt-loading-spinner-bulk" class="flex items-center justify-center space-x-2 animate__animated animate__pulse animate__infinite hidden">
							<div class="relative">
								<div class="w-8 h-8 border-4 border-blue-200 rounded-full animate-spin"></div>
								<div class="w-8 h-8 border-4 border-t-blue-600 rounded-full animate-spin absolute top-0 left-0"></div>
							</div>
						</div>
						<div id="descgpt-bulk-log" class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200 text-sm text-gray-700 hidden max-h-60 overflow-y-auto">
							<p id="descgpt-bulk-status"></p>
							<ul id="descgpt-bulk-list" class="list-disc pl-5"></ul>
						</div>
					</div>

					<div class="flex space-x-3 mt-4">
						<button id="descgpt-generate-bulk-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200"><?php esc_html_e( 'Generate Bulk', 'magecomp-ai-description-generator-for-woocommerce' ); ?></button>
						<button id="descgpt-regenerate-bulk-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200"><?php esc_html_e( 'Regenerate Bulk', 'magecomp-ai-description-generator-for-woocommerce' ); ?></button>
						<button id="descgpt-save-bulk-btn" class="bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200 hidden"><?php esc_html_e( 'Save to Items', 'magecomp-ai-description-generator-for-woocommerce' ); ?></button>
						<button id="descgpt-cancel-bulk-btn"
							class="bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg shadow transition-colors duration-200 hidden">
							<?php esc_html_e( 'Cancel', 'magecomp-ai-description-generator-for-woocommerce' ); ?>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	<?php
}