@model LotteryWebApp.Models.HomeIndex_ViewModel
@using System
@using System.Globalization
@using System.Collections.Generic
@using LotteryWebApp.Common
@using LotteryWebApp.Languages
@using LotteryWebApp.Service
@{
    ViewData["Title"] = "Millions - Jackpot Detail";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
    var drawId = (ViewBag.DrawId as string) ?? "";
    var winners = ViewBag.Winners as List<JackpotWinnerItem> ?? new List<JackpotWinnerItem>();
    var firstWinner = winners.Count > 0 ? winners[0] : null;

    var mainBalls = new string[5];
    var mbBall = "0";
    var resultStr = firstWinner != null ? firstWinner.result : "";
    var balls = !string.IsNullOrEmpty(resultStr) ? resultStr.Split(',') : new string[0];
    for (int i = 0; i < 5; i++)
    {
        mainBalls[i] = i < balls.Length ? balls[i].Trim() : "0";
    }
    if (balls.Length >= 6) mbBall = balls[5].Trim();

    string drawDateFmt = "";
    string drawDateLong = "";
    string drawTime = "";
    DateTime drawDt;
    string rawDate = firstWinner != null ? firstWinner.randomDate : "";
    string[] tryFormats = { "M/d/yyyy h:mm:ss tt", "MM/dd/yyyy h:mm:ss tt", "dd/MM/yyyy HH:mm:ss", "yyyy-MM-dd HH:mm:ss" };
    if (!string.IsNullOrEmpty(rawDate)
        && (DateTime.TryParseExact(rawDate, tryFormats, CultureInfo.InvariantCulture, DateTimeStyles.None, out drawDt)
            || DateTime.TryParse(rawDate, CultureInfo.InvariantCulture, DateTimeStyles.None, out drawDt)))
    {
        drawDateFmt = drawDt.ToString("MMM dd, yyyy", new CultureInfo("en-US"));
        drawDateLong = drawDt.ToString("dddd, MMM dd, yyyy", new CultureInfo("en-US"));
        drawTime = drawDt.ToString("HH:mm");
    }

    long jackpotPrizeTotal = 0;
    foreach (var w in winners)
    {
        long m;
        if (long.TryParse(w.moneyWin, out m)) jackpotPrizeTotal += m;
    }
    var jackpotPrize = jackpotPrizeTotal.ToString();
    var winnersCount = winners.Count;
}

@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"/>
    <link rel="stylesheet" href="/Millions/css/jackpot.css"/>
}

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

    <!-- Header gradient -->
    <div class="header-bg absolute inset-x-0 top-0 h-[160px] flex flex-col items-center pt-4 px-3 z-0">
        <div class="w-full flex items-center justify-between">
            <button onclick="location.href=subDomain + '@Url.Action("JackpotResults", "Home", new { area = "Millions", termType = Model.termType })';" 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>
            <p class="text-white text-base font-bold">@Lang.millions_jackpot_results_title</p>
            <span class="w-6 h-6"></span>
        </div>
        <p class="text-white/80 text-xs -mt-1">@Lang.millions_draw_no_short<span class="font-bold">@drawId</span></p>
    </div>

    <!-- White rounded body (overlaps header, scrollable) -->
    <div class="absolute inset-x-0 top-[56px] bottom-0 bg-white rounded-t-[40px] flex flex-col gap-2 px-3 pt-4 pb-[96px] overflow-y-auto hide-scrollbar z-10" style="box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);">

        <!-- Top: Draw info + MB ball + Jackpot prize -->
        <div class="flex items-start justify-between shrink-0">
            <div class="flex flex-col gap-1 items-start">
                <span class="bg-[#0062ff] text-white text-base font-bold rounded-xl px-2 py-1">@Lang.millions_draw_no_short@drawId</span>
                <div class="flex items-center gap-1">
                    <img src="/Millions/assets/icons/calendar.png" alt="" class="w-5 h-5"/>
                    <span class="text-xs text-black">@drawDateLong</span>
                </div>
                <div class="flex items-center gap-1">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="#0062ff" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
                    <span class="text-xs text-black">@drawTime</span>
                </div>
            </div>

            <div class="flex items-center gap-2 relative">
                <div class="relative">
                    <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-3 -right-1 w-5 h-auto rotate-[15deg] z-0 pointer-events-none"/>
                    <div class="ball ball-mb relative z-10" style="width:52px;height:52px;font-size:22px;">@mbBall</div>
                    <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[10px] font-bold px-1 py-0.5 rounded z-20">MB</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-xs font-bold text-black">@Lang.millions_jackpot_prize</span>
                    <p class="leading-none mt-1">
                        <span class="text-[28px] font-condensed font-bold text-[#002bff] tracking-tight">@Utils.FormatMoney(jackpotPrize)</span><span class="text-xs font-bold text-black ml-1 align-top">@Lang.v2_htg</span>
                    </p>
                    <span class="text-[8px] font-bold text-[#8e8e93] mt-1">@Lang.millions_mega_jackpot</span>
                </div>
            </div>
        </div>

        <!-- Winning Numbers box -->
        <div class="result-box rounded-[32px] py-3 flex flex-col gap-2 shrink-0">
            <p class="text-xs font-bold text-black text-center">@Lang.millions_winning_numbers</p>
            <div class="flex items-center justify-center gap-3 px-4">
                @for (int i = 0; i < 5; i++)
                {
                    <div class="ball ball-blue">@mainBalls[i]</div>
                }
                <div class="relative">
                    <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto rotate-[15deg] z-0 pointer-events-none"/>
                    <div class="ball ball-mb relative z-10">@mbBall</div>
                    <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>

        <!-- Winning Subscribes -->
        <div class="result-box rounded-xl py-3 flex flex-col gap-2 shrink-0">
            <div class="flex flex-col px-3 gap-1">
                <p class="text-xs font-bold text-black">@Lang.millions_winning_subscribes (@winnersCount)</p>
                <p class="text-xs text-black">@string.Format(Lang.millions_subscribers_won_jackpot, winnersCount)</p>
            </div>
            <div class="grid grid-cols-2 gap-2 px-3">
                @{ int idx = 0; }
                @foreach (var w in winners)
                {
                    idx++;
                    var phone = w.msisdn ?? "";
                    string masked = phone;
                    if (phone.Length >= 7)
                    {
                        masked = "+" + phone.Substring(0, 3) + " " + phone.Substring(3, 2) + "****" + phone.Substring(phone.Length - 2);
                    }
                    <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">@idx</span><span class="text-xs font-bold text-black">@masked</span></div>
                }
                @if (winnersCount == 0)
                {
                    <p class="text-xs text-[#8e8e93] col-span-2 text-center py-2">@Lang.millions_no_winners</p>
                }
            </div>
        </div>

        <!-- Draw information -->
        <div class="result-box rounded-xl py-3 flex flex-col gap-2 px-3">
            <p class="text-xs font-bold text-black">@Lang.millions_draw_information</p>
            <div class="grid grid-cols-2 gap-x-1 gap-y-1 text-xs">
                <p class="text-[#8e8e93]">@Lang.millions_game_type</p>
                <p class="font-bold text-black">@Lang.millions_mega_jackpot</p>
                <p class="text-[#8e8e93]">@Lang.millions_total_winners</p>
                <p class="font-bold text-black">@winnersCount</p>
                <p class="text-[#8e8e93]">@Lang.millions_draw_date_time</p>
                <p class="font-bold text-black">@drawDateFmt - @drawTime</p>
            </div>
        </div>

        <!-- Note -->
        <div class="bg-[#ecf3fd] rounded-xl px-3 py-2 flex flex-col gap-1 shrink-0">
            <div class="flex items-center gap-1">
                <span class="bg-[#0062ff] text-white text-sm font-bold rounded-xl w-[17px] h-5 flex items-center justify-center leading-none">i</span>
                <p class="text-[10px] font-bold text-[#0062ff]">@Lang.millions_note</p>
            </div>
            <div class="text-xs text-[#8e8e93] leading-tight">
                <p>@Lang.millions_note_results_public</p>
                <p>@Lang.millions_note_thank_you</p>
            </div>
        </div>

        <!-- Back button -->
        <a href="@Url.Action("JackpotResults", "Home", new { area = "Millions", termType = Model.termType })" class="bg-[#0062ff] text-white text-sm font-bold text-center rounded-xl px-3 py-3 mt-2 mb-1 shrink-0">@Lang.millions_back_to_results_list</a>

    </div>

</div>

@section Scripts {
    <script src="/Millions/js/all.min.js"></script>
}