    $(document).ready(function () {
        function updateTimer() {
            if (remainingTime > 0) {
                let minutes = Math.floor(remainingTime / 60);
                let seconds = remainingTime % 60;
                document.getElementById("timer").textContent = `${minutes}m ${seconds}s`;
                remainingTime--;
                setTimeout(updateTimer, 1000);
            } else {
                location.reload();
            }
        }
        
        if (remainingTime > 0) {
            updateTimer();
        }
        
        function loadFaucetHistory(page = 1) {
            $.ajax({
                url: "/faucet/history",
                type: "GET",
                data: { page: page },
                dataType: "json",
                beforeSend: function () {
                    $("#faucet-history").html('<tr><td colspan="5" class="text-center py-4">Loading...</td></tr>');
                },
                success: function (data) {
                    var html = "";
                    if (data.records.length > 0) {
                        data.records.forEach(function (item) {
                          html += `
                            <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                              <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                  ${item.id}
                              </td>
                              <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.ip}</td>
                              <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.reward}</td>
                              <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.date}</td>
                            </tr>`;
                        });
                  } else {
                    html = '<tr><td colspan="5" class="text-center py-4">No data available</td></tr>';
                  }
                  $("#faucet-history").html(html);

                var paginationHtml = `
                    <ol class="pagination">
                        <li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
                            <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.prev_page}" ${data.prev_page ? "" : "disabled"}>
                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                                </svg>
                            </a>
                        </li>`;
                
                    var startPage = Math.max(1, data.current_page - 2);
                    var endPage = Math.min(data.total_pages, startPage + 4);
                    
                    if (startPage > 1) {
                        paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                            <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="1">1</a>
                        </li>`;
                        if (startPage > 2) {
                            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
                        }
                    }
                    
                    for (var i = startPage; i <= endPage; i++) {
                        paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                            <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 ${i === data.current_page ? 'bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90' : 'leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90'}" data-page="${i}">${i}</a>
                        </li>`;
                    }
                    
                    if (endPage < data.total_pages) {
                        if (endPage < data.total_pages - 1) {
                            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
                        }
                        paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                            <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.total_pages}">${data.total_pages}</a>
                        </li>`;
                    }
                    
                    paginationHtml += `
                        <li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
                            <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.next_page}" ${data.next_page ? "" : "disabled"}>
                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        </li>
                    </ol>`;
                    
                    $("#pagination").html(paginationHtml);
                }
            });
        }
        loadFaucetHistory();
        $(document).on("click", ".pagination-btn", function (e) {
          e.preventDefault();
          var page = $(this).data("page");
          if (page) loadFaucetHistory(page);
        });
    });