<?php

/**
 * Feedback Admin Page
 *
 * @package Changeloger
 */

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

/**
 * Class Changeloger_Feedback
 *
 * Handles the feedback admin page
 */
if ( ! class_exists( 'Changeloger_Feedback' ) ) {
	class Changeloger_Feedback {



		/**
		 * Instance
		 *
		 * @var Changeloger_Feedback
		 */
		private static $instance = null;

		/**
		 * Get instance
		 *
		 * @return Changeloger_Feedback
		 */
		public static function get_instance() {
			if ( null === self::$instance ) {
				self::$instance = new self();
			}
			return self::$instance;
		}

		/**
		 * Constructor
		 */
		private function __construct() {
			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
		}

		/**
		 * Enqueue assets
		 *
		 * @param string $hook Current admin page.
		 */
		public function enqueue_assets( $hook ) {
			if ( strpos( $hook, 'changeloger-feedback' ) === false ) {
				return;
			}

			wp_enqueue_style(
				'cha-feedback-css',
				plugins_url( 'assets/css/feedback.css', __DIR__ ),
				array( 'cha-admin-global' ),
				'1.0.0'
			);

			// Simple Rich Editor
			wp_enqueue_script(
				'cha-simple-editor',
				plugins_url( 'assets/js/simple-editor.js', __DIR__ ),
				array( 'jquery' ),
				'1.0.0',
				true
			);

			wp_enqueue_script(
				'cha-feedback-js',
				plugins_url( 'assets/js/feedback.js', __DIR__ ),
				array( 'jquery', 'wp-api-request', 'cha-simple-editor', 'cha-admin-global-js' ),
				'1.0.0',
				true
			);

			wp_localize_script(
				'cha-feedback-js',
				'chaFeedbackData',
				array(
					'restUrl'         => rest_url( 'changeloger/v1/feedback' ),
					'productsUrl'     => 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' ),
					'previewBaseUrl'  => Changeloger_Frontend::get_release_hub_page_url(),
					'previewHash'     => 'feedback',
					'nonce'           => wp_create_nonce( 'wp_rest' ),
					'adminUrl'        => admin_url(),
					'homeUrl'         => home_url(),
					'isPremium'       => function_exists( 'cha_is_premium' ) && cha_is_premium(),
					'upgradeUrl'      => function_exists( 'cha_fs' ) ? cha_fs()->get_upgrade_url() : '',
					'productLimit'    => ( function_exists( 'cha_is_premium' ) && cha_is_premium() ) ? -1 : 1,
					'statuses'        => Changeloger_Post_Types::get_feedback_statuses(),
					'categories'      => Changeloger_Post_Types::get_feedback_categories(),
					'i18n'            => array(
						'limitReached' => esc_html__( 'Feature request limit is reached for free users. Please upgrade to Pro for unlimited feedback.', 'changeloger' ),
					),
				)
			);
		}

		/**
		 * Render the feedback admin page
		 */
		public function render_page() {
			$statuses   = Changeloger_Post_Types::get_feedback_statuses();
			$categories = Changeloger_Post_Types::get_feedback_categories();
			?>
			<div class="cha-page-wrap cha-feedback-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="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
							</svg>
						</div>
						<div class="cha-page-header-content">
							<h1><?php esc_html_e( 'Feedback Requests', 'changeloger' ); ?></h1>
							<p class="cha-page-header-subtitle">
								<?php esc_html_e( 'Manage feature requests, integrations, and language suggestions from your users.', 'changeloger' ); ?>
							</p>
						</div>
					</div>
					<div class="cha-page-header-right">
						<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="feedback">
							<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' ); ?>
						</button>
					</div>
				</div>

				<div class="cha-feedback-container">
					<!-- Main Content -->
					<div class="cha-feedback-main">
						<!-- Stats Cards -->
						<div class="cha-stats-cards">
							<div class="cha-stat-card">
								<div class="cha-stat-icon cha-stat-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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
									</svg>
								</div>
								<div class="cha-stat-content">
									<span class="cha-stat-number">
										<span id="cha-total-feedback">0</span>
										<?php if ( ! ( function_exists( 'cha_is_premium' ) && cha_is_premium() ) ) : ?>
											<span class="cha-stat-limit" style="font-size: 14px; color: #6b7280; font-weight: 500;">/ 20</span>
											<a href="<?php echo esc_url( cha_fs()->get_upgrade_url() ); ?>" class="cha-stat-upgrade-link" style="display: none; font-size: 11px; color: #6366f1; text-decoration: none; margin-top: 4px; font-weight: 600; display: block;"><?php esc_html_e( 'Upgrade for Unlimited', 'changeloger' ); ?></a>
										<?php endif; ?>
									</span>
									<span class="cha-stat-label"><?php esc_html_e( 'Total Feedback', 'changeloger' ); ?></span>
								</div>
							</div>
							<div class="cha-stat-card">
								<div class="cha-stat-icon cha-stat-review">
									<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 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>
								</div>
								<div class="cha-stat-content">
									<span class="cha-stat-number" id="cha-in-review">0</span>
									<span class="cha-stat-label"><?php esc_html_e( 'In Review', 'changeloger' ); ?></span>
								</div>
							</div>
							<div class="cha-stat-card">
								<div class="cha-stat-icon cha-stat-progress">
									<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="M13 10V3L4 14h7v7l9-11h-7z" />
									</svg>
								</div>
								<div class="cha-stat-content">
									<span class="cha-stat-number" id="cha-in-progress">0</span>
									<span class="cha-stat-label"><?php esc_html_e( 'In Progress', 'changeloger' ); ?></span>
								</div>
							</div>
							<div class="cha-stat-card">
								<div class="cha-stat-icon cha-stat-completed">
									<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">
									<span class="cha-stat-number" id="cha-completed">0</span>
									<span class="cha-stat-label"><?php esc_html_e( 'Completed', 'changeloger' ); ?></span>
								</div>
							</div>
						</div>

						<!-- Table Container -->
						<!-- Sidebar with Products -->
						<div class="cha-feedback-layout">
							<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 loaded via JS -->
								</nav>
							</div>
							<div class="cha-card">
								<!-- Table Header -->
								<div class="cha-table-header">
									<h2><?php esc_html_e( 'All Feedback', '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 feedback...', 'changeloger' ); ?>">
										</div>
										<select id="cha-status-filter" class="cha-select cha-status-filter">
											<option value=""><?php esc_html_e( 'All Status', 'changeloger' ); ?></option>
											<?php foreach ( $statuses as $key => $label ) : ?>
												<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?>
												</option>
											<?php endforeach; ?>
										</select>
										<select id="cha-category-filter" class="cha-select cha-category-filter">
											<option value=""><?php esc_html_e( 'All Categories', 'changeloger' ); ?></option>
											<?php foreach ( $categories as $key => $label ) : ?>
												<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?>
												</option>
											<?php endforeach; ?>
										</select>
										<button type="button" id="cha-manage-categories-btn" class="cha-btn-icon"
											title="<?php esc_attr_e( 'Manage Categories', 'changeloger' ); ?>">
											<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
													d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
											</svg>
										</button>
									</div>
								</div>

								<!-- Table -->
								<table class="cha-table cha-feedback-table">
									<thead>
										<tr>
											<th class="cha-col-title"><?php esc_html_e( 'Title', 'changeloger' ); ?></th>
											<th class="cha-col-category"><?php esc_html_e( 'Category', 'changeloger' ); ?></th>
											<th class="cha-col-status"><?php esc_html_e( 'Status', 'changeloger' ); ?></th>
											<th class="cha-col-votes"><?php esc_html_e( 'Votes', 'changeloger' ); ?></th>
											<th class="cha-col-date"><?php esc_html_e( 'Date', 'changeloger' ); ?></th>
											<th class="cha-col-author"><?php esc_html_e( 'Author', 'changeloger' ); ?></th>
										</tr>
									</thead>
									<tbody id="cha-feedback-list">
										<!-- Dynamic content via JS -->
									</tbody>
								</table>

								<!-- Empty State -->
								<div class="cha-empty-state" id="cha-empty-state" style="display: none;">
									<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 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
									</svg>
									<h3><?php esc_html_e( 'No feedback yet', 'changeloger' ); ?></h3>
									<p><?php esc_html_e( 'Feedback requests from your users will appear here.', 'changeloger' ); ?>
									</p>
								</div>

								<!-- Loading State -->
								<div class="cha-loading-state" id="cha-loading-state">
									<div class="cha-spinner"></div>
									<p><?php esc_html_e( 'Loading feedback...', 'changeloger' ); ?></p>
								</div>

								<!-- Pagination -->
								<div class="cha-pagination" id="cha-pagination"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Detail Modal (Enhanced) -->
			<div id="cha-detail-modal" class="cha-modal-overlay">
				<div class="cha-modal cha-modal-lg">
					<div class="cha-modal-header cha-feedback-modal-header">
						<div class="cha-feedback-header-content">
							<input type="text" id="cha-detail-title-input" class="cha-feedback-title-input"
								placeholder="<?php esc_attr_e( 'Feedback title...', 'changeloger' ); ?>">
							<span class="cha-type-badge"
								id="cha-detail-type-badge"><?php esc_html_e( 'Feedback', 'changeloger' ); ?></span>
						</div>
						<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 class="cha-modal-body cha-feedback-modal-body">
						<div class="cha-detail-content">
							<!-- Author Section -->
							<div class="cha-feedback-author" id="cha-detail-author-section">
								<img src="" alt="" class="cha-feedback-author-avatar" id="cha-detail-author-avatar">
								<div class="cha-feedback-author-info">
									<span class="cha-feedback-author-name"
										id="cha-detail-author-name"><?php esc_html_e( 'Unknown', 'changeloger' ); ?></span>
									<span class="cha-feedback-date"
										id="cha-detail-date"><?php esc_html_e( 'Posted recently', 'changeloger' ); ?></span>
								</div>
							</div>

							<!-- Badges -->
							<div class="cha-feedback-badges" id="cha-detail-badges">
								<span class="cha-feedback-badge product" id="cha-detail-product-badge">
									<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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
									</svg>
									<span id="cha-detail-product-name"><?php esc_html_e( 'No Product', 'changeloger' ); ?></span>
								</span>
								<span class="cha-feedback-badge category" id="cha-detail-category-badge">
									<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="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-7A2 2 0 013 12V7a4 4 0 014-4z" />
									</svg>
									<span
										id="cha-detail-category-name"><?php esc_html_e( 'Uncategorized', 'changeloger' ); ?></span>
								</span>
							</div>

							<!-- Description -->
							<div class="cha-feedback-description-wrapper">
								<label class="cha-label"><?php esc_html_e( 'Description', 'changeloger' ); ?></label>
								<textarea id="cha-detail-content" class="cha-textarea cha-feedback-description" rows="6"
									placeholder="<?php esc_attr_e( 'Add a description...', 'changeloger' ); ?>"></textarea>
							</div>
						</div>

						<div class="cha-detail-sidebar">
							<!-- Status -->
							<div class="cha-detail-meta">
								<label><?php esc_html_e( 'Status', 'changeloger' ); ?></label>
								<div class="cha-select-wrapper">
									<span class="cha-status-indicator" id="cha-detail-status-indicator"></span>
									<select id="cha-detail-status" class="cha-select">
										<?php foreach ( $statuses as $key => $label ) : ?>
											<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></option>
										<?php endforeach; ?>
									</select>
								</div>
							</div>

							<!-- Visibility -->
							<div class="cha-detail-meta">
								<label><?php esc_html_e( 'Visibility', 'changeloger' ); ?></label>
								<select id="cha-detail-visibility" class="cha-select">
									<option value="public"><?php esc_html_e( 'Public', 'changeloger' ); ?></option>
									<option value="private"><?php esc_html_e( 'Private', 'changeloger' ); ?></option>
								</select>
							</div>

							<!-- Product -->
							<div class="cha-detail-meta">
								<label><?php esc_html_e( 'Product', 'changeloger' ); ?></label>
								<select id="cha-detail-product" class="cha-select" required>
									<option value="" disabled><?php esc_html_e( 'Select product...', 'changeloger' ); ?></option>
									<?php
									$terms = get_terms(
										array(
											'taxonomy'   => Changeloger_Post_Types::TAXONOMY_PRODUCT,
											'hide_empty' => false,
											'orderby'    => 'term_id',
										)
									);
									if ( ! is_wp_error( $terms ) ) {
										foreach ( $terms as $term ) {
											printf(
												'<option value="%d">%s</option>',
												esc_attr( $term->term_id ),
												esc_html( $term->name )
											);
										}
									}
									?>
								</select>
							</div>

							<!-- Stats -->
							<div class="cha-detail-stats">
								<div class="cha-detail-stat">
									<div class="cha-stat-icon votes">
										<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="M5 15l7-7 7 7" />
										</svg>
									</div>
									<div class="cha-stat-info">
										<span class="cha-stat-count" id="cha-detail-votes">0</span>
										<span class="cha-stat-label"><?php esc_html_e( 'Votes', 'changeloger' ); ?></span>
									</div>
								</div>
								<div class="cha-detail-stat">
									<div class="cha-stat-icon comments">
										<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
										</svg>
									</div>
									<div class="cha-stat-info">
										<span class="cha-stat-count" id="cha-detail-comments">0</span>
										<span class="cha-stat-label"><?php esc_html_e( 'Comments', 'changeloger' ); ?></span>
									</div>
								</div>
							</div>

							<!-- Created Date -->
							<div class="cha-detail-created" id="cha-detail-created-section">
								<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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
								</svg>
								<span id="cha-detail-created-date"><?php esc_html_e( 'Created recently', 'changeloger' ); ?></span>
							</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-danger"
							id="cha-delete-feedback"><?php esc_html_e( 'Delete', 'changeloger' ); ?></button>
						<button type="button" class="cha-btn cha-btn-primary"
							id="cha-save-feedback"><?php esc_html_e( 'Save Changes', 'changeloger' ); ?></button>
					</div>
				</div>
			</div>

			<!-- Category Management Modal -->
			<div id="cha-category-modal" class="cha-modal-overlay">
				<div class="cha-modal">
					<div class="cha-modal-header">
						<h2><?php esc_html_e( 'Manage Categories', '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>
					<div class="cha-modal-body">
						<!-- Add new category form -->
						<div class="cha-add-category-form">
							<input type="text" id="cha-new-category-name" class="cha-input"
								placeholder="<?php esc_attr_e( 'New category name...', 'changeloger' ); ?>">
							<button type="button" id="cha-add-category-btn" class="cha-btn cha-btn-primary">
								<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>
								<?php esc_html_e( 'Add', 'changeloger' ); ?>
							</button>
						</div>
						<!-- Categories list -->
						<div class="cha-categories-list-wrap">
							<table class="cha-categories-table">
								<thead>
									<tr>
										<th><?php esc_html_e( 'Name', 'changeloger' ); ?></th>
										<th><?php esc_html_e( 'Slug', 'changeloger' ); ?></th>
										<th class="cha-col-count"><?php esc_html_e( 'Count', 'changeloger' ); ?></th>
										<th class="cha-col-actions"><?php esc_html_e( 'Actions', 'changeloger' ); ?></th>
									</tr>
								</thead>
								<tbody id="cha-categories-list">
									<!-- Dynamic content via JS -->
								</tbody>
							</table>
							<div class="cha-categories-empty" id="cha-categories-empty" style="display: none;">
								<p><?php esc_html_e( 'No categories found.', 'changeloger' ); ?></p>
							</div>
							<div class="cha-categories-loading" id="cha-categories-loading">
								<div class="cha-spinner"></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>

			<!-- Add 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>

			<!-- Embed Modal -->
			<div id="cha-embed-modal" class="cha-modal-overlay">
				<div class="cha-modal cha-modal-md">
					<div class="cha-modal-header">
						<h2><?php esc_html_e( 'Generate Embed Code', '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">
						<!-- 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>
						</div>

						<!-- Tab 1: iframe -->
						<div class="cha-embed-tab-content active" data-tab="iframe">
							<input type="hidden" id="cha-embed-type" value="feedback">
							<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 feedback board.', 'changeloger' ); ?>
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Frontend React Container -->
			<script>
				// Store for React app initialization
				window.chaFeedbackConfig = {
					containerId: 'cha-feedback-frontend',
					products: <?php echo wp_json_encode( $this->get_products_for_frontend() ); ?>,
					categories: <?php echo wp_json_encode( $categories ); ?>,
					statuses: <?php echo wp_json_encode( $statuses ); ?>,
					restUrl: '<?php echo esc_url( rest_url( 'changeloger/v1/' ) ); ?>',
					nonce: '<?php echo esc_attr( wp_create_nonce( 'wp_rest' ) ); ?>',
				};
			</script>
			<?php
		}

		/**
		 * Get products for frontend
		 *
		 * @return array
		 */
		private function get_products_for_frontend() {
			$terms = get_terms(
				array(
					'taxonomy'   => Changeloger_Post_Types::TAXONOMY_PRODUCT,
					'hide_empty' => false,
					'orderby'    => 'term_id',
				)
			);

			if ( is_wp_error( $terms ) ) {
				return array();
			}

			$products = array();
			foreach ( $terms as $term ) {
				$products[] = array(
					'id'   => $term->term_id,
					'name' => $term->name,
					'slug' => $term->slug,
				);
			}

			return $products;
		}
	}
} // End class_exists check
