<script>
    import { onMount } from 'svelte';
    import { apiRequest } from '../lib/api';

    export let params = {};
    let gameId = params.id;
    let adminKey = '';

    let data = null;
    let error = '';

    onMount(() => {
        // Try to load admin_key from local storage
        adminKey = localStorage.getItem(`admin_key_${gameId}`) || '';
        if (adminKey) {
            loadAdminData();
        }
    });

    async function loadAdminData() {
        if (!adminKey) return;
        try {
            data = await apiRequest(`/game/${gameId}/admin?key=${encodeURIComponent(adminKey)}`);
            error = '';
        } catch (err) {
            error = err.message;
            data = null;
        }
    }
</script>

<div class="max-w-4xl mx-auto p-4 space-y-6">
    <h1 class="text-3xl font-bold text-gold">Admin Panel</h1>

    {#if !data}
        <div class="card p-6">
            <h2 class="text-xl mb-4">Enter Admin Key</h2>
            <form on:submit|preventDefault={loadAdminData} class="flex gap-4">
                <input type="text" bind:value={adminKey} class="form-control flex-grow" placeholder="Admin Key" required/>
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
            {#if error}
                <div class="alert alert-danger mt-4">{error}</div>
            {/if}
        </div>
    {:else}
        <div class="card p-6">
            <h2 class="text-xl font-bold text-silver mb-4">Game: {data.game.crew_name}</h2>
            <p><strong>Phase:</strong> {data.game.phase}</p>
            <p><strong>Admin Key:</strong> <span class="bg-dark-900 px-2 py-1 font-mono text-sm">{data.game.admin_key}</span></p>

            <h3 class="text-xl font-bold text-silver mt-8 mb-4">Players</h3>
            <table class="w-full text-left bg-dark-900 rounded border border-gray-700">
                <thead>
                    <tr class="border-b border-gray-700">
                        <th class="p-3">Name</th>
                        <th class="p-3">Role</th>
                        <th class="p-3">Status</th>
                        <th class="p-3">Rank</th>
                    </tr>
                </thead>
                <tbody>
                    {#each data.players as p}
                        <tr class="border-b border-gray-800">
                            <td class="p-3">{p.name}</td>
                            <td class="p-3">
                                {#if p.role === 'deep'} 🌊 Deep
                                {:else if p.role === 'pirat'} 🐀 Pi-Rat
                                {:else} None
                                {/if}
                            </td>
                            <td class="p-3">
                                {#if p.is_ghost} 👻 Ghost
                                {:else if p.is_dead} 💀 Dead
                                {:else} Alive
                                {/if}
                            </td>
                            <td class="p-3">{p.rank}</td>
                        </tr>
                    {/each}
                </tbody>
            </table>
            
            <div class="mt-8">
                <a href="/#/game/{gameId}/join" class="btn btn-secondary">Back to Game Join Page</a>
            </div>
        </div>
    {/if}
</div>
