/**
 * Platform Helm — shared admin interactions.
 *
 * Vanilla JS, no jQuery, no framework. Provides the lightweight behaviours the
 * design system needs across screens: accordions, tab panels, toggle-badge
 * sync, and a tiny toast/notice helper. Module-specific logic (bulk scan,
 * architect batches, gutenberg panel) lives in each module's own script and is
 * not duplicated here.
 *
 * Everything is delegated and null-guarded so it's safe to load on any Helm
 * screen even when a given component isn't present.
 */
( function () {
	'use strict';

	document.addEventListener( 'DOMContentLoaded', function () {
		initAccordions();
		initTabs();
		initModuleToggles();
	} );

	/* Accordions: <button class="ph-accordion-header"> toggles its next sibling
	   .ph-accordion-body, flipping .ph-accordion-chevron. */
	function initAccordions() {
		document.querySelectorAll( '.ph-accordion-header' ).forEach( function ( header ) {
			header.addEventListener( 'click', function () {
				var body = header.nextElementSibling;
				var chevron = header.querySelector( '.ph-accordion-chevron' );
				if ( ! body ) { return; }
				var isOpen = body.classList.contains( 'ph-accordion-body--open' );
				body.classList.toggle( 'ph-accordion-body--open', ! isOpen );
				if ( chevron ) { chevron.classList.toggle( 'ph-accordion-chevron--open', ! isOpen ); }
				header.setAttribute( 'aria-expanded', ( ! isOpen ).toString() );
			} );
		} );
	}

	/* Tabs: a container [data-ph-tabs] holds [data-ph-tab="x"] buttons and
	   [data-ph-panel="x"] panels. */
	function initTabs() {
		document.querySelectorAll( '[data-ph-tabs]' ).forEach( function ( group ) {
			var buttons = group.querySelectorAll( '[data-ph-tab]' );
			buttons.forEach( function ( btn ) {
				btn.addEventListener( 'click', function () {
					var key = btn.getAttribute( 'data-ph-tab' );
					buttons.forEach( function ( b ) { b.classList.toggle( 'ph-tab--active', b === btn ); } );
					group.querySelectorAll( '[data-ph-panel]' ).forEach( function ( panel ) {
						panel.style.display = ( panel.getAttribute( 'data-ph-panel' ) === key ) ? '' : 'none';
					} );
				} );
			} );
		} );
	}

	/* Module toggle rows: reflect the checkbox state into the sibling status
	   badge text/colour immediately (the actual save is handled by the form). */
	function initModuleToggles() {
		document.querySelectorAll( '.ph-module-row .ph-toggle input[type="checkbox"]' ).forEach( function ( toggle ) {
			toggle.addEventListener( 'change', function () {
				var row = toggle.closest( '.ph-module-row' );
				if ( ! row ) { return; }
				var badge = row.querySelector( '.ph-module-status' );
				if ( ! badge ) { return; }
				var on = toggle.checked;
				badge.textContent = on
					? ( window.phAdmin && phAdmin.strings && phAdmin.strings.active ? phAdmin.strings.active : 'Active' )
					: ( window.phAdmin && phAdmin.strings && phAdmin.strings.inactive ? phAdmin.strings.inactive : 'Inactive' );
				badge.className = 'ph-badge ph-module-status ' + ( on ? 'ph-badge--info' : 'ph-badge--neutral' );
			} );
		} );
	}

	/* Small toast helper other scripts can call: window.phNotice(msg, type). */
	window.phNotice = function ( message, type ) {
		type = type || 'info';
		var host = document.querySelector( '.ph-wrap' ) || document.body;
		var el = document.createElement( 'div' );
		el.className = 'ph-notice ph-notice--' + type;
		el.setAttribute( 'role', 'status' );
		el.style.margin = '12px 0';
		el.textContent = message;
		host.insertBefore( el, host.firstChild );
		setTimeout( function () { el.style.transition = 'opacity .4s'; el.style.opacity = '0'; setTimeout( function () { el.remove(); }, 400 ); }, 3000 );
	};
} )();
