<?php

if (!defined('ABSPATH')) {
	exit; // Exit if accessed directly.
}

/**
 * Releases Admin Page Class for Changeloger Plugin
 */
class Changeloger_Releases
{

	/**
	 * Class constructor
	 */
	public function __construct()
	{
		add_action('admin_enqueue_scripts', [$this, 'enqueue_assets']);
	}

	/**
	 * Enqueue admin assets
	 */
	public function enqueue_assets($hook)
	{
		if (strpos($hook, 'changeloger-releases') === false) {
			return;
		}

		wp_enqueue_media();

		wp_enqueue_style(
			'cha-releases-css',
			plugins_url('assets/css/releases.css', dirname(__FILE__)),
			['cha-admin-global'],
			'1.0.0'
		);

		wp_enqueue_script(
			'cha-releases-js',
			plugins_url('assets/js/releases.js', dirname(__FILE__)),
			['wp-api-request', 'cha-admin-global-js'],
			'1.0.0',
			true
		);

		$is_premium = function_exists('cha_is_premium') && cha_is_premium();
		$upgrade_url = function_exists('cha_fs') ? cha_fs()->get_upgrade_url() : '';

		// Antimanual plugin detection.
		$antimanual_installed = file_exists(WP_PLUGIN_DIR . '/antimanual/antimanual.php');
		$antimanual_active = is_plugin_active('antimanual/antimanual.php');
		$antimanual_install_url = wp_nonce_url(
			self_admin_url('update.php?action=install-plugin&plugin=antimanual'),
			'install-plugin_antimanual'
		);
		$antimanual_activate_url = wp_nonce_url(
			self_admin_url('plugins.php?action=activate&plugin=antimanual/antimanual.php'),
			'activate-plugin_antimanual/antimanual.php'
		);

		// Detect if the Changeloger block is already added to any published page.
		$block_page     = $this->get_block_page();
		$block_page_url = $block_page ? get_permalink($block_page['ID']) : '';

		wp_localize_script('cha-releases-js', 'chaReleasesData', [
			'restUrl' => rest_url('changeloger/v1/releases'),
			'productsUrl' => rest_url('changeloger/v1/products'),
			'badgesUrl' => rest_url('changeloger/v1/badges'),
			'importUrl' => rest_url('changeloger/v1/import'),
			'productImportConfigBase' => rest_url('changeloger/v1/products/'),
			'importSampleUrl' => rest_url('changeloger/v1/import-sample'),
			'previewUrlApi' => rest_url('changeloger/v1/preview-url'),
			'createPageUrl' => rest_url('changeloger/v1/create-release-page'),
			'aiRewriteUrl' => rest_url('changeloger/v1/ai-rewrite-release'),
			'aiParseUrl' => rest_url('changeloger/v1/ai-parse-changelog'),
			'previewBaseUrl' => Changeloger_Frontend::get_release_hub_page_url(),
			'previewHash' => 'releases',
			'nonce' => wp_create_nonce('wp_rest'),
			'adminUrl' => admin_url(),
			'homeUrl' => home_url(),
			'isPremium' => $is_premium,
			'upgradeUrl' => $upgrade_url,
			'productLimit' => $is_premium ? -1 : 1, // -1 = unlimited
			'antimanualInstalled' => $antimanual_installed,
			'antimanualActive' => $antimanual_active,
			'antimanualInstallUrl' => $antimanual_install_url,
			'antimanualActivateUrl' => $antimanual_activate_url,
			'blockPageUrl' => $block_page_url,
		]);
	}

	/**
	 * Render the releases admin page
	 */
	public function render_page()
	{
		$badges = Changeloger_Post_Types::get_release_badges();
		?>
		<div class="cha-page-wrap cha-releases-wrap">
			<!-- Header -->
			<div class="cha-page-header">
				<div class="cha-page-header-left">
					<div class="cha-page-header-icon">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="28" height="28">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
						</svg>
					</div>
					<div class="cha-page-header-content">
						<h1><?php esc_html_e('Release Builder', 'changeloger'); ?></h1>
						<p class="cha-page-header-subtitle"><?php esc_html_e('Create and manage your product release notes', 'changeloger'); ?></p>
					</div>
				</div>
				<div class="cha-page-header-right">
					<a href="#" id="cha-block-action-btn" class="cha-btn cha-btn-secondary" style="display: none;"
						title="<?php esc_attr_e('You can also use the Changeloger block to publish your changelog from plain text format', 'changeloger'); ?>">
						<?php esc_html_e('Add with Block', 'changeloger'); ?>
					</a>
					<a href="#" id="cha-preview-btn" class="cha-btn cha-btn-secondary cha-preview-btn" target="_blank"
						style="display: none;">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16"
							height="16">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
						</svg>
						<?php esc_html_e('View', 'changeloger'); ?>
					</a>
					<button type="button" id="cha-embed-btn" class="cha-btn cha-btn-secondary" style="display: none;" data-embed-type="releases">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16"
							height="16">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
						</svg>
						<?php esc_html_e('Embed', 'changeloger'); ?>
						<?php if (!function_exists('cha_is_premium') || !cha_is_premium()): ?>
							<span class="cha-pro-badge">PRO</span>
						<?php endif; ?>
					</button>
				</div>
			</div>

			<!-- Stats Cards -->
			<div class="cha-stats-cards">
				<div class="cha-stat-card">
					<div class="cha-stat-icon total">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
						</svg>
					</div>
					<div class="cha-stat-content">
						<h3 id="stat-total">0</h3>
						<p><?php esc_html_e('Total Releases', 'changeloger'); ?></p>
					</div>
				</div>

				<div class="cha-stat-card">
					<div class="cha-stat-icon published">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
						</svg>
					</div>
					<div class="cha-stat-content">
						<h3 id="stat-published">0</h3>
						<p><?php esc_html_e('Published', 'changeloger'); ?></p>
					</div>
				</div>

				<div class="cha-stat-card">
					<div class="cha-stat-icon drafts">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
						</svg>
					</div>
					<div class="cha-stat-content">
						<h3 id="stat-drafts">0</h3>
						<p><?php esc_html_e('Drafts', 'changeloger'); ?></p>
					</div>
				</div>

				<div class="cha-stat-card">
					<div class="cha-stat-icon latest">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
						</svg>
					</div>
					<div class="cha-stat-content">
						<h3 id="stat-latest">—</h3>
						<p id="stat-latest-label"><?php esc_html_e('Latest Release', 'changeloger'); ?></p>
					</div>
				</div>
			</div>

			<!-- Main Layout with Sidebar -->
			<div class="cha-releases-layout">
				<!-- Product Sidebar -->
				<div class="cha-products-sidebar">
					<div class="cha-sidebar-header">
						<h3><?php esc_html_e('Products', 'changeloger'); ?></h3>
						<button type="button" id="cha-add-product-btn" class="cha-add-product-btn"
							title="<?php esc_attr_e('Add Product', 'changeloger'); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
								width="16" height="16">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
							</svg>
						</button>
					</div>
					<nav class="cha-product-tabs" id="cha-product-tabs">
						<!-- Dynamic product tabs will be added here -->
					</nav>
				</div>

				<!-- Main Content -->
				<div class="cha-releases-main">
					<div class="cha-releases-table-container">
						<!-- Table Header -->
						<div class="cha-table-header">
							<h2><?php esc_html_e('All Releases', 'changeloger'); ?></h2>
							<div class="cha-table-filters">
								<div class="cha-search-box">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
									</svg>
									<input type="text" id="cha-search-input" class="cha-input"
										placeholder="<?php esc_attr_e('Search releases...', 'changeloger'); ?>">
								</div>
								<select id="cha-status-filter" class="cha-select cha-status-filter">
									<option value="any"><?php esc_html_e('All Status', 'changeloger'); ?></option>
									<option value="publish"><?php esc_html_e('Published', 'changeloger'); ?></option>
									<option value="draft"><?php esc_html_e('Draft', 'changeloger'); ?></option>
								</select>
								
								<button type="button" id="cha-import-btn" class="cha-btn-import">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
									</svg>
									<?php esc_html_e('Import', 'changeloger'); ?>
								</button>
								<button type="button" id="cha-ai-generate-btn" class="cha-btn-ai"
									title="<?php esc_attr_e('AI Parser', 'changeloger'); ?>">
									<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
										xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" x="0" y="0"
										viewBox="0 0 488.472 488.472" style="enable-background:new 0 0 512 512"
										xml:space="preserve" class="">
										<g>
											<path
												d="M331.351 96.061c-5.963-5.963-15.622-5.963-21.585 0L4.472 401.355c-5.963 5.963-5.963 15.622 0 21.585l61.059 61.059c2.981 2.981 6.887 4.472 10.793 4.472s7.811-1.491 10.793-4.472L392.41 178.705c5.963-5.963 5.963-15.622 0-21.585l-61.059-61.059zM76.323 451.622 36.85 412.148l207.385-207.385 39.474 39.474L76.323 451.622zm228.971-228.971-39.474-39.474 54.738-54.738 39.474 39.474zM213.707 122.118c15.265-30.529 30.529-45.794 61.059-61.059C244.237 45.794 228.972 30.53 213.707 0c-15.265 30.529-30.531 45.794-61.059 61.059 30.53 15.265 45.794 30.53 61.059 61.059zM457.942 213.707c-7.632 15.265-15.267 22.897-30.529 30.529 15.265 7.632 22.897 15.265 30.529 30.529 7.632-15.265 15.265-22.897 30.529-30.529-15.264-7.632-22.896-15.265-30.529-30.529zM457.942 45.795C435.045 34.346 423.596 22.898 412.148.001c-11.449 22.897-22.899 34.346-45.794 45.794 22.897 11.449 34.346 22.897 45.794 45.794 11.449-22.897 22.897-34.346 45.794-45.794z"
												fill="currentColor" opacity="1" button="">
											</path>
										</g>
									</svg>
									<?php esc_html_e('AI Parser', 'changeloger'); ?>
								</button>
								<button type="button" id="cha-add-new-btn" class="cha-btn-add-new">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M12 4v16m8-8H4" />
									</svg>
									<?php esc_html_e('Add New', 'changeloger'); ?>
								</button>
							</div>
						
							<!-- Bulk Actions Bar (hidden by default) -->
							<div class="cha-bulk-actions" id="cha-bulk-actions" style="display: none;">
							<span class="cha-selected-count"><span id="cha-selected-count">0</span>
								<?php esc_html_e('selected', 'changeloger'); ?></span>
							<div class="cha-bulk-buttons">
								<button type="button" class="cha-bulk-btn cha-bulk-ai cha-tooltip cha-tooltip-bottom" data-action="ai-rewrite"
									data-tooltip="<?php esc_attr_e('AI Rewrite: Generate improved titles and descriptions for selected releases', 'changeloger'); ?>">
									<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
										xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" x="0" y="0"
										viewBox="0 0 488.472 488.472" style="enable-background:new 0 0 512 512"
										xml:space="preserve" class="">
										<g>
											<path
												d="M331.351 96.061c-5.963-5.963-15.622-5.963-21.585 0L4.472 401.355c-5.963 5.963-5.963 15.622 0 21.585l61.059 61.059c2.981 2.981 6.887 4.472 10.793 4.472s7.811-1.491 10.793-4.472L392.41 178.705c5.963-5.963 5.963-15.622 0-21.585l-61.059-61.059zM76.323 451.622 36.85 412.148l207.385-207.385 39.474 39.474L76.323 451.622zm228.971-228.971-39.474-39.474 54.738-54.738 39.474 39.474zM213.707 122.118c15.265-30.529 30.529-45.794 61.059-61.059C244.237 45.794 228.972 30.53 213.707 0c-15.265 30.529-30.531 45.794-61.059 61.059 30.53 15.265 45.794 30.53 61.059 61.059zM457.942 213.707c-7.632 15.265-15.267 22.897-30.529 30.529 15.265 7.632 22.897 15.265 30.529 30.529 7.632-15.265 15.265-22.897 30.529-30.529-15.264-7.632-22.896-15.265-30.529-30.529zM457.942 45.795C435.045 34.346 423.596 22.898 412.148.001c-11.449 22.897-22.899 34.346-45.794 45.794 22.897 11.449 34.346 22.897 45.794 45.794 11.449-22.897 22.897-34.346 45.794-45.794z"
												fill="currentColor" opacity="1" <="" button="">
											</path>
										</g>
									</svg>
									<?php esc_html_e('AI Rewrite', 'changeloger'); ?>
								</button>
								<button type="button" class="cha-bulk-btn" data-action="publish">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="14" height="14">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M5 13l4 4L19 7" />
									</svg>
									<?php esc_html_e('Publish', 'changeloger'); ?>
								</button>
								<button type="button" class="cha-bulk-btn" data-action="draft">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="14" height="14">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
									</svg>
									<?php esc_html_e('Draft', 'changeloger'); ?>
								</button>
								<select id="cha-bulk-badge-select" class="cha-bulk-badge-select"
								title="<?php esc_attr_e( 'Change Badge', 'changeloger' ); ?>">
								<option value=""><?php esc_html_e( 'Change Badge', 'changeloger' ); ?></option>
								<?php foreach ( $badges as $badge ) : ?>
									<option value="<?php echo esc_attr( $badge['slug'] ); ?>"><?php echo esc_html( $badge['name'] ); ?></option>
								<?php endforeach; ?>
							</select>
							<button type="button" class="cha-bulk-btn cha-bulk-delete" data-action="delete">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="14" height="14">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
									</svg>
									<?php esc_html_e('Delete', 'changeloger'); ?>
								</button>
							</div>
						</div>
					</div>

						<!-- Table -->
						<table class="cha-table cha-releases-table">
							<thead>
								<tr>
									<th><input type="checkbox" class="cha-checkbox" id="cha-select-all"></th>
									<th><?php esc_html_e('Version', 'changeloger'); ?></th>
									<th><?php esc_html_e('Title', 'changeloger'); ?></th>
									<th><?php esc_html_e('Status', 'changeloger'); ?></th>
									<th><?php esc_html_e('Release Date', 'changeloger'); ?></th>
								</tr>
							</thead>
							<tbody id="cha-releases-tbody">
								<tr>
									<td colspan="6">
										<div class="cha-loading">
											<div class="cha-loading-spinner"></div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>

						<!-- Pagination -->
						<div class="cha-pagination">
							<div class="cha-pagination-info"><?php esc_html_e('Page 1 of 1', 'changeloger'); ?></div>
							<div class="cha-pagination-controls">
								<button type="button" id="cha-prev-btn" class="cha-pagination-btn" disabled>
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M15 19l-7-7 7-7" />
									</svg>
									<?php esc_html_e('Previous', 'changeloger'); ?>
								</button>
								<button type="button" id="cha-next-btn" class="cha-pagination-btn" disabled>
									<?php esc_html_e('Next', 'changeloger'); ?>
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M9 5l7 7-7 7" />
									</svg>
								</button>
							</div>
						</div>
					</div>
				</div><!-- /.cha-releases-main -->
			</div><!-- /.cha-releases-layout -->
		</div>

		<!-- Modal -->
		<div id="cha-release-modal" class="cha-modal-overlay">
			<div class="cha-modal">
				<div class="cha-modal-header">
					<h2 id="cha-modal-title"><?php esc_html_e('Add New Release', 'changeloger'); ?></h2>
					<div class="cha-modal-header-actions">
						<a href="#" id="cha-modal-edit-link" class="cha-modal-edit-btn" target="_blank" style="display: none;"
							title="<?php esc_attr_e('Edit in full editor', 'changeloger'); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
							</svg>
						</a>
						<button type="button" class="cha-modal-close">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
									d="M6 18L18 6M6 6l12 12" />
							</svg>
						</button>
					</div>
				</div>
				<form id="cha-release-form">
					<div class="cha-modal-body">
						<!-- Version, Type & Product -->
						<div class="cha-form-row three-col">
							<div class="cha-form-group">
								<label for="cha-version"><?php esc_html_e('Version Number', 'changeloger'); ?> <span
										class="required">*</span></label>
								<input type="text" id="cha-version" name="version" placeholder="e.g., 2.0.0" required>
							</div>
							<div class="cha-form-group">
								<label for="cha-badge">
									<?php esc_html_e( 'Badge', 'changeloger' ); ?>
									<span class="cha-help-trigger cha-help-bottom">
										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
										</svg>
										<span class="cha-help-tooltip">
											<?php
											printf(
												/* translators: %1$s: opening link tag, %2$s: closing link tag */
												esc_html__( 'Assign a badge (e.g., Latest, Beta) to highlight this release. Manage badges from %1$sSettings%2$s.', 'changeloger' ),
												'<a href="' . esc_url( admin_url( 'admin.php?page=changeloger-settings#tab=releases' ) ) . '" target="_blank">',
												'</a>'
											);
											?>
										</span>
									</span>
								</label>
								<select id="cha-badge" name="badge_id">
									<option value=""><?php esc_html_e('Select a badge...', 'changeloger'); ?></option>
									<?php foreach ($badges as $badge): ?>
										<option value="<?php echo esc_attr($badge['slug']); ?>"><?php echo esc_html($badge['name']); ?></option>
									<?php endforeach; ?>
								</select>
							</div>
							<div class="cha-form-group">
								<label for="cha-product"><?php esc_html_e('Product', 'changeloger'); ?></label>
								<select id="cha-product" name="product" required>
									<option value="" disabled><?php esc_html_e('Select Product', 'changeloger'); ?></option>
									<!-- Products loaded dynamically -->
								</select>
							</div>
						</div>

						<!-- Title -->
						<div class="cha-form-row full">
							<div class="cha-form-group">
								<label for="cha-title"><?php esc_html_e('Release Title', 'changeloger'); ?> <span
										class="required">*</span></label>
								<input type="text" id="cha-title" name="title" placeholder="e.g., Major UI Redesign & API v2"
									required>
							</div>
						</div>

						<!-- Notes -->
						<div class="cha-form-row full">
							<div class="cha-form-group">
								<label for="cha-notes"><?php esc_html_e('Release Notes', 'changeloger'); ?></label>
								<textarea id="cha-notes" name="notes" placeholder="Describe this release..."></textarea>
							</div>
						</div>

						<!-- Featured Image -->
						<div class="cha-form-row full">
							<div class="cha-form-group">
								<label><?php esc_html_e('Featured Image', 'changeloger'); ?></label>
								<input type="hidden" id="cha-featured-image" name="featured_image" value="">
								<div id="cha-featured-image-preview" class="cha-featured-image-preview" style="display:none;">
									<img id="cha-featured-image-img" src="" alt="">
									<button type="button" class="cha-featured-image-remove" id="cha-featured-image-remove-btn" title="<?php esc_attr_e('Remove image', 'changeloger'); ?>">
										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
										</svg>
									</button>
								</div>
								<button type="button" id="cha-featured-image-upload-btn" class="cha-featured-image-upload">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
									</svg>
									<span><?php esc_html_e('Click to upload or select image', 'changeloger'); ?></span>
								</button>
							</div>
						</div>

						<!-- Change Items -->
						<div class="cha-change-items-section">
							<label>
								<?php esc_html_e( 'Change Items', 'changeloger' ); ?>
								<span class="cha-help-trigger cha-help-right">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
									</svg>
									<span class="cha-help-tooltip">
										<?php
										printf(
											/* translators: %1$s: opening link tag, %2$s: closing link tag */
											esc_html__( 'Add changes grouped by type (Added, Fixed, etc.). Customize groups in %1$sSettings%2$s.', 'changeloger' ),
											'<a href="' . esc_url( admin_url( 'admin.php?page=changeloger-settings#tab=releases' ) ) . '" target="_blank">',
											'</a>'
										);
										?>
									</span>
								</span>
							</label>

							<?php
							$change_groups = Changeloger_Post_Types::get_change_groups();
							foreach ($change_groups as $slug => $label):
								?>
								<div class="cha-change-group">
									<div class="cha-change-group-header">
										<h4><?php echo esc_html($label); ?></h4>
										<button type="button" class="cha-add-item-btn" data-group="<?php echo esc_attr($slug); ?>">
											<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
												stroke="currentColor" width="12" height="12">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
													d="M12 4v16m8-8H4" />
											</svg>
											<?php esc_html_e('Add', 'changeloger'); ?>
										</button>
									</div>
									<div class="cha-change-items-list" data-group="<?php echo esc_attr($slug); ?>"></div>
								</div>
							<?php endforeach; ?>
						</div>

						<!-- Date & Status -->
						<div class="cha-form-row" style="margin-bottom:0;">
							<div class="cha-form-group" style="margin-bottom:0;">
								<label for="cha-release-date"><?php esc_html_e('Release Date', 'changeloger'); ?></label>
								<input type="date" id="cha-release-date" name="release_date">
							</div>
							<div class="cha-form-group" style="margin-bottom:0;">
								<label for="cha-status"><?php esc_html_e('Status', 'changeloger'); ?></label>
								<select id="cha-status" name="status">
									<option value="draft"><?php esc_html_e('Draft', 'changeloger'); ?></option>
									<option value="publish"><?php esc_html_e('Published', 'changeloger'); ?></option>
								</select>
							</div>
						</div>
					</div>
					<div class="cha-modal-footer">
						<button type="button"
							class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e('Cancel', 'changeloger'); ?></button>
						<button type="submit"
							class="cha-btn cha-btn-primary"><?php esc_html_e('Save Release', 'changeloger'); ?></button>
					</div>
				</form>
			</div>
		</div>

		<!-- Product Modal -->
		<div id="cha-product-modal" class="cha-modal-overlay">
			<div class="cha-modal cha-modal-sm">
				<div class="cha-modal-header">
					<h2 id="cha-product-modal-title"><?php esc_html_e('Add New Product', 'changeloger'); ?></h2>
					<button type="button" class="cha-modal-close">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>
				<form id="cha-product-form">
					<div class="cha-modal-body">
						<div class="cha-form-group">
							<label for="cha-product-name"><?php esc_html_e('Product Name', 'changeloger'); ?> <span
									class="required">*</span></label>
							<input type="text" id="cha-product-name" name="name"
								placeholder="<?php esc_attr_e('e.g., My Plugin Pro', 'changeloger'); ?>" required>
						</div>
					</div>
					<div class="cha-modal-footer">
						<button type="button"
							class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e('Cancel', 'changeloger'); ?></button>
						<button type="submit"
							class="cha-btn cha-btn-primary"><?php esc_html_e('Save Product', 'changeloger'); ?></button>
					</div>
				</form>
			</div>
		</div>
		<!-- Import Modal -->
		<div id="cha-import-modal" class="cha-modal-overlay">
			<div class="cha-modal cha-modal-md">
				<div class="cha-modal-header">
					<h2><?php esc_html_e('Import Changelog', 'changeloger'); ?></h2>
					<button type="button" class="cha-modal-close">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>
				<form id="cha-import-form">
					<div class="cha-modal-body">
						<!-- Source tabs: File / File URL -->
						<div class="cha-import-tabs" role="tablist" style="display:flex;gap:4px;border-bottom:1px solid #e2e8f0;margin-bottom:16px;">
							<button type="button" class="cha-import-tab active" role="tab" data-tab="file"
								style="background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;cursor:pointer;font-weight:600;color:#1e293b;">
								<?php esc_html_e('File', 'changeloger'); ?>
							</button>
							<button type="button" class="cha-import-tab" role="tab" data-tab="url"
								style="background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;cursor:pointer;font-weight:600;color:#64748b;">
								<?php esc_html_e('File URL', 'changeloger'); ?>
							</button>
						</div>

						<!-- File tab -->
						<div class="cha-import-pane" data-pane="file">
							<p class="cha-import-desc">
								<?php esc_html_e('Upload a .txt file with changelog entries. Each version will be created as a release.', 'changeloger'); ?>
							</p>
							<div class="cha-form-group">
								<label for="cha-import-file"><?php esc_html_e('Changelog File', 'changeloger'); ?> <span
										class="required">*</span></label>
								<div class="cha-file-upload">
									<input type="file" id="cha-import-file" name="changelog_file" accept=".txt,.md">
									<div class="cha-file-upload-label">
										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
											stroke="currentColor">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
												d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
										</svg>
										<span
											class="cha-file-name"><?php esc_html_e('Choose a .txt file or drag and drop', 'changeloger'); ?></span>
									</div>
								</div>
							</div>
						</div>

						<!-- File URL tab -->
						<div class="cha-import-pane" data-pane="url" style="display:none;">
							<p class="cha-import-desc">
								<?php esc_html_e('Fetch a changelog from a remote URL (e.g. raw GitHub CHANGELOG.md). Optionally re-check the URL daily and import any new versions automatically.', 'changeloger'); ?>
							</p>
							<div class="cha-form-group">
								<label for="cha-import-url"><?php esc_html_e('Changelog URL', 'changeloger'); ?> <span class="required">*</span></label>
								<input type="url" id="cha-import-url" name="source_url"
									placeholder="https://raw.githubusercontent.com/user/repo/main/CHANGELOG.md"
									style="width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;">
								<p class="cha-field-desc" style="margin-top:4px;color:#646970;font-size:12px;">
									<?php esc_html_e('Supports .txt and .md files served as plain text.', 'changeloger'); ?>
								</p>
							</div>
							<div class="cha-form-group">
								<label class="cha-checkbox-label" style="margin-bottom:0;">
									<input type="checkbox" id="cha-import-use-ai" name="use_ai" value="1">
									<?php esc_html_e('Use AI Parser', 'changeloger'); ?>
								</label>
								<p class="cha-field-desc" style="margin-bottom:0;margin-top:4px;color:#646970;font-size:12px;margin-left:24px;">
									<?php esc_html_e('Run the fetched text through the AI parser before importing.', 'changeloger'); ?>
								</p>
							</div>
							<div class="cha-form-group">
								<label class="cha-checkbox-label" style="margin-bottom:0;">
									<input type="checkbox" id="cha-import-auto-check" name="enable_auto_check" value="1">
									<?php esc_html_e('Enable Daily Auto-Check', 'changeloger'); ?>
								</label>
								<p class="cha-field-desc" style="margin-bottom:0;margin-top:4px;color:#646970;font-size:12px;margin-left:24px;">
									<?php esc_html_e('Re-fetch this URL every day and import new versions for this product.', 'changeloger'); ?>
								</p>
								<p class="cha-field-desc cha-import-url-status" style="margin-top:6px;color:#475569;font-size:12px;margin-left:20px;display:none;"></p>
							</div>
						</div>

						<!-- Shared options below tabs -->
						<div class="cha-form-group">
							<label class="cha-checkbox-label" style="margin-bottom:0;">
								<input type="checkbox" id="cha-import-publish" name="publish_posts" value="1">
								<?php esc_html_e('Publish imported releases immediately', 'changeloger'); ?>
							</label>
							<p class="cha-field-desc" style="margin-bottom:0;margin-top:4px;color:#646970;font-size:12px;margin-left:24px;">
								<?php esc_html_e('If unchecked, releases will be saved as drafts.', 'changeloger'); ?>
							</p>
						</div>
						<div class="cha-form-group cha-duplicate-options">
							<label
								style="font-weight:600;margin-bottom:10px;display:block;"><?php esc_html_e('If version already exists:', 'changeloger'); ?></label>
							<div style="display:flex;gap:20px;">
								<label class="cha-radio-label" style="display:flex;align-items:center;gap:6px;cursor:pointer;">
									<input type="radio" name="duplicate_action" value="skip" checked style="margin:0;">
									<?php esc_html_e('Skip duplicates', 'changeloger'); ?>
								</label>
								<label class="cha-radio-label" style="display:flex;align-items:center;gap:6px;cursor:pointer;">
									<input type="radio" name="duplicate_action" value="replace" style="margin:0;">
									<?php esc_html_e('Replace existing', 'changeloger'); ?>
								</label>
							</div>
							<p class="cha-field-desc" style="margin-top:6px;color:#646970;font-size:12px;">
								<?php esc_html_e('Choose how to handle versions that already exist for this product.', 'changeloger'); ?>
							</p>
						</div>
						<div class="cha-import-progress" style="display: none;">
							<div class="cha-progress-bar">
								<div class="cha-progress-fill"></div>
							</div>
							<p class="cha-progress-text"><?php esc_html_e('Importing...', 'changeloger'); ?></p>
						</div>
						<div class="cha-import-result" style="display: none;"></div>
					</div>
					<div class="cha-modal-footer">
						<button type="button"
							class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e('Cancel', 'changeloger'); ?></button>
						<button type="submit" class="cha-btn cha-btn-primary"
							id="cha-import-submit"><?php esc_html_e('Import', 'changeloger'); ?></button>
					</div>
				</form>
			</div>
		</div>

		<!-- Antimanual Promo Modal -->
		<div id="cha-antimanual-modal" class="cha-modal-overlay">
			<div class="cha-modal cha-upgrade-bg-modal" style="max-width: 560px;">
				<div class="cha-antimanual-modal-content">
					<!-- Header with gradient -->
					<div class="cha-antimanual-header">
						<button type="button" class="cha-modal-close">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
								width="20" height="20">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
									d="M6 18L18 6M6 6l12 12" />
							</svg>
						</button>
						<div class="cha-antimanual-icon">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
								width="32" height="32">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
									d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
							</svg>
						</div>
						<h2><?php esc_html_e('AI-Powered Changelog Generation', 'changeloger'); ?></h2>
						<p><?php esc_html_e('Get started with Antimanual to unlock all AI features for your changelogs!', 'changeloger'); ?>
						</p>
					</div>
					<!-- Body -->
					<div class="cha-antimanual-body">
						<div class="cha-antimanual-features">
							<div class="cha-antimanual-feature">
								<div class="cha-feature-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="20" height="20">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
									</svg>
								</div>
								<div>
									<h4><?php esc_html_e('AI Generation', 'changeloger'); ?></h4>
									<p><?php esc_html_e('Generate changelog content automatically', 'changeloger'); ?></p>
								</div>
							</div>
							<div class="cha-antimanual-feature">
								<div class="cha-feature-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="20" height="20">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
									</svg>
								</div>
								<div>
									<h4><?php esc_html_e('Smart Parsing', 'changeloger'); ?></h4>
									<p><?php esc_html_e('Auto-detect versions and changes', 'changeloger'); ?></p>
								</div>
							</div>
							<div class="cha-antimanual-feature">
								<div class="cha-feature-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
										stroke="currentColor" width="20" height="20">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
									</svg>
								</div>
								<div>
									<h4><?php esc_html_e('Bulk Create', 'changeloger'); ?></h4>
									<p><?php esc_html_e('Generate multiple releases at once', 'changeloger'); ?></p>
								</div>
							</div>
						</div>
						<div class="cha-antimanual-actions">
							<a href="#" id="cha-antimanual-action-btn"
								class="cha-btn cha-btn-primary cha-antimanual-install-btn">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
									width="18" height="18">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
										d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
								</svg>
								<span
									id="cha-antimanual-action-text"><?php esc_html_e('Install Antimanual Free', 'changeloger'); ?></span>
							</a>
							<a href="https://wordpress.org/plugins/antimanual/" target="_blank"
								class="cha-btn cha-btn-secondary">
								<?php esc_html_e('Learn More', 'changeloger'); ?>
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
									width="14" height="14">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
								</svg>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Bulk AI Rewrite Progress Modal -->
		<div id="cha-bulk-ai-modal" class="cha-modal-overlay">
			<div class="cha-modal" style="max-width: 480px;">
				<div class="cha-modal-header">
					<h2 id="cha-bulk-ai-modal-title"><?php esc_html_e('AI Rewrite Releases', 'changeloger'); ?></h2>
					<button type="button" class="cha-modal-close">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20"
							height="20">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>
				<div class="cha-modal-body">
					<p class="cha-bulk-ai-desc" id="cha-bulk-ai-desc">
						<?php esc_html_e('Generate improved titles and descriptions for the selected releases based on their change items.', 'changeloger'); ?>
					</p>
					<div id="cha-bulk-ai-list" class="cha-bulk-ai-list">
						<!-- Version items will be dynamically inserted here -->
					</div>
				</div>
				<div class="cha-modal-footer" id="cha-bulk-ai-footer">
					<button type="button"
						class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e('Cancel', 'changeloger'); ?></button>
					<button type="button" class="cha-btn cha-btn-primary" id="cha-bulk-ai-confirm">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16"
							height="16">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
						</svg>
						<?php esc_html_e('Start AI Rewrite', 'changeloger'); ?>
					</button>
				</div>
			</div>
		</div>

		<!-- AI Import Modal -->
		<div id="cha-ai-import-modal" class="cha-modal-overlay">
			<div class="cha-modal cha-modal-lg">
				<div class="cha-modal-header">
					<h2><?php esc_html_e('AI Enhance Release', 'changeloger'); ?></h2>
					<button type="button" class="cha-modal-close">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20"
							height="20">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
						</svg>
					</button>
				</div>
				<div class="cha-modal-body">
					<p class="cha-ai-import-desc">
						<?php esc_html_e('Paste your changelog text or upload a file. AI will parse, enhance, and create a release with improved title, description, and change items.', 'changeloger'); ?>
					</p>
					<div class="cha-form-row">
						<div class="cha-form-group">
							<label for="cha-ai-import-product"><?php esc_html_e('Product', 'changeloger'); ?></label>
							<select id="cha-ai-import-product" class="cha-select">
								<option value=""><?php esc_html_e('Select a product...', 'changeloger'); ?></option>
							</select>
						</div>

						<div class="cha-form-group">
							<label for="cha-ai-import-status"><?php esc_html_e('Post Status', 'changeloger'); ?></label>
							<select id="cha-ai-import-status" class="cha-select">
								<option value="draft"><?php esc_html_e('Draft', 'changeloger'); ?></option>
								<option value="publish"><?php esc_html_e('Published', 'changeloger'); ?></option>
							</select>
						</div>
					</div>
					<div class="cha-form-group">
						<label>
							<?php esc_html_e('Input Method', 'changeloger'); ?>
						</label>
						<div class="cha-radio-group" style="display: flex; gap: 16px; margin-top: 8px;">
							<label class="cha-radio-label"
								style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
								<input type="radio" name="cha-ai-input-method" value="text" checked style="margin: 0;">
								<?php esc_html_e('Enter Text', 'changeloger'); ?>
							</label>
							<label class="cha-radio-label"
								style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
								<input type="radio" name="cha-ai-input-method" value="file" style="margin: 0;">
								<?php esc_html_e('Upload File', 'changeloger'); ?>
							</label>
						</div>
					</div>

					<div class="cha-form-group cha-ai-input-text" id="cha-ai-input-text-group">

						<label for="cha-ai-import-textarea"><?php esc_html_e('Changelog Text', 'changeloger'); ?></label>
						<textarea id="cha-ai-import-textarea" class="cha-textarea" rows="8" placeholder="<?php esc_attr_e('Describe your changes in any format...

Examples:
- On version 2.1.0, I added a new dashboard widget, fixed the login timeout bug, and updated the header styling.

- v1.5.0: Added PDF export, fixed mobile menu issue, improved performance.

AI will parse and format your notes into a proper changelog release.', 'changeloger'); ?>"></textarea>
					</div>
					<div class="cha-form-group cha-ai-input-file" id="cha-ai-input-file-group" style="display: none;">
						<label for="cha-ai-import-file"><?php esc_html_e('Upload File', 'changeloger'); ?></label>
						<div class="cha-file-dropzone" id="cha-ai-import-dropzone">
							<input type="file" id="cha-ai-import-file" accept=".txt,.md,.markdown" style="display: none;">
							<div class="cha-dropzone-content">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
									width="32" height="32">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
										d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
								</svg>
								<p><?php esc_html_e('Drop file here or click to browse', 'changeloger'); ?></p>
								<span
									class="cha-dropzone-hint"><?php esc_html_e('Supports .txt, .md files', 'changeloger'); ?></span>
							</div>
							<div class="cha-dropzone-file" style="display: none;">
								<span class="cha-dropzone-filename"></span>
								<button type="button" class="cha-dropzone-remove">×</button>
							</div>
						</div>
					</div>
				</div>
				<div class="cha-modal-footer">
					<button type="button"
						class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e('Cancel', 'changeloger'); ?></button>
					<button type="button" class="cha-btn cha-btn-primary" id="cha-ai-import-generate">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16"
							height="16">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
						</svg>
						<?php esc_html_e('Enhance with AI', 'changeloger'); ?>
					</button>
				</div>
			</div>
		</div>

		<!-- Embed Modal -->
		<div id="cha-embed-modal" class="cha-modal-overlay">
			<div class="cha-modal cha-modal-md">
				<button type="button" class="cha-modal-close">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20"
						height="20">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
					</svg>
				</button>
				<div class="cha-modal-header">
					<h2><?php esc_html_e( 'Generate Embed Code', 'changeloger' ); ?></h2>
				</div>
				<div class="cha-modal-body">
					<!-- Tab Navigation -->
					<div class="cha-embed-tabs">
						<button type="button" class="cha-embed-tab active" data-tab="iframe">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
							</svg>
							<?php esc_html_e( 'iframe', 'changeloger' ); ?>
						</button>
						<button type="button" class="cha-embed-tab" data-tab="sdk">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
							</svg>
							<?php esc_html_e( 'SDK', 'changeloger' ); ?>
						</button>
					</div>

					<!-- Tab 1: iframe (existing content) -->
					<div class="cha-embed-tab-content active" data-tab="iframe">
						<input type="hidden" id="cha-embed-type" value="releases">
						<div class="cha-form-group">
							<label for="cha-embed-height"><?php esc_html_e( 'Height (px)', 'changeloger' ); ?></label>
							<input type="number" id="cha-embed-height" value="600" min="300" max="1200" class="cha-input">
						</div>
						<div class="cha-form-group">
							<label><?php esc_html_e( 'Embed Code', 'changeloger' ); ?></label>
							<div style="position: relative;">
								<textarea id="cha-embed-code" class="cha-textarea" rows="5" readonly
									style="font-family: monospace; font-size: 12px; padding-right: 80px;"></textarea>
								<button type="button" id="cha-copy-embed" class="cha-btn cha-btn-secondary"
									style="position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px;">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
										width="14" height="14">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
									</svg>
									<?php esc_html_e( 'Copy', 'changeloger' ); ?>
								</button>
							</div>
						</div>
						<p class="cha-embed-hint" style="font-size: 13px; color: #666; margin-top: 12px;">
							<?php esc_html_e( 'Paste this code on any website to embed your changelog.', 'changeloger' ); ?>
						</p>
					</div>

					<!-- Tab 2: SDK -->
					<div class="cha-embed-tab-content" data-tab="sdk">
						<p class="cha-embed-sdk-intro">
							<?php esc_html_e( 'Use the JavaScript SDK to open releases in a modal, sidebar, or popup from any button on your website.', 'changeloger' ); ?>
						</p>


						<!-- Step 1: SDK Script -->
						<div class="cha-embed-step">
							<label class="cha-step-label">
								<span class="cha-step-number">1</span>
								<?php esc_html_e( 'Add SDK to your website', 'changeloger' ); ?>
							</label>
							<div class="cha-code-block">
								<textarea id="cha-sdk-script" class="cha-textarea" rows="8" readonly
									style="font-family: monospace; font-size: 12px;"></textarea>
								<button type="button" class="cha-copy-btn" data-target="cha-sdk-script">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
										width="14" height="14">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
											d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
									</svg>
									<?php esc_html_e( 'Copy', 'changeloger' ); ?>
								</button>
							</div>
						</div>

						<!-- Step 2: Usage Examples -->
						<div class="cha-embed-step">
							<label class="cha-step-label">
								<span class="cha-step-number">2</span>
								<?php esc_html_e( 'Add buttons to trigger', 'changeloger' ); ?>
							</label>

							<div class="cha-sdk-examples">
								<!-- Modal -->
								<div class="cha-sdk-example">
									<div class="cha-sdk-example-header">
										<span class="cha-sdk-label"><?php esc_html_e( 'Modal', 'changeloger' ); ?></span>
										<span class="cha-sdk-desc"><?php esc_html_e( 'Centered overlay', 'changeloger' ); ?></span>
									</div>
									<div class="cha-sdk-example-code">
										<code>&lt;button onclick="CHA.openModal()"&gt;View Changelog&lt;/button&gt;</code>
										<button type="button" class="cha-copy-inline" data-code='<button onclick="CHA.openModal()">View Changelog</button>'>
											<?php esc_html_e( 'Copy', 'changeloger' ); ?>
										</button>
									</div>
								</div>

								<!-- Sidebar -->
								<div class="cha-sdk-example">
									<div class="cha-sdk-example-header">
										<span class="cha-sdk-label"><?php esc_html_e( 'Sidebar', 'changeloger' ); ?></span>
										<span class="cha-sdk-desc"><?php esc_html_e( 'Slide-in panel', 'changeloger' ); ?></span>
									</div>
									<div class="cha-sdk-example-code">
										<code>&lt;button onclick="CHA.openSidebar()"&gt;What's New&lt;/button&gt;</code>
										<button type="button" class="cha-copy-inline" data-code="<button onclick=&quot;CHA.openSidebar()&quot;>What's New</button>">
											<?php esc_html_e( 'Copy', 'changeloger' ); ?>
										</button>
									</div>
								</div>

								<!-- Popup -->
								<div class="cha-sdk-example">
									<div class="cha-sdk-example-header">
										<span class="cha-sdk-label"><?php esc_html_e( 'Popup', 'changeloger' ); ?></span>
										<span class="cha-sdk-desc"><?php esc_html_e( 'Dropdown near button', 'changeloger' ); ?></span>
									</div>
									<div class="cha-sdk-example-code">
										<code>&lt;button onclick="CHA.openPopup({anchor:this})"&gt;Updates&lt;/button&gt;</code>
										<button type="button" class="cha-copy-inline" data-code='<button onclick="CHA.openPopup({anchor:this})">Updates</button>'>
											<?php esc_html_e( 'Copy', 'changeloger' ); ?>
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cha-modal-footer">
					<button type="button"
						class="cha-btn cha-btn-secondary cha-modal-close"><?php esc_html_e( 'Close', 'changeloger' ); ?></button>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Get the first published page containing the Changeloger block.
	 *
	 * @return array|null Array with 'ID' and 'title', or null if not found.
	 */
	private function get_block_page(): ?array
	{
		global $wpdb;

		$sql = "SELECT p.ID, p.post_title
				FROM {$wpdb->posts} p
				WHERE p.post_content LIKE %s
				AND p.post_status = 'publish'
				ORDER BY p.post_date ASC
				LIMIT 1";

		$result = $wpdb->get_row(
			$wpdb->prepare($sql, '%' . $wpdb->esc_like('wp:cha/changeloger') . '%')
		);

		if (!$result) {
			return null;
		}

		return [
			'ID'    => $result->ID,
			'title' => $result->post_title,
		];
	}
}
