<script>
    import {PUBLIC_API_URL} from "$env/static/public";
    import {toast} from "$lib/toast.svelte.js";
    import {goto} from "$app/navigation";

    let title = $state("");
    let gameContext = $state("");

    const submit = async ()=>{
        const body = {
            title: title,
            game_context: gameContext
        };

        const response = await fetch(`${PUBLIC_API_URL}/game`, {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            credentials: "include",
            body: JSON.stringify(body)
        });

        const data = await response.json();
        if(!response.ok){
            toast(data.error.message, "error");
            if(response.status === 401){
                goto("/");
            }
        }else{
            toast("Game created");
            goto(`/game/${data.id}/character/new`);
        }
    }

    const autofocus = (node)=>{
        node.focus();
    }
</script>

<div class="page">
    <header>
        <a href="/game" class="back">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 5l-7 7 7 7"/>
            </svg>
            My Games
        </a>
    </header>

    <main>
        <div class="heading">
            <h1>New Adventure</h1>
            <p>Set the stage for your story</p>
        </div>

        <form class="standardForm" onsubmit={submit}>
            <label>Title
                <input bind:value={title} type="text" placeholder="e.g. The Lost Kingdom of Arath" required use:autofocus>
            </label>

            <label>Game Information
                <textarea
                    bind:value={gameContext}
                    placeholder="Describe the world, setting, tone, or any context you want the AI to know about your adventure…"
                    rows="6"
                    required
                ></textarea>
            </label>

            <button type="submit">Begin Adventure</button>
        </form>
    </main>
</div>

<style>
    .page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0b0b10;
    }

    header {
        padding: 1.25rem 2rem;
        border-bottom: 1px solid #1e1e28;
    }

    .back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        color: #6b6b7a;
        text-decoration: none;
        transition: color 0.15s;
    }

    .back:hover { color: #a1a1aa; }

    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem 6rem;
        gap: 2rem;
    }

    .heading {
        text-align: center;
        max-width: 480px;
    }

    h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -1.5px;
        color: #e5e5ea;
        margin-bottom: 0.5rem;
    }

    .heading p {
        font-size: 0.95rem;
        color: #6b6b7a;
    }

    .standardForm {
        width: 100%;
        max-width: 780px;
        padding: 3rem;
    }

    textarea {
        resize: vertical;
        min-height: 280px;
        line-height: 1.6;
        font-size: 1rem;
    }

    @media (max-width: 700px) {
        .standardForm { padding: 1.75rem; }
        textarea { min-height: 160px; }
        main { padding: 2rem 1.25rem 4rem; }
    }
</style>
