<?php
/**
 * Model Usage Admin Page
 *
 * @package MindWebConcierge
 */

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

add_action( 'admin_enqueue_scripts', 'mindweco_model_usage_enqueue_scripts' );

function mindweco_model_usage_enqueue_scripts( $hook_suffix ) {
	if ( 'mind-web_page_mind-web-model-usage' !== $hook_suffix ) {
		return;
	}

	$plugin_url = plugin_dir_url( __DIR__ );
	$ver        = defined( 'MIND_WEB_VERSION' ) ? MIND_WEB_VERSION : '1.3.0';

	wp_enqueue_style(
		'mindweco-model-usage-style',
		$plugin_url . 'assets/css/mindweco_model_usage.css',
		array(),
		$ver
	);

	wp_enqueue_script(
		'mindweco-toast',
		$plugin_url . 'assets/js/components/Toast.js',
		array( 'jquery' ),
		$ver,
		true
	);

	wp_enqueue_script(
		'mindweco-modal',
		$plugin_url . 'assets/js/components/Modal.js',
		array( 'jquery' ),
		$ver,
		true
	);


	wp_enqueue_script(
		'mindweco-model-usage-js',
		$plugin_url . 'assets/js/mindweco_create_attach_llm_config.js',
		array( 'jquery', 'mindweco-toast', 'mindweco-modal' ),
		$ver,
		true
	);

	wp_localize_script(
		'mindweco-model-usage-js', 
		'mindwecoLLMConfig',
		array(
			'ajax_url'      => admin_url( 'admin-ajax.php' ),
			'nonce'         => wp_create_nonce( 'mindweco_login_nonce' ),
			'llm_config_id' => get_option( 'mindweco_llm_config_id' ),
		)
	);
}

function mindweco_model_usage_page() {

	if ( ! current_user_can( 'manage_options' ) ) {
		wp_die( esc_html__( 'You do not have permission to access this page.' , 'mind-web-concierge') );
	}

	$api_settings = array(
		'name'       => get_option( 'mindweco_api_llm_name', '' ),
		'base_url'   => get_option( 'mindweco_api_base_url_llm', '' ),
		'model_name' => get_option( 'mindweco_api_model_name', '' ),
		'provider'   => get_option( 'mindweco_api_provider', '' ),
		'api_key'    => get_option( 'mindweco_api_key', '' ),
	);

	$api_key_display = ! empty( $api_settings['api_key'] )
		? '••••••••' . substr( $api_settings['api_key'], -4 )
		: '';

	?>
	<div class="wrap mindweco-model-usage-wrapper">

		<div class="mindweco-header-card">
			<h4 class= "model-usage-title">
				<i class="bi bi-sliders" aria-hidden="true"></i>
				<?php esc_html_e( 'Mind Web Model & Usage', 'mind-web-concierge' ); ?>
			</h4>
		</div>

		<h2 class="nav-tab-wrapper mindweco-nav-tabs">
			<a href="#build_model" class="nav-tab nav-tab-active mindweco-nav-tab" data-tab="build_model">
				<i class="bi bi-sliders" aria-hidden="true"></i>
				<?php esc_html_e( 'Build a Model', 'mind-web-concierge' ); ?>
			</a>
			<a href="#openai_provider" class="nav-tab mindweco-nav-tab" data-tab="openai_provider" data-provider="openai">
				<i class="bi bi-journal-text" aria-hidden="true"></i>
				<?php esc_html_e( 'OpenAI', 'mind-web-concierge' ); ?>
			</a>
		</h2>

		<div id="tab-build_model" class="tab-content build-model-wrapper" style="display:block;">
			<div class="build-model-info">
				<div class="build-model-header">
					<i class="bi bi-robot" aria-hidden="true"></i>
					<h2><?php esc_html_e( 'You are using OpenAI Model', 'mind-web-concierge' ); ?></h2>
				</div>

				<div class="build-model-content">
					<p>
						<?php
						printf(
							esc_html__( 'All model configurations and settings are managed through the %s tab.', 'mind-web-concierge' ),
							'<strong>' . esc_html__( 'OpenAI', 'mind-web-concierge' ) . '</strong>'
						);
						?>
					</p>
					<p>
						<?php
						printf(
							esc_html__( 'Click on the %s tab above to configure your model settings, API keys, and other options.', 'mind-web-concierge' ),
							'<strong>' . esc_html__( 'OpenAI', 'mind-web-concierge' ) . '</strong>'
						);
						?>
					</p>
				</div>

				<div class="build-model-actions">
					<button type="button" class="button-large-action go-to-tab-btn" data-tab="openai_provider">
						<i class="bi bi-arrow-right-circle" aria-hidden="true"></i>
						<?php esc_html_e( 'Go to OpenAI Configuration', 'mind-web-concierge' ); ?>
					</button>
				</div>
			</div>
		</div>

		<div id="tab-openai_provider" class="tab-content" style="display:none;">
			<div class="config-header-wrapper">
				<div class="config-header-info">
					<h2>
						<i class="bi bi-wrench" aria-hidden="true"></i>
						<?php esc_html_e( 'OpenAI Configuration', 'mind-web-concierge' ); ?>
					</h2>
					<p class="tab-subtitle">
						<?php esc_html_e( 'Create and attach an OpenAI LLM configuration', 'mind-web-concierge' ); ?>
					</p>
				</div>

				<div class="config-header-actions">
					<button type="button" class="btn btn-update-llm">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2.4 -2.4 28.80 28.80" fill="none" aria-hidden="true" focusable="false" style="margin-right:8px;">
							<path d="M18.3785 8.44975L11.4637 15.3647C11.1845 15.6439 10.8289 15.8342 10.4417 15.9117L7.49994 16.5L8.08829 13.5582C8.16572 13.1711 8.35603 12.8155 8.63522 12.5363L15.5501 5.62132M18.3785 8.44975L19.7927 7.03553C20.1832 6.64501 20.1832 6.01184 19.7927 5.62132L18.3785 4.20711C17.988 3.81658 17.3548 3.81658 16.9643 4.20711L15.5501 5.62132M18.3785 8.44975L15.5501 5.62132" stroke="#0073aa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M5 20H19" stroke="#0073aa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						<span><?php esc_html_e( 'Edit', 'mind-web-concierge' ); ?></span>
					</button>
					<button class="btn btn-success btn-save-changes d-none" id="llm-save-changes">
						<i class="bi bi-check-circle" aria-hidden="true"></i>
						<?php esc_html_e( 'Save Changes', 'mind-web-concierge' ); ?>
					</button>
				</div>
			</div>

			<form method="post" id="llm-config-form">
				<?php wp_nonce_field( 'mindweco_api_llm_settings_action', 'mindweco_api_llm_settings_nonce' ); ?>

				<table class="form-table">
					<tbody>
						<tr>
							<th scope="row">
								<label for="api-llm-name">
									<i class="bi bi-tag" aria-hidden="true"></i>
									<?php esc_html_e( 'Name', 'mind-web-concierge' ); ?>
								</label>
							</th>
							<td>
								<input
									type="text"
									name="name"
									id="api-llm-name"
									class="form-input"
									value="<?php echo esc_attr( $api_settings['name'] ); ?>"
									placeholder="<?php esc_attr_e( 'e.g., Production GPT-4, Dev Claude', 'mind-web-concierge' ); ?>"
								/>
								<p class="description">
									<i class="dashicons dashicons-info" aria-hidden="true"></i>
									<?php esc_html_e( 'Give this LLM configuration a memorable name to easily identify it later.', 'mind-web-concierge' ); ?>
								</p>
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="api-base-url-llm">
									<i class="bi bi-link-45deg" aria-hidden="true"></i>
									<?php esc_html_e( 'Base URL', 'mind-web-concierge' ); ?>
								</label>
							</th>
							<td>
								<input
									type="url"
									name="llm_base_url"
									id="api-base-url-llm"
									class="form-input"
									value="<?php echo esc_url( $api_settings['base_url'] ); ?>"
									placeholder="https://api.example/v1/"
								/>
								<p class="description">
									<i class="dashicons dashicons-info" aria-hidden="true"></i>
									<?php esc_html_e( 'The API endpoint URL provided by your LLM provider (must include protocol https://).', 'mind-web-concierge' ); ?>
								</p>
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="api-model-name">
									<i class="bi bi-cpu" aria-hidden="true"></i>
									<?php esc_html_e( 'Model Name', 'mind-web-concierge' ); ?>
								</label>
							</th>
							<td>
								<input
									type="text"
									name="model_name"
									id="api-model-name"
									class="form-input"
									value="<?php echo esc_attr( $api_settings['model_name'] ); ?>"
									placeholder="<?php esc_attr_e( 'e.g., gpt-4-turbo, claude-3-opus', 'mind-web-concierge' ); ?>"
								/>
								<p class="description">
									<i class="dashicons dashicons-info" aria-hidden="true"></i>
									<?php esc_html_e( "Specify the exact model identifier as defined by your provider's API documentation.", 'mind-web-concierge' ); ?>
								</p>
							</td>
						</tr>

						<tr class="d-none">
							<th scope="row">
								<label for="api-provider">
									<i class="bi bi-building" aria-hidden="true"></i>
									<?php esc_html_e( 'Provider', 'mind-web-concierge' ); ?>
								</label>
							</th>
							<td>
								<input
									type="text"
									name="provider"
									id="api-provider"
									class="form-input"
									value="<?php echo esc_attr( $api_settings['provider'] ); ?>"
									readonly
								/>
								<p class="description">
									<i class="dashicons dashicons-info" aria-hidden="true"></i>
									<?php esc_html_e( 'Provider is selected automatically based on the active tab.', 'mind-web-concierge' ); ?>
								</p>
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="api-key">
									<i class="bi bi-key" aria-hidden="true"></i>
									<?php esc_html_e( 'API Key', 'mind-web-concierge' ); ?>
								</label>
							</th>
							<td>
								<div class="input-wrapper">
									<input
										type="password"
										name="api_key"
										id="api-key"
										class="form-input"
										value="<?php echo esc_attr( $api_key_display ); ?>"
										placeholder="sk-••••••••••••••••"
										autocomplete="new-password"
									/>
									<button type="button" id="toggle-api-key" class="toggle-password-btn" aria-label="<?php esc_attr_e( 'Toggle API key visibility', 'mind-web-concierge' ); ?>">
										<i class="bi bi-eye" id="eye-icon" aria-hidden="true"></i>
									</button>
								</div>
								<p class="description">
									<i class="dashicons dashicons-info" aria-hidden="true"></i>
									<?php esc_html_e( 'Enter your private API authentication key. This will be encrypted and stored securely in the database.', 'mind-web-concierge' ); ?>
								</p>
							</td>
						</tr>
					</tbody>
				</table>

				<div class="submit-section">
					<button type="submit" class="button-primary-llm-config" id="mindweco-connect-api">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
							<path d="M7 2v6H5v4a7 7 0 0014 0V8h-2V2h-2v6H9V2H7zm0 10V10h10v2a5 5 0 01-10 0z"/>
						</svg>
						<span><?php esc_html_e( 'Connect LLM', 'mind-web-concierge' ); ?></span>
					</button>
					<button type="button" class="btn btn-danger btn-disconnect-llm d-none" id="mindweco-llm-disconnect-api">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
							<path d="M7 2v6H5v4c0 1.5.5 2.9 1.3 4L3 19l2 2 3.2-3.2A7 7 0 0019 12V8h-2V2h-2v6H9V2H7zm0 10V10h10v2a5 5 0 01-8.9 3.1l1.4-1.4A3 3 0 0017 12v-2H7z"/>
						</svg>
						<span><?php esc_html_e( 'Disconnect LLM', 'mind-web-concierge' ); ?></span>
					</button>
				</div>
			</form>
		</div>
		
	</div>
	<?php
}