---
import PageLayout from "@/layouts/Base.astro";
import Murmurations from "@/components/page/Murmurations.astro";

const meta = {
	title: "/murmurations",
	description: "Birds, math, and poetry in motion",
};
---

<PageLayout meta={meta}>
	<Murmurations />
	<style is:global>
		body.murmurations-page {
			padding: 0 !important;
			max-width: none !important;
		}
		body.murmurations-page #main-header,
		body.murmurations-page footer {
			display: none !important;
		}
		body.murmurations-page #main {
			flex: none;
		}
	</style>
	<script>
		document.body.classList.add("murmurations-page");
	</script>
	<a
		href="/"
		class="fixed bottom-4 left-4 z-10 text-sm underline"
		style="bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left));"
	>
		Back
	</a>
	<audio id="murmuration-audio" src="/murmuration.mp3" preload="none"></audio>
	<div
		id="poem-overlay"
		class="pointer-events-none fixed inset-0 z-10 hidden items-center justify-center p-8 italic text-xl"
		aria-live="polite"
	>
		<div class="max-w-xl text-center text-sm leading-relaxed whitespace-pre-line text-textColor/90 opacity-0 transition-opacity duration-700 ease-in-out"></div>
	</div>
	<button
		id="audio-btn"
		class="fixed right-16 bottom-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-textColor/60 bg-bgColor/60 p-0 text-base hover:bg-textColor/15 active:bg-textColor/15"
		style="bottom: max(1rem, env(safe-area-inset-bottom)); right: calc(max(1rem, env(safe-area-inset-right)) + 3rem);"
		aria-label="Play audio"
		aria-pressed="false"
	>
		<span id="audio-icon" class="flex h-8 w-8 items-center justify-center"></span>
	</button>
	<button
		id="info-btn"
		class="fixed right-4 bottom-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-textColor/60 bg-bgColor/60 p-0 text-base hover:bg-textColor/15 active:bg-textColor/15"
		style="bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right));"
		aria-label="About this simulation"
		aria-expanded="false"
	>
		i
	</button>
	<div
		id="info-panel"
		class="fixed right-4 left-4 z-10 ml-auto hidden max-w-sm border border-textColor/20 bg-bgColor/95 p-4 text-xs leading-relaxed"
		style="bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.25rem); right: max(1rem, env(safe-area-inset-right)); left: max(1rem, env(safe-area-inset-left));"
		role="dialog"
		aria-label="About this simulation"
	>
		<h2 class="mb-2 text-sm font-semibold">Boids &amp; Starlings</h2>
		<p class="mb-2">
			A <em>murmuration</em> is the swirling, shape-shifting flight of thousands of starlings at dusk.
      There is no leader, rather coherence emerges from each bird reacting to its closest neighbors.
		</p>
		<p class="mb-2">
			This simulation uses <a class="underline" href="https://en.wikipedia.org/wiki/Boids" target="_blank" rel="noreferrer">Craig Reynolds&apos; boids algorithm</a>.
			Each agent follows three rules:
		</p>
		<ol class="mb-2 ml-5 list-decimal space-y-1">
			<li><strong>Separation</strong> (avoid crowding)</li>
			<li><strong>Alignment</strong> (match neighbor heading)</li>
			<li><strong>Cohesion</strong> (steer toward neighbor center)</li>
		</ol>
		<p>
			Real starlings track ~7 nearest neighbors regardless of distance.
			That fixed count is why turning waves cross the flock so fast and stay crisp at any density.
		</p>
    <br/>
    <p>
    This simulation doesn't come close to the real thing, and I would highly recommend <a target="_blank" rel="noreferrer" href="https://youtu.be/uV54oa0SyMc" class="style-link">taking a few minutes to see it</a>
    </p>
    <br/>
    <p class="italic">
      Audio credits: <a href="https://youtu.be/vj_zcAC2Y_0?si=zBdfwWx-a4N53VUv&t=345" target="_blank" rel="noreferrer" class="style-link">Starlings in Winter by Mary Oliver</a>
    </p>
	</div>
	<script>
		const audioBtn = document.getElementById("audio-btn") as HTMLButtonElement | null;
		const audioEl = document.getElementById("murmuration-audio") as HTMLAudioElement | null;
		const audioIcon = document.getElementById("audio-icon");
		const poemOverlay = document.getElementById("poem-overlay") as HTMLDivElement | null;

		// "Starlings in Winter" by Mary Oliver — read by Sean Bean.
		// Times in seconds from the start of /murmuration.mp3 (clip begins at 5:45 of source).
		const cues: { t: number; line: string }[] = [
			{ t: 13, line: "Starlings in Winter\nby Mary Oliver" },
			{ t: 18, line: "Chunky and noisy," },
			{ t: 20, line: "but with stars in their black feathers,\nthey spring from the telephone wire\nand instantly" },
			{ t: 27, line: "they are acrobats in the freezing wind.\nAnd now, in the theater of air,\nthey swing over buildings," },
			{ t: 36, line: "dipping and rising;\nthey float like one stippled star\nthat opens,\nbecomes for a moment fragmented," },
			{ t: 45, line: "then closes again;\nand you watch\nand you try\nbut you simply can't imagine" },
			{ t: 54, line: "how they do it\nwith no articulated instruction, no pause,\nonly the silent confirmation\nthat they are this notable thing," },
			{ t: 67, line: "this wheel of many parts, that can rise and spin\nover and over again,\nfull of gorgeous life." },
			{ t: 77, line: "Ah, world, what lessons you prepare for us,\neven in the leafless winter,\neven in the ashy city.\nI am thinking now\nof grief, and of getting past it;" },
			{ t: 92, line: "I feel my boots\ntrying to leave the ground,\nI feel my heart\npumping hard. I want" },
			{ t: 101, line: "to think again of dangerous and noble things.\nI want to be light and frolicsome.\nI want to be improbable beautiful and afraid of nothing,\nas though I had wings." },
		];

		const POEM_END_T = 118;
		const PLAY_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="h-4 w-4" viewBox="0 0 256 256"><path fill="currentColor" d="M231.36 116.19L87.28 28.06a14 14 0 0 0-14.18-.27A13.69 13.69 0 0 0 66 39.87v176.26a13.69 13.69 0 0 0 7.1 12.08a14 14 0 0 0 14.18-.27l144.08-88.13a13.82 13.82 0 0 0 0-23.62m-6.26 13.38L81 217.7a2 2 0 0 1-2.06 0a1.78 1.78 0 0 1-1-1.61V39.87a1.78 1.78 0 0 1 1-1.61A2.06 2.06 0 0 1 80 38a2 2 0 0 1 1 .31l144.1 88.12a1.82 1.82 0 0 1 0 3.14"/></svg>';
		const PAUSE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="h-4 w-4" viewBox="0 0 256 256"><path fill="currentColor" d="M200 34h-40a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h40a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14m2 174a2 2 0 0 1-2 2h-40a2 2 0 0 1-2-2V48a2 2 0 0 1 2-2h40a2 2 0 0 1 2 2ZM96 34H56a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h40a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14m2 174a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2V48a2 2 0 0 1 2-2h40a2 2 0 0 1 2 2Z"/></svg>';
		if (audioIcon) audioIcon.innerHTML = PLAY_SVG;

		const poemText = poemOverlay?.firstElementChild as HTMLDivElement | null;
		let lastCueIdx = -1;
		let swapTimer: number | undefined;
		const FADE_MS = 300;
		const renderCue = (idx: number) => {
			if (!poemOverlay || !poemText) return;
			if (idx === lastCueIdx) return;
			window.clearTimeout(swapTimer);
			const wasHidden = poemOverlay.classList.contains("hidden");
			poemText.classList.remove("opacity-100");
			poemText.classList.add("opacity-0");
			const swap = () => {
				if (idx < 0) {
					poemOverlay.classList.add("hidden");
					poemOverlay.classList.remove("flex");
					poemText.textContent = "";
				} else {
					poemText.textContent = cues[idx].line;
					poemOverlay.classList.remove("hidden");
					poemOverlay.classList.add("flex");
					requestAnimationFrame(() => {
						requestAnimationFrame(() => {
							poemText.classList.remove("opacity-0");
							poemText.classList.add("opacity-100");
						});
					});
				}
			};
			if (wasHidden) swap();
			else swapTimer = window.setTimeout(swap, FADE_MS);
			lastCueIdx = idx;
		};

		const updateCue = () => {
			if (!audioEl) return;
			const t = audioEl.currentTime;
			if (t >= POEM_END_T) {
				renderCue(-1);
				return;
			}
			let idx = -1;
			for (let i = 0; i < cues.length; i++) {
				if (cues[i].t <= t) idx = i;
				else break;
			}
			renderCue(idx);
		};

		const resetBtn = () => {
			if (!audioBtn || !audioIcon) return;
			audioIcon.innerHTML = PLAY_SVG;
			audioBtn.setAttribute("aria-pressed", "false");
			audioBtn.setAttribute("aria-label", "Play audio");
		};

		if (audioBtn && audioEl && audioIcon) {
			audioEl.addEventListener("timeupdate", updateCue);
			audioEl.addEventListener("seeked", updateCue);
			audioEl.addEventListener("pause", () => {
				if (audioEl.currentTime === 0) renderCue(-1);
			});
			audioEl.addEventListener("ended", () => {
				renderCue(-1);
				audioEl.currentTime = 0;
				resetBtn();
			});

			audioBtn.addEventListener("click", async () => {
				if (audioEl.paused) {
					try {
						if (audioEl.ended) audioEl.currentTime = 0;
						await audioEl.play();
						audioIcon.innerHTML = PAUSE_SVG;
						audioBtn.setAttribute("aria-pressed", "true");
						audioBtn.setAttribute("aria-label", "Pause audio");
						updateCue();
					} catch (err) {
						console.error("Audio play failed", err);
					}
				} else {
					audioEl.pause();
					resetBtn();
				}
			});
		}
	</script>
	<script>
		const btn = document.getElementById("info-btn") as HTMLButtonElement | null;
		const panel = document.getElementById("info-panel") as HTMLDivElement | null;
		if (btn && panel) {
			btn.addEventListener("click", (e) => {
				e.stopPropagation();
				const willOpen = panel.classList.contains("hidden");
				panel.classList.toggle("hidden", !willOpen);
				btn.setAttribute("aria-expanded", String(willOpen));
			});
			document.addEventListener("click", (e) => {
				if (panel.classList.contains("hidden")) return;
				const target = e.target as Node;
				if (panel.contains(target) || btn.contains(target)) return;
				panel.classList.add("hidden");
				btn.setAttribute("aria-expanded", "false");
			});
		}
	</script>
</PageLayout>