{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
    <h1>Hello, hello, hello...</h1>
    <p>Yeah, it's early.</p>
    <div class="room-join-box">
        <input type="text" id="username-input" class="room-input" placeholder="Your name">
    </div>

    <div class="room-join-box">
        <input type="text" id="room-code-input" class="room-input" placeholder="Enter Room Code" maxlength="10">
        <button class="room-button" id="join-button">Join</button>
    </div>

    <div class="room-join-box">
        <button class="room-button" id="create-button">Create New Room</button>
    </div>


    <script>
function getUsername() {
    const username = document.getElementById('username-input').value.trim();
    if (!username) {
        alert("Please enter your name.");
        throw new Error("Username required");
    }
    localStorage.setItem('username', username);
    return username;
}

document.getElementById('join-button').addEventListener('click', () => {
    try {
        getUsername();
        const code = document.getElementById('room-code-input').value.trim();
        if (code) {
            window.location.href = `/room/${code}`;
        } else {
            alert("Enter a room code.");
        }
    } catch (_) {}
});

document.getElementById('create-button').addEventListener('click', async () => {
    try {
        getUsername();
        const res = await fetch('/api/room', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({})
        });
        const data = await res.json();
        if (data.code) {
            window.location.href = `/room/${data.code}`;
        } else {
            alert("Failed to create room.");
        }
    } catch (_) {}
});
</script>


    </script>
{% endblock %}