@model LotteryWebApp.Models.RewardHistoryModel
@using LotteryWebApp.Languages
@{
    ViewData["Title"] = "Millions - Reward History";
    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
    ViewData["ActiveTab"] = "More";
}

@section Styles {
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/Millions/css/site.css" />
    <link rel="stylesheet" href="/Millions/css/results.css" />
    <link rel="stylesheet" href="/Millions/css/reward-history.css" />
}

<div class="main-container reward-history-container animate__animated animate__fadeIn pb-40 relative">
    <!-- Fixed Header -->
    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] z-[100] bg-[#0062FF]">
        <div class="results-top-header">
            <a href="/Millions/Home/More" class="back-btn">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
            <h1 class="font-bricolage">Reward History</h1>
        </div>
        <!-- Spacer with rounded white top (matches History layout) -->
        <div class="bg-white rounded-t-[30px] h-[16px]"></div>
    </div>

    <!-- List container (spaced below fixed header) -->
    <div id="reward-list-container"
         class="reward-list-container bg-white rounded-t-[30px] px-4 pt-4 mt-[80px] pb-[120px] min-h-[calc(100vh-80px)] shadow-sm">
        <partial name="_RewardHistoryList" model="Model" />
    </div>

    <!-- Bottom Navbar -->
    <partial name="_BottomNavbar" />

    <!-- Notification Modal -->
    <div id="notificationModal" class="fixed inset-0 z-[300] flex items-center justify-center hidden px-6 font-bricolage" style="background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);">
        <div class="w-full max-w-[343px] min-h-[420px] bg-white rounded-[24px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl border border-white/50">
            <div class="w-full flex justify-center mb-8 mt-4">
                <img src="/Millions/img/modal/fail_icon.png" class="w-[160px] h-auto object-contain" alt="Notification icon" />
            </div>
            <div class="px-2 text-center mb-10 flex-1 flex items-center justify-center">
                <p id="notificationMessage" class="text-black font-[800] text-[20px] leading-snug"></p>
            </div>
            <div class="w-full">
                <button onclick="closeNotificationModal()" class="w-full bg-[#0062FF] text-white font-[800] text-[18px] py-[12px] rounded-[16px] shadow-lg active:scale-95 transition-all">
                    @Lang.login
                </button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        let currentSeqPage = parseInt('@Model.seqPage' || '1');
        let totalPages = parseInt('@Model.totalPage' || '1');
        let systemUpgrading = false;

        function changeRewardPage(page) {
            if (page < 1 || page > totalPages) return;
            currentSeqPage = page;
            loadRewardHistory();
        }

        function loadRewardHistory() {
            const container = document.getElementById("reward-list-container");
            container.style.opacity = "0.5";

            fetch(subDomain + `/Millions/Home/RewardHistoryPartial?seqPage=${currentSeqPage}`)
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.text();
                })
                .then(html => {
                    try {
                        const json = JSON.parse(html);
                        if (json.responseCode === "-2" || (json.responseMessage && json.responseMessage.includes("System is upgrading"))) {
                            showNotification(json.responseMessage || "System is upgrading", "-2");
                            return;
                        }
                    } catch (e) {
                        // Not JSON, HTML partial
                    }
                    container.innerHTML = html;
                    container.style.opacity = "1";
                    updatePaginationUI();
                })
                .catch(error => {
                    console.error("Error loading reward history:", error);
                    container.style.opacity = "1";
                    if (error.message && (error.message.includes("System is upgrading") || error.message.includes("-2"))) {
                        showNotification(error.message, "-2");
                    }
                });
        }

        function updatePaginationUI() {
            const pageDisplay = document.getElementById("pageDisplay");
            const prevBtn = document.getElementById("prevPage");
            const nextBtn = document.getElementById("nextPage");

            if (pageDisplay) pageDisplay.innerText = `${currentSeqPage} / ${totalPages}`;
            if (prevBtn) prevBtn.disabled = currentSeqPage <= 1;
            if (nextBtn) nextBtn.disabled = currentSeqPage >= totalPages;
        }

        function showNotification(message, code) {
            $("#notificationMessage").text(message);
            const $btn = $("#notificationModal button");
            if (code === "-2" || (message && message.includes("System is upgrading"))) {
                systemUpgrading = true;
                $btn.text("@Lang.login");
            } else {
                systemUpgrading = false;
                $btn.text("OK");
            }
            $("#notificationModal").removeClass("hidden").addClass("flex");
        }

        function closeNotificationModal() {
            $("#notificationModal").addClass("hidden").removeClass("flex");
            if (systemUpgrading) {
                window.location.href = subDomain + "/Account/Login";
            }
        }
    </script>
}