<?php
/**
 * Sync Audits View
 *
 * Renders the Sync Audits page with a left-sidebar navigation
 * (Product Sync / Order Sync each with Manual and Scheduled sub-items)
 * and a content area with the dynamic audit table.
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/pages/queue
 */

declare(strict_types=1);

namespace MOMCS_Sync\Views\Src\Common\Pages\Queue;

use MOMCS_Sync\Views\Src\Common\Components\Header_View;
use MOMCS_Sync\Includes\Common\Utils\Utils;

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

/**
 * Class Sync_Queue_View
 *
 * Handles the UI for the sync audits page.
 */
class Sync_Queue_View {

	/**
	 * Enqueue CSS & JS specific to the Sync Audits page.
	 */
	private function enqueue_assets(): void {
		// CSS - Load modern styles with dependency on product-list-modern for design tokens.
		wp_enqueue_style( 'momcs-product-list-modern', MOMCS_PLUGIN_URL . 'assets/css/product-list-modern.css', array( 'momcs-sync-admin' ), MOMCS_VERSION );
		wp_enqueue_style( 'momcs-sync-queue', MOMCS_PLUGIN_URL . 'assets/css/sync-queue.css', array( 'momcs-product-list-modern' ), MOMCS_VERSION );
		wp_enqueue_style( 'momcs-sync-queue-modern', MOMCS_PLUGIN_URL . 'assets/css/sync-queue-modern.css', array( 'momcs-product-list-modern', 'momcs-sync-queue' ), MOMCS_VERSION );
		// JS (depends on core admin script so that shared libs are present).
		wp_enqueue_script( 'momcs-sync-queue', MOMCS_PLUGIN_URL . 'assets/js/sync-queue.js', array( 'jquery', 'momcs-sync-admin' ), MOMCS_VERSION, true );

		// Pass dedicated nonce and column labels for dynamic table headers per tab.
		wp_localize_script(
			'momcs-sync-queue',
			'momcs_sync_queue',
			array(
				'ajaxurl' => admin_url( 'admin-ajax.php' ),
				'nonce'   => wp_create_nonce( \MOMCS_Sync\Includes\Common\Constants\Plugin_Constants::NONCE_SYNC_QUEUE ),
				'cols'    => array(
					'channelMarketplace' => __( 'Channel / Marketplace', 'multi-channel-for-woocommerce' ),
					'createdOn'          => __( 'Created On', 'multi-channel-for-woocommerce' ),
					'status'             => __( 'Status', 'multi-channel-for-woocommerce' ),
					'details'            => __( 'Details', 'multi-channel-for-woocommerce' ),
					'direction'          => __( 'Direction', 'multi-channel-for-woocommerce' ),
					'mode'               => __( 'Mode', 'multi-channel-for-woocommerce' ),
					'channel'            => __( 'Channel', 'multi-channel-for-woocommerce' ),
					'type'               => __( 'Type', 'multi-channel-for-woocommerce' ),
					'fetched'            => __( 'Fetched', 'multi-channel-for-woocommerce' ),
					'created'            => __( 'Created', 'multi-channel-for-woocommerce' ),
					'failed'             => __( 'Failed', 'multi-channel-for-woocommerce' ),
					'skipped'            => __( 'Skipped', 'multi-channel-for-woocommerce' ),
				),
			)
		);
	}

	/**
	 * Render the sync audits view.
	 *
	 * @return void
	 */
	public function render(): void {
		$this->enqueue_assets();
		?>
		<div class="wrap momcs-sync-wrap">
			<h1 class="screen-reader-text"><?php esc_html_e( 'Multi-channel for WooCommerce', 'multi-channel-for-woocommerce' ); ?></h1>
			<?php ( new Header_View( 'queue' ) )->render(); ?>
			<div class="momcs-sync-content">
				<!-- Modern Page Header -->
				<div class="momcs-queue-header">
					<div class="momcs-queue-header-left">
						<h2 class="momcs-queue-title"><?php esc_html_e( 'Sync Audits', 'multi-channel-for-woocommerce' ); ?></h2>
						<span class="momcs-queue-count" id="momcs-queue-count">0 <?php esc_html_e( 'jobs', 'multi-channel-for-woocommerce' ); ?></span>
					</div>
				</div>

				<?php if ( ! Utils::is_premium_plan() ) : ?>
				<!-- Notice Box (non-premium: last 10 audits only) -->
				<div class="momcs-orders-notice">
					<p>
						<span class="dashicons dashicons-info"></span>
						<?php esc_html_e( 'Please note that only last 10 audits will be shown.', 'multi-channel-for-woocommerce' ); ?>
					</p>
				</div>
				<?php endif; ?>

				<!-- 2-column layout: Left Nav + Content -->
				<div class="momcs-audit-layout">
					<!-- Left Sidebar Nav -->
					<nav class="momcs-audit-sidebar">
						<div class="momcs-audit-nav-group">
							<div class="momcs-audit-nav-header">
								<svg class="momcs-audit-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
								<?php esc_html_e( 'Product Sync', 'multi-channel-for-woocommerce' ); ?>
							</div>
							<button class="momcs-audit-nav-item active" data-tab="product_manual" type="button">
								<?php esc_html_e( 'Manual Sync', 'multi-channel-for-woocommerce' ); ?>
							</button>
							<button class="momcs-audit-nav-item" data-tab="product_scheduled" type="button">
								<?php esc_html_e( 'Scheduled Sync', 'multi-channel-for-woocommerce' ); ?>
							</button>
						</div>
						<div class="momcs-audit-nav-group">
							<div class="momcs-audit-nav-header">
								<svg class="momcs-audit-nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
								<?php esc_html_e( 'Order Sync', 'multi-channel-for-woocommerce' ); ?>
							</div>
							<button class="momcs-audit-nav-item" data-tab="order_manual" type="button">
								<?php esc_html_e( 'Manual Sync', 'multi-channel-for-woocommerce' ); ?>
							</button>
							<button class="momcs-audit-nav-item" data-tab="order_scheduled" type="button">
								<?php esc_html_e( 'Scheduled Sync', 'multi-channel-for-woocommerce' ); ?>
							</button>
						</div>
					</nav>

					<!-- Content Area -->
					<div class="momcs-audit-content">
						<!-- Top Pagination -->
						<div class="momcs-pagination-wrapper top" id="momcs-pagination-top" style="display: none;">
							<div class="momcs-pagination-per-page">
								<span><?php esc_html_e( 'Show', 'multi-channel-for-woocommerce' ); ?></span>
								<select class="momcs-per-page-select" id="momcs-per-page-top">
									<?php foreach ( array( 10, 25, 50, 100 ) as $option ) : ?>
										<option value="<?php echo esc_attr( $option ); ?>" <?php selected( 10, $option ); ?>>
											<?php echo esc_html( $option ); ?>
										</option>
									<?php endforeach; ?>
								</select>
								<span><?php esc_html_e( 'entries', 'multi-channel-for-woocommerce' ); ?></span>
							</div>
							<div class="momcs-pagination-info" id="momcs-pagination-info-top"></div>
							<div class="momcs-pagination-nav" id="momcs-pagination-nav-top"></div>
						</div>

						<!-- Card-Style Table Container -->
						<div class="momcs-queue-table-container">
							<table class="momcs-queue-table-modern" id="momcs_sync_queue_table">
								<thead>
									<tr>
										<th><?php esc_html_e( 'Direction', 'multi-channel-for-woocommerce' ); ?></th>
										<th><?php esc_html_e( 'Mode', 'multi-channel-for-woocommerce' ); ?></th>
										<th><?php esc_html_e( 'Channel / Marketplace', 'multi-channel-for-woocommerce' ); ?></th>
										<th><?php esc_html_e( 'Created On', 'multi-channel-for-woocommerce' ); ?></th>
										<th><?php esc_html_e( 'Status', 'multi-channel-for-woocommerce' ); ?></th>
										<th><?php esc_html_e( 'Details', 'multi-channel-for-woocommerce' ); ?></th>
									</tr>
								</thead>
								<tbody>
									<?php for ( $i = 0; $i < 5; $i++ ) : ?>
										<tr class="momcs-shimmer-row">
											<td><div class="momcs-shimmer"></div></td>
											<td><div class="momcs-shimmer"></div></td>
											<td><div class="momcs-shimmer"></div></td>
											<td><div class="momcs-shimmer"></div></td>
											<td><div class="momcs-shimmer"></div></td>
											<td><div class="momcs-shimmer"></div></td>
										</tr>
									<?php endfor; ?>
								</tbody>
							</table>
						</div>

						<!-- Bottom Pagination -->
						<div class="momcs-pagination-wrapper bottom" id="momcs-pagination-bottom" style="display: none;">
							<div class="momcs-pagination-per-page">
								<span><?php esc_html_e( 'Show', 'multi-channel-for-woocommerce' ); ?></span>
								<select class="momcs-per-page-select" id="momcs-per-page-bottom">
									<?php foreach ( array( 10, 25, 50, 100 ) as $option ) : ?>
										<option value="<?php echo esc_attr( $option ); ?>" <?php selected( 10, $option ); ?>>
											<?php echo esc_html( $option ); ?>
										</option>
									<?php endforeach; ?>
								</select>
								<span><?php esc_html_e( 'entries', 'multi-channel-for-woocommerce' ); ?></span>
							</div>
							<div class="momcs-pagination-info" id="momcs-pagination-info-bottom"></div>
							<div class="momcs-pagination-nav" id="momcs-pagination-nav-bottom"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
