@model LotteryWebApp.Models.HomeIndex_ViewModel
@{
    ViewData["Title"] = "Millions - Game Home";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;



@section Styles {
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/Millions/css/all.min.css"/>
    <style>
        html, body.millions-bg { background: #f5f7fb !important; }
        .main-content { background: #f5f7fb !important; }

        /* Mega Jackpot amount — spiral grow & shrink */
        .mega-jackpot-spiral {
            display: inline-block;
            transform-origin: center center;
            animation: megaJackpotSpiral 1.8s ease-in-out infinite;
            will-change: transform;
        }
        @@keyframes megaJackpotSpiral {
            0% {
                transform: scale(0.25) rotate(0deg);
            }
            30% {
                transform: scale(1.15) rotate(360deg);
            }
            65% {
                transform: scale(1.15) rotate(360deg);
            }
            100% {
                transform: scale(0.25) rotate(720deg);
            }
        }
    </style>
}

<div class="main-content h-dvh w-full max-w-[430px] mx-auto bg-[#f5f7fb] relative overflow-hidden font-bricolage" style="background-color:#f5f7fb;">

    <!-- Scrollable content area -->
    @{
        var hasResult = !string.IsNullOrEmpty(Model.lastResult);
        var resultBalls = hasResult ? Model.lastResult.Split(',') : null;
        if (hasResult && resultBalls.Length < 6) {
            var temp = new string[6];
            for (int i = 0; i < 6; i++) temp[i] = i < resultBalls.Length ? resultBalls[i] : "0";
            resultBalls = temp;
        }
    }
    <div class="absolute inset-x-0 top-0 bottom-[64px] overflow-y-auto flex flex-col" style="background-color:#f5f7fb; overscroll-behavior:contain;">

        <!-- Top section with header + cards -->
        <div class="relative">

            <!-- Header gradient background -->
            <div class="header-bg relative h-[160px] rounded-b-[40px] overflow-hidden">
                <!-- Top bar -->
                <div class="flex items-center justify-between px-3 pt-3 relative z-10">
                    <button onclick='location.href=subDomain + "@Url.Action("Index", "Home", new { area = "LotteryV2" })";' class="js-back w-6 h-6 flex items-center justify-center">
                        <img src="/Millions/assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
                    </button>
                    <!-- <button class="flex items-center gap-2 bg-white/15 rounded-full px-3 py-1 text-white text-sm">
                        <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 English</span>
                        <img src="/Millions/assets/icons/chevron-down.svg" alt="" class="w-2 h-2"/>
                    </button> -->
                </div>

                <!-- User profile -->
                <div class="flex items-center gap-4 px-4 -mt-2">
                    <div class="w-[84px] h-[84px] rounded-full overflow-hidden bg-white/20 border-[3px] border-white shrink-0">
                        <img src="/Millions/assets/images/avatar.png" alt="Avatar" class="w-full h-full object-cover"/>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-white text-base font-semibold leading-tight">@(Model?.profile?.users ?? "User")</p>
                        <div class="mt-2 flex items-center justify-between gap-2 rounded-full border border-white/35 bg-white/10 px-3 py-2">
                            <div class="flex items-center gap-1 min-w-0">
                                <span class="text-3xl font-condensed text-gold-gradient leading-none truncate">@Utils.FormatMoney(Model?.userStatus?.bet_coin)</span>
                                <img src="/Millions/assets/icons/coin.png" alt="" class="w-5 h-5 shrink-0"/>
                                <span class="text-white text-sm shrink-0">@Lang.millions_htg</span>
                            </div>
                            <button type="button" onclick="transferWinMoney()" class="shrink-0 rounded-full px-3 py-2 min-h-[40px] w-[4.9rem] font-extrabold text-[#0a1f44] text-[9px] leading-[1.12] text-center active:scale-[0.98] transition-transform" style="background: linear-gradient(90deg, #ffcf0f 0%, #fff1b8 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);">
                                @Lang.millions_redeem_rewards
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Floating info card -->
            <div class="absolute left-5 right-5 -bottom-[52px] bg-white rounded-2xl shadow-md flex items-center h-20 px-4">
                <div class="flex items-center gap-2 flex-1">
                    <img src="/Millions/assets/icons/calendar.png" alt="" class="w-6 h-6"/>
                    <div>
                        <p class="text-xs text-[#797979]">@Lang.next_round</p>
                        <p class="text-xs font-bold text-black" id="draw-date">@Utils.FormatResultDate(Model.nextRoundDate)</p>
                    </div>
                </div>
                <div class="w-px h-12 bg-gray-200"></div>
                <div class="flex items-center gap-2 flex-1 pl-4">
                    <img src="/Millions/assets/icons/money-bag.png" alt="" class="w-6 h-[34px] object-contain"/>
                    <div>
                        <p class="text-xs text-[#797979]">@Lang.jackpot_prize</p>
                        <p class="leading-none ">
                            <span class="text-base font-extrabold text-[#002bff]">@Utils.FormatMoney(Model.bolet ?? "30000000")</span><span class="text-[10.32px] font-extrabold text-black align-top">@Lang.millions_htg</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Result section -->
        @if (hasResult)
        {
            <div class="px-4 mt-20">
                <div class="result-box rounded-[32px] py-3 flex flex-col gap-2">
                    <div class="flex items-center justify-between px-4">
                        <div class="flex items-center gap-2 text-xs">
                            <span class="text-[#797979]">@Lang.results</span>
                            <span class="font-bold text-black">@Utils.FormatResultDate(Model.lastResultDate)</span>
                        </div>
                        <a href="/Millions/Home/Results" class="flex items-center gap-1 text-[10px] font-bold text-black border border-[#c2c2c2] rounded-lg px-2 py-1">
                            View all results
                            <img src="/Millions/assets/icons/chevron-right.svg" alt="" class="w-[5px] h-2" />
                        </a>
                    </div>

                    <!-- Result balls -->
                    <div class="flex items-center justify-between gap-1 px-4">
                        @for (int i = 0; i < 5; i++)
                        {
                            <div class="ball ball-blue">@resultBalls[i]</div>
                        }
                        <div class="relative">
                            <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto pointer-events-none rotate-[15deg] z-0" />
                            <div class="ball ball-mb relative z-10">
                                <span>@resultBalls[5]</span>
                                <span class="absolute -bottom-1 -right-2 bg-[#ee0033] text-white text-[8px] font-bold px-1.5 py-0.5 rounded z-20">MB</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
        else
        {
            <div class="mt-20"></div>
        }

        <!-- Mega Jackpot banner -->
        <div class="px-2 mt-6">
            <a href="@Url.Action("JackpotResults", "Home", new { area = "Millions", termType = Model.termType })" class="mega-banner relative rounded-[20px] overflow-hidden px-4 py-3 flex flex-col">
                <span class="mega-glow" style="left:-79px; top:-101px;"></span>
                <span class="mega-glow" style="right:-78px; top:9px;"></span>
                <span class="mega-glow" style="right:-107px; top:20px;"></span>
                <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
                    <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
                    @Lang.millions_mega_jackpot
                </p>
                <p class="text-white text-xs mt-2">@Lang.millions_estimate_jackpot_prize</p>
                <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
                    <span class="mega-amount mega-jackpot-spiral text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">@Utils.FormatMoney(Model.bolet ?? "30000000")</span>
                    <span class="mega-jackpot-spiral text-gold-gradient text-sm font-bold uppercase ml-1">@Lang.v2_htg</span>
                </p>
                <p class="text-white text-[10px] mt-1 ">@Lang.millions_be_the_next_millionaire</p>

                <!-- Decorative elements -->
                <img src="/Millions/assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
            </a>
        </div>

        <!-- Play now button + decorative balls -->
        <div class="relative shrink-0 mt-4 z-10">
            <img src="/Millions/assets/images/play-decor.png" alt="" class="block w-full h-auto pointer-events-none"/>

            <a onclick="checkTerm('@Constants.Millions_CODE')" class="play-now-outer rounded-full animate-pulse-play" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; padding:11px; cursor:pointer;">
                <div class="play-now-ring rounded-full" style="width:100%;height:100%;padding:4px;">
                    <div class="play-now-btn rounded-full flex flex-col items-center justify-center text-white text-[32px] font-black border-[1.8px] border-white animate-pulse-play" style="width:100%;height:100%;line-height:24px;">
                        <span class="uppercase">@Lang.millions_play</span>
                        <span class="uppercase">@Lang.millions_now</span>
                    </div>
                </div>
            </a>
        </div>

    </div>

    @{
        ViewData["ActiveTab"] = "Home";
    }
    @await Html.PartialAsync("~/Areas/Millions/Views/Shared/_BottomNavbar.cshtml")

</div>

@section Scripts {
    <script src="/Millions/js/all.min.js"></script>
    <script>
        let isCheckingTerm = false;

        function checkTerm(termType) {
            if (isCheckingTerm) return;
            isCheckingTerm = true;

            var token = $('input[name="__RequestVerificationToken"]').val();
            
            $.ajax({
                url: subDomain + '/Millions/Home/TermResult',
                type: 'POST',
                data: {
                    __RequestVerificationToken: token,
                    termType: termType
                },
                success: function (res) {
                    if (res.responseCode === "0") {
                        if (res.listTerm && res.listTerm.length > 0) {
                            var status = res.listTerm[0].status;
                            if (status === "0" || status === "1") {
                                location.href = subDomain + '/Millions/Home/BuyTicket?termType=' + termType;
                                return;
                            } else {
                                alert("@Lang.millions_game_locked");
                            }
                        } else {
                            alert("@Lang.no_results_found");
                        }
                    } else if (res.responseCode === "401") {
                        window.location.href = subDomain + "/Account/Login";
                        return;
                    } else {
                        alert(res.responseMessage || "@Lang.error_happened");
                    }
                    isCheckingTerm = false;
                },
                error: function (err) {
                    alert("@Lang.error_happened");
                    isCheckingTerm = false;
                }
            });
        }

        function startCountdown() {
            const targetHour = 20;
            const now = new Date();
            let target = new Date();
            target.setHours(targetHour, 0, 0, 0);

            if (now >= target) {
                target.setDate(target.getDate() + 1);
            }

            const options = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' };
            const dateText = target.toLocaleDateString('en-US', options);
            const drawDateEl = document.getElementById('draw-date');
            if(drawDateEl) drawDateEl.innerText = dateText;
        }

            // Withdraw money function
            function transferWinMoney() {
                location.href = subDomain + '@Url.Action("TransferWinMoney", "Home", new { area = "Millions" })';
            }

        document.addEventListener('DOMContentLoaded', startCountdown);
    </script>
}