code-crispies/src/app.js

import { LessonEngine } from "./impl/LessonEngine.js";
import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
import { loadModules } from "./config/lessons.js";

// Simplified state - LessonEngine now manages lesson state and progress
const state = {
	userSettings: {
		disableFeedbackErrors: false
	},
	showExpected: false
};

// DOM elements - updated for new layout
const elements = {
	// Header
	menuBtn: document.getElementById("menu-btn"),
	helpBtn: document.getElementById("help-btn"),

	// Left panel
	lessonTitle: document.getElementById("lesson-title"),
	lessonDescription: document.getElementById("lesson-description"),
	taskInstruction: document.getElementById("task-instruction"),
	codeInput: document.getElementById("code-input"),
	runBtn: document.getElementById("run-btn"),
	hintArea: document.getElementById("hint-area"),
	validationIndicators: document.querySelector(".validation-indicators-container"),
	editorContent: document.querySelector(".editor-content"),
	codeEditor: document.querySelector(".code-editor"),

	// Right panel
	previewArea: document.getElementById("preview-area"),
	showExpectedBtn: document.getElementById("show-expected-btn"),
	expectedOverlay: document.getElementById("expected-overlay"),
	previewWrapper: document.querySelector(".preview-wrapper"),
	prevBtn: document.getElementById("prev-btn"),
	nextBtn: document.getElementById("next-btn"),
	levelIndicator: document.getElementById("level-indicator"),

	// Sidebar
	sidebarDrawer: document.getElementById("sidebar-drawer"),
	sidebarBackdrop: document.getElementById("sidebar-backdrop"),
	closeSidebar: document.getElementById("close-sidebar"),
	moduleList: document.getElementById("module-list"),
	progressFill: document.getElementById("progress-fill"),
	progressText: document.getElementById("progress-text"),
	resetBtn: document.getElementById("reset-btn"),
	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),

	// Modal
	modalContainer: document.getElementById("modal-container"),
	modalTitle: document.getElementById("modal-title"),
	modalContent: document.getElementById("modal-content"),
	modalClose: document.getElementById("modal-close")
};

// Initialize the lesson engine - now the single source of truth
const lessonEngine = new LessonEngine();

// ================= SIDEBAR FUNCTIONS =================

function openSidebar() {
	elements.sidebarDrawer.classList.add("open");
	elements.sidebarBackdrop.classList.add("visible");
}

function closeSidebar() {
	elements.sidebarDrawer.classList.remove("open");
	elements.sidebarBackdrop.classList.remove("visible");
}

// ================= EXPECTED RESULT TOGGLE =================

function toggleExpectedResult() {
	state.showExpected = !state.showExpected;

	if (state.showExpected) {
		elements.expectedOverlay.classList.add("visible");
		elements.showExpectedBtn.textContent = "Hide Expected";
		elements.showExpectedBtn.classList.add("btn-primary");
	} else {
		elements.expectedOverlay.classList.remove("visible");
		elements.showExpectedBtn.textContent = "Show Expected";
		elements.showExpectedBtn.classList.remove("btn-primary");
	}
}

// ================= HINT SYSTEM =================

function showHint(message, step, total, isSuccess = false) {
	const hintClass = isSuccess ? "hint hint-success" : "hint";
	elements.hintArea.innerHTML = `
		<div class="${hintClass}">
			<span class="hint-progress">${step}/${total}</span>
			<span class="hint-message">${message}</span>
		</div>
	`;
}

function clearHint() {
	elements.hintArea.innerHTML = "";
}

function showSuccessHint(message) {
	elements.hintArea.innerHTML = `
		<div class="hint hint-success">
			<span class="hint-progress">✓</span>
			<span class="hint-message">${message}</span>
		</div>
	`;
}

// ================= PROGRESS DISPLAY =================

function updateProgressDisplay() {
	const stats = lessonEngine.getProgressStats();
	elements.progressFill.style.width = `${stats.percentComplete}%`;
	elements.progressText.textContent = `${stats.percentComplete}% Complete (${stats.totalCompleted}/${stats.totalLessons})`;
}

// ================= USER SETTINGS =================

function loadUserSettings() {
	const savedSettings = localStorage.getItem("codeCrispies.settings");
	if (savedSettings) {
		try {
			const settings = JSON.parse(savedSettings);
			state.userSettings = { ...state.userSettings, ...settings };
			elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
		} catch (e) {
			console.error("Error loading user settings:", e);
		}
	}
}

function saveUserSettings() {
	localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
}

// ================= MODULE INITIALIZATION =================

async function initializeModules() {
	try {
		const modules = await loadModules();
		lessonEngine.setModules(modules);

		// Use the new renderModuleList function with both callbacks
		renderModuleList(elements.moduleList, modules, selectModule, selectLesson);

		// Load saved progress and select appropriate module
		const progressData = lessonEngine.loadUserProgress();
		const lastModuleId = progressData?.lastModuleId;

		if (lastModuleId && modules.find((m) => m.id === lastModuleId)) {
			selectModule(lastModuleId);
		} else if (modules.length > 0) {
			selectModule(modules[0].id);
		}

		updateProgressDisplay();
	} catch (error) {
		console.error("Failed to load modules:", error);
		elements.lessonDescription.textContent = "Failed to load modules. Please refresh the page.";
	}
}

// ================= MODULE/LESSON SELECTION =================

function selectModule(moduleId) {
	const success = lessonEngine.setModuleById(moduleId);
	if (!success) return;

	// Update module list UI to highlight the active module
	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
	moduleItems.forEach((item) => {
		item.classList.remove("active");
		if (item.dataset.moduleId === moduleId) {
			item.classList.add("active");
		}
	});

	loadCurrentLesson();
	resetSuccessIndicators();

	// Close sidebar after selection on mobile
	if (window.innerWidth <= 768) {
		closeSidebar();
	}
}

function selectLesson(moduleId, lessonIndex) {
	const currentState = lessonEngine.getCurrentState();
	if (!currentState.module || currentState.module.id !== moduleId) {
		lessonEngine.setModuleById(moduleId);
	}

	lessonEngine.setLessonByIndex(lessonIndex);
	loadCurrentLesson();

	// Close sidebar after selection on mobile
	if (window.innerWidth <= 768) {
		closeSidebar();
	}
}

// ================= LESSON LOADING =================

function resetSuccessIndicators() {
	elements.codeEditor.classList.remove("success-highlight");
	elements.lessonTitle.classList.remove("success-text");
	elements.nextBtn.classList.remove("success");
	elements.taskInstruction.classList.remove("success-instruction");
	elements.runBtn.classList.remove("success");
	elements.previewWrapper?.classList.remove("matched");
}

function updateEditorForMode(mode) {
	const codeInput = elements.codeInput;
	const editorLabel = document.querySelector(".editor-label");

	const modeConfig = {
		html: {
			placeholder: "Write your HTML here (e.g., <p>Hello World</p>)",
			label: "HTML Editor"
		},
		tailwind: {
			placeholder: "Enter Tailwind classes (e.g., bg-blue-500 text-white p-4)",
			label: "Tailwind Classes"
		},
		css: {
			placeholder: "Enter your CSS code here...",
			label: "CSS Editor"
		}
	};

	const config = modeConfig[mode] || modeConfig.css;
	codeInput.placeholder = config.placeholder;
	if (editorLabel) editorLabel.textContent = config.label;
}

function loadCurrentLesson() {
	const engineState = lessonEngine.getCurrentState();

	if (!engineState.module || !engineState.lesson) {
		return;
	}

	const lesson = engineState.lesson;
	const mode = lesson.mode || engineState.module?.mode || "css";

	// Update UI based on mode
	updateEditorForMode(mode);

	// Reset any success indicators
	resetSuccessIndicators();

	// Clear hints
	clearHint();

	// Hide expected overlay
	state.showExpected = false;
	elements.expectedOverlay.classList.remove("visible");
	elements.showExpectedBtn.textContent = "Show Expected";
	elements.showExpectedBtn.classList.remove("btn-primary");

	// Update UI
	renderLesson(
		elements.lessonTitle,
		elements.lessonDescription,
		elements.taskInstruction,
		elements.previewArea,
		null, // editorPrefix no longer used
		elements.codeInput,
		null, // editorSuffix no longer used
		lesson
	);

	// Set user code in input
	elements.codeInput.value = engineState.userCode;

	// Reset validation indicators
	elements.validationIndicators.innerHTML = "";

	// Update Run button text based on completion status
	if (engineState.isCompleted) {
		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Re-run';

		// Add completion badge if not present
		if (!document.querySelector(".completion-badge")) {
			const badge = document.createElement("span");
			badge.className = "completion-badge";
			badge.textContent = "Completed";
			elements.lessonTitle.appendChild(badge);
		}
	} else {
		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Run';

		// Remove completion badge if exists
		const badge = document.querySelector(".completion-badge");
		if (badge) badge.remove();
	}

	// Update level indicator
	renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);

	// Update active lesson in sidebar
	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);

	// Update navigation buttons
	updateNavigationButtons();

	// Update progress display
	updateProgressDisplay();

	// Focus on the code editor
	elements.codeInput.focus();

	// Render the expected/solution preview
	lessonEngine.renderExpectedPreview();

	// Setup live preview
	setupLivePreview();
}

// ================= LIVE PREVIEW =================

let previewTimer = null;

function setupLivePreview() {
	elements.codeInput.removeEventListener("input", handleUserInput);
	elements.codeInput.addEventListener("input", handleUserInput);
}

function handleUserInput() {
	if (previewTimer) {
		clearTimeout(previewTimer);
	}

	previewTimer = setTimeout(() => {
		runCode();
	}, 800);
}

// ================= NAVIGATION =================

function updateNavigationButtons() {
	const engineState = lessonEngine.getCurrentState();

	elements.prevBtn.disabled = !engineState.canGoPrev;
	elements.nextBtn.disabled = !engineState.canGoNext;

	elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
	elements.nextBtn.classList.toggle("btn-disabled", !engineState.canGoNext);
}

function nextLesson() {
	const success = lessonEngine.nextLesson();
	if (success) {
		loadCurrentLesson();
	}
}

function prevLesson() {
	const success = lessonEngine.previousLesson();
	if (success) {
		loadCurrentLesson();
	}
}

// ================= CODE EXECUTION =================

function runCode() {
	const userCode = elements.codeInput.value;

	// Rotate the Run button icon
	const runButtonImg = document.querySelector("#run-btn img");
	if (runButtonImg) {
		const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
		runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
	}

	// Apply the code to the preview via LessonEngine
	lessonEngine.applyUserCode(userCode, true);

	// Validate code using LessonEngine
	const validationResult = lessonEngine.validateCode();

	// Update validation indicators
	if (validationResult.totalCases > 0) {
		const percent = Math.round((validationResult.validCases / validationResult.totalCases) * 100);
		elements.validationIndicators.innerHTML = `${percent}%`;
	}

	if (validationResult.isValid) {
		// Show success hint
		showSuccessHint(validationResult.message || "Great job! Your code works correctly.");

		// Update Run button
		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Re-run';
		elements.runBtn.classList.add("success");

		// Add completion badge
		if (!document.querySelector(".completion-badge")) {
			const badge = document.createElement("span");
			badge.className = "completion-badge";
			badge.textContent = "Completed";
			elements.lessonTitle.appendChild(badge);
		}

		// Add success visual indicators
		elements.codeEditor.classList.add("success-highlight");
		elements.lessonTitle.classList.add("success-text");
		elements.nextBtn.classList.add("success");
		elements.taskInstruction.classList.add("success-instruction");

		// Show match animation
		elements.previewWrapper?.classList.add("matched");
		setTimeout(() => {
			elements.previewWrapper?.classList.remove("matched");
		}, 2500);

		updateNavigationButtons();
		updateProgressDisplay();
	} else {
		// Reset success indicators
		resetSuccessIndicators();

		// Show hint with step progress
		const step = validationResult.validCases + 1;
		const total = validationResult.totalCases;

		// Only show hints if enabled
		if (!state.userSettings.disableFeedbackErrors) {
			showHint(validationResult.message || "Keep trying!", step, total);
		}
	}
}

// ================= MODALS =================

function showHelp() {
	elements.modalTitle.textContent = "Help";

	elements.modalContent.innerHTML = `
		<h3>How to Use Code Crispies</h3>
		<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>

		<h4>Getting Started</h4>
		<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>

		<h4>Completing Lessons</h4>
		<ol>
			<li>Read the instructions on the left</li>
			<li>Write your code in the editor</li>
			<li>Click "Run" or press Ctrl+Enter to test</li>
			<li>Follow the hints to fix any issues</li>
			<li>Click "Next" when you're done</li>
		</ol>

		<h4>Tips</h4>
		<ul>
			<li>Click "Show Expected" to see the target result</li>
			<li>Your progress is saved automatically</li>
			<li>Use Tab for indentation</li>
			<li>Ctrl+Enter runs your code</li>
		</ul>
	`;

	elements.modalContainer.classList.remove("hidden");
}

function showResetConfirmation() {
	elements.modalTitle.textContent = "Reset Progress";

	elements.modalContent.innerHTML = `
		<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
		<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
			<button id="cancel-reset" class="btn">Cancel</button>
			<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
		</div>
	`;

	document.getElementById("cancel-reset").addEventListener("click", closeModal);
	document.getElementById("confirm-reset").addEventListener("click", () => {
		lessonEngine.clearProgress();
		closeModal();
		closeSidebar();

		// Reload first module
		const modules = lessonEngine.modules;
		if (modules.length > 0) {
			selectModule(modules[0].id);
		}

		updateProgressDisplay();
	});

	elements.modalContainer.classList.remove("hidden");
}

function closeModal() {
	elements.modalContainer.classList.add("hidden");
}

// ================= KEYBOARD HANDLERS =================

function handleTabKey(e) {
	if (e.key === "Tab") {
		e.preventDefault();

		const start = e.target.selectionStart;
		const end = e.target.selectionEnd;

		e.target.value = e.target.value.substring(0, start) + "  " + e.target.value.substring(end);
		e.target.selectionStart = e.target.selectionEnd = start + 2;
	}
}

// ================= INITIALIZATION =================

function init() {
	loadUserSettings();
	initializeModules().catch(console.error);

	// Sidebar controls
	elements.menuBtn.addEventListener("click", openSidebar);
	elements.closeSidebar.addEventListener("click", closeSidebar);
	elements.sidebarBackdrop.addEventListener("click", closeSidebar);

	// Expected result toggle
	elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);

	// Navigation
	elements.prevBtn.addEventListener("click", prevLesson);
	elements.nextBtn.addEventListener("click", nextLesson);
	elements.runBtn.addEventListener("click", runCode);

	// Modals
	elements.helpBtn.addEventListener("click", showHelp);
	elements.modalClose.addEventListener("click", closeModal);
	elements.resetBtn.addEventListener("click", showResetConfirmation);

	// Settings
	elements.disableFeedbackToggle.addEventListener("change", (e) => {
		state.userSettings.disableFeedbackErrors = !e.target.checked;
		saveUserSettings();
	});

	// Editor interactions
	elements.codeInput.addEventListener("keydown", handleTabKey);
	elements.editorContent?.addEventListener("click", () => {
		elements.codeInput.focus();
	});

	// Keyboard shortcuts
	document.addEventListener("keydown", (e) => {
		// Ctrl+Enter to run code
		if (e.ctrlKey && e.key === "Enter") {
			runCode();
			e.preventDefault();
		}

		// Escape to close sidebar
		if (e.key === "Escape") {
			closeSidebar();
			closeModal();
		}
	});
}

// Start the application
init();