<?php
/**
 * Admin Page View
 *
 * @package ResponsiveMobileSelect\Admin\Views
 * @since 2.0.0
 */

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

/** @var array  $data      – aktuelle Settings (aus Admin::render_admin_page) */
/** @var string $page_slug – Seiten-Slug (aus Admin::render_admin_page) */

// Hilfsdaten aus WP holen.
$registered_locations = get_registered_nav_menus(); // slug => Label
$theme_locations      = get_nav_menu_locations();   // slug => term_id
$menus                = wp_get_nav_menus();         // Liste der Menüs (Objekte)
?>
<div class="wrap">
	<h1><?php esc_html_e( 'Responsive Mobile Select Menu', 'responsive-mobile-select-menu' ); ?></h1>

	<!-- Dark/Light Mode Toggle -->
	<div class="responsive-menu-theme-toggle" id="theme-toggle">
		<span class="theme-icon light">☀️</span>
		<div class="toggle-switch"></div>
		<span class="theme-icon dark">🌙</span>
	</div>

	<div id="rms-notice-success" class="notice notice-success is-dismissible" style="display:none;">
		<p><?php esc_html_e( 'Settings saved.', 'responsive-mobile-select-menu' ); ?></p>
	</div>
	<div id="rms-notice-error" class="notice notice-error is-dismissible" style="display:none;">
		<p><?php esc_html_e( 'Error saving settings.', 'responsive-mobile-select-menu' ); ?></p>
	</div>

	<div class="responsive-menu-admin-container">
		<div class="responsive-menu-admin-content">
			<form id="rms-settings-form" class="responsive-menu-settings-form">
				<input type="hidden" name="action" value="rms_save_settings" />
				<input type="hidden" name="nonce" value="<?php echo esc_attr( wp_create_nonce( 'rms_settings' ) ); ?>" />

				<div class="responsive-menu-settings-section">
					<h2><?php esc_html_e( 'General Settings', 'responsive-mobile-select-menu' ); ?></h2>
					
					<table class="form-table" role="presentation">
						<tbody>
						<tr>
							<th scope="row">
								<label for="rms-max-width"><?php esc_html_e( 'Max width (px) for dropdown', 'responsive-mobile-select-menu' ); ?></label>
							</th>
							<td>
								<input type="number" min="0" step="1" id="rms-max-width" name="max_width" value="<?php echo esc_attr( (int) $data['max_width'] ); ?>" class="small-text" />
								<p class="description"><?php esc_html_e( 'Show the select menu at or below this viewport width.', 'responsive-mobile-select-menu' ); ?></p>
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="rms-placeholder"><?php esc_html_e( 'Placeholder text', 'responsive-mobile-select-menu' ); ?></label>
							</th>
							<td>
								<input type="text" id="rms-placeholder" name="placeholder_text" value="<?php echo esc_attr( $data['placeholder_text'] ); ?>" class="regular-text" />
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="rms-indent"><?php esc_html_e( 'Indent character(s)', 'responsive-mobile-select-menu' ); ?></label>
							</th>
							<td>
								<input type="text" id="rms-indent" name="indent_character" value="<?php echo esc_attr( $data['indent_character'] ); ?>" class="regular-text" />
								<p class="description"><?php esc_html_e( 'Prefix used to visually indent child items.', 'responsive-mobile-select-menu' ); ?></p>
							</td>
						</tr>

						<tr>
							<th scope="row">
								<label for="rms-max-depth"><?php esc_html_e( 'Max depth', 'responsive-mobile-select-menu' ); ?></label>
							</th>
							<td>
								<input type="number" min="0" step="1" id="rms-max-depth" name="max_depth" value="<?php echo esc_attr( (int) $data['max_depth'] ); ?>" class="small-text" />
								<p class="description"><?php esc_html_e( '0 = unlimited depth.', 'responsive-mobile-select-menu' ); ?></p>
							</td>
						</tr>
						</tbody>
					</table>
				</div>

				<div class="responsive-menu-settings-section">
					<h2><?php esc_html_e( 'Menu Activation', 'responsive-mobile-select-menu' ); ?></h2>
					
					<table class="form-table" role="presentation">
						<tbody>
						<tr>
							<th scope="row"><?php esc_html_e( 'Theme menu locations', 'responsive-mobile-select-menu' ); ?></th>
							<td>
								<label>
									<input type="checkbox" id="rms-activate-all" name="activate_all" value="1" <?php checked( $data['activate_all'], '1' ); ?> />
									<?php esc_html_e( 'Activate for all locations', 'responsive-mobile-select-menu' ); ?>
								</label>

								<div class="rms-locations-list">
									<?php
									if ( ! empty( $registered_locations ) ) :
										foreach ( $registered_locations as $loc_slug => $loc_label ) :
											$checked = in_array( $loc_slug, (array) $data['menu_locations'], true );
											?>
											<label>
												<input type="checkbox" name="menu_locations[]" value="<?php echo esc_attr( $loc_slug ); ?>" <?php checked( $checked ); ?> />
												<?php echo esc_html( $loc_label ); ?> <code><?php echo esc_html( $loc_slug ); ?></code>
											</label>
											<?php
										endforeach;
									else :
										echo '<em>' . esc_html__( 'This theme does not register menu locations.', 'responsive-mobile-select-menu' ) . '</em>';
									endif;
									?>
								</div>
								<p class="description"><?php esc_html_e( 'Choose where the select menu should be enabled.', 'responsive-mobile-select-menu' ); ?></p>
							</td>
						</tr>

						<tr>
							<th scope="row"><?php esc_html_e( 'Specific menus (by ID)', 'responsive-mobile-select-menu' ); ?></th>
							<td>
								<label>
									<input type="checkbox" id="rms-activate-all-ids" name="activate_all_ids" value="1" <?php checked( $data['activate_all_ids'], '1' ); ?> />
									<?php esc_html_e( 'Activate for all menus', 'responsive-mobile-select-menu' ); ?>
								</label>

								<div class="rms-menuids-list">
									<?php
									if ( ! empty( $menus ) ) :
										foreach ( $menus as $menu_obj ) :
											$menu_id = (int) $menu_obj->term_id;
											$checked = in_array( $menu_id, (array) $data['menu_ids'], true );
											?>
											<label>
												<input type="checkbox" name="menu_ids[]" value="<?php echo esc_attr( $menu_id ); ?>" <?php checked( $checked ); ?> />
												<?php echo esc_html( $menu_obj->name ); ?> <code>#<?php echo esc_html( $menu_id ); ?></code>
											</label>
											<?php
										endforeach;
									else :
										echo '<em>' . esc_html__( 'No menus found.', 'responsive-mobile-select-menu' ) . '</em>';
									endif;
									?>
								</div>
								<p class="description"><?php esc_html_e( 'Optionally force-enable the select menu for specific menu terms.', 'responsive-mobile-select-menu' ); ?></p>
							</td>
						</tr>
						</tbody>
					</table>
				</div>

				<div class="responsive-menu-settings-section">
					<h2><?php esc_html_e( 'Behavior', 'responsive-mobile-select-menu' ); ?></h2>
					
					<table class="form-table" role="presentation">
						<tbody>
						<tr>
							<th scope="row"><?php esc_html_e( 'Options', 'responsive-mobile-select-menu' ); ?></th>
							<td>
								<label>
									<input type="checkbox" name="exclude_empty_links" value="1" <?php checked( $data['exclude_empty_links'], '1' ); ?> />
									<?php esc_html_e( 'Exclude items with empty or "#" links', 'responsive-mobile-select-menu' ); ?>
								</label>
								<br>
								<label>
									<input type="checkbox" name="highlight_current" value="1" <?php checked( $data['highlight_current'], '1' ); ?> />
									<?php esc_html_e( 'Highlight current item', 'responsive-mobile-select-menu' ); ?>
								</label>
							</td>
						</tr>
						</tbody>
					</table>
				</div>

				<div class="responsive-menu-settings-actions">
					<button type="submit" id="rms-save-button" class="button button-primary"><?php esc_html_e( 'Save Changes', 'responsive-mobile-select-menu' ); ?></button>
					<button type="button" id="rms-reset-button" class="button"><?php esc_html_e( 'Reset to Defaults', 'responsive-mobile-select-menu' ); ?></button>
				</div>
			</form>
		</div>

		<div class="responsive-menu-admin-sidebar">
			<div class="responsive-menu-info-box">
				<h3><?php esc_html_e( 'How it works', 'responsive-mobile-select-menu' ); ?></h3>
				<ol>
					<li><?php esc_html_e( 'Choose when the select should appear (max width).', 'responsive-mobile-select-menu' ); ?></li>
					<li><?php esc_html_e( 'Enable for theme locations and/or specific menus.', 'responsive-mobile-select-menu' ); ?></li>
					<li><?php esc_html_e( 'Adjust placeholder, indentation and behavior.', 'responsive-mobile-select-menu' ); ?></li>
				</ol>
				<p><em><?php esc_html_e( 'Tip: You can use both locations and IDs. The select is shown if either matches.', 'responsive-mobile-select-menu' ); ?></em></p>
			</div>

			<div class="responsive-menu-info-box">
				<h3><?php esc_html_e( 'Menu ID Support', 'responsive-mobile-select-menu' ); ?></h3>
				<p><?php esc_html_e( 'You can now activate the responsive menu for specific menus using their ID, in addition to theme locations.', 'responsive-mobile-select-menu' ); ?></p>
				<p><code>wp_nav_menu(array( 'menu' => '73' ))</code></p>
			</div>

			<div class="responsive-menu-info-box">
				<h3><?php esc_html_e( 'Default Behavior', 'responsive-mobile-select-menu' ); ?></h3>
				<p><?php esc_html_e( 'By default, no options are selected. This ensures your website frontend is not modified until you explicitly choose which menus should be responsive.', 'responsive-mobile-select-menu' ); ?></p>
			</div>
		</div>
	</div>
</div>

<!-- Loading Overlay -->
<div class="responsive-menu-loading-overlay" id="loading-overlay" style="display: none;">
	<div class="spinner"></div>
</div>
