// Shared teaching-layer collapse memory for every page that uses `.why-panel` (`<details>`
// with a `data-why` id): the planner and the cupping session view. One localStorage key across
// both so a user's choices carry over between pages.
//
// Panels are collapsed by default (see index.html/cupping.html) so the form isn't wall-to-wall
// explanatory text on first load; this tracks which ones a user has explicitly opened, rather
// than which they've closed, so it stays meaningful against a closed-by-default baseline.
const WHY_EXPANDED_KEY = "roastPlannerWhyExpanded.v1";

export function wireWhyPanels() {
	let expanded;
	try {
		expanded = new Set(JSON.parse(localStorage.getItem(WHY_EXPANDED_KEY)) || []);
	} catch {
		expanded = new Set();
	}
	const persist = () => {
		try {
			localStorage.setItem(WHY_EXPANDED_KEY, JSON.stringify([...expanded]));
		} catch {
			/* unavailable storage */
		}
	};

	const panels = [...document.querySelectorAll(".why-panel")];
	for (const panel of panels) {
		if (expanded.has(panel.dataset.why)) panel.open = true;
		panel.addEventListener("toggle", () => {
			if (panel.open) expanded.add(panel.dataset.why);
			else expanded.delete(panel.dataset.why);
			persist();
		});
	}

	document.getElementById("btn-expand-why")?.addEventListener("click", () => {
		for (const panel of panels) {
			panel.open = true;
			expanded.add(panel.dataset.why);
		}
		persist();
	});
}