{{-- Three CKEditor 5 instances (citation, head_note, held), plus a stacked-row sections picker.
     Each row owns one Act dropdown + a frontend-style sections trigger/panel (matches
     resources/views/users/judgements*.blade.php). Checkboxes inside each row's panel are
     named `section_ids[]` — the browser collects them across all rows on submit, and
     `$journal->sections()->sync(...)` dedupes if the same section appears twice.
     Included from both create.blade.php and edit.blade.php inside @push('scripts'). --}}
<script>
document.addEventListener("DOMContentLoaded", function () {

	// ---------- CKEditor 5 (Super Build) on three rich-text fields ----------
	const sharedRemovePlugins = [
		'AIAssistant', 'OpenAITextAdapter', 'AWSTextAdapter',
		'CKBox', 'CKBoxImageEdit', 'CKFinder', 'CKFinderUploadAdapter',
		'EasyImage', 'CloudServices',
		'Comments', 'CommentsAdapter', 'CommentsArchive', 'CommentsRepository',
		'TrackChanges', 'TrackChangesData', 'TrackChangesEditing',
		'RevisionHistory',
		'RealTimeCollaborativeEditing', 'RealTimeCollaborativeComments',
		'RealTimeCollaborativeTrackChanges', 'RealTimeCollaborativeRevisionHistory',
		'PresenceList',
		'Pagination', 'PaginationEditing', 'PaginationUI',
		'WProofreader',
		'TableOfContents', 'TableOfContentsEditing', 'TableOfContentsUI',
		'FormatPainter',
		'Template', 'TemplateEditing', 'TemplateUI',
		'CaseChange',
		'MultiLevelList',
		'ExportPdf', 'ExportWord', 'ImportWord',
		'PasteFromOfficeEnhanced',
		'SlashCommand',
		'DocumentOutline',
		'MathType',
		'WirisPlugin',
	];

	// Toolbar config copied from admin/articles/partials/form_scripts.blade.php
	// so the editing experience matches what admins already use on Articles.
	const sharedToolbar = {
		items: [
			'undo', 'redo', '|',
			'heading', 'style', '|',
			'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
			'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript', '|',
			'removeFormat', 'highlight', '|',
			'link', 'bulletedList', 'numberedList', 'todoList', '|',
			'alignment', 'outdent', 'indent', '|',
			'blockQuote', 'codeBlock', '|',
			'insertTable', 'mediaEmbed', 'horizontalLine', 'specialCharacters', 'pageBreak', '|',
			'sourceEditing', 'htmlEmbed', 'findAndReplace', '|',
			'uploadImage',
		],
		shouldNotGroupWhenFull: true,
	};

	const sharedImageConfig = {
		toolbar: [
			'imageTextAlternative', 'toggleImageCaption', '|',
			'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
			'resizeImage',
		],
		resizeOptions: [
			{ name: 'resizeImage:original', label: 'Original', value: null },
			{ name: 'resizeImage:50',       label: '50%',      value: '50' },
			{ name: 'resizeImage:75',       label: '75%',      value: '75' },
		],
	};

	const sharedTableConfig = {
		contentToolbar: [
			'tableColumn', 'tableRow', 'mergeTableCells',
			'tableProperties', 'tableCellProperties', 'toggleTableCaption',
		],
	};

	function initCk(selector, placeholder) {
		const el = document.querySelector(selector);
		if (!el || typeof CKEDITOR === 'undefined' || !CKEDITOR.ClassicEditor) return;
		CKEDITOR.ClassicEditor
			.create(el, {
				removePlugins: sharedRemovePlugins,
				toolbar:       sharedToolbar,
				image:         sharedImageConfig,
				table:         sharedTableConfig,
				language:      'en',
				placeholder:   placeholder,
			})
			.catch(err => console.error('CKEditor 5 init failed for ' + selector + ':', err));
	}

	initCk('#journal-citation', 'Citation…');
	initCk('#journal-head-note', 'Head note (main body)…');
	initCk('#journal-held',     'Held…');

	// ---------- Sections picker — stacked rows ----------
	const bootstrapEl = document.getElementById('journal-sections-bootstrap');
	const bootstrap   = bootstrapEl ? JSON.parse(bootstrapEl.textContent) : { acts: [], attachedSectionsByAct: [], sectionsByActUrl: '' };
	const csrfToken   = "{{ csrf_token() }}";

	const rowsContainer = document.getElementById('sections-rows');
	const addBtn        = document.getElementById('add-section-row-btn');
	const rowTemplate   = document.getElementById('section-row-template');

	// Used to give each checkbox a unique id even when the same section appears in two rows.
	let checkboxSeq = 0;

	function populateActOptions(selectEl, selectedActId) {
		selectEl.replaceChildren();
		const placeholder = document.createElement('option');
		placeholder.value = '';
		placeholder.textContent = '— Select an Act —';
		selectEl.appendChild(placeholder);
		bootstrap.acts.forEach(a => {
			const opt = document.createElement('option');
			opt.value = String(a.id);
			opt.textContent = a.act;
			if (selectedActId !== null && String(a.id) === String(selectedActId)) opt.selected = true;
			selectEl.appendChild(opt);
		});
	}

	function setListPlaceholder(listEl, text) {
		const div = document.createElement('div');
		div.className = 'text-muted small p-2';
		div.textContent = text;
		listEl.replaceChildren(div);
	}

	// Build/refresh the row's selected-tags strip from the currently-checked checkboxes.
	function refreshTags(rowEl) {
		const tagsContainer = rowEl.querySelector('.selected-tags-container');
		const placeholder   = rowEl.querySelector('.trigger-placeholder');
		tagsContainer.replaceChildren();

		const checked = Array.from(rowEl.querySelectorAll('.custom-checkbox-list input[type="checkbox"]:checked'));
		if (checked.length === 0) {
			placeholder.style.display = '';
			return;
		}
		placeholder.style.display = 'none';

		checked.forEach(cb => {
			const tag = document.createElement('span');
			tag.className = 'selected-tag';
			tag.dataset.cbId = cb.id;
			tag.appendChild(document.createTextNode(cb.dataset.sectionLabel || cb.value));

			const rmBtn = document.createElement('button');
			rmBtn.type = 'button';
			rmBtn.className = 'remove-tag';
			rmBtn.setAttribute('aria-label', 'Remove');
			rmBtn.textContent = '×';
			tag.appendChild(rmBtn);
			tagsContainer.appendChild(tag);
		});
	}

	function renderCheckboxList(rowEl, sections, preCheckedIds) {
		const listEl = rowEl.querySelector('.custom-checkbox-list');
		listEl.replaceChildren();
		if (!sections || sections.length === 0) {
			setListPlaceholder(listEl, 'No sections found for this act.');
			refreshTags(rowEl);
			return;
		}
		const checkedSet = new Set((preCheckedIds || []).map(String));

		sections.forEach(s => {
			const cbId = 'sec_cb_' + (++checkboxSeq);
			const item = document.createElement('div');
			item.className = 'custom-check-item';

			const cb = document.createElement('input');
			cb.type    = 'checkbox';
			cb.id      = cbId;
			cb.name    = 'section_ids[]';
			cb.value   = String(s.id);
			cb.checked = checkedSet.has(String(s.id));
			cb.dataset.sectionLabel = s.section;

			const label = document.createElement('label');
			label.setAttribute('for', cbId);
			label.textContent = s.section;

			item.appendChild(cb);
			item.appendChild(label);
			listEl.appendChild(item);
		});

		refreshTags(rowEl);
	}

	function loadSectionsForRow(rowEl, actId, preCheckedIds) {
		const listEl = rowEl.querySelector('.custom-checkbox-list');
		setListPlaceholder(listEl, 'Loading…');

		if (!actId) {
			setListPlaceholder(listEl, 'Select an Act first…');
			refreshTags(rowEl);
			return;
		}

		const fd = new FormData();
		fd.append('act_id', actId);
		fd.append('_token', csrfToken);

		fetch(bootstrap.sectionsByActUrl, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
			.then(r => r.json())
			.then(data => renderCheckboxList(rowEl, data.sections || [], preCheckedIds))
			.catch(err => {
				console.error('Failed to load sections:', err);
				setListPlaceholder(listEl, 'Error loading sections.');
			});
	}

	function wireRow(rowEl) {
		const actSelect    = rowEl.querySelector('.section-row-act');
		const trigger      = rowEl.querySelector('.section-selector-trigger');
		const panel        = rowEl.querySelector('.custom-options-panel');
		const searchInp    = rowEl.querySelector('.custom-search-input');
		const listEl       = rowEl.querySelector('.custom-checkbox-list');
		const tagsContainer = rowEl.querySelector('.selected-tags-container');
		const removeBtn    = rowEl.querySelector('.remove-row-btn');

		// Enhance the Act dropdown with Choices.js — the admin theme's bundled autocomplete
		// (already used by Articles and Samasyas forms). Choices fires native `change` events,
		// so the existing listener works unchanged. We stash the instance on the element so
		// the row's remove handler can tear it down cleanly.
		if (typeof Choices !== 'undefined') {
			actSelect._choicesInstance = new Choices(actSelect, {
				searchEnabled: true,
				searchPlaceholderValue: 'Search acts…',
				itemSelectText: '',
				shouldSort: false,
			});
		}

		actSelect.addEventListener('change', function () {
			loadSectionsForRow(rowEl, this.value, []);
			searchInp.value = '';
		});

		// Toggle the dropdown panel.
		trigger.addEventListener('click', function (e) {
			// Ignore clicks that originated on a tag's remove button — those have their own handler.
			if (e.target.closest('.remove-tag')) return;
			const isOpen = trigger.classList.toggle('active');
			panel.style.display = isOpen ? 'block' : 'none';
			if (isOpen) searchInp.focus();
		});

		// Close panel on outside-click.
		document.addEventListener('click', function (e) {
			if (!rowEl.contains(e.target)) {
				trigger.classList.remove('active');
				panel.style.display = 'none';
			}
		});

		// Live filter the checkbox list.
		searchInp.addEventListener('input', function () {
			const term = this.value.toLowerCase().trim();
			Array.from(listEl.querySelectorAll('.custom-check-item')).forEach(item => {
				const txt = item.querySelector('label').textContent.toLowerCase();
				item.style.display = (term === '' || txt.indexOf(term) !== -1) ? '' : 'none';
			});
		});

		// Checkbox change → refresh the row's tag strip.
		listEl.addEventListener('change', function (e) {
			if (e.target.matches('input[type="checkbox"]')) refreshTags(rowEl);
		});

		// Click on a tag's × → uncheck the matching checkbox.
		tagsContainer.addEventListener('click', function (e) {
			if (!e.target.classList.contains('remove-tag')) return;
			e.preventDefault();
			e.stopPropagation();
			const tag = e.target.closest('.selected-tag');
			const cbId = tag && tag.dataset.cbId;
			if (cbId) {
				const cb = document.getElementById(cbId);
				if (cb) cb.checked = false;
			}
			refreshTags(rowEl);
		});

		removeBtn.addEventListener('click', function () {
			// Tear down Choices.js first so it doesn't leave orphaned wrapper elements behind.
			if (actSelect._choicesInstance) {
				try { actSelect._choicesInstance.destroy(); } catch (e) { /* already destroyed */ }
				actSelect._choicesInstance = null;
			}
			rowEl.remove();
		});
	}

	function addRow({ actId = null, preCheckedIds = [] } = {}) {
		const frag = rowTemplate.content.cloneNode(true);
		const rowEl = frag.querySelector('.section-row');
		const actSelect = rowEl.querySelector('.section-row-act');

		// Populate <option>s first, append into the document, THEN init Select2 — it expects
		// the underlying element to be attached so it can render its widget alongside.
		populateActOptions(actSelect, actId);
		rowsContainer.appendChild(rowEl);
		wireRow(rowEl);

		if (actId) loadSectionsForRow(rowEl, actId, preCheckedIds);
		return rowEl;
	}

	addBtn.addEventListener('click', function () { addRow(); });

	// Initial render — one row per Act in attachedSectionsByAct, or a single empty row.
	if (Array.isArray(bootstrap.attachedSectionsByAct) && bootstrap.attachedSectionsByAct.length > 0) {
		bootstrap.attachedSectionsByAct.forEach(group => {
			addRow({ actId: group.act_id, preCheckedIds: group.attached_ids });
		});
	} else {
		addRow();
	}
});
</script>