document.querySelectorAll('nav ul li a').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const target = e.target.id.replace('nav-', '') + '-section';
    document.querySelectorAll('main section').forEach(sec => sec.classList.add('hidden'));
    const section = document.getElementById(target);
    if (section) section.classList.remove('hidden');
  });
});

document.getElementById('login-form')?.addEventListener('submit', e => {
  e.preventDefault();
  const username = document.getElementById('username').value;
  alert(`Logging in as ${username}...`);
  // TODO: call backend API for authentication
});

fetch("/gitea-repos/")
.then(res => res.json())
.then(repos => {
	const list = document.getElementById("repo-list");
	list.innerHTML = ""; // Clear "Loading..."
	repos.forEach(repo => {
		const item = document.createElement("li");
		item.innerHTML = `
		<strong><a href="${repo.html_url}" target="_blank">${repo.name}</a></strong>
		<p>${repo.description || "No description"}</p>`;
		list.appendChild(item);
	});
})
.catch(err => console.error("Error fetching repos:", err));

const playlist = [
	{
		title: 'Michael Cassette - Crocketts Theme',
		src: 'assets/Michael_Cassette_Crocketts_Theme.wav'
	},
	{
		title: 'DJ Ten - MagnetoSphere',
		src: 'assets/DJ_Ten_MagnetoSphere.wav'
	},
	{
		title: 'National Aerobic Championship Theme',
		src: 'assets/National_Aerobic_Championship_Theme.wav'
	}
];

let currentTrack = 0;
const audio = new Audio();
audio.loop = true;
audio.volume = 0.2;

const nowPlaying = document.getElementById('now-playing');
const playPauseBtn = document.getElementById('play-pause-btn');
const nextBtn = document.getElementById('next-btn');
const prevBtn = document.getElementById('prev-btn');

function loadTrack(index) {
	currentTrack = index;
	audio.src = playlist[currentTrack].src;
	nowPlaying.textContent = `🎵 Now Playing: ${playlist[currentTrack].title}`;
	audio.play();
	playPauseBtn.textContent = '⏸️';
}

playPauseBtn.addEventListener('click', () => {
	if (audio.paused) {
		audio.play();
		playPauseBtn.textContent = '⏸️';
	} else {
		audio.pause();
		playPauseBtn.textContent = '▶️';
	}
});

nextBtn.addEventListener('click', () => {
	loadTrack((currentTrack + 1) % playlist.length);
});

prevBtn.addEventListener('click', () => {
	loadTrack((currentTrack - 1 + playlist.length) % playlist.length);
});

audio.addEventListener('ended', () => {
	loadTrack((currentTrack + 1) % playlist.length);
});

// From previous step: start music only after "Press to Start"
document.getElementById('loading-screen')?.addEventListener('click', () => {
	loadTrack(0);
});

window.addEventListener('DOMContentLoaded', () => {
	const loadingScreen = document.getElementById('loading-screen');
	const music = new Audio(); // your audio logic might be handled elsewhere now

	if (loadingScreen) {
		loadingScreen.addEventListener('click', () => {
			loadingScreen.style.display = 'none'; // hides the full screen
			loadTrack(0); // start the music playlist
		});
	}
});