@extends('user.layouts.app')

@section('content')
<div class="max-w-7xl mx-auto space-y-6 videos-page">

    {{-- ── Header ── --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">
                📺 Watch & Earn
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Watch YouTube videos to earn money quickly and easily
            </p>
        </div>
    </div>

    {{-- ── Stat Cards ── --}}
    @php
        $stats = [
            ['label'=>'Total Video Earnings',  'value'=>format_currency($totalEarned),   'sub'=>"From {$watchedCount} videos",   'icon'=>'mgc_wallet_4_line',     'accent'=>'#10b981', 'tint'=>'rgba(16,185,129,.10)'],
            ['label'=>"Today's Earnings",      'value'=>format_currency($todayEarned),   'sub'=>'Resets at midnight',             'icon'=>'mgc_calendar_line',     'accent'=>'#3073F1', 'tint'=>'rgba(48,115,241,.10)'],
            ['label'=>'Average Reward',        'value'=>format_currency($averageReward), 'sub'=>'Per video watched',              'icon'=>'mgc_chart_bar_line',    'accent'=>'#f59e0b', 'tint'=>'rgba(245,158,11,.10)'],
            ['label'=>'Videos Watched',        'value'=>number_format($watchedCount),    'sub'=>'All-time',                       'icon'=>'mgc_play_circle_line',  'accent'=>'#a855f7', 'tint'=>'rgba(168,85,247,.10)'],
        ];
    @endphp
    <div class="grid grid-cols-2 xl:grid-cols-4 gap-4">
        @foreach($stats as $stat)
            <div class="card stat-card relative overflow-hidden" style="--accent: {{ $stat['accent'] }};">
                <div class="card-body py-5 px-3">
                    <div class="flex items-center gap-3">
                        <span class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center"
                              style="background: {{ $stat['tint'] }}; color: {{ $stat['accent'] }};">
                            <i class="{{ $stat['icon'] }} text-lg"></i>
                        </span>
                        <div class="min-w-0">
                            <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400 truncate">{{ $stat['label'] }}</p>
                            <p class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-100 truncate">{{ $stat['value'] }}</p>
                        </div>
                    </div>
                    <p class="text-[11px] text-gray-400 mt-2">{{ $stat['sub'] }}</p>
                </div>
            </div>
        @endforeach
    </div>

    {{-- ── Section Header ── --}}
    <div>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100">Watch Videos &amp; Earn</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">Watch YouTube videos to earn money quickly and easily</p>
    </div>

    {{-- ── Videos Grid ── --}}
    @if($videos->isEmpty())
        <div class="card">
            <div class="card-body py-16 text-center">
                <div class="flex flex-col items-center gap-3">
                    <span class="w-14 h-14 rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700">
                        <i class="mgc_video_line text-2xl text-gray-400"></i>
                    </span>
                    <div>
                        <p class="font-medium text-gray-600 dark:text-gray-300">No videos available right now</p>
                        <p class="text-xs text-gray-400 mt-0.5">Fresh content is added regularly — check back soon!</p>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($videos as $video)
                @php
                    $watch    = $watches[$video->id] ?? null;
                    $rewarded = $watch && $watch->rewarded;
                    $progress = $watch ? min(100, round($watch->watched_seconds / max(1, $video->required_seconds) * 100)) : 0;
                @endphp

                <div class="video-card card overflow-hidden flex flex-col">
                    {{-- Thumbnail --}}
                    <div class="video-thumb relative bg-gray-900">
                        <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}"
                             loading="lazy"
                             onerror="this.style.display='none'">

                        {{-- Play overlay --}}
                        <div class="absolute inset-0 flex items-center justify-center">
                            <span class="w-14 h-14 rounded-full bg-white/90 text-rose-600 flex items-center justify-center shadow-xl">
                                <svg viewBox="0 0 24 24" fill="currentColor" class="w-7 h-7 ml-0.5">
                                    <path d="M8 5v14l11-7z"/>
                                </svg>
                            </span>
                        </div>

                        {{-- Duration badge --}}
                        <span class="absolute bottom-2 right-2 px-2 py-0.5 text-xs font-semibold rounded bg-black/75 text-white">
                            {{ $video->duration_label }}
                        </span>

                        {{-- YouTube tag --}}
                        <span class="absolute top-2 left-2 inline-flex items-center gap-1 px-2 py-1 text-[11px] font-bold rounded bg-rose-600 text-white">
                            <svg viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8C22 15.2 22 12 22 12s0-3.2-.4-4.8zM10 15V9l5 3-5 3z"/></svg>
                            YouTube
                        </span>

                        {{-- Reward badge --}}
                        @if($rewarded)
                            <span class="absolute top-2 right-2 inline-flex items-center gap-1 px-2.5 py-1 text-xs font-bold rounded-full bg-emerald-500 text-white">
                                <i class="mgc_check_line text-sm"></i> Earned
                            </span>
                        @else
                            <span class="absolute top-2 right-2 inline-flex items-center gap-1 px-2.5 py-1 text-xs font-bold rounded-full bg-amber-400 text-amber-900">
                                +{{ format_currency($video->reward) }}
                            </span>
                        @endif
                    </div>

                    {{-- Body --}}
                    <div class="p-5 flex flex-col flex-1">
                        <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-1.5 line-clamp-2">{{ $video->title }}</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mb-4 flex-1">
                            {{ $video->description ?? 'Watch this video to earn your reward instantly.' }}
                        </p>

                        <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 mb-4">
                            <span class="inline-flex items-center gap-1">
                                <i class="mgc_time_line"></i> Watch {{ $video->required_label }} to earn
                            </span>
                        </div>

                        {{-- Progress bar (if partially watched) --}}
                        @if($watch && !$rewarded && $watch->watched_seconds > 0)
                            <div class="mb-3">
                                <div class="flex items-center justify-between text-[11px] text-gray-500 mb-1">
                                    <span>In progress</span>
                                    <span class="font-semibold">{{ $progress }}%</span>
                                </div>
                                <div class="h-1.5 rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                                    <div class="h-full rounded-full bg-primary" style="width: {{ $progress }}%"></div>
                                </div>
                            </div>
                        @endif

                        <button type="button"
                                @if($rewarded) disabled @endif
                                data-video-id="{{ $video->id }}"
                                data-youtube-id="{{ $video->youtube_id }}"
                                data-title="{{ $video->title }}"
                                data-description="{{ $video->description }}"
                                data-required="{{ $video->required_seconds }}"
                                data-duration="{{ $video->duration_seconds }}"
                                data-reward="{{ format_currency($video->reward) }}"
                                onclick="openVideo(this)"
                                class="w-full inline-flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition
                                       {{ $rewarded
                                            ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 cursor-not-allowed'
                                            : 'bg-primary text-white hover:bg-primary/90 shadow-md shadow-primary/20 hover:scale-[1.01]' }}">
                            @if($rewarded)
                                <i class="mgc_check_circle_line text-base"></i> Reward Earned
                            @else
                                <i class="mgc_play_circle_line text-base"></i> Watch &amp; Earn
                            @endif
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- ── How It Works ── --}}
    <div class="card">
        <div class="card-body p-6 sm:p-8">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-6">How It Works</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                @foreach([
                    ['1','Watch Videos','Select a video and watch it for the required time to earn your reward','mgc_play_circle_line','#3073F1','rgba(48,115,241,.10)'],
                    ['2','Earn Rewards','Get paid instantly for each video you watch for the required time','mgc_cash_line','#10b981','rgba(16,185,129,.10)'],
                    ['3','Withdraw Money','Once you reach the minimum, withdraw your earnings via multiple methods','mgc_wallet_3_line','#a855f7','rgba(168,85,247,.10)'],
                ] as $step)
                    <div class="text-center">
                        <div class="mx-auto w-14 h-14 rounded-full flex items-center justify-center mb-3"
                             style="background: {{ $step[5] }}; color: {{ $step[4] }};">
                            <i class="{{ $step[3] }} text-2xl"></i>
                        </div>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-100">{{ $step[0] }}. {{ $step[1] }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $step[2] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ── Tips ── --}}
    <div class="card">
        <div class="card-body p-6 sm:p-8">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-5">Tips to Maximize Earnings</h3>
            <div class="space-y-4">
                @foreach([
                    ['Watch videos daily','No daily limits — watch as many videos as you want!'],
                    ['Complete the required watch time','Watch each video for the full required time to earn rewards'],
                    ['Stay on the page','Tab switches and minimizing pause the timer — keep the video visible'],
                    ['Refer friends','Earn 10% of what your referrals earn from watching videos'],
                ] as $tip)
                    <div class="flex gap-3 items-start">
                        <span class="shrink-0 w-6 h-6 rounded-full bg-emerald-500 text-white flex items-center justify-center mt-0.5">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                                 stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
                                <path d="M20 6 9 17l-5-5"></path>
                            </svg>
                        </span>
                        <div>
                            <p class="font-bold text-gray-800 dark:text-gray-100">{{ $tip[0] }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $tip[1] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- ── Watch Modal ── --}}
<div id="videoModal" class="vid-overlay hidden" role="dialog" aria-modal="true">
    <div class="vid-modal">
        <button id="vidClose" type="button" class="vid-close" aria-label="Close">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                 stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                <path d="M18 6 6 18M6 6l12 12"></path>
            </svg>
        </button>

        <div class="vid-header">
            <h4 id="vidTitle" class="font-bold text-gray-800 dark:text-gray-100 line-clamp-2 pr-10">—</h4>
        </div>

        <div class="vid-frame-wrap">
            <div id="ytPlayer"></div>
            <div id="vidIdle" class="hidden">
                <!--<span class="vid-idle-pill">-->
                <!--    <i class="mgc_pause_circle_line text-base"></i>-->
                <!--    Timer paused — keep the tab visible &amp; video playing-->
                <!--</span>-->
            </div>
        </div>

        <div class="vid-body">
            <p id="vidDesc" class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4 line-clamp-3"></p>

            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">
                Watch for at least <span id="vidReqLabel" class="font-semibold text-gray-800 dark:text-gray-100">—</span> to earn the reward
            </p>

            <div class="h-2 rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                <div id="vidProgress" class="h-full bg-primary transition-all duration-500" style="width: 0%"></div>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                Watch time: <span id="vidElapsed" class="font-semibold">0:00</span> / <span id="vidRequiredTime" class="font-semibold">0:00</span>
            </p>

            <div class="flex items-end justify-between gap-3 mt-5">
                <div>
                    <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 font-medium">Reward</p>
                    <p id="vidReward" class="text-2xl font-extrabold text-primary">—</p>
                </div>
                <button id="vidCta" type="button" disabled
                        class="inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-500 font-bold cursor-not-allowed transition">
                    <i class="mgc_time_line text-base"></i>
                    <span id="vidCtaLabel">Keep Watching</span>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ── Styles ── --}}
<style>
    .videos-page .stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); opacity: .9; }
    .videos-page .stat-card { transition: transform .18s ease, box-shadow .18s ease; }
    .videos-page .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15,23,42,.18); }

    .videos-page .video-card { transition: transform .2s ease, box-shadow .2s ease; }
    .videos-page .video-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(15,23,42,.22); }
    .videos-page .video-thumb { aspect-ratio: 16/9; }
    .videos-page .video-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
    .videos-page .video-card:hover .video-thumb img { transform: scale(1.05); }
    .videos-page .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .videos-page .line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

    /* ── Modal ── */
    .vid-overlay {
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(15,23,42,.8);
        display: flex; align-items: center; justify-content: center;
        padding: 1rem;
        animation: vidFade .25s ease;
    }
    .vid-overlay.hidden { display: none; }
    .vid-modal {
        background: #fff;
        border-radius: 1.25rem;
        max-width: 560px; width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 30px 60px -15px rgba(0,0,0,.5);
        animation: vidPop .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .dark .vid-modal { background: #1f2937; }
    .vid-close {
        position: absolute; top: 12px; right: 12px;
        width: 32px; height: 32px; z-index: 6;
        display: flex; align-items: center; justify-content: center;
        border-radius: 9999px;
        color: #475569; background: #f1f5f9;
        transition: all .15s ease;
    }
    .vid-close:hover { background: #e2e8f0; color: #0f172a; }
    .vid-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
    .dark .vid-header { border-bottom-color: #374151; }
    .vid-frame-wrap { position: relative; aspect-ratio: 16/9; background: #000; }
    #ytPlayer, #ytPlayer iframe { width: 100% !important; height: 100% !important; }
    .vid-idle-overlay {
        position: absolute; inset: 0;
        background: rgba(0,0,0,.55);
        display: flex; align-items: flex-start; justify-content: center;
        padding-top: .75rem;
        pointer-events: none;  /* Critical: never block clicks to the YouTube player below */
        animation: vidFade .2s ease;
    }
    .vid-idle-pill {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .55rem 1rem;
        background: rgba(245,158,11,.95);
        color: #fff; font-size: .85rem; font-weight: 600;
        border-radius: 9999px;
        text-align: center;
    }
    .vid-body { padding: 1.25rem 1.5rem 1.5rem; }

    @keyframes vidFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes vidPop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
</style>

{{-- ── YouTube IFrame API + watch tracker ── --}}
<script>
(function () {
    'use strict';

    const CSRF = '{{ csrf_token() }}';
    const URLS = {
        start:    (id) => `/user/videos/${id}/start`,
        progress: (id) => `/user/videos/${id}/progress`,
    };

    const modal       = document.getElementById('videoModal');
    const closeBtn    = document.getElementById('vidClose');
    const titleEl     = document.getElementById('vidTitle');
    const descEl      = document.getElementById('vidDesc');
    const progressEl  = document.getElementById('vidProgress');
    const elapsedEl   = document.getElementById('vidElapsed');
    const requiredEl  = document.getElementById('vidRequiredTime');
    const reqLabelEl  = document.getElementById('vidReqLabel');
    const rewardEl    = document.getElementById('vidReward');
    const ctaBtn      = document.getElementById('vidCta');
    const ctaLabel    = document.getElementById('vidCtaLabel');
    const idleOverlay = document.getElementById('vidIdle');

    let ytPlayer = null;
    let ytReady  = false;
    let pendingOpen = null;  // video data queued while YT API loads

    let session = {
        videoId: null,
        required: 0,
        duration: 0,
        watched: 0,         // tracked watched seconds (client side, sent to server)
        timer: null,
        rewarded: false,
        lastReportedAt: 0,  // for throttling progress requests
        hasEverPlayed: false, // true once YT fires its first PLAYING state — controls idle overlay
    };

    // ── Load YouTube IFrame API
    (function injectYT() {
        if (window.YT && window.YT.Player) { ytReady = true; return; }
        const tag = document.createElement('script');
        tag.src = 'https://www.youtube.com/iframe_api';
        document.head.appendChild(tag);
    })();
    window.onYouTubeIframeAPIReady = function () {
        ytReady = true;
        if (pendingOpen) {
            const data = pendingOpen; pendingOpen = null;
            actuallyOpen(data);
        }
    };

    // ── Public: opened by Watch & Earn button
    window.openVideo = function (btn) {
        const data = {
            videoId:     btn.dataset.videoId,
            youtubeId:   btn.dataset.youtubeId,
            title:       btn.dataset.title,
            description: btn.dataset.description,
            required:    parseInt(btn.dataset.required, 10) || 0,
            duration:    parseInt(btn.dataset.duration, 10) || 0,
            reward:      btn.dataset.reward,
        };

        if (!ytReady) { pendingOpen = data; openModalShell(data); return; }
        actuallyOpen(data);
    };

    function openModalShell(data) {
        titleEl.textContent      = data.title;
        descEl.textContent       = data.description || '';
        requiredEl.textContent   = formatTime(data.required);
        reqLabelEl.textContent   = data.required >= 60 ? Math.round(data.required/60)+' min' : data.required+'s';
        rewardEl.textContent     = data.reward;
        elapsedEl.textContent    = '0:00';
        progressEl.style.width   = '0%';
        ctaBtn.disabled          = true;
        ctaBtn.className         = ctaBtn.className.replace(/bg-(emerald|primary)-?\d*/g, '') + ' bg-gray-200 dark:bg-gray-700 text-gray-500 cursor-not-allowed';
        ctaLabel.textContent     = 'Keep Watching';
        modal.classList.remove('hidden');
    }

    async function actuallyOpen(data) {
        openModalShell(data);

        // Tell server we're starting
        let startData;
        try {
            const r = await fetch(URLS.start(data.videoId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            startData = await r.json();
            if (!r.ok || !startData.success) {
                alert(startData.message || 'Could not start video.');
                closeModal();
                return;
            }
        } catch (e) {
            alert('Network error. Please try again.');
            closeModal(); return;
        }

        session = {
            videoId:        data.videoId,
            required:       data.required,
            duration:       data.duration,
            watched:        0,
            timer:          null,
            rewarded:       false,
            lastReportedAt: 0,
            hasEverPlayed:  false,
        };

        // (Re)create the player
        if (ytPlayer && ytPlayer.destroy) { try { ytPlayer.destroy(); } catch (e) {} }
        ytPlayer = new YT.Player('ytPlayer', {
            videoId: data.youtubeId,
            playerVars: {
                rel: 0, modestbranding: 1, playsinline: 1,
            },
            events: {
                onStateChange: onPlayerStateChange,
            },
        });
    }

    function onPlayerStateChange(e) {
        if (e.data === YT.PlayerState.PLAYING) {
            session.hasEverPlayed = true;
            idleOverlay.classList.add('hidden');
            startTimer();
        } else {
            stopTimer();
            if (e.data === YT.PlayerState.ENDED) {
                idleOverlay.classList.add('hidden');
            } else if (session.hasEverPlayed && !session.rewarded) {
                // Only nag once the user has actually started watching at least once
                idleOverlay.classList.remove('hidden');
            }
        }
    }

    function startTimer() {
        if (session.timer) return;
        idleOverlay.classList.add('hidden');
        session.timer = setInterval(tick, 1000);
    }
    function stopTimer() {
        if (session.timer) { clearInterval(session.timer); session.timer = null; }
    }

    function tick() {
        // Only count time when tab is visible AND video is playing
        if (document.visibilityState !== 'visible') {
            if (session.hasEverPlayed && !session.rewarded) {
                idleOverlay.classList.remove('hidden');
            }
            return;
        }
        idleOverlay.classList.add('hidden');

        session.watched++;
        updateUI();

        // Throttle progress reports: every 5s, on completion, and at half-way
        const isMilestone =
            session.watched >= session.required ||
            (session.watched % 5 === 0) ||
            session.watched === Math.floor(session.required / 2);

        if (isMilestone && session.watched !== session.lastReportedAt) {
            session.lastReportedAt = session.watched;
            reportProgress();
        }
    }

    function updateUI() {
        const pct = Math.min(100, (session.watched / session.required) * 100);
        progressEl.style.width = pct + '%';
        elapsedEl.textContent  = formatTime(session.watched);
    }

    async function reportProgress() {
        try {
            const r = await fetch(URLS.progress(session.videoId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ watched_seconds: session.watched }),
            });
            const data = await r.json();
            if (!r.ok || !data.success) return;

            // Keep client in sync with server's clamped value
            if (typeof data.watched_seconds === 'number') {
                session.watched = data.watched_seconds;
                updateUI();
            }

            if (data.rewarded && !session.rewarded) {
                session.rewarded = true;
                stopTimer();
                onRewarded(data.reward_display);
            }
        } catch (e) {
            console.error('Progress report failed', e);
        }
    }

    function onRewarded(displayAmount) {
        ctaBtn.disabled  = false;
        ctaBtn.className = 'inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-success hover:bg-success/20 text-white font-bold shadow-lg transition';
        ctaLabel.textContent = 'Claim & Close';
        rewardEl.textContent = displayAmount || rewardEl.textContent;
        rewardEl.classList.remove('text-primary');
        rewardEl.classList.add('text-emerald-600');

        ctaBtn.onclick = () => {
            closeModal();
            location.reload();
        };

        fireConfetti();
    }

    function closeModal() {
        modal.classList.add('hidden');
        stopTimer();
        if (ytPlayer && ytPlayer.destroy) { try { ytPlayer.destroy(); } catch (e) {} }
        ytPlayer = null;
        idleOverlay.classList.add('hidden');
    }

    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });

    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
            // Only show the "paused" hint if the user has actually started watching
            if (session.hasEverPlayed && !session.rewarded) {
                idleOverlay.classList.remove('hidden');
            }
        } else {
            idleOverlay.classList.add('hidden');
        }
    });

    function formatTime(secs) {
        secs = Math.max(0, secs|0);
        const m = Math.floor(secs / 60);
        const s = secs % 60;
        return m + ':' + (s < 10 ? '0' : '') + s;
    }

    function fireConfetti() {
        if (typeof confetti !== 'function') return;
        const defaults = { origin: { y: 0.6 }, zIndex: 10000 };
        function fire(ratio, opts) {
            confetti({ ...defaults, ...opts, particleCount: Math.floor(180 * ratio) });
        }
        fire(0.25, { spread: 26, startVelocity: 55 });
        fire(0.2,  { spread: 60 });
        fire(0.35, { spread: 100, decay: 0.91, scalar: 0.9 });
        fire(0.1,  { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
        fire(0.1,  { spread: 120, startVelocity: 45 });
    }
})();
</script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
@endsection