Zauberwald/src/ui/screens.ts

import type {
	CompanionType,
	KeyboardLayout,
	ScreenName,
	Progress,
} from "../types";
import { companions } from "../companion/characters";
import { saveProgress, getProgress } from "../storage/db";
import {
	createExerciseState,
	handleKeyPress,
	getCurrentLetter,
} from "../game/typing";
import { renderKeyboard, highlightKey, pressKey } from "../game/keyboard";

export function initWelcomeScreen(
	db: IDBDatabase,
	navigateTo: (screen: ScreenName) => void,
): void {
	let selectedCompanion: CompanionType | null = null;
	let selectedLayout: KeyboardLayout = "de";

	const grid = document.getElementById("companion-grid")!;
	const startBtn = document.getElementById("start-btn") as HTMLButtonElement;
	const layoutToggle = document.getElementById("layout-toggle")!;

	// Render companion cards
	companions.forEach((c) => {
		const card = document.createElement("button");
		card.className = "companion-card";
		card.dataset.companion = c.type;
		card.innerHTML = `
			<img class="companion-card__avatar" src="${c.avatarUrl}" alt="${c.name}"
				onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
			<span class="companion-card__emoji" style="display:none">${c.emoji}</span>
			<span class="companion-card__name">${c.name}</span>
		`;
		card.addEventListener("click", () => {
			grid.querySelectorAll(".companion-card").forEach((el) =>
				el.classList.remove("companion-card--selected"),
			);
			card.classList.add("companion-card--selected");
			selectedCompanion = c.type;
			startBtn.disabled = false;
		});
		grid.appendChild(card);
	});

	// Layout toggle
	layoutToggle.addEventListener("click", (e) => {
		const btn = (e.target as HTMLElement).closest(
			".layout-btn",
		) as HTMLButtonElement | null;
		if (!btn) return;
		layoutToggle
			.querySelectorAll(".layout-btn")
			.forEach((el) => el.classList.remove("layout-btn--active"));
		btn.classList.add("layout-btn--active");
		selectedLayout = btn.dataset.layout as KeyboardLayout;
	});

	// Start button
	startBtn.addEventListener("click", async () => {
		if (!selectedCompanion) return;
		const progress: Progress = {
			id: 1,
			currentLevel: 1,
			completedLevels: [],
			totalSessions: 0,
			sessionDates: [],
			selectedCharacter: selectedCompanion,
			selectedLayout: selectedLayout,
			totalCorrect: 0,
			totalErrors: 0,
			errorKeyCounts: {},
			lastPlayedLevels: [],
		};
		await saveProgress(db, progress);
		navigateTo("forest");
	});
}

export function initLessonScreen(
	_db: IDBDatabase,
	level: number,
	layout: KeyboardLayout,
	onComplete: (level: number) => void,
	onCancel?: () => void,
): () => void {
	const letterArea = document.getElementById("letter-area")!;
	const keyboardContainer = document.getElementById("lesson-keyboard")!;
	const backBtn = document.getElementById("lesson-back-btn") as HTMLButtonElement;
	const state = createExerciseState(level);

	// Show companion avatar (per ASST-04)
	getProgress(_db).then((progress) => {
		if (!progress) return;
		const companion = companions.find(
			(c) => c.type === progress.selectedCharacter,
		);
		if (!companion) return;
		const area = document.getElementById("lesson-companion")!;
		const avatar = document.getElementById(
			"lesson-companion-avatar",
		) as HTMLImageElement;
		avatar.src = companion.avatarUrl;
		avatar.alt = companion.name;
		area.style.display = "flex";
	});

	// Render keyboard
	renderKeyboard(keyboardContainer, layout, level);

	// Show current letter
	function showCurrentLetter(): void {
		const letter = getCurrentLetter(state);
		if (!letter) return;
		letterArea.innerHTML = "";
		const letterEl = document.createElement("div");
		letterEl.className = "falling-letter";
		letterEl.textContent = letter === " " ? "\u2423" : letter.toUpperCase();
		letterArea.appendChild(letterEl);
		highlightKey(letter);
	}

	showCurrentLetter();

	// Keyboard handler
	function onKeyDown(e: KeyboardEvent): void {
		// Ignore modifier keys, function keys, etc.
		if (e.key.length > 1 && e.key !== " ") return;
		e.preventDefault();

		const result = handleKeyPress(state, e.key);
		pressKey(e.key);

		if (result.correct) {
			// Correct: dissolve letter with animation
			const currentEl = letterArea.querySelector(".falling-letter");
			if (currentEl) {
				currentEl.classList.add("falling-letter--dissolve");
			}

			if (result.exerciseComplete) {
				// Lesson complete
				document.removeEventListener("keydown", onKeyDown);
				onComplete(level);
			} else {
				// Show next letter after brief delay
				setTimeout(() => showCurrentLetter(), 300);
			}
		}
		// Wrong: do nothing to letter (per D-03), correct key already highlighted
	}

	document.addEventListener("keydown", onKeyDown);

	// Back button to cancel lesson
	backBtn.onclick = () => {
		document.removeEventListener("keydown", onKeyDown);
		letterArea.innerHTML = "";
		if (onCancel) onCancel();
	};

	// Return cleanup function
	return () => {
		document.removeEventListener("keydown", onKeyDown);
		letterArea.innerHTML = "";
	};
}