<?php
/**
 * BaseCloud Boost — Appearance Settings
 *
 * Cosmetic-only settings for the Boost admin itself: interface mode (light /
 * dark), optional dark-mode ambient backdrops (particles / video loops), and
 * the four accent colours that drive every design token. Mode + colours
 * preview LIVE (admin.js bindAppearance) and never touch the front end of
 * the site.
 *
 * @package BaseCloud\Boost
 */

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

use BaseCloud\Boost\Admin\Admin_Controller;

$options  = (array) get_option( BCBOOST_OPTIONS_KEY, [] );
$colors   = Admin_Controller::appearance_colors();
$defaults = Admin_Controller::APPEARANCE_DEFAULTS;
$theme    = Admin_Controller::normalize_theme( (string) ( $options['admin_theme'] ?? 'dark' ) );

$modes = [
	'dark'  => [
		'label' => __( 'Dark', 'basecloud-boost' ),
		'desc'  => __( 'Deep-space glass surfaces with your accent glow. The signature Boost look.', 'basecloud-boost' ),
	],
	'light' => [
		'label' => __( 'Light', 'basecloud-boost' ),
		'desc'  => __( 'Clean paper surfaces, crisp fields and high-contrast text. Easy on bright screens.', 'basecloud-boost' ),
	],
];

$backdrops = [
	'classic' => [
		'label' => __( 'Classic Particles', 'basecloud-boost' ),
		'desc'  => __( 'Gentle drifting particles on the dark UI. Lightweight 2D canvas.', 'basecloud-boost' ),
	],
];

// Ambient video backdrops (compressed WebM loops in admin/videos/). Only offer
// files that actually shipped — a missing file silently drops its card.
$video_themes = [];
foreach ( [
	'boost'     => __( 'Boost Rocket', 'basecloud-boost' ),
	'goop'      => __( 'Goop Motion', 'basecloud-boost' ),
	'lava-lamp' => __( 'Lava Lamp', 'basecloud-boost' ),
	'colours'   => __( 'Colours', 'basecloud-boost' ),
	'fish-tank' => __( 'Fish Tank', 'basecloud-boost' ),
	'zombies'   => __( 'Zombies', 'basecloud-boost' ),
] as $bcb_slug => $bcb_label ) {
	if ( is_file( BCBOOST_DIR . 'admin/videos/' . $bcb_slug . '.webm' ) ) {
		$video_themes[ 'video-' . $bcb_slug ] = [
			'label' => $bcb_label,
			'src'   => BCBOOST_URL . 'admin/videos/' . $bcb_slug . '.webm',
		];
	}
}

$color_fields = [
	'primary'   => [
		'label' => __( 'Primary Accent', 'basecloud-boost' ),
		'desc'  => __( 'Buttons, toggles, success states and the active glow.', 'basecloud-boost' ),
	],
	'secondary' => [
		'label' => __( 'Secondary Accent', 'basecloud-boost' ),
		'desc'  => __( 'Purple highlights — cards, charts, secondary actions.', 'basecloud-boost' ),
	],
	'info'      => [
		'label' => __( 'Info Accent', 'basecloud-boost' ),
		'desc'  => __( 'Blue details — stat icons, info borders.', 'basecloud-boost' ),
	],
	'highlight' => [
		'label' => __( 'Highlight Accent', 'basecloud-boost' ),
		'desc'  => __( 'Cyan details — focus rings and fine highlights.', 'basecloud-boost' ),
	],
];
?>
<div class="bcboost-wrap">
	<?php include __DIR__ . '/partials/header.php'; ?>

	<div class="bcboost-page-header">
		<div>
			<h2 class="bcboost-page-title"><?php esc_html_e( 'Appearance', 'basecloud-boost' ); ?></h2>
			<p class="bcboost-page-subtitle"><?php esc_html_e( 'Make Boost yours — pick a backdrop and your own colours. Cosmetic only: nothing here touches your website or its speed.', 'basecloud-boost' ); ?></p>
		</div>
	</div>

	<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" id="bcboost-appearance-form">
		<?php wp_nonce_field( 'BCBOOST_save_settings' ); ?>
		<input type="hidden" name="action" value="BCBOOST_save_settings">

		<div class="bcboost-card bcboost-card--accent-purple">
			<h3><span class="bcboost-section-icon" aria-hidden="true">
				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9z"/></svg>
			</span> <?php esc_html_e( 'Interface Mode', 'basecloud-boost' ); ?></h3>

			<p class="bcboost-field-desc" style="margin:0 0 14px;">
				<?php esc_html_e( 'Light and Dark preview instantly — every panel, dropdown and text field adapts so nothing is ever hard to read.', 'basecloud-boost' ); ?>
			</p>

			<div class="bcboost-theme-grid" role="radiogroup" aria-label="<?php esc_attr_e( 'Interface mode', 'basecloud-boost' ); ?>">
				<?php foreach ( $modes as $slug => $t ) : ?>
				<label class="bcboost-theme-card<?php echo $theme === $slug ? ' bcboost-theme-card--active' : ''; ?>">
					<input type="radio" name="admin_theme" value="<?php echo esc_attr( $slug ); ?>" <?php checked( $theme, $slug ); ?>>
					<span class="bcboost-theme-swatch bcboost-theme-swatch--<?php echo esc_attr( $slug ); ?>" aria-hidden="true"></span>
					<span class="bcboost-theme-name"><?php echo esc_html( $t['label'] ); ?></span>
					<span class="bcboost-theme-desc"><?php echo esc_html( $t['desc'] ); ?></span>
				</label>
				<?php endforeach; ?>
			</div>

			<h4 style="margin:22px 0 10px;color:var(--bcboost-text-bright);font-size:13px;letter-spacing:.04em;text-transform:uppercase;">
				<?php esc_html_e( 'Ambient Backdrops', 'basecloud-boost' ); ?>
			</h4>
			<p class="bcboost-field-desc" style="margin:0 0 12px;">
				<?php esc_html_e( 'Optional motion behind the dark glass UI — picking one switches to Dark mode. Admin-only, never loaded on your website. Hover a video card to preview its motion.', 'basecloud-boost' ); ?>
			</p>
			<div class="bcboost-theme-grid" role="radiogroup" aria-label="<?php esc_attr_e( 'Ambient backdrop', 'basecloud-boost' ); ?>">
				<?php foreach ( $backdrops as $slug => $t ) : ?>
				<label class="bcboost-theme-card<?php echo $theme === $slug ? ' bcboost-theme-card--active' : ''; ?>">
					<input type="radio" name="admin_theme" value="<?php echo esc_attr( $slug ); ?>" <?php checked( $theme, $slug ); ?>>
					<span class="bcboost-theme-swatch bcboost-theme-swatch--<?php echo esc_attr( $slug ); ?>" aria-hidden="true"></span>
					<span class="bcboost-theme-name"><?php echo esc_html( $t['label'] ); ?></span>
					<span class="bcboost-theme-desc"><?php echo esc_html( $t['desc'] ); ?></span>
				</label>
				<?php endforeach; ?>
				<?php foreach ( $video_themes as $slug => $t ) : ?>
				<label class="bcboost-theme-card<?php echo $theme === $slug ? ' bcboost-theme-card--active' : ''; ?>">
					<input type="radio" name="admin_theme" value="<?php echo esc_attr( $slug ); ?>" <?php checked( $theme, $slug ); ?>>
					<video class="bcboost-theme-swatch bcboost-theme-swatch--video"
						muted loop playsinline preload="metadata" tabindex="-1" aria-hidden="true"
						src="<?php echo esc_url( $t['src'] ); ?>"></video>
					<span class="bcboost-theme-name"><?php echo esc_html( $t['label'] ); ?></span>
					<span class="bcboost-theme-desc"><?php esc_html_e( 'Ambient video loop · Dark', 'basecloud-boost' ); ?></span>
				</label>
				<?php endforeach; ?>
			</div>

			<p class="bcboost-field-desc" style="margin-top:12px;">
				<?php esc_html_e( 'Mode and colours preview instantly; backdrop motion starts after saving (the engine is swapped on page load).', 'basecloud-boost' ); ?>
			</p>
		</div>

		<div class="bcboost-card bcboost-card--accent-green">
			<h3><span class="bcboost-section-icon" aria-hidden="true">
				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a10 10 0 1 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.2a1.8 1.8 0 0 0-1.4 2.9 1.8 1.8 0 0 1-1.4 3.1z"/></svg>
			</span> <?php esc_html_e( 'Accent Colours', 'basecloud-boost' ); ?></h3>

			<p class="bcboost-field-desc" style="margin-bottom:16px;">
				<?php esc_html_e( 'Every button, glow and chart re-tints from these four colours — watch the page change as you pick. Both Light and Dark mode adapt them automatically for readability.', 'basecloud-boost' ); ?>
			</p>

			<?php foreach ( $color_fields as $slot => $f ) :
				$key = 'admin_color_' . $slot;
				$val = $colors[ $slot ];
			?>
			<div class="bcboost-field bcboost-field--color">
				<label for="<?php echo esc_attr( $key ); ?>">
					<span class="bcboost-field-label"><?php echo esc_html( $f['label'] ); ?></span>
					<span class="bcboost-field-desc"><?php echo esc_html( $f['desc'] ); ?></span>
				</label>
				<span class="bcboost-color-input-pair">
					<input type="color"
						id="<?php echo esc_attr( $key ); ?>"
						name="<?php echo esc_attr( $key ); ?>"
						value="<?php echo esc_attr( $val ); ?>"
						data-slot="<?php echo esc_attr( $slot ); ?>"
						class="bcboost-color-swatch-input">
					<input type="text"
						value="<?php echo esc_attr( $val ); ?>"
						data-hex-for="<?php echo esc_attr( $key ); ?>"
						class="bcboost-input bcboost-color-hex"
						maxlength="7"
						pattern="#?[0-9a-fA-F]{6}"
						aria-label="<?php echo esc_attr( $f['label'] . ' ' . __( 'hex value', 'basecloud-boost' ) ); ?>"
						spellcheck="false" autocomplete="off">
				</span>
			</div>
			<?php endforeach; ?>

			<div style="margin-top:18px;border-top:1px solid rgba(255,255,255,.07);padding-top:18px;display:flex;gap:12px;flex-wrap:wrap;">
				<button type="button" class="bcboost-btn bcboost-btn--secondary" id="bcboost-appearance-reset">
					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
					<?php esc_html_e( 'Reset to BaseCloud defaults', 'basecloud-boost' ); ?>
				</button>
			</div>
		</div>

		<div class="bcboost-form-footer">
			<button type="submit" class="bcboost-btn bcboost-btn--primary">
				<span class="dashicons dashicons-saved"></span>
				<?php esc_html_e( 'Save Appearance', 'basecloud-boost' ); ?>
			</button>
		</div>
	</form>
</div>
