<?php
/**
 * Order Sync View
 *
 * Extracted from Dashboard_Controller::render_order_sync() so that the
 * controller remains a thin orchestration layer.  This file is a verbatim copy
 * of the previous markup with only minimal adjustments (namespacing + helper
 * calls).
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/pages/orders
 */

declare(strict_types=1);

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

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

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

/**
 * Class Order_Sync_View
 *
 * Handles the UI for the order sync page.
 */
class Order_Sync_View {

	/**
	 * Render the order-sync screen.
	 */
	public function render(): void {
		// Enqueue global admin assets already loaded by Dashboard_Controller.
		?>
		<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
			$header = new Header_View( 'orders' );
			$header->render();
			?>
			<div class="momcs-sync-content">
				<div class="momcs-sync-orders momcs-orders-modern">
					<!-- Notice about 24-hour limitation -->
					<?php if ( \MOMCS_Sync\Includes\Common\Utils\Utils::is_premium_plan() ) : ?>
						<div class="momcs-orders-notice">
							<span class="dashicons dashicons-info momcs-orders-notice-icon"></span>
							<p>
								<span class="momcs-text-accent-orange"><?php esc_html_e( 'Premium users can fetch orders from any custom date range. Use the date filters below to specify your range.', 'multi-channel-for-woocommerce' ); ?></span>
							</p>
						</div>
					<?php else : ?>
						<div class="momcs-orders-notice">
							<span class="dashicons dashicons-info momcs-orders-notice-icon"></span>
							<p>
								<?php esc_html_e( 'Please note that Fetch Orders button will only fetch the orders placed in Amazon in last 24 hours.', 'multi-channel-for-woocommerce' ); ?>
								<strong><?php esc_html_e( 'Upgrade to Premium for custom date ranges and background processing.', 'multi-channel-for-woocommerce' ); ?></strong>
							</p>
						</div>
					<?php endif; ?>

					<!-- Modern Page Header -->
					<div class="momcs-orders-header">
						<div class="momcs-orders-header-left">
							<h2 class="momcs-orders-title"><?php esc_html_e( 'Orders', 'multi-channel-for-woocommerce' ); ?></h2>
							<span class="momcs-orders-count" id="momcs-orders-count">0 <?php esc_html_e( 'orders', 'multi-channel-for-woocommerce' ); ?></span>
						</div>
						<div class="momcs-orders-header-right">
							<button type="button" id="momcs_fetch_orders" class="momcs-fetch-orders-btn">
								<span class="dashicons dashicons-download"></span>
								<?php esc_html_e( 'Fetch Orders', 'multi-channel-for-woocommerce' ); ?>
							</button>
						</div>
					</div>

					<!-- Modern Toolbar: Search + Filters -->
					<div class="momcs-orders-toolbar">
						<div class="momcs-toolbar-left">
							<!-- Search Input -->
							<div class="momcs-order-search-wrapper">
								<svg class="momcs-order-search-icon" 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="11" cy="11" r="8"></circle>
									<path d="m21 21-4.35-4.35"></path>
								</svg>
								<input type="text" id="momcs-order-search" class="momcs-order-search-input" placeholder="<?php esc_attr_e( 'Search orders...', 'multi-channel-for-woocommerce' ); ?>" autocomplete="off" />
								<div id="momcs-order-search-dropdown" class="momcs-order-search-dropdown"></div>
							</div>

							<!-- Filter Bar -->
							<div class="momcs-orders-filter-bar">
								<div class="momcs-filter-dropdown">
									<label class="momcs-filter-label" for="filter_status"><?php esc_html_e( 'Status', 'multi-channel-for-woocommerce' ); ?></label>
									<select name="filter_status" id="filter_status" class="momcs-filter-select">
										<option value=""><?php esc_html_e( 'All Statuses', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="Pending"><?php esc_html_e( 'Pending', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="Unshipped"><?php esc_html_e( 'Unshipped', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="Shipped"><?php esc_html_e( 'Shipped', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="Canceled"><?php esc_html_e( 'Canceled', 'multi-channel-for-woocommerce' ); ?></option>
									</select>
								</div>

								<div class="momcs-filter-dropdown">
									<label class="momcs-filter-label" for="filter_fulfillment"><?php esc_html_e( 'Fulfillment', 'multi-channel-for-woocommerce' ); ?></label>
									<select name="filter_fulfillment" id="filter_fulfillment" class="momcs-filter-select">
										<option value=""><?php esc_html_e( 'All Fulfillment', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="AFN"><?php esc_html_e( 'Amazon FBA', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="MFN"><?php esc_html_e( 'Merchant Fulfilled', 'multi-channel-for-woocommerce' ); ?></option>
									</select>
								</div>

								<!-- Date Range Inputs -->
								<?php if ( \MOMCS_Sync\Includes\Common\Utils\Utils::is_premium_plan() ) : ?>
									<input type="date" id="date_from" name="date_from" class="momcs-date-input" placeholder="<?php esc_attr_e( 'From Date', 'multi-channel-for-woocommerce' ); ?>" />
									<input type="date" id="date_to" name="date_to" class="momcs-date-input" placeholder="<?php esc_attr_e( 'To Date', 'multi-channel-for-woocommerce' ); ?>" />
								<?php else : ?>
									<input type="date" id="date_from" name="date_from" class="momcs-date-input" placeholder="<?php esc_attr_e( 'From Date (Filter Only)', 'multi-channel-for-woocommerce' ); ?>" title="<?php esc_attr_e( 'Date filters work for viewing orders only. Upgrade to Premium to fetch orders from custom date ranges.', 'multi-channel-for-woocommerce' ); ?>" />
									<input type="date" id="date_to" name="date_to" class="momcs-date-input" placeholder="<?php esc_attr_e( 'To Date (Filter Only)', 'multi-channel-for-woocommerce' ); ?>" title="<?php esc_attr_e( 'Date filters work for viewing orders only. Upgrade to Premium to fetch orders from custom date ranges.', 'multi-channel-for-woocommerce' ); ?>" />
								<?php endif; ?>

								<button type="button" id="filter-orders" class="momcs-filter-btn momcs-filter-btn-primary"><?php esc_html_e( 'Filter', 'multi-channel-for-woocommerce' ); ?></button>
							</div>
						</div>
					</div>

					<!-- Modern Pagination Top -->
					<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="orders_per_page">
								<option value="10">10</option>
								<option value="25">25</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</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>

					<!-- Modern Orders Table -->
					<div class="momcs-orders-table-wrapper">
						<table class="momcs-orders-table">
							<thead>
								<tr>
									<th class="column-order-details"><?php esc_html_e( 'Order Details', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-wc-status"><?php esc_html_e( 'WooCommerce Status', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-amazon-order-id"><?php esc_html_e( 'Amazon Order ID', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-amazon-status"><?php esc_html_e( 'Amazon Status', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-items"><?php esc_html_e( 'Items', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-total"><?php esc_html_e( 'Total', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-fulfillment"><?php esc_html_e( 'Fulfillment', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-created"><?php esc_html_e( 'Created', 'multi-channel-for-woocommerce' ); ?></th>
									<th class="column-actions"><?php esc_html_e( 'Actions', 'multi-channel-for-woocommerce' ); ?></th>
								</tr>
							</thead>
							<tbody id="momcs_orders_list">
								<tr class="no-items">
									<td class="colspanchange" colspan="9">
										<div class="momcs-orders-empty">
											<div class="momcs-orders-empty-icon">
												<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
													<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
													<circle cx="9" cy="7" r="4"></circle>
													<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
													<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
												</svg>
											</div>
											<h3><?php esc_html_e( 'No Orders Found', 'multi-channel-for-woocommerce' ); ?></h3>
											<p><?php esc_html_e( 'Use the Fetch Orders button to sync orders from Amazon.', 'multi-channel-for-woocommerce' ); ?></p>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<!-- Modern Pagination Bottom -->
					<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="orders_per_page_bottom">
								<option value="10">10</option>
								<option value="25">25</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</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>

					<!-- Progress Modal for Background Order Fetching (Premium Only) -->
					<?php if ( \MOMCS_Sync\Includes\Common\Utils\Utils::is_premium_plan() ) : ?>
						<div id="order-fetch-progress-modal-overlay" class="momcs-order-fetch-modal__overlay" aria-hidden="true"></div>
						<div id="order-fetch-progress-modal" class="momcs-order-fetch-modal" role="dialog" aria-modal="true" aria-labelledby="momcs-order-fetch-modal-title">
							<h3 id="momcs-order-fetch-modal-title" class="momcs-order-fetch-modal__title"><?php esc_html_e( 'Fetching Orders from Amazon', 'multi-channel-for-woocommerce' ); ?></h3>
							<p class="momcs-order-fetch-modal__lead"><?php esc_html_e( 'Please wait while we fetch your orders in the background...', 'multi-channel-for-woocommerce' ); ?></p>
							<div class="momcs-order-fetch-modal__track progress-bar-container">
								<div class="progress-bar-fill momcs-order-fetch-modal__fill"></div>
							</div>
							<p class="progress-text momcs-order-fetch-modal__status">
								<?php esc_html_e( 'Initializing...', 'multi-channel-for-woocommerce' ); ?>
							</p>
							<div class="momcs-order-fetch-modal__actions">
								<button type="button" id="close-progress-modal" class="button button-primary momcs-order-fetch-modal__close" style="display: none;">
									<?php esc_html_e( 'Close', 'multi-channel-for-woocommerce' ); ?>
								</button>
							</div>
						</div>
					<?php endif; ?>
				</div>
			</div>
		</div>
		<?php
	}
}
