<script>
    import { push } from 'svelte-spa-router';
    import { apiRequest } from '../lib/api';
    export let params = {};
    let gameId = params.id;
    let playerName = '';
    let error = '';
    let joining = false;

    // We can extract ?creator=true from $querystring if needed,
    // though the backend determines creator based on if they are the first player.
    // For UI purposes, we could show "You are the creator" if we want.

    async function joinGame() {
        if (!playerName.trim()) return;
        joining = true;
        error = '';
        try {
            const data = await apiRequest(`/game/${gameId}/join`, 'POST', { name: playerName });
            push(`/game/${gameId}/player/${data.id}`);
        } catch (err) {
            error = err.message;
            joining = false;
        }
    }
</script>

<div class="welcome-container">
    <div class="header">
        <h1>Join Crew</h1>
    </div>

    <div class="card creation-card">
        <h2>Enter your name</h2>
        <p class="info-text" style="margin-bottom: 1rem;">
            This is <strong>your</strong> name as a player, not your Pi-Rat's. Your Pi-Rat will be known
            by their smell (e.g. "Recruit Gunpowder") until they earn a proper Name in play.
        </p>
        <form on:submit|preventDefault={joinGame}>
            <div class="form-group">
                <label for="playerName">Your Name</label>
                <input 
                    type="text" 
                    id="playerName" 
                    bind:value={playerName} 
                    required 
                    class="form-control input-large"
                    autocomplete="off"
                    autofocus
                />
            </div>
            
            {#if error}
                <div class="alert alert-danger">{error}</div>
            {/if}

            <button type="submit" class="btn btn-primary btn-large btn-block mt-4" disabled={joining}>
                {joining ? 'Joining...' : 'Join Game'}
            </button>
        </form>
    </div>
</div>
