<?php
/**
 * Admin Layout page template
 *
 * Variables provided by Agency_Pulse_Admin_Menu::render_layout_page():
 *
 *   $ao_active  bool  Whether the license & connection is active.
 *
 * @package Agency_Pulse_Admin_Menu
 * @since   1.0.0
 */

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

$layout_opts = wp_parse_args(
	get_option( Agency_Pulse_Admin_Menu_Constants::OPTION_LAYOUT, array() ),
	array(
		'enabled'             => false,
		'sidebar_style_enabled' => true,
		'content_cards_enabled' => true,
		'interactive_enabled'   => true,
		'typography_enabled'    => true,
		'sidebar_style'       => 'default',
		'sidebar_item_radius' => 6,
		'content_bg'          => '#f0f0f1',
		'card_radius'         => 0,
		'card_shadow'         => false,
		'card_shadow_opacity' => 15,
		'card_shadow_offset'  => 2,
		'card_shadow_blur'    => 8,
		'button_radius'       => 3,
		'input_radius'        => 4,
		'font_source'         => 'system',
		'font_family'         => '',
		'font_url'            => '',
	)
);
?>
<div class="wrap aamo-wrap">

	<h1 class="aamo-page-title">
		<?php esc_html_e( 'Menu Organizer — Admin Layout', 'agency-pulse-admin-menu' ); ?>
	</h1>

	<?php if ( ! $ao_active ) : ?>
	<div class="notice notice-warning inline" style="margin:0 0 16px">
		<p><?php printf(
			/* translators: %s: link to license settings */
			esc_html__( 'Admin Layout settings require an active License & Connection. %s', 'agency-pulse-admin-menu' ),
			'<a href="' . esc_url( admin_url( 'admin.php?page=aamo_settings#aamo-license-wrap' ) ) . '">' . esc_html__( 'Activate your license &rarr;', 'agency-pulse-admin-menu' ) . '</a>'
		); ?></p>
	</div>
	<?php endif; ?>

	<div id="aamo-layout-panels"<?php echo $ao_active ? '' : ' class="aamo-panel-locked"'; ?>>

		<!-- Sidebar Style -->
		<div class="aamo-settings-panel">
			<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Sidebar Style', 'agency-pulse-admin-menu' ); ?></h2>
			<div class="aamo-dm-toggle-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-sidebar-style-enabled" data-layout-field="sidebar_style_enabled" value="1"<?php checked( $layout_opts['sidebar_style_enabled'] ); ?> />
					<?php esc_html_e( 'Enable Sidebar Style', 'agency-pulse-admin-menu' ); ?>
				</label>
			</div>
			<p class="aamo-settings-description"><?php esc_html_e( 'Choose how the active sidebar menu item is visually highlighted.', 'agency-pulse-admin-menu' ); ?></p>

			<div class="aamo-access-modes" style="margin-bottom:16px">
				<label class="aamo-access-mode-option">
					<input type="radio" name="aamo_sidebar_style" value="default"
					       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
					       <?php checked( $layout_opts['sidebar_style'], 'default' ); ?> />
					<span class="aamo-access-mode-label"><?php esc_html_e( 'Default', 'agency-pulse-admin-menu' ); ?></span>
					<span class="aamo-access-mode-desc"><?php esc_html_e( 'WordPress default — no change to the active item appearance.', 'agency-pulse-admin-menu' ); ?></span>
				</label>
				<label class="aamo-access-mode-option">
					<input type="radio" name="aamo_sidebar_style" value="border_accent"
					       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
					       <?php checked( $layout_opts['sidebar_style'], 'border_accent' ); ?> />
					<span class="aamo-access-mode-label"><?php esc_html_e( 'Left-border Accent', 'agency-pulse-admin-menu' ); ?></span>
					<span class="aamo-access-mode-desc"><?php esc_html_e( 'Shows a colored left border on the active item, using your sidebar highlight color.', 'agency-pulse-admin-menu' ); ?></span>
				</label>
				<label class="aamo-access-mode-option">
					<input type="radio" name="aamo_sidebar_style" value="pill"
					       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
					       <?php checked( $layout_opts['sidebar_style'], 'pill' ); ?> />
					<span class="aamo-access-mode-label"><?php esc_html_e( 'Pill', 'agency-pulse-admin-menu' ); ?></span>
					<span class="aamo-access-mode-desc"><?php esc_html_e( 'Rounds the active item highlight into a pill shape with a configurable border radius.', 'agency-pulse-admin-menu' ); ?></span>
				</label>
			</div>

			<div id="aamo-pill-radius-row" class="aamo-color-row"<?php echo 'pill' !== $layout_opts['sidebar_style'] ? ' style="display:none"' : ''; ?>>
				<span class="aamo-color-label"><?php esc_html_e( 'Pill Radius', 'agency-pulse-admin-menu' ); ?></span>
				<input type="number" id="aamo-sidebar-item-radius" data-layout-field="sidebar_item_radius"
				       value="<?php echo esc_attr( $layout_opts['sidebar_item_radius'] ); ?>"
				       min="0" max="24" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
			</div>
		</div>

		<!-- Content & Cards -->
		<div class="aamo-settings-panel">
			<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Content & Cards', 'agency-pulse-admin-menu' ); ?></h2>
			<div class="aamo-dm-toggle-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-content-cards-enabled" data-layout-field="content_cards_enabled" value="1"<?php checked( $layout_opts['content_cards_enabled'] ); ?> />
					<?php esc_html_e( 'Enable Content & Cards', 'agency-pulse-admin-menu' ); ?>
				</label>
			</div>
			<p class="aamo-settings-description"><?php esc_html_e( 'Style the content area background and admin metabox cards.', 'agency-pulse-admin-menu' ); ?></p>

			<div class="aamo-color-row">
				<span class="aamo-color-label"><?php esc_html_e( 'Content Background', 'agency-pulse-admin-menu' ); ?></span>
				<input type="text" id="aamo-content-bg" data-layout-field="content_bg"
				       value="<?php echo esc_attr( $layout_opts['content_bg'] ); ?>"
				       class="aamo-layout-color-input" data-default-color="#f0f0f1" />
			</div>
			<div class="aamo-color-row">
				<span class="aamo-color-label"><?php esc_html_e( 'Card Corner Radius', 'agency-pulse-admin-menu' ); ?></span>
				<input type="number" id="aamo-card-radius" data-layout-field="card_radius"
				       value="<?php echo esc_attr( $layout_opts['card_radius'] ); ?>"
				       min="0" max="16" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
			</div>
			<div class="aamo-color-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-card-shadow" data-layout-field="card_shadow" value="1"<?php checked( $layout_opts['card_shadow'] ); ?> />
					<span><?php esc_html_e( 'Card Drop Shadow', 'agency-pulse-admin-menu' ); ?></span>
				</label>
			</div>
			<div id="aamo-shadow-options"<?php echo empty( $layout_opts['card_shadow'] ) ? ' style="display:none"' : ''; ?>>
				<div class="aamo-color-row aamo-slider-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Opacity', 'agency-pulse-admin-menu' ); ?></span>
					<input type="range" id="aamo-shadow-opacity" data-layout-field="card_shadow_opacity"
					       value="<?php echo esc_attr( $layout_opts['card_shadow_opacity'] ); ?>"
					       min="0" max="50" step="1" class="aamo-slider" />
					<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_opacity'] ); ?>%</span>
				</div>
				<div class="aamo-color-row aamo-slider-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Offset', 'agency-pulse-admin-menu' ); ?></span>
					<input type="range" id="aamo-shadow-offset" data-layout-field="card_shadow_offset"
					       value="<?php echo esc_attr( $layout_opts['card_shadow_offset'] ); ?>"
					       min="0" max="20" step="1" class="aamo-slider" />
					<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_offset'] ); ?>px</span>
				</div>
				<div class="aamo-color-row aamo-slider-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Blur', 'agency-pulse-admin-menu' ); ?></span>
					<input type="range" id="aamo-shadow-blur" data-layout-field="card_shadow_blur"
					       value="<?php echo esc_attr( $layout_opts['card_shadow_blur'] ); ?>"
					       min="0" max="20" step="1" class="aamo-slider" />
					<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_blur'] ); ?>px</span>
				</div>
			</div>
		</div>

		<!-- Interactive Elements -->
		<div class="aamo-settings-panel">
			<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Interactive Elements', 'agency-pulse-admin-menu' ); ?></h2>
			<div class="aamo-dm-toggle-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-interactive-enabled" data-layout-field="interactive_enabled" value="1"<?php checked( $layout_opts['interactive_enabled'] ); ?> />
					<?php esc_html_e( 'Enable Interactive Elements', 'agency-pulse-admin-menu' ); ?>
				</label>
			</div>
			<p class="aamo-settings-description"><?php esc_html_e( 'Border radius for buttons and form inputs across the admin.', 'agency-pulse-admin-menu' ); ?></p>

			<div class="aamo-color-row">
				<span class="aamo-color-label"><?php esc_html_e( 'Button Corner Radius', 'agency-pulse-admin-menu' ); ?></span>
				<input type="number" id="aamo-button-radius" data-layout-field="button_radius"
				       value="<?php echo esc_attr( $layout_opts['button_radius'] ); ?>"
				       min="0" max="12" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
			</div>
			<div class="aamo-color-row">
				<span class="aamo-color-label"><?php esc_html_e( 'Input / Select Radius', 'agency-pulse-admin-menu' ); ?></span>
				<input type="number" id="aamo-input-radius" data-layout-field="input_radius"
				       value="<?php echo esc_attr( $layout_opts['input_radius'] ); ?>"
				       min="0" max="12" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
			</div>
		</div>

		<!-- Typography -->
		<div class="aamo-settings-panel">
			<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Typography', 'agency-pulse-admin-menu' ); ?></h2>
			<div class="aamo-dm-toggle-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-typography-enabled" data-layout-field="typography_enabled" value="1"<?php checked( $layout_opts['typography_enabled'] ); ?> />
					<?php esc_html_e( 'Enable Typography', 'agency-pulse-admin-menu' ); ?>
				</label>
			</div>
			<p class="aamo-settings-description"><?php esc_html_e( 'Override the default WordPress admin font stack.', 'agency-pulse-admin-menu' ); ?></p>

			<div class="aamo-access-modes" style="margin-bottom:16px">
				<label class="aamo-access-mode-option">
					<input type="radio" name="aamo_font_source" value="system"
					       class="aamo-font-source-radio" data-layout-field="font_source"
					       <?php checked( $layout_opts['font_source'], 'system' ); ?> />
					<span class="aamo-access-mode-label"><?php esc_html_e( 'System Default', 'agency-pulse-admin-menu' ); ?></span>
					<span class="aamo-access-mode-desc"><?php esc_html_e( 'Use the standard WordPress admin font stack — no change.', 'agency-pulse-admin-menu' ); ?></span>
				</label>
				<label class="aamo-access-mode-option">
					<input type="radio" name="aamo_font_source" value="custom"
					       class="aamo-font-source-radio" data-layout-field="font_source"
					       <?php checked( $layout_opts['font_source'], 'custom' ); ?> />
					<span class="aamo-access-mode-label"><?php esc_html_e( 'Custom Font', 'agency-pulse-admin-menu' ); ?></span>
					<span class="aamo-access-mode-desc"><?php esc_html_e( 'Load a web font and apply it across all admin pages.', 'agency-pulse-admin-menu' ); ?></span>
				</label>
			</div>

			<div id="aamo-custom-font-fields"<?php echo 'custom' !== $layout_opts['font_source'] ? ' style="display:none"' : ''; ?>>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Font Family', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-font-family" data-layout-field="font_family"
					       value="<?php echo esc_attr( $layout_opts['font_family'] ); ?>"
					       class="regular-text"
					       placeholder="<?php esc_attr_e( "'Inter', sans-serif", 'agency-pulse-admin-menu' ); ?>" />
				</div>
				<div class="aamo-color-row" style="align-items:flex-start">
					<span class="aamo-color-label" style="padding-top:4px"><?php esc_html_e( 'Font URL', 'agency-pulse-admin-menu' ); ?></span>
					<div>
						<input type="url" id="aamo-font-url" data-layout-field="font_url"
						       value="<?php echo esc_attr( $layout_opts['font_url'] ); ?>"
						       class="regular-text"
						       placeholder="https://fonts.googleapis.com/css2?family=Inter" />
						<p class="description" style="margin-top:4px"><?php esc_html_e( 'Paste a Google Fonts CSS URL (the /css2 link, not the embed snippet). Must start with https://.', 'agency-pulse-admin-menu' ); ?></p>
					</div>
				</div>
			</div>
		</div>

		<!-- Save / Reset buttons -->
		<div class="aamo-settings-panel">
			<div class="aamo-settings-action-row">
				<button type="button" id="aamo-layout-save" class="button button-primary">
					<?php esc_html_e( 'Save Layout Settings', 'agency-pulse-admin-menu' ); ?>
				</button>
				<button type="button" id="aamo-layout-reset" class="button">
					<?php esc_html_e( 'Reset to Defaults', 'agency-pulse-admin-menu' ); ?>
				</button>
				<span id="aamo-layout-status" class="aamo-status" aria-live="polite"></span>
			</div>
		</div>

	</div><!-- /#aamo-layout-panels -->

</div><!-- /.wrap -->
