<?php
/**
 * HJCyberX Checkout for Paddle Lite Documentation.
 *
 * Provides a beautifully designed setup guide inside the WooCommerce admin area.
 *
 * @package PaddleKonnect_Lite
 */

defined( 'ABSPATH' ) || exit;

/**
 * Class PaddleKonnect_Lite_Documentation.
 */
class PaddleKonnect_Lite_Documentation {

	/**
	 * Function init.
	 */
	public static function init(): void {
		add_action( 'admin_menu', array( __CLASS__, 'add_documentation_page' ), 55 );
		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_scripts' ) );
	}

	/**
	 * Function enqueue_scripts.
	 */
	public static function enqueue_scripts( $hook ): void {
		if ( 'woocommerce_page_paddlekonnect-lite-guide' !== $hook ) {
			return;
		}

		wp_enqueue_style(
			'paddlekonnect-lite-admin-doc-style',
			PADDLEKONNECT_LITE_PLUGIN_URL . 'assets/css/admin-documentation.css',
			array(),
			PADDLEKONNECT_LITE_VERSION
		);

		wp_enqueue_script(
			'paddlekonnect-lite-admin-doc-script',
			PADDLEKONNECT_LITE_PLUGIN_URL . 'assets/js/admin-documentation.js',
			array(),
			PADDLEKONNECT_LITE_VERSION,
			true
		);

		wp_localize_script(
			'paddlekonnect-lite-admin-doc-script',
			'pkLiteData',
			array(
				'copiedText' => __( 'Copied!', 'hjcyberx-checkout-for-paddle-lite' ),
			)
		);
	}

	/**
	 * Function add_documentation_page.
	 */
	public static function add_documentation_page(): void {
		add_submenu_page(
			'woocommerce',
			__( 'Paddle Setup Guide', 'hjcyberx-checkout-for-paddle-lite' ),
			__( 'Paddle Guide', 'hjcyberx-checkout-for-paddle-lite' ),
			'manage_woocommerce',
			'paddlekonnect-lite-guide',
			array( __CLASS__, 'render_documentation_page' )
		);
	}

	/**
	 * Function render_documentation_page.
	 */
	public static function render_documentation_page(): void {
		$webhook_url = rest_url( 'paddlekonnect/v1/webhook' );
		$pro_url     = 'https://plugins.hjcyberx.com/plugins/hjcyberx-checkout-paddle#features';
		?>

		<div class="pk-doc-wrap">
			<div class="pk-header">
				<h1><?php esc_html_e( 'HJCyberX Checkout for Paddle Lite Setup Guide', 'hjcyberx-checkout-for-paddle-lite' ); ?> <span class="pk-badge pk-badge-lite"><?php esc_html_e( 'Lite version', 'hjcyberx-checkout-for-paddle-lite' ); ?></span></h1>
				<p><?php esc_html_e( 'Thank you for choosing the Lite version. Follow this guide to set up one-time checkouts and sync webhook transactions with your Paddle Billing account.', 'hjcyberx-checkout-for-paddle-lite' ); ?></p>
			</div>

			<div class="pk-body">
				<!-- Navigation Sidebar -->
				<div class="pk-nav">
					<button class="pk-nav-item active" onclick="pkSwitchTab(event, 'pk-tab-api')">
						<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 10H7v-2h7v2zm3-4H7V7h10v2zm0 8H7v-2h10v2z"/></svg>
						<?php esc_html_e( 'API Credentials', 'hjcyberx-checkout-for-paddle-lite' ); ?>
					</button>
					<button class="pk-nav-item" onclick="pkSwitchTab(event, 'pk-tab-webhooks')">
						<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
						<?php esc_html_e( 'Webhooks Setup', 'hjcyberx-checkout-for-paddle-lite' ); ?>
					</button>
					<button class="pk-nav-item" onclick="pkSwitchTab(event, 'pk-tab-products')">
						<svg viewBox="0 0 24 24"><path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10zm1-15h-2v6h2V7zm0 8h-2v2h2v-2z"/></svg>
						<?php esc_html_e( 'Product Mapping', 'hjcyberx-checkout-for-paddle-lite' ); ?>
					</button>
					<button class="pk-nav-item" onclick="pkSwitchTab(event, 'pk-tab-features')">
						<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/></svg>
						<?php esc_html_e( 'Lite vs Pro Matrix', 'hjcyberx-checkout-for-paddle-lite' ); ?>
					</button>
				</div>

				<!-- Content Area -->
				<div class="pk-content">
					<!-- API TAB -->
					<div id="pk-tab-api" class="pk-tab-pane active">
						<h2><?php esc_html_e( 'Connecting API Credentials', 'hjcyberx-checkout-for-paddle-lite' ); ?></h2>
						<p><?php esc_html_e( 'To connect the Lite checkout, retrieve your credentials from your Paddle developer account.', 'hjcyberx-checkout-for-paddle-lite' ); ?></p>
						
						<ul class="pk-steps">
							<li class="pk-step-item">
								<span class="pk-step-num">1</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Go to payments settings', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Navigate to WooCommerce -> Settings -> Payments -> HJCyberX Checkout for Paddle Lite.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
							<li class="pk-step-item">
								<span class="pk-step-num">2</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Seller ID & API Key', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Input your Seller ID and API Key from Paddle (Developer -> Account Settings & API Keys).', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
							<li class="pk-step-item">
								<span class="pk-step-num">3</span>
								<div class="pk-step-content">
									<strong>Client Token</strong>
									<?php esc_html_e( 'Copy the Client Side Token from Developer -> Authentication in Paddle and input it in the Client Token field.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
						</ul>
					</div>

					<!-- WEBHOOKS TAB -->
					<div id="pk-tab-webhooks" class="pk-tab-pane">
						<h2><?php esc_html_e( 'Webhooks Setup', 'hjcyberx-checkout-for-paddle-lite' ); ?></h2>
						<p><?php esc_html_e( 'Webhooks notify your site to complete and mark orders as paid when transaction events are completed in Paddle.', 'hjcyberx-checkout-for-paddle-lite' ); ?></p>
						
						<h3><?php esc_html_e( 'Your Webhook REST Endpoint URL', 'hjcyberx-checkout-for-paddle-lite' ); ?></h3>
						<div class="pk-code-box">
							<span class="pk-code-text" id="pk-webhook-url"><?php echo esc_url( $webhook_url ); ?></span>
							<button class="pk-copy-btn" onclick="pkCopyToClipboard('pk-webhook-url')"><?php esc_html_e( 'Copy URL', 'hjcyberx-checkout-for-paddle-lite' ); ?></button>
						</div>

						<ul class="pk-steps">
							<li class="pk-step-item">
								<span class="pk-step-num">1</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Create Webhook Destination', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Go to Developer -> Webhooks in Paddle, click "New Destination", and paste the endpoint URL above.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
							<li class="pk-step-item">
								<span class="pk-step-num">2</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Lite Event Selection', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Check the following event callbacks in your destination configuration:', 'hjcyberx-checkout-for-paddle-lite' ); ?>
									<div style="margin-top: 8px; font-weight: 600; font-family: monospace;">
										- transaction.completed
									</div>
								</div>
							</li>
							<li class="pk-step-item">
								<span class="pk-step-num">3</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Webhook Secret', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Copy the webhook secret starting with `pkn_` from the destination and paste it in Webhook Secret in WooCommerce settings.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
						</ul>
					</div>

					<!-- PRODUCT MAPPING TAB -->
					<div id="pk-tab-products" class="pk-tab-pane">
						<h2><?php esc_html_e( 'Product Configuration & Mapping', 'hjcyberx-checkout-for-paddle-lite' ); ?></h2>
						<p><?php esc_html_e( 'In the Lite version, you manually connect simple WooCommerce products to one-time prices created in Paddle.', 'hjcyberx-checkout-for-paddle-lite' ); ?></p>
						
						<ul class="pk-steps">
							<li class="pk-step-item">
								<span class="pk-step-num">1</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Copy Price ID', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Copy the Price ID (pri_xxxxxx) representing your product price from Paddle Catalog.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
							<li class="pk-step-item">
								<span class="pk-step-num">2</span>
								<div class="pk-step-content">
									<strong><?php esc_html_e( 'Assign Price ID to WooCommerce Product', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong>
									<?php esc_html_e( 'Edit your WooCommerce product, scroll down to Product Data, click the Paddle tab, and paste the Price ID.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
								</div>
							</li>
						</ul>

						<div class="pk-alert pk-alert-warn">
							<strong><?php esc_html_e( 'Lite Limitations:', 'hjcyberx-checkout-for-paddle-lite' ); ?></strong> <?php esc_html_e( 'Variations bulk synchronization, direct checkout shortcodes, and subscription mapping are disabled in the Lite version.', 'hjcyberx-checkout-for-paddle-lite' ); ?>
						</div>
					</div>

					<!-- FEATURES TAB -->
					<div id="pk-tab-features" class="pk-tab-pane">
						<h2><?php esc_html_e( 'Lite vs Pro Feature Comparison', 'hjcyberx-checkout-for-paddle-lite' ); ?></h2>
						<p><?php esc_html_e( 'Check out what features you unlock when upgrading your HJCyberX Checkout for Paddle Lite gateway to the Pro version:', 'hjcyberx-checkout-for-paddle-lite' ); ?></p>
						
						<table class="wp-list-table widefat fixed striped" style="margin: 20px 0; border: 1px solid var(--pk-border); border-radius: 8px; border-spacing: 0; border-collapse: separate; overflow: hidden;">
							<thead>
								<tr style="background: #f8fafc;">
									<th style="padding: 12px 15px; font-weight: bold; border-bottom: 1px solid var(--pk-border);"><?php esc_html_e( 'Feature Description', 'hjcyberx-checkout-for-paddle-lite' ); ?></th>
									<th style="padding: 12px 15px; text-align: center; border-bottom: 1px solid var(--pk-border);"><?php esc_html_e( 'Lite (Free)', 'hjcyberx-checkout-for-paddle-lite' ); ?></th>
									<th style="padding: 12px 15px; text-align: center; background: #e0f2fe; color: #0369a1; border-bottom: 1px solid var(--pk-border); font-weight: bold;"><?php esc_html_e( 'Pro version', 'hjcyberx-checkout-for-paddle-lite' ); ?></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Basic Overlay Checkout', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #059669; font-weight: bold;">&#10003;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Webhook Order Completion', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #059669; font-weight: bold;">&#10003;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Inline Embedded Checkout Mode', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Vault Content Restriction', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Active Subscriptions Lifecycle Sync', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Direct Buy Now Buttons & Shortcodes', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'Automatic Catalog Sync Tool', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
								<tr>
									<td style="padding: 12px 15px; font-weight: 500;"><?php esc_html_e( 'WooCommerce Coupons Mapping', 'hjcyberx-checkout-for-paddle-lite' ); ?></td>
									<td style="padding: 12px 15px; text-align: center; color: #ef4444; font-weight: bold;">&#10007;</td>
									<td style="padding: 12px 15px; text-align: center; background: #f0f9ff; color: #059669; font-weight: bold;">&#10003;</td>
								</tr>
							</tbody>
						</table>

						<div style="text-align: center; margin-top: 25px;">
							<a href="<?php echo esc_url( $pro_url ); ?>" class="button button-primary button-hero" style="background: var(--pk-accent); border-color: var(--pk-accent); font-weight: bold; font-size: 14px; padding: 10px 24px; height: auto;"><?php esc_html_e( 'Upgrade to Pro version now', 'hjcyberx-checkout-for-paddle-lite' ); ?></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
