<?php

// If this file is called directly, abort.
if (! defined('ABSPATH')) {
	exit;
}

class AthenaSearchShortcode {
	public function __construct() {
		add_shortcode('athena_search', [$this, 'renderAthenaSearch']);
	}

	public function enqueue_assets() {
		if (!wp_script_is('athena-x-ai-index', 'enqueued')) {
			wp_enqueue_script('athena-x-ai-index', ASWP_PLUGIN_URL . 'public/js/athena-x-ai-index.js', [], '1.0.0', true);

			// Localize config
			$options = get_option('athena_options', []);
			$apiUrl = rtrim($options['athena_dashboard_url'] ?? '', '/') . '/';
			$websiteToken = $options['dashboard_website_token'] ?? '';
			$page_id = intval($options['athena_landing_page'] ?? 0);
			$full_url = $page_id ? get_permalink($page_id) : home_url('/');
			$form_url = untrailingslashit(wp_make_link_relative($full_url)) ?: '/';

			wp_localize_script('athena-x-ai-index', 'AthenaConfig', [
				'apiUrl' => $apiUrl,
				'originUrl' => get_site_url() . '/',
				'websiteToken' => $websiteToken,
				'formUrl' => $form_url,
			]);
		}

		wp_enqueue_style('autocomplete-css', ASWP_PLUGIN_URL . 'public/css/autocomplete.css', [], '1.0.0');
		wp_enqueue_style('cropper-css', ASWP_PLUGIN_URL . 'public/css/cropper.css', [], '1.0.0');
		wp_enqueue_style('search-athena-landing-css', ASWP_PLUGIN_URL . 'public/css/search-athena-landing.css', [], '1.0.0');
	}

	public function renderAthenaSearch($atts) {
		$this->enqueue_assets();

		$mic_img_url = esc_url(ASWP_PLUGIN_URL . 'public/img/mic.svg');
		$mic_on_img_url = esc_url(ASWP_PLUGIN_URL . 'public/img/mic-on.svg');

		return '
			<div class="searchareaOverlay">
				<div class="search-form">
					<div class="search-container">
						<form id="search_mini_form" class="form minisearch">
							<label for="search" style="display: none;"></label>
							<div style="display: flex; position: relative">
								<input
										type="text"
										id="search"
										name="q"
										class="search-input"
										autocomplete="off"
										autocapitalize="off"
										spellcheck="false"
										placeholder="Search ..."
										value=""
								/>

								<div class="athena-search-suggestion__container">
									<span class="athena-search-suggestion__text"></span>
									<span class="athena-search-suggestion__tab-button">tab</span>
								</div>
							</div>

							<div id="search_autocomplete" class="athena-autocomplete athena-search-autocomplete" style="display: none;">
								<div class="background-overlay-autocomplete"></div>

								<div class="athena-autocomplete__wrapper">
									<div class="athena-autocomplete__flex-container"></div>
								</div>
							</div>

							<div id="visual_similarity_search" class="visual-similarity-search" style="display: none"></div>

							<div id="audio_search" class="audio-search" style="display: none">
								<div class="audio-search__inner-container">
									<p class="audio-search-heading"></p>
									<div class="audio-search_inner-bottom-container">
										<p class="audio-search-icon-text">ʕಠಿᴥಠʔ</p>
										<div id="audio-search__waveform">
											<canvas id="audio-search__canvas"></canvas>
											<div class="audio-bar">
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
												<div class="bar"></div>
											</div>
										</div>
										<p class="audio-search-text-bottom">Listening to you carefully ...</p>
									</div>
								</div>
							</div>

							<div class="arrow-search"></div>

							<div class="category-navigation-container"></div>
						</form>

						<div class="close-search-btn"></div>

						<div class="microphone-container athena-helper-show">
							<button id="startButton" class="button-start-search athena-voice-search__active-button" type="button" data-should-prepend-search-results="false">
								<img src="'. $mic_img_url .'" width="22" height="28" alt="Voice Search" class="audio__image"/>
							</button>
							<button id="stopButton" class="button-stop-search athena-voice-search__inactive-button" type="button">
								<img src="'. $mic_on_img_url .'" alt="Voice Search" class="audio__image"/>
							</button>
						</div>

						<div class="visual-similarity__button-container-search">
							<button id="visual-similarity__camera-button" class="visual-similarity__camera-button">

							</button>
						</div>
						<div class="search-icon__autocomplete-container">
							<button id="search-icon__autocomplete" class="search-icon__autocomplete" type="submit" value="submit"></button>
						</div>
					</div>
				</div>
			</div>
		';
	}
}