<?php
/**
 * Tab: Appearance — Free
 * Include: temi, dark mode, colori (+ button color), font, layout, preview live.
 *
 * @package Panelra
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

$pnlrdb_colors    = get_option( 'pnlrdb_dashboard_colors', array( 'sidebar_bg' => '#0d003a' ) );
$pnlrdb_font      = get_option( 'pnlrdb_dashboard_font', 'Roboto, Arial, sans-serif' );
$pnlrdb_font_size = get_option( 'pnlrdb_dashboard_font_size', 15 );
$pnlrdb_width     = get_option( 'pnlrdb_menu_width', 220 );
$pnlrdb_dm_global = get_option( 'pnlrdb_dark_mode_global', 'off' );

$pnlrdb_scheme_defaults = class_exists( 'Pnlrdb_Dashboard_Colors' )
	? Pnlrdb_Dashboard_Colors::get_wp_scheme_defaults()
	: array( 'primary' => '#2271b1', 'sidebar_bg' => '#1d2327', 'content_text' => '#2c3338' );

$pnlrdb_primary    = ! empty( $pnlrdb_colors['primary'] )    ? $pnlrdb_colors['primary']    : $pnlrdb_scheme_defaults['primary'];
$pnlrdb_sidebar_bg = ! empty( $pnlrdb_colors['sidebar_bg'] ) ? $pnlrdb_colors['sidebar_bg'] : $pnlrdb_scheme_defaults['sidebar_bg'];
$pnlrdb_fontcolor  = get_option( 'pnlrdb_dashboard_font_color', $pnlrdb_scheme_defaults['content_text'] );
$pnlrdb_btncolor   = class_exists( 'Pnlrdb_Dashboard_Colors' )
	? Pnlrdb_Dashboard_Colors::best_text_color( $pnlrdb_primary )
	: '#ffffff';

$pnlrdb_is_dark = class_exists( 'Pnlrdb_Dark_Mode' )
	? ( new Pnlrdb_Dark_Mode() )->is_dark_mode_active()
	: false;

$pnlrdb_presets = class_exists( 'Pnlrdb_Theme_Presets' )
	? Pnlrdb_Theme_Presets::get_presets()
	: array();

$pnlrdb_fonts = array(
	''                               => 'Default WordPress',
	'Arial, Helvetica, sans-serif'   => 'Arial',
	'"Segoe UI", Arial, sans-serif'  => 'Segoe UI',
	'Roboto, Arial, sans-serif'      => 'Roboto',
	'"Open Sans", Arial, sans-serif' => 'Open Sans',
	'Verdana, Geneva, sans-serif'    => 'Verdana',
	'Georgia, serif'                 => 'Georgia',
	'"DM Sans", sans-serif'          => 'DM Sans',
);

$pnlrdb_presets_js = array();
foreach ( $pnlrdb_presets as $pnlrdb_key => $pnlrdb_p ) {
	$pnlrdb_presets_js[ $pnlrdb_key ] = array(
		'name'        => $pnlrdb_p['name'],
		'description' => $pnlrdb_p['description'],
		'features'    => $pnlrdb_p['features'],
		'preview'     => $pnlrdb_p['preview'],
		'is_reset'    => $pnlrdb_p['is_reset'] ?? false,
	);
}
?>

<!-- ================================================================
     MODALE ANTEPRIMA TEMA
================================================================ -->


<div id="ap773-theme-modal-overlay" role="dialog" aria-modal="true">
	<div id="ap773-theme-modal">
		<div id="ap773-modal-preview-bar">
			<div id="ap773-modal-preview-sidebar">
				<div class="line active"></div><div class="line"></div>
				<div class="line"></div><div class="line"></div><div class="line"></div>
			</div>
			<div id="ap773-modal-preview-content">
				<div class="block" style="width:40%;background:currentColor;"></div>
				<div class="block" style="width:70%"></div>
				<div class="block" style="width:50%"></div>
				<div class="block" style="width:80%;margin-top:4px;"></div>
				<div class="block" style="width:60%"></div>
			</div>
		</div>
		<div id="ap773-modal-body">
			<div id="ap773-modal-name"></div>
			<p id="ap773-modal-desc"></p>
			<ul id="ap773-modal-features"></ul>
			<div id="ap773-modal-actions">
				<button type="button" id="ap773-modal-apply"><?php esc_html_e( 'Apply this theme', 'panelra-dashboard-builder' ); ?></button>
				<button type="button" id="ap773-modal-cancel"><?php esc_html_e( 'Cancel', 'panelra-dashboard-builder' ); ?></button>
			</div>
		</div>
	</div>
</div>

<h2 class="ap773-section-title"><?php esc_html_e( 'Appearance', 'panelra-dashboard-builder' ); ?></h2>
<p class="ap773-section-desc"><?php esc_html_e( 'Style your WordPress backend. Apply a preset or configure manually.', 'panelra-dashboard-builder' ); ?></p>

<!-- ================================================================
     TEMI PREDEFINITI
================================================================ -->
<div class="ap773-card" style="margin-bottom:16px;">
	<div class="ap773-card-title">
		<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
		<?php esc_html_e( 'Quick themes', 'panelra-dashboard-builder' ); ?>
	</div>
	<p class="ap773-desc" style="margin-bottom:16px;"><?php esc_html_e( 'Click a theme to preview it — you can confirm or cancel before anything changes.', 'panelra-dashboard-builder' ); ?></p>
	<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;">
		<?php foreach ( $pnlrdb_presets as $pnlrdb_key => $pnlrdb_preset ) :
			$pnlrdb_p = $pnlrdb_preset['preview'];
			$pnlrdb_is_reset = ! empty( $pnlrdb_preset['is_reset'] );
		?>
		<button type="button" class="ap773-preset-card<?php echo $pnlrdb_is_reset ? ' is-reset' : ''; ?>" data-preset="<?php echo esc_attr( $pnlrdb_key ); ?>">
			<?php if ( $pnlrdb_is_reset ) : ?>
				<div style="height:44px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.5"/></svg>
				</div>
			<?php else : ?>
				<div style="height:44px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);display:flex;">
					<div style="width:28%;background:<?php echo esc_attr($pnlrdb_p[0]); ?>;display:flex;flex-direction:column;gap:3px;padding:6px 4px;">
						<div style="height:3px;border-radius:2px;background:<?php echo esc_attr($pnlrdb_p[1]); ?>;opacity:.95;"></div>
						<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.25);"></div>
						<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.18);"></div>
					</div>
					<div style="flex:1;background:<?php echo esc_attr($pnlrdb_p[2]); ?>;padding:6px 8px;display:flex;flex-direction:column;gap:3px;">
						<div style="height:4px;border-radius:2px;background:<?php echo esc_attr($pnlrdb_p[1]); ?>;width:55%;opacity:.85;"></div>
						<div style="height:2px;border-radius:2px;background:rgba(0,0,0,.1);width:80%;"></div>
					</div>
				</div>
			<?php endif; ?>
			<div>
				<div style="font-size:13px;font-weight:700;color:<?php echo $pnlrdb_is_reset ? '#dc2626' : '#0f172a'; ?>;margin-bottom:3px;"><?php echo esc_html( $pnlrdb_preset['name'] ); ?></div>
				<div style="font-size:11px;color:#94a3b8;line-height:1.4;"><?php echo esc_html( mb_substr( $pnlrdb_preset['description'], 0, 50 ) ); ?>…</div>
			</div>
			<div style="display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:<?php echo $pnlrdb_is_reset ? '#dc2626' : '#6366f1'; ?>;background:<?php echo $pnlrdb_is_reset ? '#fee2e2' : '#eef2ff'; ?>;padding:4px 9px;border-radius:6px;width:fit-content;">
				<?php echo $pnlrdb_is_reset ? esc_html__( 'Reset', 'panelra-dashboard-builder' ) : esc_html__( 'Preview →', 'panelra-dashboard-builder' ); ?>
			</div>
		</button>
		<?php endforeach; ?>
	</div>
	<p id="ap773-preset-feedback" style="display:none;margin-top:14px;font-size:13px;font-weight:600;color:#15803d;">
		✓ <span id="ap773-preset-name"></span> — <?php esc_html_e( 'Applied! Reloading…', 'panelra-dashboard-builder' ); ?>
	</p>
</div>

<!-- ================================================================
     DARK MODE
================================================================ -->
<div class="ap773-card" style="margin-bottom:16px;">
	<div class="ap773-card-title" style="color:#4338ca;">
		<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
		<?php esc_html_e( 'Dark Mode', 'panelra-dashboard-builder' ); ?>
	</div>
	<div class="ap773-field-row">
		<div>
			<div class="ap773-label"><?php esc_html_e( 'Your dark mode', 'panelra-dashboard-builder' ); ?></div>
			<div class="ap773-desc"><?php esc_html_e( 'Personal — each user sets their own.', 'panelra-dashboard-builder' ); ?></div>
		</div>
		<div class="ap773-toggle-wrap">
			<label class="ap773-toggle">
				<input type="checkbox" id="ap773-dm-toggle" <?php checked( $pnlrdb_is_dark ); ?> <?php echo in_array( $pnlrdb_dm_global, array('force_on','force_off'), true ) ? 'disabled' : ''; ?>>
				<span class="ap773-toggle-slider"></span>
			</label>
			<span class="ap773-toggle-label" id="ap773-dm-label">
				<?php echo $pnlrdb_is_dark ? esc_html__( 'Dark mode ON', 'panelra-dashboard-builder' ) : esc_html__( 'Light mode', 'panelra-dashboard-builder' ); ?>
			</span>
		</div>
	</div>
	<div class="ap773-field-row">
		<div>
			<div class="ap773-label"><?php esc_html_e( 'Global override', 'panelra-dashboard-builder' ); ?></div>
			<div class="ap773-desc"><?php esc_html_e( 'Force dark or light mode for all users.', 'panelra-dashboard-builder' ); ?></div>
		</div>
		<div>
			<select name="pnlrdb_dark_mode_global" class="ap773-select" style="max-width:280px;">
				<option value="off"       <?php selected( $pnlrdb_dm_global, 'off' ); ?>><?php esc_html_e( 'Let each user decide', 'panelra-dashboard-builder' ); ?></option>
				<option value="force_on"  <?php selected( $pnlrdb_dm_global, 'force_on' ); ?>><?php esc_html_e( 'Force dark mode for everyone', 'panelra-dashboard-builder' ); ?></option>
				<option value="force_off" <?php selected( $pnlrdb_dm_global, 'force_off' ); ?>><?php esc_html_e( 'Force light mode for everyone', 'panelra-dashboard-builder' ); ?></option>
			</select>
		</div>
	</div>
</div>

<!-- ================================================================
     COLORS + LIVE PREVIEW
================================================================ -->
<div class="ap773-card" style="margin-bottom:16px;">
	<div class="ap773-card-title">
		<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/></svg>
		<?php esc_html_e( 'Colors', 'panelra-dashboard-builder' ); ?>
	</div>

	<div style="display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start;">

		<!-- Settings columns -->
		<div>
			<div class="ap773-field-row">
				<div>
					<div class="ap773-label"><?php esc_html_e( 'Primary color', 'panelra-dashboard-builder' ); ?></div>
					<div class="ap773-desc"><?php esc_html_e( 'Active menu, links, accents.', 'panelra-dashboard-builder' ); ?></div>
				</div>
				<div><input type="text" id="ap773-color-primary" class="ap773-color-input" name="pnlrdb_dashboard_colors[primary]" value="<?php echo esc_attr( $pnlrdb_primary ); ?>"></div>
			</div>
			<div class="ap773-field-row">
				<div>
					<div class="ap773-label"><?php esc_html_e( 'Sidebar background', 'panelra-dashboard-builder' ); ?></div>
				</div>
				<div><input type="text" id="ap773-color-sidebar" class="ap773-color-input" name="pnlrdb_dashboard_colors[sidebar_bg]" value="<?php echo esc_attr( $pnlrdb_sidebar_bg ); ?>"></div>
			</div>
			<div class="ap773-field-row">
				<div>
					<div class="ap773-label"><?php esc_html_e( 'Content text color', 'panelra-dashboard-builder' ); ?></div>
				</div>
				<div><input type="text" id="ap773-color-text" class="ap773-color-input" name="pnlrdb_dashboard_font_color" value="<?php echo esc_attr( $pnlrdb_fontcolor ); ?>"></div>
			</div>
			<div class="ap773-field-row">
				<div>
					<div class="ap773-label"><?php esc_html_e( 'Button text color', 'panelra-dashboard-builder' ); ?></div>
					<div class="ap773-desc"><?php esc_html_e( 'Calculated automatically from the primary color using WordPress-style contrast rules.', 'panelra-dashboard-builder' ); ?></div>
				</div>
				<div>
					<input type="text" id="ap773-color-btn" class="ap773-input ap773-input--sm" value="<?php echo esc_attr( $pnlrdb_btncolor ); ?>" readonly>
					<p class="ap773-desc" style="margin:8px 0 0;"><?php esc_html_e( 'This value updates automatically in the live preview and after saving.', 'panelra-dashboard-builder' ); ?></p>
				</div>
			</div>
		</div>

		<!-- Live Preview -->
		<div>
			<div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:10px;">
				<?php esc_html_e( 'Live preview', 'panelra-dashboard-builder' ); ?>
			</div>
			<div id="ap773-color-preview" style="border-radius:12px;overflow:hidden;border:1px solid #e8edf3;">

				<!-- Sidebar mini -->
				<div id="ap773-preview-sidebar" style="background:<?php echo esc_attr($pnlrdb_sidebar_bg); ?>;padding:10px 8px;display:flex;flex-direction:column;gap:5px;">
					<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
						<div id="ap773-preview-dot" style="width:8px;height:8px;border-radius:50%;background:<?php echo esc_attr($pnlrdb_primary); ?>;flex-shrink:0;"></div>
						<div style="height:3px;border-radius:2px;background:rgba(255,255,255,.4);flex:1;"></div>
					</div>
					<!-- Voce attiva -->
					<div id="ap773-preview-active-item" style="background:<?php echo esc_attr($pnlrdb_primary); ?>22;border:1px solid <?php echo esc_attr($pnlrdb_primary); ?>44;border-radius:5px;padding:5px 7px;display:flex;align-items:center;gap:5px;">
						<div id="ap773-preview-active-dot" style="width:5px;height:5px;border-radius:50%;background:<?php echo esc_attr($pnlrdb_primary); ?>;flex-shrink:0;"></div>
						<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.6);flex:1;"></div>
					</div>
					<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.2);"></div>
					<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.15);"></div>
					<div style="height:2px;border-radius:2px;background:rgba(255,255,255,.12);"></div>
				</div>

				<!-- Content mini -->
				<div style="background:#f8fafc;padding:12px 10px;">
					<!-- Link di esempio -->
					<div style="margin-bottom:8px;">
						<span id="ap773-preview-link" style="font-size:11px;color:<?php echo esc_attr($pnlrdb_primary); ?>;text-decoration:underline;cursor:pointer;">
							<?php esc_html_e( 'Example link', 'panelra-dashboard-builder' ); ?>
						</span>
					</div>
					<!-- Testo di esempio -->
					<div id="ap773-preview-text" style="font-size:11px;color:<?php echo esc_attr($pnlrdb_fontcolor); ?>;line-height:1.5;margin-bottom:10px;">
						<?php esc_html_e( 'Content text', 'panelra-dashboard-builder' ); ?>
					</div>
					<!-- Bottone di esempio -->
					<div id="ap773-preview-btn" style="
						display:inline-block;
						background:<?php echo esc_attr($pnlrdb_primary); ?>;
						color:<?php echo esc_attr($pnlrdb_btncolor); ?>;
						font-size:11px;font-weight:600;
						padding:6px 12px;border-radius:6px;
						cursor:pointer;
					">
						<?php esc_html_e( 'Save changes', 'panelra-dashboard-builder' ); ?>
					</div>
				</div>

			</div>
			<p style="font-size:10px;color:#94a3b8;margin:6px 0 0;text-align:center;">
				<?php esc_html_e( 'Preview uses automatic contrast for menu and buttons.', 'panelra-dashboard-builder' ); ?>
			</p>
		</div>

	</div>
</div>

<!-- ================================================================
     TYPOGRAPHY + LAYOUT
================================================================ -->
<div class="ap773-card">
	<div class="ap773-card-title">
		<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
		<?php esc_html_e( 'Typography & Layout', 'panelra-dashboard-builder' ); ?>
	</div>
	<div class="ap773-field-row">
		<div><div class="ap773-label"><?php esc_html_e( 'Font family', 'panelra-dashboard-builder' ); ?></div></div>
		<div>
			<select name="pnlrdb_dashboard_font" class="ap773-select">
				<?php foreach ( $pnlrdb_fonts as $pnlrdb_font_value => $pnlrdb_font_label ) : ?>
					<option value="<?php echo esc_attr( $pnlrdb_font_value ); ?>" <?php selected( $pnlrdb_font, $pnlrdb_font_value ); ?>>
						<?php echo esc_html( $pnlrdb_font_label ); ?>
					</option>
				<?php endforeach; ?>
			</select>
		</div>
	</div>
	<div class="ap773-field-row">
		<div>
			<div class="ap773-label"><?php esc_html_e( 'Font size (px)', 'panelra-dashboard-builder' ); ?></div>
			<div class="ap773-desc"><?php esc_html_e( 'Min 10 — Max 22.', 'panelra-dashboard-builder' ); ?></div>
		</div>
		<div><input type="number" name="pnlrdb_dashboard_font_size" value="<?php echo esc_attr( $pnlrdb_font_size ); ?>" min="10" max="22" class="ap773-input ap773-input--sm"></div>
	</div>
	<div class="ap773-field-row">
		<div>
			<div class="ap773-label"><?php esc_html_e( 'Menu width (px)', 'panelra-dashboard-builder' ); ?></div>
			<div class="ap773-desc"><?php esc_html_e( '160 – 500px.', 'panelra-dashboard-builder' ); ?></div>
		</div>
		<div><input type="number" name="pnlrdb_menu_width" value="<?php echo esc_attr( $pnlrdb_width ); ?>" min="160" max="500" class="ap773-input ap773-input--sm"></div>
	</div>
</div>

<!-- ================================================================
     JS
================================================================ -->

