@namespace Faraon.Client.Components
@using Faraon.Core.AI

<div class="lobby-screen">
    <div class="lobby-container">
        <div class="lobby-header">
            <div class="lobby-logo-wrapper">
                <img src="assets/logo/logo_2_modern.jpg" class="lobby-logo-img" alt="FARAÓN Logo" />
            </div>
            <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>

                    <!-- Výber AI osobnosti a obtiažnosti (ak je AI) -->
                    @if (p.Type == PlayerType.AI)
                    {
                        <select class="player-setup-select" style="font-weight: 700; color: var(--gold);" value="@(p.PersonalityId ?? "fox")" @onchange="(e) => SelectPersonality(idx, e.Value?.ToString())">
                            @foreach (var pers in AIPersonality.All)
                            {
                                <option value="@pers.Id">@pers.BaseAvatar @pers.Name (@GetDiffLabel(pers.Difficulty))</option>
                            }
                        </select>
                    }
                </div>
            }
        </div>

        <!-- Nastavenia pravidiel (Collapsible - by default schované) -->
        <div style="margin-bottom: 18px;">
            <div class="lobby-accordion-header @(ShowRules ? "open" : "")" @onclick="() => ShowRules = !ShowRules">
                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                    <span style="font-size: 1.15rem;">⚙️</span>
                    <span style="font-weight: 800; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.5px;">
                        PRAVIDLÁ A NASTAVENIA HRY
                    </span>
                    @if (!ShowRules)
                    {
                        <span class="badge-rules-summary">
                            @(Rules.InitialCardCount) kariet • Sedmy (+3) • @(Rules.SpeedLevel)x Rýchlosť
                        </span>
                    }
                </div>
                <div class="accordion-toggle-btn">
                    <span>@(ShowRules ? "Zbaliť" : "Rozbaliť")</span>
                    <span class="accordion-arrow">@(ShowRules ? "▲" : "▼")</span>
                </div>
            </div>

            @if (ShowRules)
            {
                <div class="rules-toggle-grid" style="margin-top: 10px; animation: fadeIn 0.25s ease;">
                    <label class="rule-check-item">
                        <input type="checkbox" @bind="Rules.StackSevens" />
                        <span>Kumulácia sediem (+3, +6, +9...)</span>
                    </label>
                    <label class="rule-check-item">
                        <input type="checkbox" @bind="Rules.CounterAceWithAce" />
                        <span>Prebíjanie esa esom</span>
                    </label>
                    <div style="grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 23, 68, 0.08); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 23, 68, 0.25); gap: 12px;">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="font-size: 1.1rem;">❤️</span>
                            <div>
                                <div style="font-weight: 700; color: #ff5252;">Červená sedma (Oživenie / Resurrect)</div>
                                <div style="font-size: 0.76rem; color: #94a3b8;">Spôsob vrátenia skončeného hráča späť do hry</div>
                            </div>
                        </div>
                        <select class="player-setup-select" style="width: auto; min-width: 240px; padding: 4px 10px; font-weight: 600;" @bind="Rules.RedSevenMode">
                            <option value="@RedSevenMode.AnyCardOneRound">⚡ Voľná na čokoľvek (do 1 kola)</option>
                            <option value="@RedSevenMode.ColorOrSevenThreeRounds">🎴 Klasická na Srdce/7 (do 3 kôl)</option>
                            <option value="@RedSevenMode.Disabled">❌ Vypnuté (Bez oživenia)</option>
                        </select>
                    </div>
                    <div style="grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; background: rgba(45, 106, 79, 0.12); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(45, 106, 79, 0.35); gap: 12px;">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="font-size: 1.1rem;">🍃</span>
                            <div>
                                <div style="font-weight: 700; color: #52b788;">Zelený dolník (Rušenie sediem)</div>
                                <div style="font-size: 0.76rem; color: #94a3b8;">Zelený dolník zruší trest zo sedmy & pravidlá vykladania</div>
                            </div>
                        </div>
                        <select class="player-setup-select" style="width: auto; min-width: 240px; padding: 4px 10px; font-weight: 600;" @bind="Rules.GreenUnderKnaveMode">
                            <option value="@GreenUnderKnaveMode.OnlyOnSevenOrUnderKnave">🌿 Ruší sedmy (Zeleň / Dolník)</option>
                            <option value="@GreenUnderKnaveMode.UniversalWildcard">✨ Voľný na čokoľvek + čokoľvek naňho</option>
                            <option value="@GreenUnderKnaveMode.Disabled">❌ Vypnuté (Bez rušenia sediem)</option>
                        </select>
                    </div>
                    <label class="rule-check-item">
                        <input type="checkbox" @bind="Rules.FourOfAKindBurns" />
                        <span>Spálenie (4 rovnaké karty)</span>
                    </label>
                    <label class="rule-check-item" style="grid-column: 1 / -1; background: rgba(245, 176, 65, 0.12); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(245, 176, 65, 0.3);">
                        <input type="checkbox" @bind="Rules.OlympicMode" />
                        <span style="font-weight: 800; color: var(--gold);">🏅 Olympijský Faraón (Turnajový režim)</span>
                        <span style="font-size: 0.8rem; color: #94a3b8; margin-left: 6px;">— porazený má v ďalšom kole o 1 kartu menej</span>
                    </label>
                    <label class="rule-check-item" style="grid-column: 1 / -1; background: rgba(56, 189, 248, 0.12); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(56, 189, 248, 0.35);">
                        <input type="checkbox" @bind="Rules.AIHumanMode" />
                        <span style="font-weight: 800; color: #38bdf8;">🤖💭 AI Human Mode (Premýšľacie bubliny & hlášky)</span>
                        <span style="font-size: 0.8rem; color: #94a3b8; margin-left: 6px;">— boti hovoria svoje myšlienky, blufujú a reagujú na hru</span>
                    </label>
                    <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
                        <span>Počiatočný počet kariet:</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>
                            <option value="6">6 kariet</option>
                        </select>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
                        <span>Rýchlosť hry:</span>
                        <select class="player-setup-select" style="width: auto; padding: 2px 8px;" @bind="Rules.SpeedLevel">
                            <option value="-5">🐢 -5 (0.2x Zen / Extra pomalá)</option>
                            <option value="-4">🐢 -4 (0.35x Veľmi pomalá)</option>
                            <option value="-3">🚶 -3 (0.5x Pomalá)</option>
                            <option value="-2">🚶 -2 (0.65x Pokojná)</option>
                            <option value="-1">🍃 -1 (0.8x Zvoľnená)</option>
                            <option value="0">⚡ 0 (1x Normálna / Vyvážená)</option>
                            <option value="1">🔥 +1 (1.25x Svižná)</option>
                            <option value="2">🔥 +2 (1.5x Rýchla)</option>
                            <option value="3">🚀 +3 (2x Veľmi rýchla)</option>
                            <option value="4">🚀 +4 (2.75x Turbo)</option>
                            <option value="5">⚡ +5 (4x Blesková)</option>
                        </select>
                    </div>
                </div>
            }
        </div>

        <!-- Výber balíčka kariet (Collapsible - by default iba zvolený deck) -->
        <div style="margin-bottom: 24px;">
            <div class="lobby-accordion-header @(ShowDeckSelector ? "open" : "")" @onclick="() => ShowDeckSelector = !ShowDeckSelector">
                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                    <span style="font-size: 1.15rem;">🎨</span>
                    <span style="font-weight: 800; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.5px;">
                        VIZUÁLNY ŠTÝL BALÍČKA
                    </span>
                </div>
                <div class="accordion-toggle-btn">
                    <span>@(ShowDeckSelector ? "Zavrieť galériu" : "Zmeniť balíček")</span>
                    <span class="accordion-arrow">@(ShowDeckSelector ? "▲" : "▼")</span>
                </div>
            </div>

            <!-- Aktuálne zvolený balíček (Default náhľad po kliknutí rozbalí výber) -->
            <div class="selected-deck-summary-card" @onclick="() => ShowDeckSelector = !ShowDeckSelector" title="Klikni pre výber a zmenu balíčka kariet">
                <div class="deck-preview-img-box">
                    <img src="@CurrentDeck.Thumb" class="deck-preview-thumb" alt="@CurrentDeck.Name" />
                    <img src="@CurrentDeck.Back" class="deck-preview-thumb-back" alt="Rub" />
                </div>
                <div class="deck-info" style="flex: 1;">
                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                        <span class="deck-name" style="color: var(--gold); font-size: 0.98rem;">@CurrentDeck.Name</span>
                        <span class="badge-active-deck">Vybraný</span>
                    </div>
                    <div class="deck-desc">@CurrentDeck.Desc</div>
                </div>
                <div class="btn-deck-change-action">
                    @(ShowDeckSelector ? "▲ Skryť" : "🎨 Zmeniť štýl ▾")
                </div>
            </div>

            @if (ShowDeckSelector)
            {
                <div class="deck-selector-grid" style="margin-top: 12px; animation: fadeIn 0.25s ease;">
                    @foreach (var d in AvailableDecks)
                    {
                        <div class="deck-option-card @(Rules.SelectedDeck == d.Id ? "selected-deck" : "")"
                             @onclick="() => SelectDeck(d.Id)">
                            <div class="deck-preview-img-box">
                                <img src="@d.Thumb" class="deck-preview-thumb" alt="@d.Name" />
                                <img src="@d.Back" class="deck-preview-thumb-back" alt="Rub" />
                            </div>
                            <div class="deck-info">
                                <div class="deck-name">@d.Name</div>
                                <div class="deck-desc">@d.Desc</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 bool ShowRules = false;
    private bool ShowDeckSelector = false;

    private record DeckInfo(string Id, string Name, string Desc, string Thumb, string Back);

    private readonly DeckInfo[] AvailableDecks = new[]
    {
        new DeckInfo("original", "Tradičný Mariáš 🎴", "Autentický dvojhlavý Tell vzor (Piatnik)", "assets/cards/original/Hearts_Seven.webp", "assets/cards/original/Card_Back.webp"),
        new DeckInfo("janosik", "Zbojníci & Legendy 🪓", "Jánošík, Uhorčík, výšivky a tatranský folklór", "assets/cards/janosik/Hearts_King.webp", "assets/cards/janosik/Card_Back.webp"),
        new DeckInfo("spongebob", "SpongeBob Cartoon 🧽", "Bikini Bottom edícia (postavičky a veľké symboly)", "assets/cards/spongebob/Hearts_OverKnave.webp", "assets/cards/spongebob/Card_Back.webp"),
        new DeckInfo("cyberpunk", "Cyberpunk 2077 ⚡", "Neónový holografický štýl a kybernetickí hrdinovia", "assets/cards/cyberpunk/Leaves_King.webp", "assets/cards/cyberpunk/Card_Back.webp"),
        new DeckInfo("fantasy", "Fantasy RPG 🐉", "Dračí lordi, mágovia, runy a rytieri", "assets/cards/fantasy/Acorns_OverKnave.webp", "assets/cards/fantasy/Card_Back.webp"),
        new DeckInfo("egypt", "Staroveký Egypt ⚔️", "Zlatý papyrus, Tutanchamón, Anubis a pyramídy", "assets/cards/egypt/Bells_King.webp", "assets/cards/egypt/Card_Back.webp"),
        new DeckInfo("pets", "Kráľovské Zvieratká 🐱", "Mačičky a psíkovia v kráľovských korunkách", "assets/cards/pets/Hearts_OverKnave.webp", "assets/cards/pets/Card_Back.webp"),
        new DeckInfo("pixel", "Retro 8-Bit Pixel 🕹️", "Nostalgický arkádový štýl klasických hier", "assets/cards/pixel/Leaves_Seven.webp", "assets/cards/pixel/Card_Back.webp")
    };

    private DeckInfo CurrentDeck => AvailableDecks.FirstOrDefault(d => d.Id == Rules.SelectedDeck) ?? AvailableDecks[0];

    private void SelectDeck(string deckId)
    {
        Rules.SelectedDeck = deckId;
    }

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

    private List<Player> PlayerConfigs = new()
    {
        new Player("Ty (Hráč 1)", PlayerType.Human, "👑"),
        new Player(AIPersonality.Fox.Name, PlayerType.AI, AIPersonality.Fox.BaseAvatar, AIPersonality.Fox.Difficulty, AIPersonality.Fox.Id),
        new Player(AIPersonality.Queen.Name, PlayerType.AI, AIPersonality.Queen.BaseAvatar, AIPersonality.Queen.Difficulty, AIPersonality.Queen.Id),
        new Player(AIPersonality.Robot.Name, PlayerType.AI, AIPersonality.Robot.BaseAvatar, AIPersonality.Robot.Difficulty, AIPersonality.Robot.Id)
    };

    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 void SelectPersonality(int index, string? personalityId)
    {
        if (string.IsNullOrEmpty(personalityId)) return;
        var pers = AIPersonality.GetById(personalityId);
        PlayerConfigs[index].PersonalityId = pers.Id;
        PlayerConfigs[index].Name = pers.Name;
        PlayerConfigs[index].Avatar = pers.BaseAvatar;
        PlayerConfigs[index].Difficulty = pers.Difficulty;
    }

    private string GetDiffLabel(AIDifficulty diff) => diff switch
    {
        AIDifficulty.Easy => "Ľahký",
        AIDifficulty.Hard => "Veľmajster",
        _ => "Taktik"
    };

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

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