@using LotteryWebApp.Service
@using LotteryWebApp.Languages
@using System.Linq
@model List<IGrouping<DateTime, Term>>

@if (Model != null && Model.Count > 0)
{
    foreach (var group in Model)
    {
        var drawDate = group.Key;
        var filteredGames = group.Where(x => !string.Equals(x.result, "NA", StringComparison.OrdinalIgnoreCase)).ToList();
        
        if (filteredGames.Count == 0) continue;
        
        <div class="result-card-premium animate__animated animate__fadeInUp mb-6 overflow-hidden bg-white rounded-2xl shadow-sm border border-gray-100">
            <!-- Simplified Header -->
            <div class="bg-gray-50/50 px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fas fa-trophy text-[#0062FF] text-[12px]"></i>
                    <span class="text-[11px] font-black text-gray-500 uppercase tracking-widest">@Lang.results</span>
                </div>
                <div class="flex items-center gap-1.5">
                    <div class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
                    <span class="text-[9px] font-bold text-gray-400 uppercase">Live Update</span>
                </div>
            </div>

            <!-- Games Container -->
            <div class="px-3 pt-2 pb-3 space-y-0.5">
                <!-- Date/Time Info Row -->
                <div class="flex items-center gap-3 mb-1.5 bg-gray-50/50 p-2 rounded-2xl border border-gray-100/80 shadow-xs">
                    <div class="w-11 h-11 flex flex-col items-center justify-center bg-white rounded-xl shadow-xs border border-gray-100 shrink-0">
                        <span class="text-[9px] font-bold text-gray-400 uppercase leading-none">@drawDate.ToString("MMM")</span>
                        <span class="text-[18px] font-black text-[#0062FF] leading-none">@drawDate.ToString("dd")</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-[14px] font-black text-gray-800 leading-tight">@drawDate.ToString("dddd, MMM dd yyyy", System.Globalization.CultureInfo.InvariantCulture)</span>
                        <div class="flex items-center gap-1.5 mt-0.5">
                            <i class="far fa-calendar-alt text-[11px] text-[#0062FF]"></i>
                            <span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">@Lang.draw_date</span>
                        </div>
                    </div>
                </div>

                @{
                    var games = filteredGames.OrderBy(x => x.gameId).ToList();
                    for (int i = 0; i < games.Count; i++)
                    {
                        var item = games[i];
                        var isBasic = item.gameId == "30";
                        var isBigSmall = item.gameId == "31";
                        var isOddEven = item.gameId == "32";
                        
                        var gameName = isBasic ? Lang.millions_classic_pick_10 : 
                                       isBigSmall ? Lang.millions_big_small : 
                                       isOddEven ? Lang.millions_odd_even : "Game";
                        
                        // Fallback labels if resource is missing
                        if (string.IsNullOrEmpty(gameName)) {
                            gameName = isBasic ? "Basic" : isBigSmall ? "Big/Small" : isOddEven ? "Odd/Even" : "Game";
                        }
                        
                        var gameColor = isBasic ? "#0062FF" : isBigSmall ? "#26A31E" : isOddEven ? "#B529E9" : "#0062FF";
                        var gameBg = isBasic ? "bg-[#0062FF]/5" : isBigSmall ? "bg-[#26A31E]/5" : isOddEven ? "bg-[#B529E9]/5" : "bg-gray-50";

                        <div class="game-result-row px-1">
                            <div class="flex items-center justify-between mb-0 px-1">
                                <div class="flex items-center gap-2">
                                    <div class="w-1.5 h-4 rounded-full" style="background-color: @gameColor"></div>
                                    <span class="text-[14px] font-black uppercase tracking-widest" style="color: @gameColor">@gameName</span>
                                </div>
                                <div class="flex flex-col items-end">
                                    <span class="text-[13px] font-bold text-gray-400 opacity-60">#@item.id</span>
                                    @{
                                        DateTime drawTime;
                                        var timeStr = DateTime.TryParse(item.date_random, out drawTime) ? drawTime.ToString("HH:mm") : "--:--";
                                    }
                                    <span class="text-[11px] font-black text-[#0062FF]/60 uppercase tracking-tighter">@timeStr</span>
                                </div>
                            </div>

                            <div class="flex items-center justify-center gap-2.5 flex-wrap">
                                @if (!string.IsNullOrEmpty(item.result))
                                {
                                    var balls = item.result.Split(new[] { ',', ';' }, StringSplitOptions.RemoveEmptyEntries);
                                    foreach (var ball in balls)
                                    {
                                        var cleanBall = ball.Trim();
                                        if (isBasic)
                                        {
                                            <div class="w-8 h-8 flex items-center justify-center rounded-full text-white text-[15px] font-black shadow-md transform hover:scale-110 transition-transform" 
                                                 style="background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%);">
                                                @cleanBall
                                            </div>
                                        }
                                        else
                                        {
                                            var ballText = cleanBall.ToUpper();
                                            if (isBigSmall) {
                                                if (ballText == "S") ballText = Lang.Small;
                                                else if (ballText == "B") ballText = Lang.Big;
                                            } else if (isOddEven) {
                                                if (ballText == "O") ballText = Lang.Odd;
                                                else if (ballText == "E") ballText = Lang.Even;
                                            }

                                            <div class="px-4 py-1.5 rounded-xl bg-white border border-gray-100 shadow-sm text-[13px] font-black transform hover:bg-gray-50 transition-colors uppercase tracking-tight" style="color: @gameColor">
                                                @ballText
                                            </div>
                                        }
                                    }
                                }
                                else
                                {
                                    <div class="py-2 px-4 rounded-lg border border-dashed" style="background-color: @(gameColor + "10"); border-color: @(gameColor + "30");">
                                        <span class="italic text-[11px] font-bold" style="color: @gameColor">@Lang.waiting_for_result</span>
                                    </div>
                                }
                            </div>
                        </div>

                        if (i < games.Count - 1)
                        {
                            <!-- Red Separator Line -->
                            <div class="py-0">
                                <div class="h-[1px] bg-gradient-to-r from-transparent via-[#0062FF]/20 to-transparent"></div>
                            </div>
                        }
                    }
                }
            </div>
        </div>
    }
}
else
{
    <div class="w-full py-20 flex flex-col items-center justify-center text-gray-400 opacity-60">
        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4">
            <i class="fas fa-search text-3xl"></i>
        </div>
        <p class="font-black text-[14px] uppercase tracking-widest">@Lang.no_results_found</p>
    </div>
}