<!-- frontend/src/App.svelte -->
<script>
    import { Quit } from '../wailsjs/runtime/runtime';

    let view = 'menu'; // 'menu' | 'offline'

    function goOffline(e) {
        e.preventDefault();
        view = 'offline';
    }
    function backToMenu(e) {
        e?.preventDefault();
        view = 'menu';
    }
    function exitApp(e) {
        e.preventDefault();
        Quit();
    }

    function onKeydown(e) {
        if (e.key === 'Escape' && view !== 'menu') view = 'menu';
    }
</script>

<svelte:head>
    <link href="//sjm.cdn.prutzel.com/fonts/crn/font.css" rel="stylesheet" type="text/css" />
</svelte:head>

<svelte:window on:keydown={onKeydown} />

{#if view === 'menu'}
    <main
            class="container"
            style="min-height: 100vh; display: flex; align-items: center; justify-content: center;"
    >
        <section class="row" style="width: 100%;">
            <div class="column" style="text-align: center;">
                <h3>World.SEPPJM Client</h3>
                <p>Join the online world or play offline</p>

                <div style="margin: 1rem 0;">
                    <a class="button" href="https://world.seppjm.com">Online</a>
                    <a class="button" href="#" on:click={goOffline}>Offline</a>
                    <a class="button" href="https://seppjm.com">My Website</a>
                    <a class="button" href="#" on:click={exitApp}>Exit (Alt+F4)</a>
                </div>
            </div>
        </section>
    </main>

{:else if view === 'offline'}
    <main
            class="container"
            style="min-height: 100vh; display: flex; align-items: center; justify-content: center;"
    >
        <section class="row" style="width: 100%;">
            <div class="column" style="text-align: center;">
                <h3>Offline Mode not available</h3>
                <p>Offline mode not implemented yet. Press <kbd>Esc</kbd> or use the button in the top-right to return.</p>

                <!-- TODO: offline 3js scene here -->

            </div>
        </section>
    </main>
{/if}

{#if view !== 'menu'}
    <button class="overlay-back" on:click={backToMenu} aria-label="Return to menu" title="Return">
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="label">Return</span>
    </button>
{/if}

<style>
    .overlay-back {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 9999px;
        border: 1px solid rgba(255,255,255,0.2);
        background: rgba(0,0,0,0.45);
        color: #fff;
        cursor: pointer;
        opacity: 0.65;
        transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
        box-shadow: 0 2px 10px rgba(0,0,0,0.25);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .overlay-back:hover,
    .overlay-back:focus-visible {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.3);
        outline: none;
    }
    .overlay-back .label {
        font-size: 0.9rem;
        line-height: 1;
    }
</style>
