<?php
/**
 * Autopilot template file for the Postomatic plugin.
 *
 * This file handles the display and management of the Autopilot feature, which allows
 * users to automate content creation and publishing. It checks for product availability,
 * sets up the necessary styles and JavaScript data for the interface.
 *
 * @package Postomatic
 * @subpackage Admin\Templates
 */

// Detect the active e-commerce platform (WooCommerce, Easy Digital Downloads,
// or SureCart) and whether it currently has products, via the shared
// Product_Source_Detector (same source of truth used by main-page.php and by
// the AJAX product endpoint).
$product_source       = Postomatic\Api\Product_Source_Detector::get_active_source();
$has_products         = null !== $product_source && $product_source->has_products();
$active_shop_platform = null !== $product_source ? $product_source->get_platform_key() : '';
?>

<style>
	/* Layout styles for autopilot page */
	.main-content-layout {
		display: flex;
		flex-direction: row;
		gap: 20px;
		align-items: flex-start;
	}

	.form-column {
		flex: 1;
		min-width: 0; /* Prevent flex items from overflowing */
	}

	.info-column {
		width: 300px;
		flex-shrink: 0;
	}

	/* Clock icon styles */
	.clock-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: 5px;
		cursor: help;
		color: #666;
		vertical-align: middle;
	}

	.clock-icon svg {
		width: 14px;
		height: 14px;
	}

	.clock-icon:hover {
		color: #0073aa;
	}

	/* Responsive styles */
	@media (max-width: 1024px) {
		.main-content-layout {
			flex-direction: column;
		}

		.info-column {
			width: 100%;
			margin-top: 20px;
		}
	}

	/* ── Status pills ── */
	.status-pill {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .3px;
		padding: 3px 9px;
		border-radius: 20px;
		flex-shrink: 0;
	}
	.status-pill--active {
		background: #d1fae5;
		color: #065f46;
	}
	.status-pill--paused {
		background: #fef3c7;
		color: #92400e;
	}

	/* ── Card header layout ── */
	.autopilot-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		flex-wrap: wrap;
	}
	.autopilot-header-left {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		min-width: 0;
	}
	.autopilot-freq-label {
		font-size: 12px;
		color: #555;
		font-weight: 500;
	}

	/* ── Low-credit warning banner ── */
	.autopilot-credit-warning {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		background: #fffbeb;
		border: 1px solid #f59e0b;
		border-radius: 6px;
		padding: 8px 12px;
		margin-top: 10px;
		font-size: 12.5px;
		color: #78350f;
		line-height: 1.5;
	}
	.autopilot-credit-warning a {
		color: #b45309;
		text-decoration: underline;
	}
	.autopilot-credit-warning a:hover {
		color: #92400e;
	}

	/* ── Meta row ── */
	.autopilot-meta-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 14px;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}
	.autopilot-meta-item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		color: #666;
		line-height: 1.3;
	}
	.autopilot-meta-item svg {
		opacity: .65;
		flex-shrink: 0;
	}
</style>

<script type="text/javascript">
	window.PostomaticAutoPilotData = {
		nonce: '<?php echo esc_js( wp_create_nonce( 'postomatic_admin_nonce' ) ); ?>',
		planTiers: <?php echo wp_json_encode( \Postomatic\Utils::get_plan_tiers() ); ?>,
		postMaker: '<?php echo esc_html( \Postomatic\Constants::API_POST_MAKER ); ?>',
		addCreditPage: '<?php echo esc_attr( '?' . \Postomatic\Constants::PAGE_ADD_CREDIT ); ?>',
		categories: <?php echo wp_json_encode( get_categories( array( 'hide_empty' => false ) ) ); ?>,
		authors: <?php echo wp_json_encode( \Postomatic\Utils::get_post_authors() ); ?>,
		hasProducts: <?php echo $has_products ? 'true' : 'false'; ?>,
		activeShopPlatform: '<?php echo esc_js( $active_shop_platform ); ?>',
		reactiveUrl: '<?php echo esc_html( \Postomatic\Constants::API_RE_ACTIVE ); ?>',
		autopilotApi: '<?php echo esc_html( \Postomatic\Constants::API_ENDPOINT_URL . '/autopilots' ); ?>',
	};
</script>

<div id="autopilot-app" v-cloak>
	<div class="wrap">
		<!-- Loading Overlay -->
		<div class="loading-overlay" v-show="loading">
			<div class="loading-content">
				<div class="loading-spinner"></div>
			</div>
		</div>


		<h1 class="admin-page-title">AutoPilot Content Generator</h1>

		<!-- Alerts -->
		<div class="alert alert-info fade-in" id="main-alert" role="alert" v-show="showMainAlert">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
				<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
			</svg>
			<div class="alert-content">
				<strong>AutoPilot:</strong> Let our AI generate content for your blog automatically.
				Configure your settings below and let AutoPilot handle the rest.
			</div>
		</div>

		<!-- Credit Alert -->
		<div class="alert alert-warning fade-in" role="alert" v-show="hasInactiveAutopilotsDueToCredits">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
			</svg>
			<div class="alert-content">
				<strong>Attention:</strong> You have one or more autopilots that need credit to be active.
				<a :href="addCreditPageUrl">Add more credits</a> to ensure all your autopilots continue to run.
			</div>
		</div>

		<!-- Success/Error Alert -->
		<div :class="['alert', isErrorMessage ? 'alert-error' : 'alert-success', 'fade-in']" role="alert"
			v-show="showSuccessAlert && !hasValidationErrors">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"
				v-if="!isErrorMessage">
				<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 14-5-5 1.414-1.414L11 13.172l7.586-7.586L20 7l-9 9z"/>
			</svg>
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" v-if="isErrorMessage">
				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
			</svg>
			<div class="alert-content">
				<strong v-if="!isErrorMessage">Success!</strong>
				<strong v-if="isErrorMessage">Error!</strong>
				{{ successMessage }}
			</div>
		</div>

		<!-- Validation Errors Alert -->
		<div class="alert alert-error fade-in" role="alert" v-show="hasValidationErrors">
			<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
			</svg>
			<div class="alert-content">
				<strong>Please correct the following errors:</strong>
				<ul class="validation-errors-list">
					<li v-for="(message, field) in errors" :key="field">
						{{ field === 'budget' ? 'Budget' :
								field === 'keywords' ? 'Keywords' :
										field === 'productName' ? 'Product Name' :
												field === 'category' ? 'Category' :
														field === 'author' ? 'Author' :
																field === 'count' ? 'Number of Posts' :
																		field === 'frequency' ? 'Frequency' :
																				field === 'status' ? 'Status' :
																						field === 'contentGoalType' ? 'Content Goal Type' :
																								field === 'speaker' ? 'Who is speaking' :
																										field === 'language' ? 'Language' :
																												field === 'contentGoalDetails' ? 'Goal Description' : field
						}}: {{ message }}
					</li>
				</ul>
			</div>
		</div>

		<!-- Floating Action Button (shown in task list view) -->
		<div class="floating-action-btn" v-if="currentStep === 4" v-cloak @click="resetForm"
			aria-label="Create new task">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				aria-hidden="true">
				<path d="M12 5v14M5 12h14"></path>
			</svg>
		</div>

		<div v-if="currentStep!==1" class="no-tasks-message">
			<div v-if="allAutopilots.length === 0" class="center-content">
				<button type="button" @click="resetForm" class="button button-primary button-large add-new-btn">
					<span class="plus-icon">+</span> Add new autopilot
				</button>
			</div>
			<div v-else class="active-tasks-list">
				<h3>AutoPilot Tasks</h3>

				<div v-for="(task, index) in allAutopilots" :key="index"
					class="active-autopilot-item"
					:class="{'inactive-autopilot': !task.isActive}">

					<!-- ── Card header: type badge · frequency · status pill ── -->
					<div class="autopilot-item-header">
						<span class="autopilot-header-left">
							<span class="content-goal-badge" :class="task.contentGoal ? task.contentGoal.typeKey : ''">
								<span v-if="task.contentGoal && task.contentGoal.type === 'product'">Product</span>
								<span v-else-if="task.contentGoal && task.contentGoal.typeTitle">{{ task.contentGoal.typeTitle }}</span>
								<span v-else>SEO</span>
							</span>
							<span class="autopilot-freq-label">{{ getFrequencyLabel(task.frequency) }}</span>
						</span>
						<span v-if="task.isActive" class="status-pill status-pill--active">
							<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true"><circle cx="4" cy="4" r="4"/></svg>
							Active
						</span>
						<span v-else class="status-pill status-pill--paused">
							<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true"><circle cx="4" cy="4" r="4"/></svg>
							Low Credits
						</span>
					</div>

					<!-- ── Low-credit warning banner (task 5) ── -->
					<div v-if="!task.isActive" class="autopilot-credit-warning" role="alert">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
							fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
							stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;">
							<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
							<line x1="12" y1="9" x2="12" y2="13"/>
							<line x1="12" y1="17" x2="12.01" y2="17"/>
						</svg>
						<span>
							Needs <strong>{{ task.totalCreditsNeeded }}</strong> credits per run — you have <strong>{{ availableCredits }}</strong>.
							<a :href="addCreditPageUrl" style="font-weight:600;white-space:nowrap;">Buy credits to resume →</a>
						</span>
					</div>

					<!-- ── Meta row: budget · posts · author · next run (task 6) ── -->
					<div class="autopilot-meta-row">
						<!-- Credits info -->
						<span class="autopilot-meta-item">
							<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round" aria-hidden="true">
								<circle cx="12" cy="12" r="10"/>
								<line x1="12" y1="8" x2="12" y2="12"/>
								<line x1="12" y1="16" x2="12.01" y2="16"/>
							</svg>
							{{ task.budgetPerPost }} cr/post &times; {{ task.count }} post{{ task.count !== 1 ? 's' : '' }}
						</span>
						<!-- Author -->
						<span class="autopilot-meta-item" v-if="task.wordpress_author_name">
							<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round" aria-hidden="true">
								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
								<circle cx="12" cy="7" r="4"/>
							</svg>
							{{ task.wordpress_author_name }}
						</span>
						<!-- Next run -->
						<span class="autopilot-meta-item">
							<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round" aria-hidden="true">
								<circle cx="12" cy="12" r="10"/>
								<polyline points="12 6 12 12 16 14"/>
							</svg>
							Next: {{ task.nextRun }}
						</span>
					</div>

					<!-- ── Action buttons ── -->
					<div class="autopilot-item-actions">
						<button class="action-btn view-btn" @click="viewTaskDetails(task)"
							aria-label="View task details">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round" aria-hidden="true">
								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
								<circle cx="12" cy="12" r="3"/>
							</svg>
							Details
						</button>
						<button class="action-btn delete-btn" @click="confirmDeleteTask(index)"
							aria-label="Delete task">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round" aria-hidden="true">
								<polyline points="3 6 5 6 21 6"/>
								<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
								<path d="M10 11v6M14 11v6"/>
								<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
							</svg>
							Remove
						</button>
					</div>

				</div><!-- /v-for -->

				<div class="add-new-task-button">
					<button type="button" @click="resetForm" class="button button-primary button-medium">
						<span class="plus-icon">+</span> Add another autopilot
					</button>
				</div>
			</div>
		</div>

		<!-- Main Content Wrapper -->
		<div class="main-content-wrapper">

			<!-- Main Content Area -->
			<div class="main-content-layout">
				<!-- Content Goal Tabs -->
				<div class="form-column" v-if="currentStep < 4" v-cloak>
					<div class="plugin-container">
						<!-- Add Autopilot Button -->
						<!--                        <div class="add-autopilot-button" style="margin-bottom: 20px;">-->
						<!--                            <button type="button" @click="resetForm" class="button button-primary button-medium">-->
						<!--                                <span class="plus-icon">+</span> Add autopilot-->
						<!--                            </button>-->
						<!--                        </div>-->
						<!-- Content Goal Tabs -->
						<div class="content-goal-tabs">
							<button
									class="tab-button"
									:class="{ 'active': form.goal === 'product' }"
									@click="form.goal = 'product'; currentStep = 1"
									:disabled="isAnalyzing">
								Boost Product Sales
							</button>
							<button
									class="tab-button"
									:class="{ 'active': form.goal === 'traffic' }"
									@click="form.goal = 'traffic'; seoWizardStep = 1; currentStep = 1"
									:disabled="isAnalyzing">
								SEO-Focused Content
							</button>
						</div>
						<p class="field-description" style="margin-bottom: 1.5rem;">
							<span v-if="form.goal === 'product'">Create content focused on promoting a product or service.</span>
							<span v-else-if="form.goal === 'traffic'">Create content focused on generating organic traffic via informational content.</span>
							<span v-else>Please select a content goal type above to get started.</span>
							<span v-if="form.goal !== ''"> You can cancel anytime.</span>
						</p>

						<!-- Message when no tab is selected -->
						<div v-if="form.goal === ''" class="alert alert-info fade-in" role="alert">
							<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
								<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
							</svg>
							<div class="alert-content">
								<strong>Select a Tab:</strong> Please choose either "Boost Product Sales" or
								"SEO-Focused Content" to continue.
							</div>
						</div>

						<!-- Product Tab Wizard -->
						<div v-if="form.goal === 'product'">
							<!-- Wizard Progress -->
							<div class="wizard-progress">
								<div class="wizard-step"
									:class="{ 'active': productWizardStep >= 1, 'completed': productWizardStep > 1 }">
									<div class="step-number">1</div>
									<div class="step-label">Product Selection</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': productWizardStep >= 2, 'completed': productWizardStep > 2 }">
									<div class="step-number">2</div>
									<div class="step-label">Content Settings</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': productWizardStep >= 3, 'completed': productWizardStep > 3 }">
									<div class="step-number">3</div>
									<div class="step-label">Budget</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': productWizardStep >= 4, 'completed': productWizardStep > 4 }">
									<div class="step-number">4</div>
									<div class="step-label">Schedule</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': productWizardStep >= 5, 'completed': productWizardStep > 5 }">
									<div class="step-number">5</div>
									<div class="step-label">Review</div>
								</div>
							</div>

							<!-- Step 1: Product Selection -->
							<div v-if="productWizardStep === 1" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Product Selection</h2>

								<!-- Product-Focused Content Fields -->
								<div v-if="!hasProducts" class="alert alert-warning fade-in" role="alert">
									<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
										aria-hidden="true">
										<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
									</svg>
									<div class="alert-content">
										<strong>No Products Found:</strong> You need to add at least one product to your
										website before you can use the Product-Focused Content option.
									</div>
								</div>
								<div v-if="hasProducts" class="seo-content-section">
									<!-- Content Goal Type field for product tab -->
									<div class="seo-budget-row" style="margin-bottom: 20px;">
										<div class="seo-budget-col seo-budget-smallbox">
											<label for="autopilot-content-goal-type-product" class="seo-budget-label">Content
												Goal Type <span class="required">*</span></label>
											<select id="autopilot-content-goal-type-product"
													v-model="form.contentGoalType"
													class="seo-budget-input"
													aria-describedby="content-goal-type-product-description">
												<option value="">Select a content goal type</option>
												<option v-for="type in contentGoalTypes.filter(t => t.type === 'product')"
														:key="type.id" :value="type.id">
													{{ type.title }} – {{ type.description }}
												</option>
											</select>
											<p id="content-goal-type-product-description" class="field-description">
												Select the primary goal for your content. This field is required.</p>
											<div v-if="errors.contentGoalType" class="seo-error-text">
												{{ humanizeVariableName('contentGoalType') }}: {{ errors.contentGoalType
												}}
											</div>
										</div>
									</div>

									<div class="seo-budget-row">
										<div class="seo-budget-col seo-budget-smallbox">
											<label for="autopilot-product-search" class="seo-budget-label">Search
												Products <span class="required">*</span></label>

											<div v-if="!form.contentGoalType" class="alert alert-info fade-in"
												role="alert">
												<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
													aria-hidden="true">
													<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>
												</svg>
												<div class="alert-content">
													<strong>Select a Content Goal Type:</strong> Please select a content
													goal type above to enable product selection.
												</div>
											</div>

											<div v-if="form.contentGoalType" class="product-search-container">
												<input
														type="text"
														id="autopilot-product-search"
														v-model="productSearch"
														class="seo-budget-input"
														placeholder="Search products by name..."
														@keyup.enter="searchProducts"
												>
												<button type="button" @click="searchProducts"
														class="product-search-btn">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
														viewBox="0 0 24 24" fill="none" stroke="currentColor"
														stroke-width="2" stroke-linecap="round"
														stroke-linejoin="round">
														<circle cx="11" cy="11" r="8"></circle>
														<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
													</svg>
												</button>
												<button type="button" @click="resetSearch" class="product-reset-btn"
														title="Reset search" v-show="productSearch">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
														viewBox="0 0 24 24" fill="none" stroke="currentColor"
														stroke-width="2" stroke-linecap="round"
														stroke-linejoin="round">
														<line x1="18" y1="6" x2="6" y2="18"></line>
														<line x1="6" y1="6" x2="18" y2="18"></line>
													</svg>
												</button>
											</div>

											<div v-if="form.contentGoalType && isLoadingProducts"
												class="loading-indicator">
												<span>Loading products...</span>
											</div>

											<div v-else-if="form.contentGoalType" class="product-grid">
												<div
														v-for="product in products"
														:key="product.id"
														class="product-item"
														:class="{
													'selected': isProductComparisonType ? (form.selectedProducts && form.selectedProducts.includes(product.id)) : form.selectedProduct === product.id 
												}"
														@click="selectProduct(product.id)"
												>
													<div class="product-image">
														<img v-if="product.image" :src="product.image"
															:alt="product.name">
														<div v-else class="no-image">No Image</div>
													</div>
													<div class="product-info">
														<div class="product-name">{{ product.name }}</div>
														<div class="product-price" v-html="product.price"></div>
													</div>
												</div>

												<div v-if="products.length === 0" class="no-products">
													No products found. Try a different search term.
												</div>
											</div>

											<!-- Pagination controls -->
											<div v-if="form.contentGoalType && productPagination.total_pages > 1"
												class="pagination-controls">
												<button
														type="button"
														@click="changePage(productPagination.current_page - 1)"
														:disabled="productPagination.current_page === 1"
														class="pagination-btn"
												>
													Previous
												</button>
												<span class="pagination-info">
												Page {{ productPagination.current_page }} of {{ productPagination.total_pages }}
											</span>
												<button
														type="button"
														@click="changePage(productPagination.current_page + 1)"
														:disabled="productPagination.current_page === productPagination.total_pages"
														class="pagination-btn"
												>
													Next
												</button>
											</div>

											<p v-if="form.contentGoalType" class="field-description"
												style="margin-bottom:0;">
												<span v-if="isProductComparisonType">Select up to 3 products to compare. You've selected {{ form.selectedProducts ? form.selectedProducts.length : 0 }} of 3 products.</span>
												<span v-else>Select the product you want to focus on selling.</span>
											</p>
											<div v-if="errors.productName" class="seo-error-text">{{ errors.productName
												}}
											</div>
										</div>
									</div>

									<!-- Additional product details section -->
									<div v-if="form.contentGoalType && !isProductComparisonType && form.selectedProduct && getSelectedProduct"
										class="product-details">
										<h4>Selected Product Details</h4>
										<div class="product-detail-container">
											<div class="product-detail-image">
												<img v-if="getSelectedProduct.image" :src="getSelectedProduct.image"
													:alt="getSelectedProduct.name">
												<div v-else class="no-image">No Image</div>
											</div>
											<div class="product-detail-info">
												<div class="product-detail-item">
													<strong>Name:</strong> {{ getSelectedProduct.name }}
												</div>
												<div class="product-detail-item" v-if="getSelectedProduct.price">
													<strong>Price:</strong> <span
															v-html="getSelectedProduct.price"></span>
												</div>
												<div class="product-detail-item" v-if="getSelectedProduct.description">
													<strong>Description:</strong> {{ getSelectedProduct.description }}
												</div>
												<div class="product-detail-item"
													v-if="getSelectedProduct['product-meta'] && getSelectedProduct['product-meta'].permalink">
													<strong>URL:</strong> <a
															:href="getSelectedProduct['product-meta'].permalink"
															target="_blank">View Product</a>
												</div>
											</div>
										</div>
									</div>

									<!-- Multiple products details section -->
									<div v-if="isProductComparisonType && form.selectedProducts && form.selectedProducts.length > 0"
										class="product-details">
										<h4>Selected Products for Comparison</h4>
										<div v-for="productId in form.selectedProducts" :key="productId"
											class="product-detail-container"
											style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee;">
											<div class="product-detail-image">
												<img v-if="getProductById(productId)?.image"
													:src="getProductById(productId).image"
													:alt="getProductById(productId).name">
												<div v-else class="no-image">No Image</div>
											</div>
											<div class="product-detail-info">
												<div class="product-detail-item">
													<strong>Name:</strong> {{ getProductById(productId).name }}
												</div>
												<div class="product-detail-item" v-if="getProductById(productId).price">
													<strong>Price:</strong> <span
															v-html="getProductById(productId).price"></span>
												</div>
												<button class="button button-small"
														@click="removeProductFromComparison(productId)"
														style="margin-top: 10px;">
													Remove from comparison
												</button>
											</div>
										</div>
									</div>

									<div class="form-actions">
										<button type="button" @click="nextProductStep"
												class="button button-primary button-large">
											Next Step
										</button>
									</div>
								</div>
							</div>

							<!-- Step 2: Content Settings -->
							<div v-if="productWizardStep === 2" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Content Settings</h2>

								<div v-if="hasProducts" class="seo-content-section">
									<!-- Content Goal Details field for product tab -->
									<div class="seo-budget-row">
										<div class="seo-budget-col">
											<label for="autopilot-content-goal-details-product"
													class="seo-budget-label">Goal Description<span class="required-icon">*</span></label>
											<textarea id="autopilot-content-goal-details-product"
														v-model="form.contentGoalDetails"
														class="seo-budget-input"
														placeholder="Describe your specific content goals and intentions"
														rows="2"
														aria-describedby="content-goal-details-product-description"></textarea>
											<p id="content-goal-details-product-description" class="field-description">
												You can provide additional details about your content goals in any
												language you're comfortable with to help generate more targeted content.

											</p>
											<div v-if="errors.contentGoalDetails" class="seo-error-text">
												{{ errors.contentGoalDetails }}
											</div>
										</div>
									</div>

									<!-- AI Feature Image checkbox for product tab -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="ai_feature_image">AI Feature
													Image</label>
												<div
														class="tooltip-icon"
														data-tooltip="Enable AI to create a feature image for your post. This will add 6 credits to the minimum credit requirement."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="checkbox-group">
												<label class="checkbox-item">
													<input
															type="checkbox"
															id="ai_feature_image"
															name="ai_feature_image"
															v-model="form.aiFeatureImage"
															@change="updateMinimumCredit"
													> Create AI feature image (+6 credits)
												</label>
											</div>
										</div>
									</div>

									<!-- Allow Comments? dropdown for product tab -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="comment_status">Allow Comments?</label>
												<div
														class="tooltip-icon"
														data-tooltip="Choose Open to allow comments on this post, or Closed to disable them."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="radio-group flex items-center">
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_open"
															name="comment_status"
															v-model="form.commentStatus"
															value="open"
													> Open
												</label>
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_closed"
															name="comment_status"
															v-model="form.commentStatus"
															value="closed"
													> Closed
												</label>
											</div>
										</div>
									</div>

									<!-- language--->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_length">Language<span
															class="required-icon">*</span></label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the language for your generated content"
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select id="language_select_seo" name="language_select_seo"
														v-model="form.language"
														data-dropdown-css-class="language-select-dropdown"
														class="wp-select2">
													<option value="">Select a language</option>
													<option v-for="language in contentData.languages"
															:key="language.code" :value="language.code">
														{{ language.name }}
													</option>
												</select>
												<div v-if="errors.language" class="seo-error-text">{{ errors.language
													}}
												</div>
											</div>
										</div>
									</div>

									<!-- category--->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="category_select">Category</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select a category for your post or let AI choose the best one automatically"
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select id="category_select_seo" name="category_select_seo"
														v-model="form.category"
														data-dropdown-css-class="category-select-dropdown"
														class="wp-select2">
													<option value="">Select a category</option>
													<option v-for="category in categories" :key="category.term_id"
															:value="category.term_id">
														{{ category.name }}
													</option>
												</select>
											</div>
										</div>
									</div>

									<!-- Who is speaking -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="speaker_select">Who is speaking? <span
															class="required-icon">*</span></label>
												<div class="tooltip-icon"
													data-tooltip="Pick who's telling the story or sharing the message">
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="speaker_select_seo"
														name="speaker_select_seo"
														v-model="form.speaker"
														class="wp-select2"
														data-dropdown-css-class="speaker-select-dropdown"
												>
													<option value="">Select a speaker</option>
													<option value="neutral">General Voice – Neutral tone without a
														specific speaker
													</option>
													<option value="personal">I - Personal experience</option>
													<option value="team">We - From the team or company</option>
													<option value="direct">You - Speaking directly to the reader
													</option>
													<option value="third_person">They/He/She - About someone else
													</option>
													<option value="brand">Brand voice - Official brand tone</option>
													<option value="narrative">Story or Dialogue - Narrative style
													</option>
												</select>
											</div>
											<div v-if="errors.speaker" class="seo-error-text">{{ errors.speaker }}</div>
										</div>
									</div>

									<!-- Content Tone -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_tone">Content Tone</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the tone for your content to match your audience's preferences."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="content_tone"
														name="content_tone"
														v-model="form.contentTone"
														class="wp-select2"
														data-dropdown-css-class="content-tone-dropdown"
												>
													<option
															v-for="tone in contentTones"
															:key="tone.value"
															:value="tone.value"
															:disabled="!tone.available"
													>{{ tone.label }}
													</option>
												</select>
											</div>
										</div>
									</div>

									<!-- Author Options -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="writer_product">Who's Writing?<span
															class="required-icon">*</span></label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the writer you want to add to your post as a writer."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="writer_product"
														v-model="form.writer"
														class="wp-select2"
														data-dropdown-css-class="content-tone-dropdown"
												>
													<option
															v-for="user in writers"
															:key="user.ID"
															:value="user.ID"
													>{{ user.display_name }}
													</option>
												</select>
											</div>
											<div v-if="errors.writer" class="seo-error-text">{{ errors.writer }}</div>
										</div>
									</div>

									<!-- Keywords and Analysis Box for product tab -->
									<div class="seo-keywords-row" style="margin-top: 22px;">
										<div class="seo-keywords-col">
											<label for="autopilot-keywords-product" class="seo-keywords-label">Keywords
												<span class="required">*</span></label>
											<textarea id="autopilot-keywords-product" v-model="form.keywords"
														class="seo-keywords-input"
														placeholder="Enter keywords separated by commas"
														rows="1"></textarea>
										</div>
										<div style="display: flex; align-items: flex-end;">
											<button type="button" @click="analyzeContent" class="seo-analyze-btn"
													:disabled="isAnalyzing">
												<span v-if="!isAnalyzing">Analyze Blog</span>
												<span v-else>Analyzing...</span>
											</button>
										</div>
									</div>
									<div class="seo-keywords-desc">
										<b>You can analyze your blog to get keywords and ideas about your blog.</b>
										<br>
										The content body will be about the keyword that you are entering here or click
										<b>'Analyze Blog'</b> to get AI suggestions.
									</div>
									<div v-if="errors.keywords" class="seo-error-text">{{ errors.keywords }}</div>
									<!-- Keyword suggestions as chips -->
									<div v-if="analyzedKeywords.length > 0" class="seo-keyword-chips-wrap">
										<div class="seo-keyword-chips-label">Suggested keywords:</div>
										<div class="seo-keyword-chips">
											<span v-for="(keyword, index) in analyzedKeywords" :key="index"
													class="seo-keyword-chip" @click="addKeyword(keyword)">
												{{ keyword }}
											</span>
										</div>
									</div>
									<div v-else-if="analysisCompleted" class="seo-keyword-chips-wrap">
										<div class="seo-keyword-chips-label">No keywords found:</div>
										<div class="seo-error-text">We cannot offer any keywords for your content.</div>
									</div>

									<div class="form-actions">
										<button type="button" @click="prevProductStep"
												class="button button-secondary button-large">
											Previous
										</button>
										<button type="button" @click="nextProductStep"
												class="button button-primary button-large">
											Next Step
										</button>
									</div>
								</div>
							</div>

							<!-- Step 3: Budget Selection -->
							<div v-if="productWizardStep === 3" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Budget Settings</h2>

								<div class="seo-content-section">
									<div class="seo-budget-row">
										<div class="seo-budget-col seo-budget-smallbox">
											<label for="autopilot-budget-product" class="seo-budget-label">Maximum
												Credits per Post
											</label>
											<div style="display: flex; align-items: center; gap: 15px;">
												<input type="number" id="autopilot-budget-product" v-model.number="form.budget"
														class="seo-budget-input" style="width: 17%;"
														:min="minimumBudget" :max="availableCredits"
														:disabled="isLoadingCredits">
												<div class="seo-budget-slider-wrap" style="flex: 1; margin-top: 0;">
													<input type="range" v-model.number="form.budget" :min="minimumBudget"
															:max="availableCredits"
															class="seo-budget-slider" :disabled="isLoadingCredits">
													<div class="seo-budget-slider-labels">
														<span>{{ minimumBudget }}</span>
														<span>{{ availableCredits }}</span>
													</div>
												</div>
											</div>
											<span class="seo-available-credits">
												Available Credit: <span
														v-if="!isLoadingCredits">{{ availableCredits }}</span><span
														v-else>Loading...</span>
											</span>
											<p class="field-description">
												Set the maximum number of credits to use for each post. Higher budgets
												can result in more comprehensive content.
											</p>
											<div v-if="errors.budget" class="seo-error-text">{{ errors.budget }}</div>
										</div>
									</div>

									<div class="form-actions">
										<button type="button" @click="prevProductStep"
												class="button button-secondary button-large">
											Previous
										</button>
										<button type="button" @click="nextProductStep"
												class="button button-primary button-large">
											Next Step
										</button>
									</div>
								</div>
							</div>

							<!-- Step 4: Product Schedule -->
							<div v-if="productWizardStep === 4" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Schedule Settings</h2>

								<div class="form-group">
									<label for="autopilot-frequency-product">Publishing Frequency</label>
									<select id="autopilot-frequency-product" v-model="form.frequency"
											class="seo-budget-input">
										<option value="daily">Daily</option>
										<option value="weekly">Weekly</option>
										<option value="biweekly">Bi-weekly</option>
										<option value="monthly">Monthly</option>
									</select>
									<p class="field-description">How often should AutoPilot generate and publish
										content?</p>
								</div>

								<div class="form-group">
									<label for="autopilot-count-product">Number of Posts</label>
									<input type="number" id="autopilot-count-product" v-model="form.count"
											class="form-control"
											min="1" max="10">
									<p class="field-description">
										How many posts should be generated per cycle? Each post requires
										{{ minimumBudget }} credits.
										<span v-if="availableCredits > 0">
											You have {{ availableCredits }} credits available, which allows for a maximum of {{ maxPossiblePosts }} posts.
										</span>
									</p>
									<div v-if="errors.count" class="error-text">{{ errors.count }}</div>
								</div>

								<div class="form-group">
									<label for="autopilot-status-product">Post Status</label>
									<select id="autopilot-status-product" v-model="form.status"
											class="seo-budget-input">
										<option value="draft">Draft</option>
										<option value="publish">Publish</option>
									</select>
									<p class="field-description">Should posts be published immediately or saved as
										drafts?</p>
								</div>

								<div class="form-actions">
									<button type="button" @click="prevProductStep"
											class="button button-secondary button-large">
										Previous
									</button>
									<button type="button" @click="nextProductStep"
											class="button button-primary button-large">
										Next Step
									</button>
								</div>
							</div>

							<!-- Step 5: Product Review -->
							<div v-if="productWizardStep === 5" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Review Your AutoPilot Task</h2>

								<div class="review-summary">
									<div class="review-item">
										<div class="review-label">Content Goal:</div>
										<div class="review-value">Boost Product Sales</div>
									</div>
									<div class="review-item" v-if="form.contentGoalType">
										<div class="review-label">Content Goal Type:</div>
										<div class="review-value">
											{{ getContentGoalTypeTitle(form.contentGoalType) }}
										</div>
									</div>
									<div class="review-item" v-if="hasProducts">
										<div class="review-label">
											<span v-if="isProductComparisonType">Selected Products:</span>
											<span v-else>Selected Product:</span>
										</div>
										<div class="review-value">
											<div v-if="isProductComparisonType && form.selectedProducts && form.selectedProducts.length > 0">
												<div v-for="(productId, index) in form.selectedProducts"
													:key="productId" class="product-detail"
													style="margin-bottom: 10px;">
													<strong>{{ index + 1 }}.
														{{ getProductById(productId)?.name || 'Unknown Product'
														}}</strong>
													<div v-if="getProductById(productId)?.price" class="product-detail">
														<small>Price: <span
																	v-html="getProductById(productId)?.price"></span></small>
													</div>
												</div>
											</div>
											<div v-else-if="getSelectedProduct">
												<strong>{{ getSelectedProduct.name }}</strong>
												<div v-if="getSelectedProduct.price" class="product-detail">
													<small>Price: <span
																v-html="getSelectedProduct.price"></span></small>
												</div>
											</div>
											<div v-else>{{ form.productName }}</div>
										</div>
									</div>
									<div class="review-item" v-if="form.contentGoalDetails">
										<div class="review-label">Goal Description:</div>
										<div class="review-value">{{ form.contentGoalDetails }}</div>
									</div>
									<div class="review-item" v-if="form.keywords">
										<div class="review-label">Keywords:</div>
										<div class="review-value">{{ form.keywords }}</div>
									</div>
									<div class="review-item" v-if="form.category">
										<div class="review-label">Category:</div>
										<div class="review-value">{{ getCategoryName(form.category) }}</div>
									</div>
									<div class="review-item" v-if="form.language">
										<div class="review-label">Language:</div>
										<div class="review-value">
											{{ form.language.charAt(0).toUpperCase() + form.language.slice(1).replace('_', ' ')
											}}
										</div>
									</div>
									<div class="review-item" v-if="form.speaker">
										<div class="review-label">Who is speaking:</div>
										<div class="review-value">
											<span v-if="form.speaker === 'neutral'">General Voice – Neutral tone</span>
											<span v-else-if="form.speaker === 'personal'">I - Personal experience</span>
											<span v-else-if="form.speaker === 'team'">We - From the team or company</span>
											<span v-else-if="form.speaker === 'direct'">You - Speaking directly to the reader</span>
											<span v-else-if="form.speaker === 'third_person'">They/He/She - About someone else</span>
											<span v-else-if="form.speaker === 'brand'">Brand voice - Official brand tone</span>
											<span v-else-if="form.speaker === 'narrative'">Story or Dialogue - Narrative style</span>
										</div>
									</div>
									<div class="review-item" v-if="form.contentTone">
										<div class="review-label">Content Tone:</div>
										<div class="review-value">
											{{ form.contentTone.charAt(0).toUpperCase() + form.contentTone.slice(1).replace('_', ' ')
											}}
										</div>
									</div>
									<div class="review-item" v-if="form.writer">
										<div class="review-label">Who's Writing:</div>
										<div class="review-value">{{ getAuthorName(form.writer) }}</div>
									</div>
									<div class="review-item">
										<div class="review-label">AI Feature Image:</div>
										<div class="review-value">
											<span v-if="form.aiFeatureImage">Yes (+6 credits)</span>
											<span v-else>No</span>
										</div>
									</div>
									<div class="review-item">
										<div class="review-label">Allow Comments:</div>
										<div class="review-value">
											<span v-if="form.commentStatus === 'open'">Open</span>
											<span v-else-if="form.commentStatus === 'closed'">Closed</span>
										</div>
									</div>
									<div class="review-item" v-if="form.budget">
										<div class="review-label">Maximum Credits per Post:</div>
										<div class="review-value">{{ form.budget }} credits</div>
									</div>
									<div class="review-item">
										<div class="review-label">Publishing Frequency:</div>
										<div class="review-value">
											<span v-if="form.frequency === 'daily'">Daily</span>
											<span v-else-if="form.frequency === 'weekly'">Weekly</span>
											<span v-else-if="form.frequency === 'biweekly'">Bi-weekly</span>
											<span v-else-if="form.frequency === 'monthly'">Monthly</span>
										</div>
									</div>
									<div class="review-item">
										<div class="review-label">Number of Posts:</div>
										<div class="review-value">{{ form.count }}</div>
									</div>
									<div class="review-item">
										<div class="review-label">Post Status:</div>
										<div class="review-value">
											<span v-if="postStatus === 'draft'">Draft</span>
											<span v-else-if="postStatus === 'publish'">Publish</span>
										</div>
									</div>
								</div>

								<div class="form-actions">
									<button type="button" @click="prevProductStep"
											class="button button-secondary button-large">
										Previous
									</button>
									<button type="button" @click="submitForm" class="button button-primary button-large"
											:disabled="isSubmitting">
										<span v-if="!isSubmitting">Create AutoPilot Task</span>
										<span v-else>Creating...</span>
									</button>
								</div>
								<!-- Error message under create button -->
								<div class="alert alert-error fade-in" style="margin-top: 10px;"
									v-if="isErrorMessage && showSuccessAlert">
									<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
										aria-hidden="true">
										<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
									</svg>
									<div class="alert-content">
										<strong>Error!</strong> {{ successMessage }}
									</div>
								</div>
							</div>
						</div>
						<!-- SEO Tab Wizard -->
						<div v-if="form.goal === 'traffic'">
							<!-- Wizard Progress -->
							<div class="wizard-progress">
								<div class="wizard-step"
									:class="{ 'active': seoWizardStep >= 1, 'completed': seoWizardStep > 1 }">
									<div class="step-number">1</div>
									<div class="step-label">Content Settings</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': seoWizardStep >= 2, 'completed': seoWizardStep > 2 }">
									<div class="step-number">2</div>
									<div class="step-label">Budget</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': seoWizardStep >= 3, 'completed': seoWizardStep > 3 }">
									<div class="step-number">3</div>
									<div class="step-label">Schedule</div>
								</div>
								<div class="wizard-step"
									:class="{ 'active': seoWizardStep >= 4, 'completed': seoWizardStep > 4 }">
									<div class="step-number">4</div>
									<div class="step-label">Review</div>
								</div>
							</div>

							<!-- Step 1: SEO Content Settings -->
							<div v-if="seoWizardStep === 1" class="wizard-step-content slide-in-up">
								<h2 class="section-title">SEO Content Settings</h2>

								<!-- SEO-Focused Content Fields -->
								<div class="seo-content-section">
									<!-- Content Settings Dropdowns in 3 columns -->
									<div class="seo-budget-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
										<!-- Content Goal Type field -->
										<div class="seo-budget-col seo-budget-smallbox"
											style="flex: 1; min-width: 30%;">
											<label for="autopilot-content-goal-type" class="seo-budget-label">Content
												Goal Type <span class="required">*</span></label>
											<select id="autopilot-content-goal-type" v-model="form.contentGoalType"
													class="seo-budget-input"
													aria-describedby="content-goal-type-description">
												<option value="">Select a content goal type</option>
												<option v-for="type in contentGoalTypes.filter(t => t.type === 'content' || t.type === 'seo' || t.type === 'traffic')"
														:key="type.id" :value="type.id">
													{{ type.title }}
												</option>
											</select>
											<p id="content-goal-type-description" class="field-description"
												style="margin-bottom:0;">Select the primary goal for your content. This
												field is required.</p>
											<div v-if="errors.contentGoalType" class="seo-error-text">
												{{ humanizeVariableName('contentGoalType') }}: {{ errors.contentGoalType
												}}
											</div>
										</div>
									</div>

									<!-- Content Goal Details field for SEO tab -->
									<div class="seo-budget-row">
										<div class="seo-budget-col">
											<label for="autopilot-content-goal-details-seo"
													class="seo-budget-label">Goal Description<span class="required-icon">*</span></label>
											<textarea id="autopilot-content-goal-details-seo"
														v-model="form.contentGoalDetails"
														class="seo-budget-input"
														placeholder="Describe your specific content goals and intentions"
														rows="2"
														aria-describedby="content-goal-details-seo-description"></textarea>
											<p id="content-goal-details-seo-description" class="field-description">
												You can provide additional details about your content goals in any
												language you're comfortable with to help generate more targeted content.
											</p>
											<div v-if="errors.contentGoalDetails" class="seo-error-text">
												{{ errors.contentGoalDetails }}
											</div>
										</div>
									</div>

									<!-- AI Feature Image checkbox for SEO tab -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="ai_feature_image_seo">AI Feature
													Image</label>
												<div
														class="tooltip-icon"
														data-tooltip="Enable AI to create a feature image for your post. This will add 6 credits to the minimum credit requirement."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="checkbox-group">
												<label class="checkbox-item">
													<input
															type="checkbox"
															id="ai_feature_image_seo"
															name="ai_feature_image_seo"
															v-model="form.aiFeatureImage"
															@change="updateMinimumCredit"
													> Create AI feature image (+6 credits)
												</label>
											</div>
										</div>
									</div>

									<!-- Allow Comments? dropdown for SEO tab -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="comment_status_seo">Allow
													Comments?</label>
												<div
														class="tooltip-icon"
														data-tooltip="Choose Open to allow comments on this post, or Closed to disable them."
												>
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="radio-group flex items-center">
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_open_seo"
															name="comment_status_seo"
															v-model="form.commentStatus"
															value="open"
													> Open
												</label>
												<label class="radio-option checkbox-item">
													<input
															type="radio"
															id="comment_status_closed_seo"
															name="comment_status_seo"
															v-model="form.commentStatus"
															value="closed"
													> Closed
												</label>
											</div>
										</div>
									</div>

									<!-- category--->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="category_select">Category</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select a category for your post or let AI choose the best one automatically"
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select id="category_select_seo" name="category_select_seo"
														v-model="form.category"
														data-dropdown-css-class="category-select-dropdown"
														class="wp-select2">
													<option value="">Select a category</option>
													<option v-for="category in categories" :key="category.term_id"
															:value="category.term_id">
														{{ category.name }}
													</option>
												</select>
											</div>
										</div>
									</div>

									<!-- language--->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_length">Language<span
															class="required-icon">*</span></label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the language for your generated content"
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select id="language_select_seo" name="language_select_seo"
														v-model="form.language"
														data-dropdown-css-class="language-select-dropdown"
														class="wp-select2">
													<option value="">Select a language</option>
													<option v-for="language in contentData.languages"
															:key="language.code" :value="language.code">
														{{ language.name }}
													</option>
												</select>
												<div v-if="errors.language" class="seo-error-text">{{ errors.language
													}}
												</div>
											</div>
										</div>
									</div>

									<!-- Who is speaking -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="speaker_select_seo">Who is
													speaking?<span class="required-icon">*</span></label>
												<div class="tooltip-icon"
													data-tooltip="Pick who's telling the story or sharing the message">
													?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="speaker_select_seo"
														name="speaker_select_seo"
														v-model="form.speaker"
														class="wp-select2"
														data-dropdown-css-class="speaker-select-dropdown"
												>
													<option value="">Select a speaker</option>
													<option value="neutral">General Voice – Neutral tone without a
														specific speaker
													</option>
													<option value="personal">I - Personal experience</option>
													<option value="team">We - From the team or company</option>
													<option value="direct">You - Speaking directly to the reader
													</option>
													<option value="third_person">They/He/She - About someone else
													</option>
													<option value="brand">Brand voice - Official brand tone</option>
													<option value="narrative">Story or Dialogue - Narrative style
													</option>
												</select>
											</div>
											<div v-if="errors.speaker" class="seo-error-text">{{ errors.speaker }}</div>
										</div>
									</div>

									<!-- Content Tone -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="content_tone_seo">Content Tone</label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the tone for your content to match your audience's preferences."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="content_tone_seo"
														name="content_tone_seo"
														v-model="form.contentTone"
														class="wp-select2"
														data-dropdown-css-class="content-tone-dropdown"
												>
													<option
															v-for="tone in contentTones"
															:key="tone.value"
															:value="tone.value"
															:disabled="!tone.available"
													>{{ tone.label }}
													</option>
												</select>
											</div>
										</div>
									</div>

									<!-- Author Options -->
									<div class="form-row">
										<div class="form-label-column">
											<div class="tooltip-wrapper">
												<label class="field-label" for="writer_seo">Who's Writing?<span
															class="required-icon">*</span></label>
												<div
														class="tooltip-icon"
														data-tooltip="Select the writer you want to add to your post as a writer."
												>?
												</div>
											</div>
										</div>
										<div class="form-input-column">
											<div class="select-wrapper">
												<select
														id="writer_seo"
														v-model="form.writer"
														class="wp-select2"
														data-dropdown-css-class="content-tone-dropdown"
												>
													<option
															v-for="user in writers"
															:key="user.ID"
															:value="user.ID"
													>{{ user.display_name }}
													</option>
												</select>
											</div>
											<div v-if="errors.writer" class="seo-error-text">{{ errors.writer }}</div>
										</div>
									</div>

									<div class="seo-keywords-row" style="margin-top: 22px;">
										<div class="seo-keywords-col">
											<label for="autopilot-keywords" class="seo-keywords-label">Keywords <span
														class="required">*</span></label>
											<textarea id="autopilot-keywords" v-model="form.keywords"
														class="seo-keywords-input"
														placeholder="Enter keywords separated by commas"
														rows="1"></textarea>
										</div>
										<div style="display: flex; align-items: flex-end;">
											<button type="button" @click="analyzeContent" class="seo-analyze-btn"
													:disabled="isAnalyzing">
												<span v-if="!isAnalyzing">Analyze Blog</span>
												<span v-else>Analyzing...</span>
											</button>
										</div>
									</div>
									<div class="seo-keywords-desc">
										<b>You can analyze your blog to get keywords and ideas about your blog.</b>
										<br>
										The content body will be about the keyword that you are entering here or click
										<b>'Analyze Blog'</b> to get AI suggestions.
									</div>
									<div v-if="errors.budget" class="seo-error-text">{{ errors.budget }}</div>
									<div v-if="errors.keywords" class="seo-error-text">{{ errors.keywords }}</div>
									<!-- Keyword suggestions as chips -->
									<div v-if="analyzedKeywords.length > 0" class="seo-keyword-chips-wrap">
										<div class="seo-keyword-chips-label">Suggested keywords:</div>
										<div class="seo-keyword-chips">
											<span v-for="(keyword, index) in analyzedKeywords" :key="index"
													class="seo-keyword-chip" @click="addKeyword(keyword)">
												{{ keyword }}
											</span>
										</div>
									</div>
									<div v-else-if="analysisCompleted" class="seo-keyword-chips-wrap">
										<div class="seo-keyword-chips-label">No keywords found:</div>
										<div class="seo-error-text">We cannot offer any keywords for your content.</div>
									</div>

									<div class="form-actions">
										<button type="button" @click="nextSeoStep"
												class="button button-primary button-large">
											Next Step
										</button>
									</div>
								</div>
							</div>
							<!-- Step 2: SEO Budget -->
							<div v-if="seoWizardStep === 2" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Budget Settings</h2>

								<div class="seo-content-section">
									<div class="seo-budget-row">
										<div class="seo-budget-col seo-budget-smallbox">
											<label for="autopilot-budget-seo" class="seo-budget-label">Maximum Credits
												per Post
											</label>
											<div style="display: flex; align-items: center; gap: 15px;">
												<input type="number" id="autopilot-budget-seo" v-model.number="form.budget"
														class="seo-budget-input" style="width: 17%;"
														:min="minimumBudget" :max="availableCredits"
														:disabled="isLoadingCredits">
												<div class="seo-budget-slider-wrap" style="flex: 1; margin-top: 0;">
													<input type="range" v-model.number="form.budget" :min="minimumBudget"
															:max="availableCredits"
															class="seo-budget-slider" :disabled="isLoadingCredits">
													<div class="seo-budget-slider-labels">
														<span>{{ minimumBudget }}</span>
														<span>{{ availableCredits }}</span>
													</div>
												</div>
											</div>
											<span class="seo-available-credits">
													Available Credit: <span
														v-if="!isLoadingCredits">{{ availableCredits }}</span><span
														v-else>Loading...</span>
												</span>
											<p class="field-description">
												Set the maximum number of credits to use for each post. Higher budgets
												can result in more comprehensive content.
											</p>
											<div v-if="errors.budget" class="seo-error-text">{{ errors.budget }}</div>
										</div>
									</div>

									<div class="form-actions">
										<button type="button" @click="prevSeoStep"
												class="button button-secondary button-large">
											Previous
										</button>
										<button type="button" @click="nextSeoStep"
												class="button button-primary button-large">
											Next Step
										</button>
									</div>
								</div>
							</div>

							<!-- Step 3: SEO Schedule -->
							<div v-if="seoWizardStep === 3" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Schedule Settings</h2>

								<div class="form-group">
									<label for="autopilot-frequency-seo">Publishing Frequency</label>
									<select id="autopilot-frequency-seo" v-model="form.frequency"
											class="seo-budget-input">
										<option value="daily">Daily</option>
										<option value="weekly">Weekly</option>
										<option value="biweekly">Bi-weekly</option>
										<option value="monthly">Monthly</option>
									</select>
									<p class="field-description">How often should AutoPilot generate and publish
										content?</p>
								</div>

								<div class="form-group">
									<label for="autopilot-count-seo">Number of Posts</label>
									<input type="number" id="autopilot-count-seo" v-model="form.count"
											class="form-control"
											min="1" max="10">
									<p class="field-description">
										How many posts should be generated per cycle? Each post requires
										{{ minimumBudget }} credits.
										<span v-if="availableCredits > 0">
											You have {{ availableCredits }} credits available, which allows for a maximum of {{ maxPossiblePosts }} posts.
										</span>
									</p>
									<div v-if="errors.count" class="error-text">{{ errors.count }}</div>
								</div>

								<div class="form-group">
									<label for="autopilot-status-seo">Post Status</label>
									<select id="autopilot-status-seo" v-model="form.status" class="seo-budget-input">
										<option value="draft">Draft</option>
										<option value="publish">Publish</option>
									</select>
									<p class="field-description">Should posts be published immediately or saved as
										drafts?</p>
								</div>

								<div class="form-actions">
									<button type="button" @click="prevSeoStep"
											class="button button-secondary button-large">
										Previous
									</button>
									<button type="button" @click="nextSeoStep"
											class="button button-primary button-large">
										Next Step
									</button>
								</div>
							</div>

							<!-- Step 4: SEO Review -->
							<div v-if="seoWizardStep === 4" class="wizard-step-content slide-in-up">
								<h2 class="section-title">Review Your AutoPilot Task</h2>
								<div class="review-summary">
									<div class="review-item">
										<div class="review-label">Content Goal:</div>
										<div class="review-value">SEO-Focused Content</div>
									</div>
									<div class="review-item" v-if="form.contentGoalType">
										<div class="review-label">Content Goal Type:</div>
										<div class="review-value">
											{{ getContentGoalTypeTitle(form.contentGoalType) }}
										</div>
									</div>
									<div class="review-item" v-if="form.contentGoalDetails">
										<div class="review-label">Goal Description:</div>
										<div class="review-value">{{ form.contentGoalDetails }}</div>
									</div>
									<div class="review-item" v-if="form.keywords">
										<div class="review-label">Keywords:</div>
										<div class="review-value">{{ form.keywords }}</div>
									</div>
									<div class="review-item" v-if="form.category">
										<div class="review-label">Category:</div>
										<div class="review-value">{{ getCategoryName(form.category) }}</div>
									</div>
									<div class="review-item" v-if="form.language">
										<div class="review-label">Language:</div>
										<div class="review-value">
											{{ form.language.charAt(0).toUpperCase() + form.language.slice(1).replace('_', ' ')
											}}
										</div>
									</div>
									<div class="review-item" v-if="form.speaker">
										<div class="review-label">Who is speaking:</div>
										<div class="review-value">
											<span v-if="form.speaker === 'neutral'">General Voice – Neutral tone</span>
											<span v-else-if="form.speaker === 'personal'">I - Personal experience</span>
											<span v-else-if="form.speaker === 'team'">We - From the team or company</span>
											<span v-else-if="form.speaker === 'direct'">You - Speaking directly to the reader</span>
											<span v-else-if="form.speaker === 'third_person'">They/He/She - About someone else</span>
											<span v-else-if="form.speaker === 'brand'">Brand voice - Official brand tone</span>
											<span v-else-if="form.speaker === 'narrative'">Story or Dialogue - Narrative style</span>
										</div>
									</div>
									<div class="review-item" v-if="form.contentTone">
										<div class="review-label">Content Tone:</div>
										<div class="review-value">
											{{ form.contentTone.charAt(0).toUpperCase() + form.contentTone.slice(1).replace('_', ' ')
											}}
										</div>
									</div>
									<div class="review-item" v-if="form.writer">
										<div class="review-label">Who's Writing:</div>
										<div class="review-value">{{ getAuthorName(form.writer) }}</div>
									</div>
									<div class="review-item">
										<div class="review-label">AI Feature Image:</div>
										<div class="review-value">
											<span v-if="form.aiFeatureImage">Yes (+6 credits)</span>
											<span v-else>No</span>
										</div>
									</div>
									<div class="review-item">
										<div class="review-label">Allow Comments:</div>
										<div class="review-value">
											<span v-if="form.commentStatus === 'open'">Open</span>
											<span v-else-if="form.commentStatus === 'closed'">Closed</span>
										</div>
									</div>
									<div class="review-item" v-if="form.budget">
										<div class="review-label">Maximum Credits per Post:</div>
										<div class="review-value">{{ form.budget }} credits</div>
									</div>
									<div class="review-item">
										<div class="review-label">Publishing Frequency:</div>
										<div class="review-value">
											<span v-if="form.frequency === 'daily'">Daily</span>
											<span v-else-if="form.frequency === 'weekly'">Weekly</span>
											<span v-else-if="form.frequency === 'biweekly'">Bi-weekly</span>
											<span v-else-if="form.frequency === 'monthly'">Monthly</span>
										</div>
									</div>
									<div class="review-item">
										<div class="review-label">Number of Posts:</div>
										<div class="review-value">{{ form.count }}</div>
									</div>
									<div class="review-item">
										<div class="review-label">Post Status:</div>
										<div class="review-value">
											<span v-if="postStatus === 'draft'">Draft</span>
											<span v-else-if="postStatus === 'publish'">Publish</span>
										</div>
									</div>
								</div>

								<div class="form-actions">
									<button type="button" @click="prevSeoStep"
											class="button button-secondary button-large">
										Previous
									</button>
									<button type="button" @click="submitForm" class="button button-primary button-large"
											:disabled="isSubmitting">
										<span v-if="!isSubmitting">Create AutoPilot Task</span>
										<span v-else>Creating...</span>
									</button>
								</div>
								<!-- Error message under create button -->
								<div class="alert alert-error fade-in" style="margin-top: 10px;"
									v-if="isErrorMessage && showSuccessAlert">
									<svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
										aria-hidden="true">
										<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
									</svg>
									<div class="alert-content">
										<strong>Error!</strong> {{ successMessage }}
									</div>
								</div>
							</div>

						</div>


						<!-- Task List (shown after submission) -->
						<div class="form-column" v-if="currentStep === 4" v-cloak>
							<div class="plugin-container">
								<div class="section-header">
									<h2 class="section-title">AutoPilot Tasks</h2>
									<button type="button" @click="resetForm" class="button button-primary">Add New
										Autopilot
									</button>
								</div>


								<div class="tasks-table-wrapper">
									<table class="tasks-table">
										<thead>
										<tr>
											<th>ID</th>
											<th>Content</th>
											<th>Frequency</th>
											<th>Posts</th>
											<th>Status</th>
											<th>Next Run</th>
											<th>Actions</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(task, index) in allAutopilots" :key="index"
											:class="{'inactive-autopilot': !task.isActive}">
											<td>
												<span class="task-id-badge">{{ task.id }}</span>
												<span v-if="!task.isActive && task.inactiveReason && task.inactiveReason.includes('Insufficient credits')" class="inactive-badge">Inactive</span>
											</td>
											<td>
												<span v-if="task.contentGoal && task.contentGoal.typeTitle">{{ task.contentGoal.typeTitle }} / {{ getFrequencyLabel(task.frequency) }}</span>
												<span v-else-if="task.contentGoal && task.contentGoal.type === 'product' && hasProducts">{{ task.contentGoal.productName }}</span>
												<span v-else-if="task.contentGoal && task.contentGoal.type === 'affiliate' && hasProducts">{{ task.contentGoal.affiliateProductName }}</span>
												<span v-else>{{ task.topic }}</span>
												<span class="content-goal-badge"
														:class="task.contentGoal ? task.contentGoal.typeKey : ''">
												<span v-if="task.contentGoal && task.contentGoal.type === 'product' && hasProducts">Product</span>
												<span v-else-if="task.contentGoal && task.contentGoal.type === 'affiliate' && hasProducts">Affiliate</span>
												<span v-else-if="task.contentGoal && task.contentGoal.typeTitle">{{ task.contentGoal.typeTitle }}</span>
												<span v-else>SEO</span>
											</span>
												<div v-if="!task.isActive" class="inactive-task-warning">
													<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
														viewBox="0 0 24 24" fill="none" stroke="currentColor"
														stroke-width="2" stroke-linecap="round"
														stroke-linejoin="round">
														<circle cx="12" cy="12" r="10"></circle>
														<line x1="12" y1="8" x2="12" y2="12"></line>
														<line x1="12" y1="16" x2="12.01" y2="16"></line>
													</svg>
													Not active: {{ task.inactiveReason }}
												</div>
											</td>
											<td>
											<span :class="['frequency-badge', 'frequency-' + task.frequency]">
												<svg v-if="task.frequency === 'daily'"
													xmlns="http://www.w3.org/2000/svg" width="16" height="16"
													viewBox="0 0 24 24" fill="none" stroke="currentColor"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													aria-hidden="true">
													<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
													<line x1="16" y1="2" x2="16" y2="6"></line>
													<line x1="8" y1="2" x2="8" y2="6"></line>
													<line x1="3" y1="10" x2="21" y2="10"></line>
													<path d="M12 14l2 2 4-4"></path>
												</svg>
												<svg v-if="task.frequency === 'weekly'"
													xmlns="http://www.w3.org/2000/svg" width="16" height="16"
													viewBox="0 0 24 24" fill="none" stroke="currentColor"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													aria-hidden="true">
													<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
													<line x1="16" y1="2" x2="16" y2="6"></line>
													<line x1="8" y1="2" x2="8" y2="6"></line>
													<line x1="3" y1="10" x2="21" y2="10"></line>
													<path d="M8 14h.01"></path>
													<path d="M12 14h.01"></path>
													<path d="M16 14h.01"></path>
													<path d="M8 18h.01"></path>
													<path d="M12 18h.01"></path>
													<path d="M16 18h.01"></path>
												</svg>
												<svg v-if="task.frequency === 'biweekly'"
													xmlns="http://www.w3.org/2000/svg" width="16" height="16"
													viewBox="0 0 24 24" fill="none" stroke="currentColor"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													aria-hidden="true">
													<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
													<line x1="16" y1="2" x2="16" y2="6"></line>
													<line x1="8" y1="2" x2="8" y2="6"></line>
													<line x1="3" y1="10" x2="21" y2="10"></line>
													<path d="M10 14h4"></path>
												</svg>
												<svg v-if="task.frequency === 'monthly'"
													xmlns="http://www.w3.org/2000/svg" width="16" height="16"
													viewBox="0 0 24 24" fill="none" stroke="currentColor"
													stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
													aria-hidden="true">
													<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
													<line x1="16" y1="2" x2="16" y2="6"></line>
													<line x1="8" y1="2" x2="8" y2="6"></line>
													<line x1="3" y1="10" x2="21" y2="10"></line>
													<circle cx="12" cy="16" r="2"></circle>
												</svg>
												{{ getFrequencyLabel(task.frequency) }}
											</span>
											</td>
											<td>{{ task.count }}</td>
											<td>
											<span class="status-badge" :class="task.status">
												{{ task.status === 'draft' ? 'Draft' : 'Published' }}
											</span>
											</td>
											<td>{{ task.nextRun }}</td>
											<td>
												<button class="action-btn view-btn" @click="viewTaskDetails(task)"
														aria-label="View task details">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
														viewBox="0 0 24 24" fill="none" stroke="currentColor"
														stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
														aria-hidden="true">
														<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
														<circle cx="12" cy="12" r="3"></circle>
													</svg>
												</button>
												<button class="action-btn delete-btn" @click="confirmDeleteTask(index)"
														aria-label="Delete task">
													<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
														viewBox="0 0 24 24" fill="none" stroke="currentColor"
														stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
														aria-hidden="true">
														<line x1="18" y1="6" x2="6" y2="18"></line>
														<line x1="6" y1="6" x2="18" y2="18"></line>
													</svg>
												</button>
											</td>
										</tr>
										</tbody>
									</table>
								</div>

								<div class="form-actions">
									<button type="button" @click="resetForm" class="button button-primary">Create New
										Task
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Right Column - Information -->
				<div v-if="currentStep!==4" class="info-column">
					<!-- Active AutoPilots Sidebar -->
					<div class="info-box active-autopilots-box">
						<h3>AutoPilots</h3>
						<div v-if="allAutopilots.length === 0" class="no-active-autopilots">
							<p>No autopilots found.</p>
						</div>
						<div v-else class="active-autopilots-list">
							<div v-for="(task, index) in allAutopilots" :key="index" class="active-autopilot-item"
								:class="{'inactive-autopilot': !task.isActive}">
								<div class="autopilot-item-header">
									<!--                                <span v-if="task.contentGoal && task.contentGoal.type === 'product' && hasProducts">-->
									<!--                                    {{ task.contentGoal.productName }} / {{ getFrequencyLabel(task.frequency) }}-->
									<!--                                </span>-->
									<span>
								{{ task.budgetPerPost + " Credits" }} / {{ getFrequencyLabel(task.frequency) }}
								<span v-if="!task.isActive && task.inactiveReason && task.inactiveReason.includes('Insufficient credits')" class="inactive-badge">Inactive</span>
								<span class="tooltip-icon clock-icon" :data-tooltip="'Next run: ' + task.nextRun">
									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<circle cx="12" cy="12" r="10"></circle>
										<polyline points="12 6 12 12 16 14"></polyline>
									</svg>
								</span>
							</span>
									<span class="content-goal-badge"
											:class="task.contentGoal ? task.contentGoal.typeKey : ''">
								<span v-if="task.contentGoal && task.contentGoal.type === 'product' && hasProducts">Product</span>
								<span v-else-if="task.contentGoal && task.contentGoal.typeTitle">{{ task.contentGoal.typeTitle }}</span>
								<span v-else>SEO</span>
							</span>
								</div>
								<div class="autopilot-item-actions">
									<button class="action-btn view-btn" @click="viewTaskDetails(task)"
											aria-label="View task details">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
											viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
											<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
											<circle cx="12" cy="12" r="3"></circle>
										</svg>
										Details
									</button>
									<button class="action-btn delete-btn" @click="confirmDeleteTask(index)"
											aria-label="Delete task">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
											viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
											stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
											<line x1="18" y1="6" x2="6" y2="18"></line>
											<line x1="6" y1="6" x2="18" y2="18"></line>
										</svg>
										Remove
									</button>
								</div>
							</div>
						</div>
					</div>

					<!-- About AutoPilot Sidebar -->
					<div class="info-box">
						<h3>About AutoPilot</h3>
						<p>AutoPilot is an advanced feature that automatically generates and publishes content based
							on your settings.</p>
						<p>Here's how it works:</p>
						<ol>
							<li>Configure your content preferences</li>
							<li>Set your publishing schedule</li>
							<li>AutoPilot will generate content according to your schedule</li>
							<li>Review and publish (or let AutoPilot publish automatically)</li>
						</ol>
						<p>Each post generation will use credits from your account.</p>
					</div>

					<div class="info-box">
						<h3>Tips for Best Results</h3>
						<ul>
							<li>Be specific with your topic and keywords</li>
							<li>Start with drafts until you're comfortable with the quality</li>
							<li>Regularly review your AutoPilot settings</li>
							<li>Ensure you have sufficient credits for your publishing schedule</li>
						</ul>
					</div>
				</div>


				<!-- Task Details Modal -->
				<div class="modal" v-if="showTaskModal" v-cloak role="dialog" aria-labelledby="task-modal-title"
					aria-describedby="task-modal-description">
					<div class="modal-backdrop" @click="showTaskModal = false"></div>
					<div class="modal-content">
						<div class="modal-header">
							<h3 id="task-modal-title">Task Details</h3>
							<button class="modal-close" @click="showTaskModal = false" aria-label="Close modal">×
							</button>
						</div>
						<div class="modal-body" v-if="currentTask" id="task-modal-description">
							<div class="task-details-container">
								<!-- Task Overview Section -->
								<div class="task-overview-section">
									<div class="task-overview-header">
										<div class="task-status-indicator"
											:class="currentTask.isActive ? 'active' : 'inactive'">
											<span class="status-dot"></span>
											<span class="status-text">{{ currentTask.isActive ? 'Active' : 'Inactive' }}</span>
										</div>
										<div class="task-type-badge"
											:class="currentTask.contentGoal?.type === 'product' ? 'product-type' : currentTask.contentGoal?.typeKey || 'seo-type'">
											<span v-if="currentTask.contentGoal?.type === 'product'">Product-Focused</span>
											<span v-else-if="currentTask.contentGoal?.typeTitle">{{ currentTask.contentGoal.typeTitle }}</span>
											<span v-else>SEO-Focused</span>
										</div>
									</div>

									<!-- Credit Usage Summary -->
									<div class="credit-usage-summary">
										<div class="credit-usage-label">
											<span>Credit Usage</span>
											<span class="credit-amount">{{ currentTask.estimatedCredits }} credits</span>
										</div>
										<div class="credit-usage-bar">
											<div class="credit-usage-progress"
												:style="{ width: Math.min((currentTask.estimatedCredits / availableCredits) * 100, 100) + '%' }"></div>
										</div>
										<div class="credit-usage-info">
											<span>{{ Math.round((currentTask.estimatedCredits / availableCredits) * 100) }}% of available credits per cycle</span>
										</div>
									</div>
								</div>

								<div class="task-details-grid">
									<!-- Task ID -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path>
												<path d="M8 13h8v2H8z"></path>
												<path d="M8 9h8v2H8z"></path>
											</svg>
											Task ID
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Identifier:</div>
												<div class="detail-value highlight">{{ currentTask.identifier }}</div>
											</div>
										</div>
									</div>

									<!-- Content Goal -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path>
												<polyline points="14 2 14 8 20 8"></polyline>
												<line x1="16" y1="13" x2="8" y2="13"></line>
												<line x1="16" y1="17" x2="8" y2="17"></line>
												<polyline points="10 9 9 9 8 9"></polyline>
											</svg>
											Content Goal
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Content Goal:</div>
												<div class="detail-value highlight">
													<span v-if="currentTask.contentGoal?.type === 'product'">Product-Focused Content</span>
													<span v-else>SEO-Focused Content</span>
												</div>
											</div>
										</div>
									</div>

									<!-- Product Information -->
									<div class="info-box"
										v-if="currentTask.contentGoal?.type === 'product' && hasProducts">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
												<line x1="7" y1="7" x2="7.01" y2="7"></line>
											</svg>
											Product Information
										</h3>
										<div class="card-content" v-if="currentTask.contentGoal?.type === 'product'">
											<div class="detail-item">
												<div class="detail-label">Product Name:</div>
												<div class="detail-value">
													{{ currentTask.contentGoal.productMeta.product_name }}
												</div>
											</div>
										</div>
									</div>

									<!-- Budget Information -->
									<div class="info-box" v-if="currentTask.contentGoal?.type === 'traffic'">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<line x1="12" y1="1" x2="12" y2="23"></line>
												<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
											</svg>
											Budget Information
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Budget:</div>
												<div class="detail-value">{{ currentTask.contentGoal.budget || 0 }}
													credits
												</div>
											</div>
										</div>
									</div>

									<!-- Keywords -->
									<div class="info-box" v-if="currentTask.contentGoal?.keywords">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
												<circle cx="12" cy="7" r="4"></circle>
											</svg>
											Keywords
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Keywords:</div>
												<div class="detail-value">
													<div class="keyword-tags">
														<span class="keyword-tag"
																v-for="keyword in currentTask.contentGoal.keywords.split(',')">{{ keyword.trim() }}</span>
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- Content Goal Detail -->
									<div class="info-box" v-if="currentTask.contentGoal?.contentGoal">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
												<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
											</svg>
											Content Goal Detail
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Content Goal Detail:</div>
												<div class="detail-value">{{ currentTask.contentGoal.contentGoal}}
												</div>
											</div>
										</div>
									</div>

									<!-- Category Information -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
											</svg>
											Category Information
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Category:</div>
												<div class="detail-value">{{ getCategoryName(currentTask.category)}}
												</div>
											</div>
										</div>
									</div>

									<!-- Author Information -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
												<circle cx="12" cy="7" r="4"></circle>
											</svg>
											Author Information
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Author:</div>
												<div class="detail-value">{{ currentTask.wordpress_author_name }}</div>
											</div>
										</div>
									</div>

									<!-- Publishing Frequency -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
												<polyline points="17 21 17 13 7 13 7 21"></polyline>
												<polyline points="7 3 7 8 15 8"></polyline>
											</svg>
											Publishing Frequency
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Publishing Frequency:</div>
												<div class="detail-value">
											<span :class="['frequency-badge', 'frequency-' + currentTask.frequency]">
												<component :is="getFrequencyIcon(currentTask.frequency)"/>
												{{ getFrequencyLabel(currentTask.frequency) }}
											</span>
												</div>
											</div>
										</div>
									</div>

									<!-- Number of Posts -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
												<line x1="4" y1="22" x2="4" y2="15"></line>
											</svg>
											Number of Posts
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Number of Posts:</div>
												<div class="detail-value">{{ currentTask.count }}</div>
											</div>
										</div>
									</div>

									<!-- Post Status -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
												<polyline points="22 4 12 14.01 9 11.01"></polyline>
											</svg>
											Post Status
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Post Status:</div>
												<div class="detail-value">
											<span v-if="currentTask.isActive"
													:class="['status-badge', currentTask.status]">
												{{ currentTask.postStatus === 'draft' ? 'Draft' : 'Publish' }}
											</span>
													<span v-else class="status-badge inactive">Inactive</span>
												</div>
											</div>
										</div>
									</div>

									<!-- Inactive Reason -->
									<div class="info-box" v-if="!currentTask.isActive">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<circle cx="12" cy="12" r="10"></circle>
												<line x1="12" y1="8" x2="12" y2="12"></line>
												<line x1="12" y1="16" x2="12.01" y2="16"></line>
											</svg>
											Inactive Reason
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Inactive Reason:</div>
												<div class="detail-value">
													<div class="inactive-task-warning">
														<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
															viewBox="0 0 24 24" fill="none" stroke="currentColor"
															stroke-width="2" stroke-linecap="round"
															stroke-linejoin="round">
															<circle cx="12" cy="12" r="10"></circle>
															<line x1="12" y1="8" x2="12" y2="12"></line>
															<line x1="12" y1="16" x2="12.01" y2="16"></line>
														</svg>
														{{ currentTask.inactiveReason }}
													</div>
												</div>
											</div>
										</div>
									</div>

									<!-- Created On -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<circle cx="12" cy="12" r="10"></circle>
												<polyline points="12 6 12 12 16 14"></polyline>
											</svg>
											Created On
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Created On:</div>
												<div class="detail-value">{{ currentTask.createdAt }}</div>
											</div>
										</div>
									</div>

									<!-- Next Run -->
									<div class="info-box">
										<h3>
											<svg class="card-icon" viewBox="0 0 24 24" width="18" height="18">
												<circle cx="12" cy="12" r="10"></circle>
												<polyline points="12 6 12 12 16 14"></polyline>
											</svg>
											Next Run
										</h3>
										<div class="card-content">
											<div class="detail-item">
												<div class="detail-label">Next Run:</div>
												<div class="detail-value highlight">{{ currentTask.nextRun }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>


						<div class="modal-footer">
							<button class="button button-secondary" @click="showTaskModal = false">Close</button>
						</div>
					</div>
				</div>

				<!-- Delete Confirmation Modal -->
				<div class="modal" v-if="showDeleteModal" v-cloak role="dialog" aria-labelledby="delete-modal-title"
					aria-describedby="delete-modal-description">
					<div class="modal-backdrop" @click="showDeleteModal = false"></div>
					<div class="modal-content">
						<div class="modal-header">
							<h3 id="delete-modal-title">Confirm Deletion</h3>
							<button class="modal-close" @click="showDeleteModal = false" aria-label="Close modal">×
							</button>
						</div>
						<div class="modal-body">
							<p id="delete-modal-description">Are you sure you want to delete this AutoPilot task? This
								action cannot be undone.</p>
						</div>
						<div class="modal-footer">
							<button class="button button-danger" @click="deleteTask">Delete</button>
							<button class="button button-secondary" @click="showDeleteModal = false">Cancel</button>
						</div>
					</div>
				</div>


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