<?php
/**
 * PufferGo Design Switcher — 编辑模式下管理员切换 header/footer/nav-alignment。
 *
 * 从 Template Loader 注册表动态生成按钮，不再硬编码变体列表。
 * 新增变体时自动出现在选择器中。
 *
 * @package PufferGo
 */

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

if ( empty( $GLOBALS['puffergo_fullpage_template'] ) || ! current_user_can( 'edit_posts' ) ) {
	return;
}

$headers = PufferGo_Template_Loader::get_headers();
$footers = PufferGo_Template_Loader::get_footers();
$nav_align = get_option( 'puffergo_header_nav_align', 'right' );
$nav_align = in_array( $nav_align, array( 'left', 'center', 'right' ), true ) ? $nav_align : 'right';
?>

<!-- Header Style Selector -->
<div id="puffergo-header-style-selector" class="puffergo-header-style-selector" aria-label="<?php esc_attr_e( 'Header menu alignment', 'puffergo' ); ?>">
	<div id="puffergo-header-style-panel" class="puffergo-header-style-panel" role="dialog" aria-hidden="true">
		<div class="puffergo-header-style-panel-head">
			<span><?php esc_html_e( 'Header Style', 'puffergo' ); ?></span>
			<button type="button" class="puffergo-header-style-panel-close" aria-label="<?php esc_attr_e( 'Close', 'puffergo' ); ?>">&times;</button>
		</div>
		<div class="puffergo-header-style-panel-body">
			<button type="button" class="puffergo-header-style-option" data-align="left"><?php esc_html_e( 'Left', 'puffergo' ); ?></button>
			<button type="button" class="puffergo-header-style-option" data-align="center"><?php esc_html_e( 'Center', 'puffergo' ); ?></button>
			<button type="button" class="puffergo-header-style-option" data-align="right"><?php esc_html_e( 'Right', 'puffergo' ); ?></button>
		</div>
		<div class="puffergo-header-style-panel-head" style="margin-top:4px;">
			<span><?php esc_html_e( 'Header Template', 'puffergo' ); ?></span>
		</div>
		<div class="puffergo-header-style-panel-body">
			<?php foreach ( $headers as $hid => $hvar ) : ?>
				<button type="button" class="puffergo-header-style-option puffergo-header-template-option" data-header-template="<?php echo esc_attr( $hid ); ?>"><?php echo esc_html( $hvar['label'] ); ?></button>
			<?php endforeach; ?>
		</div>
	</div>
	<span class="puffergo-header-style-trigger-wrap">
		<button type="button" id="puffergo-header-style-trigger" class="puffergo-header-style-trigger" aria-expanded="false" aria-controls="puffergo-header-style-panel" title="<?php esc_attr_e( 'Header menu alignment', 'puffergo' ); ?>">&equiv;</button>
	</span>
</div>

<!-- Footer Template Selector -->
<div id="puffergo-footer-template-selector" class="puffergo-footer-template-selector" aria-label="<?php esc_attr_e( 'Footer template', 'puffergo' ); ?>">
	<div id="puffergo-footer-template-panel" class="puffergo-header-style-panel" role="dialog" aria-hidden="true">
		<div class="puffergo-header-style-panel-head">
			<span><?php esc_html_e( 'Footer template', 'puffergo' ); ?></span>
			<button type="button" class="puffergo-header-style-panel-close puffergo-footer-template-panel-close" aria-label="<?php esc_attr_e( 'Close', 'puffergo' ); ?>">&times;</button>
		</div>
		<div class="puffergo-header-style-panel-body">
			<?php foreach ( $footers as $fid => $fvar ) : ?>
				<button type="button" class="puffergo-header-style-option puffergo-footer-template-option" data-template="<?php echo esc_attr( $fid ); ?>"><?php echo esc_html( $fvar['label'] ); ?></button>
			<?php endforeach; ?>
		</div>
	</div>
</div>

<script>
(function() {
	/**
	 * 将变体 ID 映射为 CSS 预览类名的后缀部分。
	 * header-default → default, header-2 → variant-2, header-3 → variant-3
	 * footer-simple → default, footer-2 → variant-2, footer-3 → variant-3
	 */
	function variantPreviewSuffix(id) {
		var defaultIds = { 'header-default': 'default', 'footer-simple': 'default' };
		if (defaultIds[id]) return defaultIds[id];
		var name = id.replace(/^(header|footer)-/, '');
		return 'variant-' + name;
	}

	/* ── Nav Align ── */
	var header = document.querySelector('.puffergo-header-wrap.puffergo-header-active .puffergo-default-header');
	var nav = header && header.querySelector('.puffergo-header-nav');
	var panel = document.getElementById('puffergo-header-style-panel');
	var trigger = document.getElementById('puffergo-header-style-trigger');
	var options = document.querySelectorAll('#puffergo-header-style-selector .puffergo-header-style-option[data-align]');
	var currentAlign = '<?php echo esc_js( $nav_align ); ?>';
	var previewClassPrefix = 'puffergo-nav-align-preview-';
	function removePreviewClasses() {
		if (!nav) return;
		nav.classList.remove(previewClassPrefix + 'left', previewClassPrefix + 'center', previewClassPrefix + 'right');
	}
	function setPreview(align) {
		if (!nav) return;
		removePreviewClasses();
		if (align) nav.classList.add(previewClassPrefix + align);
	}
	function setApplied(align) {
		if (!nav) return;
		nav.classList.remove('puffergo-nav-align-left', 'puffergo-nav-align-center', 'puffergo-nav-align-right');
		nav.classList.add('puffergo-nav-align-' + align);
	}
	options.forEach(function(btn) {
		var align = btn.getAttribute('data-align');
		if (!align) return;
		btn.addEventListener('mouseenter', function() { setPreview(align); });
		btn.addEventListener('mouseleave', function() { setPreview(null); removePreviewClasses(); });
		btn.addEventListener('click', function() {
			removePreviewClasses();
			var xhr = new XMLHttpRequest();
			xhr.open('POST', '<?php echo esc_url( rest_url( 'puffergo/v1/header-nav-align' ) ); ?>');
			xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.setRequestHeader('X-WP-Nonce', '<?php echo esc_js( wp_create_nonce( 'wp_rest' ) ); ?>');
			xhr.onload = function() {
				if (xhr.status >= 200 && xhr.status < 300) {
					try { var res = JSON.parse(xhr.responseText); if (res.align) { currentAlign = res.align; setApplied(res.align); } } catch (e) {}
				}
			};
			xhr.send(JSON.stringify({ align: align }));
		});
	});
	if (panel && trigger) {
		trigger.addEventListener('click', function() {
			var open = panel.getAttribute('aria-hidden') !== 'true';
			panel.setAttribute('aria-hidden', open ? 'true' : 'false');
			trigger.setAttribute('aria-expanded', open ? 'false' : 'true');
		});
		var closeBtn = panel.querySelector('.puffergo-header-style-panel-close');
		if (closeBtn) closeBtn.addEventListener('click', function() {
			panel.setAttribute('aria-hidden', 'true');
			trigger.setAttribute('aria-expanded', 'false');
		});
	}

	/* ── Header Template Switch ── */
	var htOptions = document.querySelectorAll('.puffergo-header-template-option');
	var htPreviewPrefix = 'puffergo-preview-header-';
	function removeHeaderTemplatePreview() {
		var classes = document.body.className.split(/\s+/).filter(function(c) { return c.indexOf(htPreviewPrefix) !== 0; });
		document.body.className = classes.join(' ');
	}
	function setHeaderTemplatePreview(tpl) {
		removeHeaderTemplatePreview();
		document.body.classList.add(htPreviewPrefix + variantPreviewSuffix(tpl));
	}
	htOptions.forEach(function(btn) {
		var tpl = btn.getAttribute('data-header-template');
		btn.addEventListener('mouseenter', function() { setHeaderTemplatePreview(tpl); });
		btn.addEventListener('mouseleave', removeHeaderTemplatePreview);
		btn.addEventListener('click', function() {
			removeHeaderTemplatePreview();
			var xhr = new XMLHttpRequest();
			xhr.open('POST', '<?php echo esc_url( rest_url( 'puffergo/v1/header-template' ) ); ?>');
			xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.setRequestHeader('X-WP-Nonce', '<?php echo esc_js( wp_create_nonce( 'wp_rest' ) ); ?>');
			xhr.onload = function() {
				if (xhr.status >= 200 && xhr.status < 300) {
					try { var res = JSON.parse(xhr.responseText); if (res.template) location.reload(); } catch (e) {}
				}
			};
			xhr.send(JSON.stringify({ template: tpl }));
		});
	});

	/* ── Footer Template Switch ── */
	var ftOptions = document.querySelectorAll('.puffergo-footer-template-option');
	var ftPreviewPrefix = 'puffergo-preview-footer-';
	function removeFooterTemplatePreview() {
		var classes = document.body.className.split(/\s+/).filter(function(c) { return c.indexOf(ftPreviewPrefix) !== 0; });
		document.body.className = classes.join(' ');
	}
	function setFooterTemplatePreview(tpl) {
		removeFooterTemplatePreview();
		document.body.classList.add(ftPreviewPrefix + variantPreviewSuffix(tpl));
	}
	ftOptions.forEach(function(btn) {
		var template = btn.getAttribute('data-template');
		btn.addEventListener('mouseenter', function() { setFooterTemplatePreview(template); });
		btn.addEventListener('mouseleave', removeFooterTemplatePreview);
		btn.addEventListener('click', function() {
			removeFooterTemplatePreview();
			var xhr = new XMLHttpRequest();
			xhr.open('POST', '<?php echo esc_url( rest_url( 'puffergo/v1/footer-template' ) ); ?>');
			xhr.setRequestHeader('Content-Type', 'application/json');
			xhr.setRequestHeader('X-WP-Nonce', '<?php echo esc_js( wp_create_nonce( 'wp_rest' ) ); ?>');
			xhr.onload = function() {
				if (xhr.status >= 200 && xhr.status < 300) {
					try { var res = JSON.parse(xhr.responseText); if (res.template) location.reload(); } catch (e) {}
				}
			};
			xhr.send(JSON.stringify({ template: template }));
		});
	});
})();
</script>
