<?php require_once plugin_dir_path(dirname(__FILE__)) . 'partials/logs-modal.php';

$nonce = wp_create_nonce('polylai_nonce');
$is_premium = polylai_fs()->can_use_premium_code__premium_only();

$all_langs = pll_the_languages(['raw' => 1, 'hide_if_empty' => 0]);

$catgories_by_lang = [];
foreach($all_langs as $lang)
{
	$catgories_by_lang[$lang['slug']] = get_categories(['lang' => $lang['slug']]);
}

$allowed_types = ["post", "page"];
$post_types = get_post_types(['public' => true], 'objects');
foreach($post_types as $post_type)
{
	if (!polylai_fs()->can_use_premium_code__premium_only() &&
		!in_array($post_type->name, $allowed_types)) {
		$post_type->allowed = false;
	} else {
		$post_type->allowed = true;
	}
}

?>
<script>
	window.polylai_nonce = "<?php echo $nonce ?>";
	window.polylai_premium = <?php echo $is_premium ? 'true' : 'false' ?>;
	window.polylai_allowed_langs = <?php echo json_encode(polylai_Utils::allowed_langs()) ?>;
	window.polylai_all_langs = Object.values(<?php echo json_encode($all_langs) ?>);    
	window.polylai_categories = <?php echo json_encode($catgories_by_lang) ?>;
</script>

<div x-data="polylAiIData()" class="tw-mt-10 tw-mr-4">
	<h3 class="tw-font-bold tw-text-[20px] tw-text-center tw-w-full tw-text-green-500">
		<?php _e('Bulk translations', 'ai-translator-for-polylang'); ?>
	</h3>
	<div class="tw-p-4 tw-bg-yellow-100 tw-border-l-4 tw-border-yellow-500 tw-text-yellow-800 tw-mb-6">
		<?php _e('Warning: Bulk translations can consume a large number of AI tokens and incur significant costs. We strongly recommend testing with a small dataset before queuing large volumes. Source Code SRL is not responsible for misuse or unexpected issues. Use at your own risk.', 'ai-translator-for-polylang'); ?>
	</div>
	<div class="tw-mt-8">
		<form @submit.prevent="fetchPostCount">

			<div class="tw-mb-6">
				<label class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2" for="translate-service">
					<?php _e('Service', 'ai-translator-for-polylang'); ?>
				</label>
				<select x-model="service" id="translate-service" @change="resetBulkSearch()"
					class="tw-shadow tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700">
					<option value="cloud"
						disabled
						x-text="`<?php _e('Cloud (Not yet available)', 'ai-translator-for-polylang'); ?>`">
					</option>
					<option value="local"><?php _e('Local configuration', 'ai-translator-for-polylang'); ?>
						(<?php echo $is_premium ? 'Premium' : 'Free plan' ?>)
					</option>
				</select>
			</div>

			<div class="tw-mb-6">
				<label class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2" for="translate-from">
					<?php _e('Translate from', 'ai-translator-for-polylang'); ?>
				</label>
				<select x-model="translateFrom" id="translate-from"
					class="tw-shadow tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight tw-focus:outline-none tw-focus:shadow-outline">
					<option value=""><?php _e('- Select Language -', 'ai-translator-for-polylang'); ?></option>
					<template x-for="lang in all_langs">
						<option 
							x-bind:value="lang.slug" 
							x-bind:disabled="(!premium && !allowed_langs.includes(lang.slug) && service != 'cloud')"
							x-text="(!premium && !allowed_langs.includes(lang.slug) && service != 'cloud') ? lang.name + ' (Premium)' : lang.name"></option>
					</template>
				</select>
			</div>

			<div class="tw-mb-6">
				<label class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2" for="post-type">
					<?php _e('Post Type', 'ai-translator-for-polylang'); ?>
				</label>
				<select x-model="postType" id="post-type"
					class="tw-shadow tw-border tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-gray-700 tw-leading-tight tw-focus:outline-none tw-focus:shadow-outline">
					<option value=""><?php _e('- Select Post Type -', 'ai-translator-for-polylang'); ?></option>
					<?php
					
					foreach ($post_types as $post_type) {
						$disabled = $post_type->allowed ? "" : "disabled";
						$premium = $post_type->allowed ? "" : " (Premium)";
						echo '<option ' . $disabled . ' value="' . esc_attr($post_type->name) . '">' . 
						esc_html($post_type->label) . $premium . '</option>';
					}
					?>
				</select>
			</div>

			<div class="tw-mb-6">
				<div class="tw-flex tw-gap-2">
					<template x-for="category in categories[translateFrom]">
						<div>
							<input x-bind:id="'category-' + category.cat_ID" 
								x-model="targetCategories"
								type="checkbox" 
								x-bind:value="category.cat_ID" 
									/>
							<label x-text="category.name" x-bind:for="'category-' + category.cat_ID"></label>
						</div>	
					</template>
				</div>
			</div>

			<div class="tw-mb-6">
				<button type="submit" :disabled="!postType || !translateFrom || loading"
					:class="{'tw-opacity-50 tw-cursor-not-allowed': !postType || !translateFrom || loading}"
					class="tw-bg-green-500 tw-hover:bg-green-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded tw-focus:outline-none tw-focus:shadow-outline">
					<span x-show="!loading"><?php _e('Calculate Posts', 'ai-translator-for-polylang'); ?></span>
					<span x-show="loading" class="tw-animate-spin dashicons dashicons-image-rotate"></span>
				</button>
			</div>

			<div class="tw-mb-4" x-show="postCount !== null">
				<div class="tw-p-4 tw-bg-gray-100 tw-rounded tw-border tw-border-gray-200">
					<p class="tw-text-gray-700">
						<span class="tw-font-bold"><?php _e('Number of Posts:', 'ai-translator-for-polylang'); ?></span>
						<span x-text="postCount"></span>
					</p>
				</div>
			</div>			

			<!-- Target Languages Section - Only shown when posts > 0 -->
			<div class="tw-mb-6" x-show="postCount > 0">
				<div class="tw-mb-6">
					<label class="tw-block tw-text-gray-700 tw-font-bold tw-mb-2" for="translate-status">
						<?php _e('Status', 'ai-translator-for-polylang'); ?>
					</label>
					<select x-model="post_status" name="post_status" id="translate-status">
						<option value="publish"><?php _e('Published', 'ai-translator-for-polylang'); ?></option>
						<option value="pending"><?php _e('Pending Review', 'ai-translator-for-polylang'); ?></option>
						<option value="draft" selected><?php _e('Draft', 'ai-translator-for-polylang'); ?></option>
						<option value="private"><?php _e('Private', 'ai-translator-for-polylang'); ?></option>
					</select>
				</div>

				<div class="tw-flex tw-justify-between tw-items-center">
					<h4 class="tw-font-bold tw-text-gray-700 tw-mb-3">
						<?php _e('Translate to:', 'ai-translator-for-polylang'); ?>
					</h4>
					<div class="tw-mb-3">
						<a href="#" @click.prevent="checkAllTargetLanguages()"
							class="tw-text-green-500 tw-hover:text-green-700 tw-mr-2"><?php _e('Check all', 'ai-translator-for-polylang'); ?></a>
						|
						<a href="#" @click.prevent="uncheckAllTargetLanguages()"
							class="tw-text-green-500 tw-hover:text-green-700 tw-ml-2"><?php _e('Uncheck all', 'ai-translator-for-polylang'); ?></a>
					</div>
				</div>
				

				<div id="target-languages"
					class="tw-bg-white tw-p-4 tw-border tw-border-gray-200 tw-rounded tw-max-h-[250px] tw-overflow-y-auto">
					<div class="tw-grid tw-grid-cols-2 tw-gap-2">
						<template x-for="lang in all_langs.filter(l => l.slug != translateFrom)">
							<div>
								<input x-bind:id="'lang-' + lang.slug" 
									x-model="targetLanguages"
									type="checkbox" 
									x-bind:value="lang.slug" 
									x-bind:data-name="lang.name"
									x-bind:disabled="(!premium && !allowed_langs.includes(lang.slug) && service != 'cloud')"
									 />
								<label x-text="(!premium && !allowed_langs.includes(lang.slug) && service != 'cloud') ? lang.name + ' (Premium)' : lang.name" x-bind:for="'lang-' + lang.slug"></label>
							</div>	
						</template>
					</div>
				</div>
				<div class="tw-mt-4">
					<button type="button" @click="enqueueBulk()"
						x-bind:disabled="loading || targetLanguages.length === 0"
						x-bind:class="{'tw-opacity-50 tw-cursor-not-allowed': loading || targetLanguages.length === 0}"
						class="tw-bg-green-500 tw-hover:bg-green-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded">
						<span x-show="!loading" x-text="`Enqueue translations`"></span>
						<span x-show="loading" class="tw-animate-spin dashicons dashicons-update"></span>
					</button>
				</div>
			</div>
		</form>
	</div>

</div>
