<?php
/**
 * Amazon Authorization View
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/pages/supplier/authorization
 * @author     miniOrange
 */

declare(strict_types=1);

namespace MOMCS_Sync\Views\Src\Common\Pages\Supplier\Authorization;

use MOMCS_Sync\Includes\Common\Utils\Marketplace_IDs;

// Explicitly require the interface file.
require_once __DIR__ . DIRECTORY_SEPARATOR . 'interface-authorization-view.php';
require_once MOMCS_PLUGIN_DIR . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'common' . DIRECTORY_SEPARATOR . 'utils' . DIRECTORY_SEPARATOR . 'class-marketplace-ids.php';

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

/**
 * Class for rendering the Amazon authorization view.
 */
class Amazon_Authorization_View implements Authorization_View_Interface {

	/**
	 * Enqueue external assets extracted from inline blocks.
	 */
	private function enqueue_assets(): void {
		wp_enqueue_style( 'flag-icons', 'https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css', array(), '7.2.3' );
		wp_enqueue_style( 'momcs-auth', MOMCS_PLUGIN_URL . 'assets/css/amazon-authorization.css', array(), MOMCS_VERSION );
		wp_enqueue_script( 'momcs-auth', MOMCS_PLUGIN_URL . 'assets/js/amazon-authorization.js', array( 'jquery' ), MOMCS_VERSION, true );
		wp_localize_script(
			'momcs-auth',
			'momcs_auth',
			array(
				'ajax_url'        => admin_url( 'admin-ajax.php' ),
				'nonce_authorize' => wp_create_nonce( 'momcs_sync_authorize_nonce' ),
				'nonce_callback'  => wp_create_nonce( 'momcs_sync_callback_nonce' ),
				'strings'         => array(
					'connection_required' => esc_html__( 'Connection name is required.', 'multi-channel-for-woocommerce' ),
					'region_required'     => esc_html__( 'Region is required.', 'multi-channel-for-woocommerce' ),
					'fix_errors'          => esc_html__( 'Please fix the following errors before continuing:', 'multi-channel-for-woocommerce' ),
				),
			)
		);
	}

	/**
	 * Render the authorization view.
	 *
	 * @return void
	 */
	public function render() {
		// Enqueue extracted assets.
		$this->enqueue_assets();
		$nonce          = wp_create_nonce( 'momcs_sync_authorize_nonce' );
		$callback_nonce = wp_create_nonce( 'momcs_sync_callback_nonce' );
		?>
		<div class="momcs-auth-container">
			<h2 class="momcs-auth-title-with-tooltip">
				<?php esc_html_e( 'Connect to Amazon Seller Central', 'multi-channel-for-woocommerce' ); ?>
				<span class="momcs-field-tooltip-wrapper momcs-auth-heading-tooltip">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon" aria-hidden="true"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Connect your Amazon Seller Central account to sync products from Amazon to WooCommerce.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</h2>

			<form id="momcs-auth-form">
				<!-- Validation Error Container. -->
				<div id="momcs-auth-validation-container" style="display:none;"></div>
				<div class="momcs-auth-form-group">
					<label for="connection_name" class="momcs-auth-label">
						<?php esc_html_e( 'Connection Name', 'multi-channel-for-woocommerce' ); ?> <span class="required">*</span>
					</label>
					<input type="text" id="connection_name" name="connection_name" class="momcs-auth-input" required 
						placeholder="<?php esc_attr_e( 'e.g., Amazon US Store', 'multi-channel-for-woocommerce' ); ?>">
					<span id="connection_name_error" class="momcs-sync-error" style="display:none;color:#dc3232;"></span>
					<p class="momcs-auth-description-small">
						<?php esc_html_e( 'A friendly name to identify this connection.', 'multi-channel-for-woocommerce' ); ?>
					</p>
				</div>
				
				<div class="momcs-auth-form-group">
					<label for="region" class="momcs-auth-label">
						<?php esc_html_e( 'Region', 'multi-channel-for-woocommerce' ); ?> <span class="required">*</span>
					</label>
					<select id="region" name="region" class="momcs-auth-input" required>
						<option value=""><?php esc_html_e( '-- Select Region --', 'multi-channel-for-woocommerce' ); ?></option>
						<?php
						$marketplace_options = Marketplace_IDs::get_marketplace_options();
						foreach ( $marketplace_options as $marketplace_id => $label ) {
							echo '<option value="' . esc_attr( $marketplace_id ) . '">' . esc_html( $label ) . '</option>';
						}
						?>
					</select>
					<span id="region_error" class="momcs-sync-error" style="display:none;color:#dc3232;"></span>
					<p class="momcs-auth-description-small">
						<?php esc_html_e( 'The Amazon marketplace region you want to connect to.', 'multi-channel-for-woocommerce' ); ?>
					</p>
				</div>
				
				<div class="momcs-auth-status">
					<div class="momcs-auth-button-container">
						<button id="momcs-auth-button" class="button button-primary" type="button">
							<?php esc_html_e( 'Authorize', 'multi-channel-for-woocommerce' ); ?>
						</button>
					</div>
				</div>
			</form>
			
			<!-- Authorization loader and success message. -->
			<div id="momcs-auth-loader" style="display: none;">
				<div class="momcs-auth-loader-spinner"></div>
				<p><?php esc_html_e( 'Connecting to Amazon...', 'multi-channel-for-woocommerce' ); ?></p>
			</div>
			
			<div id="momcs-auth-success" style="display: none;">
				<div class="momcs-auth-success">
					<span class="dashicons dashicons-yes-alt"></span>
					<span><?php esc_html_e( 'Connected to Amazon Seller Central', 'multi-channel-for-woocommerce' ); ?></span>
				</div>
				
				<div class="momcs-auth-next-steps">
					<p><?php esc_html_e( 'Your Amazon account has been connected successfully! Click Next at the bottom of the page to continue.', 'multi-channel-for-woocommerce' ); ?></p>
				</div>
			</div>
		</div>
		
		<?php
	}
}
