<script>
    import favicon from "$lib/assets/favicon.png";
    import { PUBLIC_API_URL } from "$env/static/public";
    import { goto } from "$app/navigation";

    let { game, character, tokensRemaining, open = false, onClose } = $props();

    const logout = async () => {
        await fetch(`${PUBLIC_API_URL}/user/logout`, { credentials: "include" });
        goto("/");
    };
</script>

<aside class="sidebar" class:open>
    <div class="sidebar-header">
        <a href="/dashboard" class="brand">
            <img src={favicon} alt="ChatRPG" width="26" height="26" />
            <span>ChatRPG</span>
        </a>
        <button class="close-btn" onclick={onClose} aria-label="Close menu">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <div class="info-group">
        <span class="info-label">Adventure</span>
        <p class="info-value">{game.title}</p>
    </div>

    <div class="info-group">
        <span class="info-label">Character</span>
        <p class="info-value character">{character.name}</p>
    </div>

    <div class="info-group">
        <span class="info-label">Tokens remaining</span>
        <div class="token-display" class:low={tokensRemaining < 500}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 6v12M9 9h4.5a2.5 2.5 0 0 1 0 5H9"/>
            </svg>
            {tokensRemaining.toLocaleString()}
            {#if tokensRemaining < 500}
                <span class="low-warning">— running low</span>
            {/if}
        </div>
    </div>

    <div class="sidebar-sep"></div>

    <nav class="sidebar-nav">
        <a href="/game" class="nav-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
            </svg>
            My Games
        </a>
        <a href="/tokens" class="nav-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 6v12M9 9h4.5a2.5 2.5 0 0 1 0 5H9"/>
            </svg>
            Add Tokens
        </a>
    </nav>

    <button class="logout-btn" onclick={logout}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
        Log Out
    </button>
</aside>

<style>
    .sidebar {
        width: 220px;
        flex-shrink: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0d0d16;
        border-right: 1px solid #1a1a26;
        padding: 1.25rem 1rem;
        gap: 0;
        overflow-y: auto;
    }

    /* ── Header ── */
    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        color: #e5e5ea;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: -0.3px;
    }

    .close-btn {
        display: none;
        background: none;
        border: none;
        color: #6b6b7a;
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
        transition: color 0.15s;
    }

    .close-btn:hover { color: #e5e5ea; }

    /* ── Info groups ── */
    .info-group {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid #14141f;
    }

    .info-label {
        display: block;
        font-size: 0.63rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #44445a;
        margin-bottom: 0.35rem;
    }

    .info-value {
        font-size: 0.9rem;
        font-weight: 600;
        color: #e5e5ea;
        line-height: 1.4;
        word-break: break-word;
    }

    .info-value.character {
        color: #c084fc;
    }

    .token-display {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #6b6b7a;
        flex-wrap: wrap;
    }

    .token-display.low {
        color: #e05555;
    }

    .low-warning {
        font-size: 0.75rem;
        font-weight: 500;
        color: #e05555;
        opacity: 0.8;
    }

    /* ── Separator ── */
    .sidebar-sep {
        flex: 1;
    }

    /* ── Nav ── */
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 0.5rem;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0.55rem 0.6rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        color: #6b6b7a;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .nav-item:hover {
        background: #14141f;
        color: #e5e5ea;
    }

    /* ── Logout ── */
    .logout-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0.55rem 0.6rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        color: #6b6b7a;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        width: 100%;
        transition: background 0.15s, color 0.15s;
    }

    .logout-btn:hover {
        background: #14141f;
        color: #e05555;
    }

    /* ── Mobile ── */
    @media (max-width: 768px) {
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 200;
            width: 260px;
            transform: translateX(-100%);
            transition: transform 0.25s ease;
            box-shadow: none;
        }

        .sidebar.open {
            transform: translateX(0);
            box-shadow: 4px 0 40px rgba(0, 0, 0, 0.5);
        }

        .close-btn { display: flex; }
    }
</style>
