<script>
    import { extraMenuLinks } from '../lib/menu';
    import { theme, toggleTheme } from '../lib/theme';

    let open = false;

    $: themeLink = $theme === 'dark'
        ? { label: '☀️ Light Mode', action: toggleTheme, keepOpen: true, title: 'Switch to the light theme' }
        : { label: '🌙 Dark Mode', action: toggleTheme, keepOpen: true, title: 'Switch to the dark theme' };

    $: baseLinks = [
        { label: '📖 Rules', href: '/rules', external: true, title: 'Open the rulebook in a new tab' },
        themeLink,
    ];

    $: links = [...$extraMenuLinks, ...baseLinks];

    function handleWindowClick(event) {
        if (open && !event.target.closest('.corner-menu')) {
            open = false;
        }
    }
</script>

<svelte:window on:click={handleWindowClick} />

<div class="corner-menu">
    <button class="menu-toggle" class:open on:click={() => (open = !open)} title="Menu">
        ☰ Menu
    </button>
    {#if open}
        <nav class="menu-dropdown">
            {#each links as link}
                {#if link.action}
                    <button
                        class="menu-item"
                        title={link.title}
                        on:click={() => { if (!link.keepOpen) open = false; link.action(); }}
                    >{link.label}</button>
                {:else}
                    <a
                        class="menu-item"
                        href={link.href}
                        target={link.external ? '_blank' : undefined}
                        rel={link.external ? 'noopener' : undefined}
                        title={link.title}
                        on:click={() => (open = false)}
                    >{link.label}</a>
                {/if}
            {/each}
        </nav>
    {/if}
</div>

<style>
    .corner-menu {
        position: fixed;
        top: 12px;
        right: 16px;
        z-index: 1001;
        text-align: right;
    }
    .menu-toggle {
        padding: 6px 14px;
        border-radius: 16px;
        background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
        border: 1px solid var(--edge-accent);
        color: var(--accent);
        font-size: 0.85rem;
        font-weight: 700;
        font-family: var(--font-heading);
        cursor: pointer;
    }
    .menu-toggle:hover, .menu-toggle.open {
        background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep));
    }
    .menu-dropdown {
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
        border: 1px solid var(--edge-accent);
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .menu-item {
        padding: 8px 16px;
        color: var(--accent);
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        font-family: var(--font-heading);
        text-align: right;
        white-space: nowrap;
        background: none;
        border: none;
        cursor: pointer;
    }
    .menu-item:hover {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .menu-item + .menu-item {
        border-top: 1px solid var(--edge-soft);
    }
</style>
