@using Sandbox
@using Sandbox.UI
@using Casino.RpSlot
@inherits PanelComponent
@namespace Casino.RpSlot

<root>
    <div class="idle-overlay @(IsEngaged ? "hidden" : "")">
        <div class="idle-logo">SLOT MACHINE</div>
        <div class="idle-prompt">PRESS E TO PLAY</div>
    </div>
    @if ( IsEngaged )
    {
        <div class="frame">
            <button class="btn close" @onclick=@Close>X</button>

            <div class="title">SLOT MACHINE</div>

            <div class="tabs">
                <button class="tab @(_currentTab == "play" ? "active" : "")" @onclick=@(() => SetTab("play"))>JEU</button>
                <button class="tab @(_currentTab == "rules" ? "active" : "")" @onclick=@(() => SetTab("rules"))>RÈGLES</button>
                <button class="tab @(_currentTab == "records" ? "active" : "")" @onclick=@(() => SetTab("records"))>RECORDS</button>
            </div>

            @if ( _currentTab == "rules" )
            {
                <div class="rules-panel">
                    <div class="rules-title">3 SYMBOLES IDENTIQUES SUR UNE LIGNE</div>
                    <div class="rule-row consolation"><span class="sym">🍒🍒 + ?</span><span class="mult">@(FormatMult(Machine.TwoCherriesMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">🍒🍒🍒</span><span class="mult">@(FormatMult(Machine.CherryMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">🍋🍋🍋</span><span class="mult">@(FormatMult(Machine.LemonMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">🍊🍊🍊</span><span class="mult">@(FormatMult(Machine.OrangeMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">🔔🔔🔔</span><span class="mult">@(FormatMult(Machine.BellMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">🍫🍫🍫</span><span class="mult">@(FormatMult(Machine.BarMultiplier))× mise</span></div>
                    <div class="rule-row"><span class="sym">7 7 7</span><span class="mult">@(FormatMult(Machine.SevenMultiplier))× mise</span></div>
                    <div class="rule-row jackpot"><span class="sym">💎💎💎</span><span class="mult">@(FormatMult(Machine.JackpotMultiplier))× mise</span></div>
                    <div class="rules-footer">5 lignes : 3 horizontales + 2 diagonales</div>
                </div>
            }
            else if ( _currentTab == "records" )
            {
                <div class="records-panel">
                    <div class="records-title">RECORDS DE LA SESSION</div>
                    <div class="record-row">
                        <span>Solde actuel</span>
                        <span class="record-value">@(GetPlayerBalance()) €</span>
                    </div>
                    <div class="record-row">
                        <span>Plus gros gain</span>
                        <span class="record-value">@(_maxGainSession) €</span>
                    </div>
                </div>
            }
            else
            {
                <div class="info-compact">
                    <div class="info-item">SOLDE <span class="info-value">@(GetPlayerBalance()) €</span></div>
                    <div class="info-item">MISE <span class="info-value">@(Machine.CurrentBet) €</span></div>
                    <div class="info-item">GAIN <span class="info-value">@(Machine.LastPayout) €</span></div>
                </div>

                <div class="grid">
                    @for ( int col = 0; col < 3; col++ )
                    {
                        <div class="reel @(_reelSpinning[col] ? "spinning" : "")">
                            @for ( int row = 0; row < 3; row++ )
                            {
                                int idx = col * 3 + row;
                                <div class="cell @GetWinningColor( idx ) @GetSymbolClass( idx )">
                                    @GetDisplayedSymbol( idx )
                                </div>
                            }
                        </div>
                    }
                </div>

                <div class="result-banner @GetResultClass()">
                    @if ( _insufficientBalanceTimer > 0f )
                    {
                        <span class="result-text lose">SOLDE INSUFFISANT</span>
                    }
                    else if ( Machine.State == SlotState.Idle && Machine.ReelResults.Count == 9 )
                    {
                        @if ( Machine.LastSpinWasJackpot )
                        {
                            <span class="result-text jackpot">JACKPOT !  +@(Machine.LastPayout)€</span>
                        }
                        else if ( Machine.LastPayout > 0 )
                        {
                            <span class="result-text win">+@(Machine.LastPayout)€</span>
                        }
                        else
                        {
                            <span class="result-text lose">PERDU</span>
                        }
                    }
                </div>

                <div class="controls">
                    <button class="btn bet-big" @onclick=@DecreaseBet100>-100</button>
                    <button class="btn bet-small" @onclick=@DecreaseBet>-10</button>
                    <button class="btn spin" @onclick=@Spin>@(IsBusy ? "..." : "SPIN")</button>
                    <button class="btn bet-small" @onclick=@IncreaseBet>+10</button>
                    <button class="btn bet-big" @onclick=@IncreaseBet100>+100</button>
                </div>
            }
        </div>

    }
</root>