@using SicboSub.Web.Language;
@{
    Layout = "_GameLayout";
    var userInfo = ViewData["UserInfo"] as SicboSub.Web.Models.TokenLoginData;
    var msisdn = ViewData["Msisdn"] as string;
    var winCoin = ViewData["WinCoin"] ?? 0;
    var betCoin = ViewData["BetCoin"] ?? 0;
    // var totalValueToday = ViewData["TotalValueToday"] ?? 0;
    // var totalValueMonth = ViewData["TotalValueMonth"] ?? 0;

    // Determine avatar URL - use default if null/empty
    var avatarUrl = !string.IsNullOrEmpty(userInfo?.picture) ? userInfo.picture : Url.Content("~/img/avatar.png");
    
    // Package Name or "Free"
    var currentPackage = userInfo?.regPkg?.ProductName ?? "";
}

@section Styles {
    <link rel="stylesheet" href="~/css/sicbo-account.css" />
}

<div class="home">
    <!-- Background Image -->
    <img class="image" src="~/img/image-2.png" />
    
    <!-- Reuse Game Menu -->
    <partial name="_GameMenu" />

    <!-- Account Content Panel -->
    <div class="account-panel">
        <!-- Left Side - Avatar -->
        <div class="account-avatar-section">
            <div class="avatar-frame">
                <img class="avatar-image" src="@avatarUrl" alt="Avatar" onerror="this.src='@Url.Content("~/img/avatar.png")'" />
            </div>
            <div class="avatar-name">@msisdn</div>
        </div>

        <!-- Right Side - Account Info -->
        <div class="account-info-section">
            <!-- Phone Number -->
            <div class="info-row">
                <span class="info-label">@Language.PhoneNumber</span>
                <span class="info-value">@msisdn</span>
            </div>

            <!-- Total Play Coins (My Play) -->
            <div class="info-row with-icon">
                <div class="info-content">
                    <span class="info-label">@Language.TotalCoins</span>
                    <span class="info-value coins">@String.Format("{0:n0}", betCoin)</span>
                </div>
                <img class="settings-icon" src="~/img/042-settings.png" alt="Settings" style="cursor:pointer;" onclick="alert('Settings feature coming soon!')" />
            </div>

            <!-- My Coins (Main Balance) -->
            <div class="info-row">
                <span class="info-label">@Language.MyCoins</span>
                <span class="info-value coins">@String.Format("{0:n0}", winCoin)</span>
            </div>

            <!-- Daily Package -->
            <div class="info-row">
                <span class="info-label">@Language.DailyPackage</span>
                <span class="info-value text-uppercase">@(string.IsNullOrEmpty(currentPackage) ? Language.Unsubscribe : currentPackage)</span>
            </div>
        </div>
    </div>
</div>