@namespace Faraon.Client.Components

<div class="lobby-screen">
    <div class="lobby-container">
        <div class="lobby-header">
            <h1 class="lobby-title">FARAÓN</h1>
            <div class="lobby-subtitle">Tradičná mariášová kartová hra s moderným nábojom</div>
        </div>

        <!-- Výber počtu hráčov -->
        <div style="text-align: center; margin-bottom: 8px; font-weight: 700; font-size: 0.95rem; color: var(--gold);">
            POČET HRÁČOV:
        </div>
        <div class="player-count-picker">
            @for (int count = 2; count <= 4; count++)
            {
                var c = count;
                <button class="btn-pill @(SelectedPlayerCount == c ? "active" : "")" @onclick="() => SetPlayerCount(c)">
                    @c Hráči
                </button>
            }
        </div>

        <!-- Karty konfigurácie jednotlivých hráčov -->
        <div class="players-config-grid">
            @for (int i = 0; i < SelectedPlayerCount; i++)
            {
                var idx = i;
                var p = PlayerConfigs[idx];

                <div class="player-setup-card">
                    <!-- Avatar selektor -->
                    <div style="cursor: pointer; font-size: 2.4rem;" title="Kliknite pre zmenu avatara" @onclick="() => CycleAvatar(idx)">
                        @p.Avatar
                    </div>

                    <!-- Meno hráča -->
                    <input class="player-setup-input" type="text" @bind="p.Name" placeholder="Meno hráča" />

                    <!-- Typ hráča: Človek vs AI -->
                    <select class="player-setup-select" @bind="p.Type">
                        <option value="@PlayerType.Human">👤 Človek (Hráč)</option>
                        <option value="@PlayerType.AI">🤖 AI Počítač</option>
                    </select>

                    <!-- Obtiažnosť AI (ak je AI) -->
                    @if (p.Type == PlayerType.AI)
                    {
                        <select class="player-setup-select" @bind="p.Difficulty">
                            <option value="@AIDifficulty.Easy">🌱 Začiatočník (Ľahký)</option>
                            <option value="@AIDifficulty.Medium">⚔️ Taktik (Stredný)</option>
                            <option value="@AIDifficulty.Hard">🔥 Veľmajster (Ťažký)</option>
                        </select>
                    }
                </div>
            }
        </div>

        <!-- Nastavenia pravidiel -->
        <div style="font-weight: 700; margin-bottom: 8px; color: var(--gold); font-size: 0.95rem;">
            PRAVIDLÁ A NASTAVENIA:
        </div>
        <div class="rules-toggle-grid">
            <label class="rule-check-item">
                <input type="checkbox" @bind="Rules.StackSevens" />
                <span>Kumulácia sediem (+2, +4, +6...)</span>
            </label>
            <label class="rule-check-item">
                <input type="checkbox" @bind="Rules.CounterAceWithAce" />
                <span>Prebíjanie esa esom</span>
            </label>
            <label class="rule-check-item">
                <input type="checkbox" @bind="Rules.RedSevenRevives" />
                <span>Červená sedma oživuje víťaza</span>
            </label>
            <label class="rule-check-item">
                <input type="checkbox" @bind="Rules.FourOfAKindBurns" />
                <span>Spálenie (4 rovnaké karty)</span>
            </label>
            <label class="rule-check-item">
                <input type="checkbox" @bind="Rules.PassAndPlayPrivacyScreen" />
                <span>Pass & Play clona pre ľudí</span>
            </label>
            <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
                <span>Kariet do ruky:</span>
                <select class="player-setup-select" style="width: auto; padding: 2px 8px;" @bind="Rules.InitialCardCount">
                    <option value="4">4 karty</option>
                    <option value="5">5 kariet</option>
                </select>
            </div>
        </div>

        <!-- Výber balíčka kariet (Deck Theme) -->
        <div style="margin-bottom: 24px;">
            <h3 style="font-size: 1.05rem; color: var(--gold); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;">
                🎨 Vizuálny štýl balíčka kariet
            </h3>
            <div class="deck-selector-grid">
                <div class="deck-option-card @(Rules.SelectedDeck == "original" ? "selected-deck" : "")"
                     @onclick='() => Rules.SelectedDeck = "original"'>
                    <div class="deck-preview-img-box">
                        <img src="assets/cards/original/Hearts_Seven.webp" class="deck-preview-thumb" alt="Original Mariáš" />
                        <img src="assets/cards/original/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
                    </div>
                    <div class="deck-info">
                        <div class="deck-name">Tradičný Mariáš (Original)</div>
                        <div class="deck-desc">Autentický dvojhlavý Tell vzor (Piatnik)</div>
                    </div>
                </div>

                <div class="deck-option-card @(Rules.SelectedDeck == "spongebob" ? "selected-deck" : "")"
                     @onclick='() => Rules.SelectedDeck = "spongebob"'>
                    <div class="deck-preview-img-box">
                        <img src="assets/cards/spongebob/Hearts_OverKnave.webp" class="deck-preview-thumb" alt="SpongeBob Cartoon" />
                        <img src="assets/cards/spongebob/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
                    </div>
                    <div class="deck-info">
                        <div class="deck-name">SpongeBob Cartoon 🧽</div>
                        <div class="deck-desc">Bikini Bottom edícia (Krabby Patty & postavičky)</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Štart tlačidlo -->
        <div style="text-align: center;">
            <button class="btn-primary-glow" style="padding: 14px 45px; font-size: 1.25rem;" @onclick="StartGame">
                SPUSTIŤ HRU ⚔️
            </button>
        </div>
    </div>
</div>

@code {
    [Parameter] public EventCallback<(List<Player>, RuleOptions)> OnStartGame { get; set; }

    private int SelectedPlayerCount = 4;
    private RuleOptions Rules = new();

    private readonly string[] Avatars = ["👑", "🧙‍♂️", "🦊", "🦁", "🐯", "🤖", "🐉", "🥷", "👸", "🤠", "🦅", "🐺"];

    private List<Player> PlayerConfigs = new()
    {
        new Player("Ty (Hráč 1)", PlayerType.Human, "👑"),
        new Player("AI Jano", PlayerType.AI, "🦊", AIDifficulty.Medium),
        new Player("AI Zuzka", PlayerType.AI, "👸", AIDifficulty.Hard),
        new Player("AI Mišo", PlayerType.AI, "🤖", AIDifficulty.Easy)
    };

    private void SetPlayerCount(int count)
    {
        SelectedPlayerCount = count;
    }

    private void CycleAvatar(int index)
    {
        var currentAvatar = PlayerConfigs[index].Avatar;
        int nextIdx = (Array.IndexOf(Avatars, currentAvatar) + 1) % Avatars.Length;
        PlayerConfigs[index].Avatar = Avatars[nextIdx];
    }

    private async Task StartGame()
    {
        var activePlayers = PlayerConfigs.Take(SelectedPlayerCount).Select(p =>
            new Player(p.Name, p.Type, p.Avatar, p.Difficulty)
        ).ToList();

        await OnStartGame.InvokeAsync((activePlayers, Rules));
    }
}