/* Pfad: wp-content/plugins/mm-portal-core/assets/js/page-design/apc-page-design-admin.js
 * Wofür: Backend-Seite „Seitendesign“ — Felder je Hintergrund-Art ein-/ausblenden,
 * Mediathek-Auswahl (Bild/Video/Standbild), Regler-Anzeige und Live-Vorschau.
 * NEU 05.11.2026 (245) — siehe CHANGELOG.txt.
 * GEÄNDERT 05.11.2026 (258): Farbcode (#rrggbb) unter jedem Farbfeld, auch eintippbar.
 * GEÄNDERT 05.11.2026 (255): Regler „Deckkraft“ der Karten zeigt %.
 * GEÄNDERT 05.11.2026 (250): Tooltip-Code in eigenen Block (auch für Tab „Rechtliche Leiste“).
 * GEÄNDERT 05.11.2026 (248): Vorschau nutzt die Grundfarbe unter Bild/Video/Hauptbild.
 * GEÄNDERT 05.11.2026 (246): Tooltips — Antippen/Enter öffnet, Escape schließt,
 * Kasten bleibt im sichtbaren Bereich (verschiebt sich am Rand, klappt nach unten).
 */
(function ($) {
	'use strict';
	var $form = $('.apc-pd-form');
	if (!$form.length) return;
	var $pv = $form.find('.apc-pd-preview');
	var $bg = $pv.find('.apc-pd-pv-bg');
	var def = {};
	try { def = JSON.parse($pv.attr('data-default') || '{}'); } catch (e) {}

	function val(name) {
		var $el = $form.find('[data-pd="' + name + '"]');
		if ($el.is(':checkbox')) return $el.is(':checked');
		return $el.val();
	}

	function baseBg(o) {
		if (o.type === 'color') return o.color;
		if (o.type === 'gradient') {
			var stops = [o.g1, o.g2];
			if (o.g3) stops.push(o.g3);
			return o.radial ? 'radial-gradient(circle at 50% 0%,' + stops.join(',') + ')' : 'linear-gradient(' + o.angle + 'deg,' + stops.join(',') + ')';
		}
		return o.color || '#000'; // (248) Grundfarbe unter Bild/Video/Hauptbild
	}

	function sync() {
		var type = val('type');
		// Felder je Art
		$form.find('.apc-pd-sec, .apc-pd-note').each(function () {
			var show = ($(this).attr('data-show') || '').split(' ');
			this.hidden = show.indexOf(type) === -1;
		});
		$form.find('[data-show-in]').each(function () {
			this.hidden = $(this).attr('data-show-in').split(' ').indexOf(type) === -1;
		});

		// Vorschau
		var o = type === 'inherit' ? def : {
			type: type, color: val('color'), g1: val('g1'), g2: val('g2'),
			g3: val('g3_on') ? val('g3') : '', angle: parseInt(val('angle'), 10) || 0, radial: val('radial')
		};
		var media = '', ph = '';
		if (type === 'image') media = $form.find('[data-pd="image"]').attr('data-url') || '';
		if (type === 'video') { media = $form.find('[data-pd="poster"]').attr('data-url') || ''; if (!media) ph = 'Video'; }
		if (type === 'featured') ph = 'Hauptbild';
		if (o.type === 'theme') { $bg.css({ background: '#000' }); }
		else $bg.css({ background: baseBg(o) });
		if (media) $bg.css({ backgroundImage: 'url("' + media + '")', backgroundSize: 'cover', backgroundPosition: 'center' });
		$pv.toggleClass('is-ph', !!ph);
		$bg.attr('data-ph', ph);

		var blur = ['image', 'video', 'featured'].indexOf(type) > -1 ? parseInt(val('blur'), 10) || 0 : 0;
		$bg.css({ filter: blur ? 'blur(' + Math.round(blur / 2) + 'px)' : 'none', transform: blur ? 'scale(1.08)' : 'none' });

		var fx = [];
		if (val('vignette')) fx.push('radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%)');
		if (val('glow')) fx.push('radial-gradient(60% 60% at 12% 18%,' + val('glow1') + '55,transparent 70%)', 'radial-gradient(55% 55% at 88% 70%,' + val('glow2') + '44,transparent 70%)');
		var dim = ['image', 'video', 'featured'].indexOf(type) > -1 ? (parseInt(val('dim'), 10) || 0) / 100 : 0;
		if (dim) fx.push('linear-gradient(rgba(0,0,0,' + dim + '),rgba(0,0,0,' + dim + '))');
		$bg[0].style.setProperty('--pv-fx', fx.length ? fx.join(',') : 'none');

		var pad = parseInt($form.find('[name="pd[pad_d]"]').val() || $form.find('[name="pd[pad_d]"]').attr('placeholder'), 10);
		$pv[0].style.setProperty('--pv-pad', (isNaN(pad) ? 108 : pad) / 5 + 'px');
	}

	// Regler-Anzeige
	$form.on('input', 'input[type=range]', function () {
		var unit = this.name.indexOf('angle') > -1 ? '°' : (this.name.indexOf('dim') > -1 || this.name.indexOf('card_op') > -1 ? ' %' : ' px');
		$(this).siblings('output').text(this.value + unit);
	});
	$form.on('input change', 'input, select', sync);

	// Mediathek
	$form.on('click', '.apc-pd-pick', function (e) {
		e.preventDefault();
		var $box = $(this).closest('.apc-pd-media');
		var kind = $box.attr('data-kind');
		var frame = wp.media({ title: kind === 'video' ? 'Video wählen' : 'Bild wählen', library: { type: kind }, multiple: false });
		frame.on('select', function () {
			var a = frame.state().get('selection').first().toJSON();
			var url = kind === 'video' ? a.url : ((a.sizes && (a.sizes.large || a.sizes.medium || a.sizes.full)) || a).url;
			$box.find('input[type=hidden]').val(a.id).attr('data-url', kind === 'video' ? a.url : (a.sizes && a.sizes.full ? a.sizes.full.url : a.url));
			$box.find('.apc-pd-thumb').html(kind === 'video' ? $('<span class="apc-pd-file">').text(a.filename || url) : $('<img alt="">').attr('src', url));
			$box.find('.apc-pd-clear').prop('hidden', false);
			sync();
		});
		frame.open();
	});
	$form.on('click', '.apc-pd-clear', function (e) {
		e.preventDefault();
		var $box = $(this).closest('.apc-pd-media');
		$box.find('input[type=hidden]').val('0').attr('data-url', '');
		$box.find('.apc-pd-thumb').empty();
		this.hidden = true;
		sync();
	});

	sync();
})(jQuery);

/* (250) Tooltips als eigener Block — gelten auch im Tab „Rechtliche Leiste“ (ohne .apc-pd-form). */
(function ($) {
	'use strict';
	// (246) Tooltips
	function place(tip) {
		var box = tip.querySelector('.apc-pd-tip__box');
		if (!box) return;
		tip.classList.remove('is-below');
		box.style.setProperty('--tip-x', '-50%');
		box.style.setProperty('--tip-arrow', '50%');
		var r = box.getBoundingClientRect(), pad = 12, shift = 0;
		if (r.left < pad) shift = pad - r.left;
		else if (r.right > window.innerWidth - pad) shift = (window.innerWidth - pad) - r.right;
		if (shift) {
			box.style.setProperty('--tip-x', 'calc(-50% + ' + Math.round(shift) + 'px)');
			box.style.setProperty('--tip-arrow', 'calc(50% - ' + Math.round(shift) + 'px)');
		}
		if (r.top < 46) tip.classList.add('is-below'); // sonst unter der Admin-Leiste (32 px)
	}
	function closeAll(except) {
		$('.apc-pd-tip.is-open').each(function () { if (this !== except) this.classList.remove('is-open'); });
	}
	$(document).on('mouseenter focusin', '.apc-pd-tip', function () { place(this); });
	$(document).on('click', '.apc-pd-tip__btn', function (e) {
		e.preventDefault(); e.stopPropagation();
		var tip = this.parentNode;
		closeAll(tip);
		tip.classList.toggle('is-open');
		place(tip);
	});
	$(document).on('keydown', '.apc-pd-tip__btn', function (e) {
		if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $(this).trigger('click'); }
	});
	$(document).on('keydown', function (e) { if (e.key === 'Escape') closeAll(null); });
	$(document).on('click', function (e) { if (!$(e.target).closest('.apc-pd-tip').length) closeAll(null); });
})(jQuery);

/* (258) Farbcode (#rrggbb) neben jedem Farbfeld anzeigen — in beide Richtungen verbunden. */
(function ($) {
	'use strict';
	$('.apc-pd-wrap input[type=color]').each(function () {
		var $c = $(this);
		if ($c.next('.apc-hex').length) return;
		var $t = $('<input type="text" class="apc-hex" maxlength="7" spellcheck="false" autocomplete="off">')
			.val(($c.val() || '').toLowerCase())
			.attr('aria-label', 'Farbcode ' + ($c.attr('aria-label') || $c.closest('label').find('span').first().text() || '').trim());
		$c.after($t);
		$c.on('input change', function () { $t.val(this.value.toLowerCase()); });
		$t.on('input', function () {
			var v = this.value.trim();
			if (v && v[0] !== '#') v = '#' + v;
			if (/^#[0-9a-fA-F]{6}$/.test(v)) { $c.val(v.toLowerCase()).trigger('input'); $t.removeClass('is-bad'); }
			else $t.toggleClass('is-bad', v.length >= 7);
		});
		$t.on('blur', function () { $t.val(($c.val() || '').toLowerCase()).removeClass('is-bad'); });
	});
})(jQuery);