<script>
    import { displayName } from '../lib/cards';

    export let state;

    $: pirats = state.players;
    $: crewDone = state.game.completed_crew_1 && state.game.completed_crew_2 && state.game.completed_crew_3;
</script>

<div class="gameover-container">
    <div class="card glass-panel gameover-card">
        <h1>🎉 The Story Has Ended!</h1>
        <p class="section-desc" style="font-size: 1.1rem;">
            The Pi-Rats of {state.game.crew_name || 'the crew'} party til they pass out in a pile.
            Tell one last tale of how your Pi-Rat is remembered!
        </p>

        <div class="sheet-group">
            <h3 class="text-accent">Crew Objectives</h3>
            <div class="objectives-checklist">
                <label class="checkbox-label"><input type="checkbox" checked={state.game.completed_crew_1} disabled> <span>Steal a Ship</span></label>
                <label class="checkbox-label"><input type="checkbox" checked={state.game.completed_crew_2} disabled> <span>Choose a Captain</span></label>
                <label class="checkbox-label"><input type="checkbox" checked={state.game.completed_crew_3} disabled> <span>Commit Piracy</span></label>
            </div>
            {#if crewDone}
                <p class="success-text">A complete pirate legend! ⭐</p>
            {:else}
                <p class="info-text">Some deeds were left undone... a tale for the next crew.</p>
            {/if}
        </div>

        <div class="sheet-group">
            <h3 class="text-accent">The Crew</h3>
            {#each pirats as p}
                <div class="crew-epitaph-row">
                    <span>
                        {#if p.is_ghost}👻{:else if p.is_dead}💀{:else}🐀{/if}
                        <strong>{displayName(p)}</strong> (Rank {p.rank})
                        {#if p.id === state.game.captain_player_id}<span class="text-accent"> ⭐ Captain</span>{/if}
                    </span>
                    <span class="objectives-summary">
                        {p.completed_personal_1 ? '🔫 Gat' : '— no gat'} ·
                        {p.completed_personal_2 ? '📛 Named' : '— nameless'} ·
                        {p.completed_personal_3 ? '⚰️ Story complete' : '⛵ Still sailing'}
                    </span>
                </div>
            {/each}
        </div>

        <p class="info-text" style="margin-top: 2rem;">Want more? Get the full game "The Magical Land of Yeld" at YeldStuff.com!</p>
    </div>
</div>
