<?php
/**
 * CSV preview modal view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Modals
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Modals;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Helpers\IconHelper;


/**
 * Csv Preview Modal View.
 *
 * @since 1.0.0
 */
class CsvPreviewModalView extends AbstractView implements ViewInterface {

	/**
	 * Icon helper instance.
	 *
	 * @since 1.0.0
	 *
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Constructor.
	 *
	 * @since 1.0.0
	 *
	 * @param IconHelper $icon_helper Icon helper.
	 */
	public function __construct( IconHelper $icon_helper ) {
		$this->icon_helper = $icon_helper;
	}
	public function render( array $args = [] ): void {
		?>
		<div
			x-data="{
				showModal: false,
				csvData: null,
				selectedFile: null,
				columnMappings: null,
				mappedData: null,

				applyMappings() {
					if (!this.csvData || !this.columnMappings) return;

					// Apply column mappings to preview data.
					this.mappedData = (this.csvData.preview || []).map(row => {
						const mapped = {};
						Object.keys(this.columnMappings).forEach(csvColumn => {
							const targetField = this.columnMappings[csvColumn];
							if (targetField && targetField !== 'skip' && targetField.trim() !== '') {
								mapped[targetField] = row[csvColumn] || '';
							}
						});
						return mapped;
					});
				}
			}"
			x-on:show-csv-preview-modal.window="showModal = true; csvData = $event.detail.csvData; selectedFile = $event.detail.selectedFile; columnMappings = $event.detail.columnMappings; applyMappings();"
		>
			<template x-teleport="body">
				<div
					x-show="showModal"
					x-on:keydown.escape.window="showModal = false"
					class="fixed inset-x-0 z-[99999] overflow-y-auto" style="top: var(--wp-admin--admin-bar--height, 32px); height: calc(100vh - var(--wp-admin--admin-bar--height, 32px))"
					aria-labelledby="modal-title"
					role="dialog"
					aria-modal="true"
					x-cloak
					x-trap.noscroll.inert="showModal"
				>
					<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
						<!-- Backdrop -->
						<div
							x-show="showModal"
							x-transition:enter="ease-out duration-300"
							x-transition:enter-start="opacity-0"
							x-transition:enter-end="opacity-100"
							x-transition:leave="ease-in duration-200"
							x-transition:leave-start="opacity-100"
							x-transition:leave-end="opacity-0"
							class="fixed inset-x-0 transition-opacity z-[99998]" style="top: var(--wp-admin--admin-bar--height, 32px); height: calc(100vh - var(--wp-admin--admin-bar--height, 32px))"
							aria-hidden="true"
							x-on:click="showModal = false"
						>
							<div class="absolute inset-0 bg-slate-900/40"></div>
						</div>

						<!-- Modal Content -->
						<div
							x-show="showModal"
							x-transition:enter="ease-out duration-300"
							x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
							x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
							x-transition:leave="ease-in duration-200"
							x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
							x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
							x-on:click.outside="showModal = false"
							class="relative z-[99999] transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-6xl p-6 min-w-[800px] max-h-[80vh] overflow-y-auto"
						>
							<!-- Close Button -->
							<button x-on:click="showModal = false" type="button" class="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none z-10">
								<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" class="h-6 w-6">
									<path d="M18 6 6 18"></path>
									<path d="m6 6 12 12"></path>
								</svg>
								<span class="sr-only"><?php esc_html_e( 'Close', 'rewardswp' ); ?></span>
							</button>

							<!-- Header -->
							<div class="mb-6">
								<h3 class="text-xl leading-none font-semibold mb-2" id="modal-title">
									<?php esc_html_e( 'Data Preview - Sample of Mapped Data', 'rewardswp' ); ?>
								</h3>
								<p class="text-gray-500 text-base">
									<?php esc_html_e( 'Review a sample of your mapped CSV data before proceeding with the import. This shows only the first few rows as a preview.', 'rewardswp' ); ?>
								</p>
							</div>

							<!-- Stats -->
							<div class="mb-4 text-right">
								<p class="text-xs text-gray-500 uppercase tracking-wide">
									<?php esc_html_e( 'Showing', 'rewardswp' ); ?>
									<span x-text="(csvData?.preview || []).length"></span> <?php esc_html_e( 'of', 'rewardswp' ); ?> <span x-text="csvData?.total_rows || 0"></span> <?php esc_html_e( 'total rows', 'rewardswp' ); ?>
								</p>
							</div>

							<!-- Table -->
							<div class="mb-6 overflow-x-auto border border-gray-200 rounded-md">
								<table class="min-w-full divide-y divide-gray-200">
									<thead class="bg-gray-50">
										<tr>
											<template x-for="header in Object.keys(mappedData?.[0] || {})" x-key="header">
												<th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" x-text="header.replace('_', ' ').toUpperCase()"></th>
											</template>
										</tr>
									</thead>
									<tbody class="bg-white divide-y divide-gray-200">
										<template x-for="(row, index) in mappedData || []" x-key="index">
											<tr x-bind:class="{ 'bg-gray-50': index % 2 === 1 }">
												<template x-for="(value, key) in row" x-key="key">
													<td class="px-3 py-3 text-sm text-gray-900 max-w-48 truncate"
														x-text="value && value.trim() !== '' ? value : 'empty'"
														x-bind:title="value || ''"
														x-bind:class="value && value.trim() !== '' ? '' : 'text-gray-400 italic'">
													</td>
												</template>
											</tr>
										</template>
									</tbody>
								</table>
							</div>

							<!-- Footer -->
							<div class="flex items-center justify-end pt-4 border-t border-gray-200">
								<button
									type="button"
									x-on:click="showModal = false"
									class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
								>
									<?php esc_html_e( 'Done', 'rewardswp' ); ?>
								</button>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
		<?php
	}
}
