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

$nonce = wp_create_nonce('polylai_nonce');
include('logs-modal.php');
?>
<script>
	window.polylai_nonce = "<?php echo $nonce ?>";
</script>


<div x-data="polylAiIData()" class="tw-mt-10 tw-mr-4" data-queue>
	<div x-show="showPurge" class="polylai-modal-bg" id="polylai-credits-license">
		<div class="polylai-modal-dialog">
			<div class="polylai-modal-header">
				<h4><?php _e('Confirm', 'ai-translator-for-polylang'); ?></h4>
				<span class="polylaitr-close dashicons dashicons-no" x-on:click="showPurge = false"></span>
			</div>
			<div class="polylai-modal-body">
				<p><?php _e('Do you want to delete old logs? This action won\'t delete any post or translated data.', 'ai-translator-for-polylang'); ?></p>
			</div>
			<div class="polylai-modal-footer">

				<?php $nonce = wp_create_nonce('polylai_credits_purge_history'); ?>
				<input type="hidden" name="polylai_credits_purge_history" value="<?php echo $nonce ?>">
	
				<span class="button" x-on:click="showPurge = false"><?php _e('Cancel', 'ai-translator-for-polylang'); ?></span>
				<input data-enter-credit-license class="button button-primary" type="button"
					value="<?php esc_attr_e('Purge', 'ai-translator-for-polylang'); ?>" />
			</div>
		</div>
	</div>
	<div class="tw-bg-white tw-p-6 tw-border tw-border-slate-200 tw-rounded-md">
		<h3><?php _e('Translations in progress', 'ai-translator-for-polylang'); ?></h3>

		<table class="tw-w-full polylai-activity-table" x-show="activity != null">
			<thead>
				<tr>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Date', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Post', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('From', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('To', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Type', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Status', 'ai-translator-for-polylang'); ?></th>
				</tr>
			</thead>
			<tbody>
				<template x-for="line in activity">
					<tr>
						<td x-text="line.date"></td>
						<td x-text="line.title"></td>
						<td x-text="line.lang_from"></td>
						<td x-text="line.lang_to"></td>
						<td x-text="line.service"></td>
						<td>
							<span x-show="line.status == 'translating'"
								class="tw-animate-pulse dashicons dashicons-translation"></span>
							<span x-text="line.statusLabel"></span>
							
							<template x-if="line.cloud_guid || line.request_id">
								<div class="tw-mt-1 tw-p-0 tw-text-[10px] tw-text-slate-500">
									<template x-if="line.cloud_guid">
										<span><?php _e('Response ID:', 'ai-translator-for-polylang'); ?> <em x-text="line.cloud_guid"></em></span>
									</template>
									<template x-if="line.request_id">
										<span><?php _e('Request ID:', 'ai-translator-for-polylang'); ?> <em x-text="line.request_id"></em></span>
									</template>
								</div>
							</template>
						</td>
					</tr>
				</template>
			</tbody>
		</table>

		<p x-show="activity == null">
			<span class="tw-animate-spin dashicons dashicons-image-rotate"></span> <?php _e('Loading translation queue....', 'ai-translator-for-polylang'); ?>
		</p>

		<p x-show="activity?.length == 0">
			<?php _e('No translation queued', 'ai-translator-for-polylang'); ?>
		</p>
		
		<div class="tw-mt-4" x-show="activity?.length > 0">
			<button @click="stopAllTranslations" class="button button-secondary">
				<?php _e('Stop all translations', 'ai-translator-for-polylang'); ?>
			</button>
		</div>
	</div>
	<div class="tw-bg-white tw-p-6 tw-mt-4 tw-border tw-border-slate-200 tw-rounded-md">
		<h3><?php _e('Translations history', 'ai-translator-for-polylang'); ?></h3>

		<table class="tw-w-full polylai-activity-table" x-show="translations != null">
			<thead>
				<tr>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Date', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Post', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('From', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('To', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Type', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Used tokens', 'ai-translator-for-polylang'); ?></th>
					<th class="tw-text-left tw-border-b-2 tw-border-slate-500"><?php _e('Status', 'ai-translator-for-polylang'); ?></th>					
				</tr>
			</thead>
			<tbody>
				<template x-for="(line, index) in translations" :key="index">
					<tr>
						<td x-text="line.date"></td>
						<td x-text="line.title"></td>
						<td x-text="line.lang_from"></td>
						<td x-text="line.lang_to"></td>
						<td x-text="line.service"></td>
						<td x-text="line.used_tokens"></td>
						<td>
							<span x-show="line.status == 'complete'"
								class="tw-text-green-500 dashicons dashicons-yes"></span>
							<span x-show="line.status == 'error'"
								class="dashicons tw-text-red-500 dashicons-warning"></span>
							<span x-text="line.statusLabel"></span>
							<template x-show="line.error_code">
								<span x-text="line.error_code"></span>
								<template x-for="(field, fi) in line.fields" :key="fi">
									<div class="polylai-chip tw-mt-1 tw-flex tw-gap-1">
										<span x-text="field.field"></span>: 
										<span x-text="field.total_planned_tokens"></span>
										<?php _e('Planned tokens', 'ai-translator-for-polylang'); ?>
									</div>
								</template>
							</template>

							<div class="tw-mt-1 tw-p-0" 
								x-show="(line.cloud_guid || line.request_id)">
								<template x-if="line.cloud_guid">
									<span class="polylai-chip"><?php _e('Response ID:', 'ai-translator-for-polylang'); ?> <em x-text="line.cloud_guid"></em></span>
								</template>
								<template x-if="line.request_id">
									<span class="polylai-chip"><?php _e('Request ID:', 'ai-translator-for-polylang'); ?> <em x-text="line.request_id"></em></span>
								</template>
							</div>
						</td>
					</tr>
				</template>
			</tbody>
		</table>

		<p x-show="translations == null">
			<span class="tw-animate-spin dashicons dashicons-image-rotate"></span>
			<?php _e('Loading translation history....', 'ai-translator-for-polylang'); ?>
		</p>

		<p x-show="translations?.length == 0">
			<?php _e('No translations', 'ai-translator-for-polylang'); ?>
		</p>
		
		<!-- Pagination controls -->
		<div class="tw-flex tw-justify-between tw-items-center tw-mt-4" x-show="totalPages > 1">
			<div class="tw-flex tw-items-center tw-gap-2">
				<button class="button" @click="goToPage(1)" :disabled="currentPage === 1">
					<?php _e('&laquo; First', 'ai-translator-for-polylang'); ?>
				</button>
				<button class="button" @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">
					<?php _e('&lsaquo; Previous', 'ai-translator-for-polylang'); ?>
				</button>
				
				<span class="tw-mx-2">
					<?php _e('Page', 'ai-translator-for-polylang'); ?> <span x-text="currentPage"></span> <?php _e('of', 'ai-translator-for-polylang'); ?> <span x-text="totalPages"></span>
					(<span x-text="totalItems"></span> <?php _e('total items', 'ai-translator-for-polylang'); ?>)
				</span>
				
				<button class="button" @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">
					<?php _e('Next &rsaquo;', 'ai-translator-for-polylang'); ?>
				</button>
				<button class="button" @click="goToPage(totalPages)" :disabled="currentPage === totalPages">
					<?php _e('Last &raquo;', 'ai-translator-for-polylang'); ?>
				</button>
			</div>
			<div>
				<label>
					<?php _e('Items per page:', 'ai-translator-for-polylang'); ?>
					<select x-model.number="perPage" @change="listTranslations(1)">
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="25">25</option>
						<option value="50">50</option>
					</select>
				</label>
			</div>
		</div>
	</div>
</div>

<div class="tw-mt-4">
<a class="button" data-polylai-open-modal="polylai-modal-logs"><?php _e('Show logs', 'ai-translator-for-polylang'); ?></a>
</div>
