<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template-scope locals in included view files are not plugin globals.
$nav_args           = \Fotogenic_AI\fotogenic_ai_get_signed_navigation_query_args();
$settings_tab       = isset( $nav_args['tab'] ) ? sanitize_key( (string) $nav_args['tab'] ) : 'settings';
$open_debug_log     = 'debug' === $settings_tab && ! empty( $debug_logging_enabled );
$settings_page      = \Fotogenic_AI\Settings_Page::instance();
$studio_url         = (string) ( $toolbar_view_model['studioUrl'] ?? \Fotogenic_AI\fotogenic_ai_get_studio_url() );
$website_url        = \Fotogenic_AI\Settings_Page::get_website_url();
$web_app_url        = \Fotogenic_AI\Settings_Page::get_web_app_url();
$pricing_url        = \Fotogenic_AI\Settings_Page::get_pricing_url();
$support_url        = \Fotogenic_AI\Settings_Page::get_support_url();
?>
<div id="fotogenic-ai-error-overlay-root" data-fa-error-fullscreen hidden aria-hidden="true"></div>
<div class="wrap fotogenic-ai-settings" data-fa-studio-page data-fa-ui-state="pending" aria-busy="true" data-auth-connected="<?php echo ! empty( $auth_connected ) ? '1' : '0'; ?>">
	<hr class="wp-header-end" />
	<div class="fotogenic-ai-settings-shell">
		<?php require FOTOGENIC_AI_PATH . 'templates/shared/studio-toolbar.php'; ?>

		<main class="fotogenic-ai-settings-page">
			<section class="fotogenic-ai-settings-heading">
				<div>
					<h1><?php esc_html_e( 'Settings', 'fotogenic-ai' ); ?></h1>
					<p><?php esc_html_e( 'Manage your account, global instructions, and plugin preferences.', 'fotogenic-ai' ); ?></p>
				</div>
					<a class="fotogenic-ai-settings-return" href="<?php echo esc_url( $studio_url ); ?>">
					<?php esc_html_e( 'Return to Studio', 'fotogenic-ai' ); ?>
				</a>
			</section>

			<?php settings_errors( 'fotogenic_ai_settings' ); ?>
			<form method="post" action="options.php" id="fotogenic-ai-settings-form" data-option-name="<?php echo esc_attr( $option_name ?? '' ); ?>">
				<?php settings_fields( 'fotogenic_ai_settings' ); ?>
				<input type="hidden" name="<?php echo esc_attr( $option_name ?? '' ); ?>[api_environment]" value="production" />

				<div class="fotogenic-ai-settings-groups">
					<section class="fotogenic-ai-settings-group" aria-labelledby="fotogenic-ai-settings-account-title">
						<div class="fotogenic-ai-settings-group__label">
							<h2 id="fotogenic-ai-settings-account-title"><?php esc_html_e( 'Account', 'fotogenic-ai' ); ?></h2>
							<p><?php esc_html_e( 'View your account status and manage credits.', 'fotogenic-ai' ); ?></p>
						</div>
						<div class="fotogenic-ai-settings-group__content">
							<?php $settings_page->render_auth_connection_field(); ?>
						</div>
					</section>

					<section class="fotogenic-ai-settings-group" aria-labelledby="fotogenic-ai-settings-guidance-title">
						<div class="fotogenic-ai-settings-group__label">
							<h2 id="fotogenic-ai-settings-guidance-title"><?php esc_html_e( 'Account guidance', 'fotogenic-ai' ); ?></h2>
							<p><?php esc_html_e( 'Set global instructions applied to all generations.', 'fotogenic-ai' ); ?></p>
						</div>
						<div class="fotogenic-ai-settings-group__content">
							<label class="fotogenic-ai-settings-guidance" for="fotogenic-ai-settings-custom-instructions">
								<span><?php esc_html_e( 'Global custom instructions', 'fotogenic-ai' ); ?></span>
								<?php $settings_page->render_custom_instructions_field(); ?>
								<small id="fotogenic-ai-settings-guidance-count" aria-live="polite">0 / 5,000</small>
							</label>
						</div>
					</section>

					<section class="fotogenic-ai-settings-group fotogenic-ai-settings-group--advanced" aria-labelledby="fotogenic-ai-settings-advanced-title">
						<div class="fotogenic-ai-settings-group__label">
							<h2 id="fotogenic-ai-settings-advanced-title"><?php esc_html_e( 'Advanced settings', 'fotogenic-ai' ); ?></h2>
							<p><?php esc_html_e( 'Maintenance, diagnostics, and other advanced options.', 'fotogenic-ai' ); ?></p>
						</div>
						<div class="fotogenic-ai-settings-group__content">
							<div class="fotogenic-ai-settings-advanced">
								<div class="fotogenic-ai-settings-advanced__row">
									<span class="fotogenic-ai-icon fotogenic-ai-icon--gear-six fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Refresh configuration', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Reload configuration options from Fotogenic AI.', 'fotogenic-ai' ); ?></small>
									</span>
									<button type="button" class="fotogenic-ai-settings-row-button" id="fotogenic-ai-config-refresh" disabled aria-disabled="true">
										<?php esc_html_e( 'Refresh', 'fotogenic-ai' ); ?>
									</button>
								</div>

								<div class="fotogenic-ai-settings-advanced__row">
									<span class="fotogenic-ai-icon fotogenic-ai-icon--arrows-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Refresh plugin cache', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Clear locally cached products, categories, and balances.', 'fotogenic-ai' ); ?></small>
									</span>
									<button type="button" class="fotogenic-ai-settings-row-button" id="fotogenic-ai-plugin-cache-refresh">
										<?php esc_html_e( 'Refresh', 'fotogenic-ai' ); ?>
									</button>
								</div>

								<label class="fotogenic-ai-settings-advanced__row fotogenic-ai-settings-advanced__row--toggle">
									<span class="fotogenic-ai-icon fotogenic-ai-icon--gear-six fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Debug logging', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Record diagnostic events for troubleshooting.', 'fotogenic-ai' ); ?></small>
									</span>
									<?php $settings_page->render_debug_logging_field(); ?>
								</label>

								<button
									type="button"
									class="fotogenic-ai-settings-debug-trigger<?php echo $open_debug_log ? ' is-open' : ''; ?>"
									id="fotogenic-ai-settings-debug-trigger"
									aria-expanded="<?php echo $open_debug_log ? 'true' : 'false'; ?>"
									aria-controls="fotogenic-ai-settings-debug-workspace"
									<?php echo empty( $debug_logging_enabled ) ? ' hidden' : ''; ?>
								>
									<span class="fotogenic-ai-icon fotogenic-ai-icon--gear-six fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Debug log', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Review recent diagnostic entries.', 'fotogenic-ai' ); ?></small>
									</span>
									<span class="fotogenic-ai-settings-debug-trigger__action">
										<span data-debug-trigger-label><?php echo $open_debug_log ? esc_html__( 'Hide log', 'fotogenic-ai' ) : esc_html__( 'Open log', 'fotogenic-ai' ); ?></span>
										<span class="fotogenic-ai-icon fotogenic-ai-icon--caret-down fotogenic-ai-icon--bold fotogenic-ai-icon--size-15" aria-hidden="true"></span>
									</span>
								</button>

								<section
									id="fotogenic-ai-settings-debug-workspace"
									class="fotogenic-ai-settings-debug-workspace"
									role="region"
									aria-labelledby="fotogenic-ai-settings-debug-workspace-title"
									tabindex="-1"
									<?php echo $open_debug_log ? '' : ' hidden'; ?>
								>
									<header class="fotogenic-ai-settings-debug-workspace__header">
										<div>
											<strong id="fotogenic-ai-settings-debug-workspace-title"><?php esc_html_e( 'Debug log', 'fotogenic-ai' ); ?></strong>
											<small><?php esc_html_e( 'Diagnostic events exclude prompts, credentials, and image data.', 'fotogenic-ai' ); ?></small>
										</div>
										<div class="fotogenic-ai-settings-debug-actions">
											<button type="button" class="fotogenic-ai-debug-btn" id="fotogenic-ai-log-refresh" aria-label="<?php esc_attr_e( 'Refresh debug log', 'fotogenic-ai' ); ?>"><span class="fotogenic-ai-icon fotogenic-ai-icon--arrows-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-15" aria-hidden="true"></span><?php esc_html_e( 'Refresh', 'fotogenic-ai' ); ?></button>
											<button type="button" class="fotogenic-ai-debug-btn" id="fotogenic-ai-log-download" disabled><span class="fotogenic-ai-icon fotogenic-ai-icon--download-simple fotogenic-ai-icon--regular fotogenic-ai-icon--size-15" aria-hidden="true"></span><?php esc_html_e( 'Download', 'fotogenic-ai' ); ?></button>
											<button type="button" class="fotogenic-ai-debug-btn fotogenic-ai-debug-btn--danger" id="fotogenic-ai-log-clear" disabled><span class="fotogenic-ai-icon fotogenic-ai-icon--trash fotogenic-ai-icon--regular fotogenic-ai-icon--size-15" aria-hidden="true"></span><?php esc_html_e( 'Clear', 'fotogenic-ai' ); ?></button>
										</div>
									</header>
									<div class="fotogenic-ai-settings-debug-filters">
										<label>
											<span><?php esc_html_e( 'Date', 'fotogenic-ai' ); ?></span>
											<span class="fotogenic-ai-settings-debug-select-shell">
												<select id="fotogenic-ai-log-date" class="fotogenic-ai-field">
													<option value="all"><?php esc_html_e( 'All dates', 'fotogenic-ai' ); ?></option>
													<option value="today"><?php esc_html_e( 'Today', 'fotogenic-ai' ); ?></option>
													<option value="7d"><?php esc_html_e( 'Last 7 days', 'fotogenic-ai' ); ?></option>
													<option value="30d"><?php esc_html_e( 'Last 30 days', 'fotogenic-ai' ); ?></option>
												</select>
												<span class="fotogenic-ai-icon fotogenic-ai-icon--caret-down fotogenic-ai-icon--bold fotogenic-ai-icon--size-13" aria-hidden="true"></span>
											</span>
										</label>
										<label>
											<span><?php esc_html_e( 'Level', 'fotogenic-ai' ); ?></span>
											<span class="fotogenic-ai-settings-debug-select-shell">
												<select id="fotogenic-ai-log-level" class="fotogenic-ai-field">
													<option value="all"><?php esc_html_e( 'All levels', 'fotogenic-ai' ); ?></option>
													<option value="info"><?php esc_html_e( 'Info', 'fotogenic-ai' ); ?></option>
													<option value="warning"><?php esc_html_e( 'Warning', 'fotogenic-ai' ); ?></option>
													<option value="error"><?php esc_html_e( 'Error', 'fotogenic-ai' ); ?></option>
												</select>
												<span class="fotogenic-ai-icon fotogenic-ai-icon--caret-down fotogenic-ai-icon--bold fotogenic-ai-icon--size-13" aria-hidden="true"></span>
											</span>
										</label>
										<span id="fotogenic-ai-log-count" aria-live="polite"></span>
									</div>
									<div id="fotogenic-ai-debug-log" class="fotogenic-ai-debug-log">
										<div class="fotogenic-ai-settings-debug-state" id="fotogenic-ai-debug-log-state" role="status">
											<span class="fotogenic-ai-icon fotogenic-ai-icon--arrows-clockwise fotogenic-ai-icon--regular fotogenic-ai-icon--size-20 fotogenic-ai-icon--spin" aria-hidden="true"></span>
											<strong><?php esc_html_e( 'Refreshing debug log…', 'fotogenic-ai' ); ?></strong>
										</div>
										<div class="fotogenic-ai-settings-debug-table-wrap" id="fotogenic-ai-debug-log-table-wrap" role="region" aria-label="<?php esc_attr_e( 'Debug log entries', 'fotogenic-ai' ); ?>" tabindex="0" hidden>
											<table id="fotogenic-ai-log-table">
												<thead>
													<tr>
														<th><?php esc_html_e( 'Date', 'fotogenic-ai' ); ?></th>
														<th><?php esc_html_e( 'Level', 'fotogenic-ai' ); ?></th>
														<th><?php esc_html_e( 'Context', 'fotogenic-ai' ); ?></th>
														<th><?php esc_html_e( 'Event', 'fotogenic-ai' ); ?></th>
													</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
										<footer class="fotogenic-ai-settings-debug-pagination" id="fotogenic-ai-log-pagination">
											<label>
												<span><?php esc_html_e( 'Rows', 'fotogenic-ai' ); ?></span>
												<span class="fotogenic-ai-settings-debug-select-shell">
													<select id="fotogenic-ai-log-page-size" class="fotogenic-ai-field">
														<option value="5">5</option>
														<option value="10">10</option>
													</select>
													<span class="fotogenic-ai-icon fotogenic-ai-icon--caret-down fotogenic-ai-icon--bold fotogenic-ai-icon--size-13" aria-hidden="true"></span>
												</span>
											</label>
											<div>
												<button type="button" id="fotogenic-ai-log-prev" aria-label="<?php esc_attr_e( 'Previous debug page', 'fotogenic-ai' ); ?>" disabled><span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-left fotogenic-ai-icon--regular fotogenic-ai-icon--size-14" aria-hidden="true"></span></button>
												<strong id="fotogenic-ai-log-page">1 / 1</strong>
												<button type="button" id="fotogenic-ai-log-next" aria-label="<?php esc_attr_e( 'Next debug page', 'fotogenic-ai' ); ?>" disabled><span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-right fotogenic-ai-icon--regular fotogenic-ai-icon--size-14" aria-hidden="true"></span></button>
											</div>
										</footer>
									</div>
								</section>

								<div class="fotogenic-ai-settings-advanced__row fotogenic-ai-settings-advanced__row--resources">
									<span class="fotogenic-ai-icon fotogenic-ai-icon--arrow-square-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Resources', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Website, Web App, pricing, and support.', 'fotogenic-ai' ); ?></small>
									</span>
									<div class="fotogenic-ai-settings-resource-links">
										<a href="<?php echo esc_url( $website_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Website', 'fotogenic-ai' ); ?></a>
										<a href="<?php echo esc_url( $web_app_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Web App', 'fotogenic-ai' ); ?></a>
										<a href="<?php echo esc_url( $pricing_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Pricing', 'fotogenic-ai' ); ?></a>
										<a href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener noreferrer"><span class="fotogenic-ai-icon fotogenic-ai-icon--user-circle fotogenic-ai-icon--regular fotogenic-ai-icon--size-15" aria-hidden="true"></span><?php esc_html_e( 'Support', 'fotogenic-ai' ); ?></a>
									</div>
								</div>

								<label class="fotogenic-ai-settings-advanced__row fotogenic-ai-settings-advanced__row--toggle fotogenic-ai-settings-advanced__row--danger">
									<span class="fotogenic-ai-icon fotogenic-ai-icon--warning fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Delete plugin data on uninstall', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Remove saved plugin data when Fotogenic AI is uninstalled.', 'fotogenic-ai' ); ?></small>
									</span>
									<?php $settings_page->render_delete_data_on_uninstall_field(); ?>
								</label>

								<div class="fotogenic-ai-settings-advanced__row fotogenic-ai-settings-advanced__row--danger fotogenic-ai-settings-advanced__row--logout" id="fotogenic-ai-settings-logout-row"<?php echo empty( $auth_connected ) ? ' hidden' : ''; ?>>
									<span class="fotogenic-ai-icon fotogenic-ai-icon--sign-out fotogenic-ai-icon--regular fotogenic-ai-icon--size-18" aria-hidden="true"></span>
									<span class="fotogenic-ai-settings-advanced__copy">
										<strong><?php esc_html_e( 'Log out', 'fotogenic-ai' ); ?></strong>
										<small><?php esc_html_e( 'Disconnect this WordPress site from Fotogenic AI.', 'fotogenic-ai' ); ?></small>
									</span>
									<button type="button" class="fotogenic-ai-settings-row-button fotogenic-ai-settings-row-button--danger" id="fotogenic-ai-auth-logout"<?php echo empty( $auth_connected ) ? ' hidden' : ''; ?>>
										<?php esc_html_e( 'Log out', 'fotogenic-ai' ); ?>
									</button>
								</div>
							</div>
						</div>
					</section>
				</div>

				<footer class="fotogenic-ai-settings-footer" data-studio-workspace-footer>
					<button type="submit" class="fotogenic-ai-settings-save" id="fotogenic-ai-settings-save">
						<span class="fotogenic-ai-icon fotogenic-ai-icon--check fotogenic-ai-icon--bold fotogenic-ai-icon--size-18" aria-hidden="true"></span>
						<?php esc_html_e( 'Save changes', 'fotogenic-ai' ); ?>
					</button>
				</footer>
			</form>
		</main>
	</div>
</div>

<div class="fotogenic-ai-settings-confirm-layer fotogenic-ai-contained-overlay" id="fotogenic-ai-settings-clear-confirm" hidden>
	<section class="fotogenic-ai-settings-confirm" role="alertdialog" aria-modal="true" aria-labelledby="fotogenic-ai-settings-clear-confirm-title">
		<span class="fotogenic-ai-icon fotogenic-ai-icon--warning fotogenic-ai-icon--fill fotogenic-ai-icon--size-17" aria-hidden="true"></span>
		<h2 id="fotogenic-ai-settings-clear-confirm-title" data-fa-overlay-heading tabindex="-1"><?php esc_html_e( 'Clear all debug entries?', 'fotogenic-ai' ); ?></h2>
		<p><?php esc_html_e( 'Downloaded files are not affected. This permanently removes the stored diagnostic entries.', 'fotogenic-ai' ); ?></p>
		<div>
			<button type="button" class="fotogenic-ai-settings-confirm-button" id="fotogenic-ai-settings-clear-cancel"><?php esc_html_e( 'Cancel', 'fotogenic-ai' ); ?></button>
			<button type="button" class="fotogenic-ai-settings-confirm-button fotogenic-ai-settings-row-button--danger" id="fotogenic-ai-settings-clear-confirm-button"><?php esc_html_e( 'Clear log', 'fotogenic-ai' ); ?></button>
		</div>
	</section>
</div>
<div class="fotogenic-ai-settings-confirm-layer fotogenic-ai-contained-overlay" id="fotogenic-ai-settings-logout-confirm" hidden>
	<section class="fotogenic-ai-settings-confirm" role="alertdialog" aria-modal="true" aria-labelledby="fotogenic-ai-settings-logout-confirm-title" aria-describedby="fotogenic-ai-settings-logout-confirm-description">
		<span class="fotogenic-ai-icon fotogenic-ai-icon--warning fotogenic-ai-icon--fill fotogenic-ai-icon--size-17" aria-hidden="true"></span>
		<h2 id="fotogenic-ai-settings-logout-confirm-title" data-fa-overlay-heading tabindex="-1"><?php esc_html_e( 'Disconnect this site?', 'fotogenic-ai' ); ?></h2>
		<p id="fotogenic-ai-settings-logout-confirm-description"><?php esc_html_e( 'Generation will stay unavailable until you connect this WordPress site again. Existing Media Library files and plugin settings are not deleted.', 'fotogenic-ai' ); ?></p>
		<div>
			<button type="button" class="fotogenic-ai-settings-confirm-button" id="fotogenic-ai-settings-logout-cancel"><?php esc_html_e( 'Cancel', 'fotogenic-ai' ); ?></button>
			<button type="button" class="fotogenic-ai-settings-confirm-button fotogenic-ai-settings-row-button--danger" id="fotogenic-ai-settings-logout-confirm-button"><?php esc_html_e( 'Disconnect', 'fotogenic-ai' ); ?></button>
		</div>
	</section>
</div>
<?php // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
