@extends('layouts.app')
@section('title', 'Viewing: ' . $promotion->title)

@push('styles')
<style>
.timer-ring { position:relative; width:120px; height:120px; margin:0 auto; }
.timer-ring svg { transform:rotate(-90deg); }
.timer-ring .bg { fill:none; stroke:#E2E8F0; stroke-width:8; }
.timer-ring .fg { fill:none; stroke:var(--primary); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.timer-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.timer-num .secs { font-size:28px; font-weight:800; color:var(--text); }
.timer-num .lbl { font-size:10px; color:var(--text-muted); font-weight:600; }
.view-frame { width:100%; border:none; border-radius:12px; min-height:300px; background:#000; }
.earn-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:#166534; color:#fff; border-radius:20px; padding:28px 36px; text-align:center; z-index:9999; transition:.3s cubic-bezier(.34,1.56,.64,1); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.earn-popup.show { transform:translate(-50%,-50%) scale(1); }
</style>
@endpush

@section('content')

<div class="page-header">
    <h2>{{ $platform['icon'] }} Viewing Content</h2>
    <p>Stay on page to earn your points</p>
</div>

<div class="section">
    {{-- Platform badge --}}
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
        <div style="width:38px;height:38px;border-radius:10px;background:{{ $platform['color'] }}18;color:{{ $platform['color'] }};display:flex;align-items:center;justify-content:center;font-size:20px;">{{ $platform['icon'] }}</div>
        <div>
            <div style="font-weight:700;font-size:15px;">{{ $promotion->title }}</div>
            <div style="font-size:12px;color:var(--text-muted);">{{ $platform['label'] }} by {{ $promotion->user->name }}</div>
        </div>
    </div>

    {{-- Timer card --}}
    <div class="card card-body text-center" style="margin-bottom:16px;padding:24px 16px;">
        <div style="margin-bottom:12px;">
            <span style="font-size:13px;font-weight:600;color:var(--text-muted);">TIME REMAINING</span>
        </div>
        <div class="timer-ring">
            <svg width="120" height="120" viewBox="0 0 120 120">
                <circle class="bg" cx="60" cy="60" r="52"/>
                <circle class="fg" id="timer-arc" cx="60" cy="60" r="52"
                    stroke-dasharray="{{ round(2 * pi() * 52, 2) }}"
                    stroke-dashoffset="0"/>
            </svg>
            <div class="timer-num">
                <div class="secs" id="timer-secs">{{ $promotion->view_duration_seconds }}</div>
                <div class="lbl">seconds</div>
            </div>
        </div>
        <div style="margin-top:12px;">
            <div style="font-size:13px;color:var(--text-muted);">You'll earn</div>
            <div style="font-size:32px;font-weight:800;color:var(--primary);">+{{ $promotion->points_per_view }} pts</div>
            @if($promotion->points_per_read > $promotion->points_per_view)
            <div style="font-size:12px;color:var(--success);">Stay 30s+ for bonus +{{ $promotion->points_per_read }} pts!</div>
            @endif
        </div>

        <button id="open-btn" class="btn btn-primary btn-block btn-lg" style="margin-top:16px;" onclick="openContent()">
            <i class="fa fa-external-link"></i> Open Content & Start Timer
        </button>
        <div id="timer-status" style="display:none;margin-top:12px;font-size:13px;color:var(--text-muted);">
            <i class="fa fa-spinner fa-spin"></i> Timer running… keep this page open!
        </div>
    </div>

    {{-- Description --}}
    @if($promotion->description)
    <div class="card card-body" style="margin-bottom:12px;">
        <div style="font-weight:600;margin-bottom:6px;">About this content</div>
        <p style="font-size:13px;color:var(--text-muted);line-height:1.5;">{{ $promotion->description }}</p>
    </div>
    @endif

    {{-- Stats --}}
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;">
        <div class="card card-body text-center" style="padding:12px;">
            <div style="font-size:18px;font-weight:800;color:var(--primary);">{{ number_format($promotion->points_per_view) }}</div>
            <div style="font-size:10px;color:var(--text-muted);">pts per view</div>
        </div>
        <div class="card card-body text-center" style="padding:12px;">
            <div style="font-size:18px;font-weight:800;color:var(--text);">{{ $promotion->view_duration_seconds }}s</div>
            <div style="font-size:10px;color:var(--text-muted);">watch time</div>
        </div>
        <div class="card card-body text-center" style="padding:12px;">
            <div style="font-size:18px;font-weight:800;color:var(--text);">{{ number_format($promotion->total_views) }}</div>
            <div style="font-size:10px;color:var(--text-muted);">total views</div>
        </div>
    </div>
</div>

{{-- Earn Popup --}}
<div class="earn-popup" id="earn-popup">
    <div style="font-size:56px;margin-bottom:8px;">🎉</div>
    <div style="font-size:22px;font-weight:800;" id="earn-amount">+5 pts</div>
    <div style="font-size:14px;opacity:.9;margin-top:4px;">Points added to your wallet!</div>
    <button onclick="location.href='{{ route('promotions.browse') }}'" class="btn" style="background:rgba(255,255,255,.2);color:#fff;margin-top:16px;border:2px solid rgba(255,255,255,.3);">
        View More Content <i class="fa fa-arrow-right"></i>
    </button>
</div>
<div id="overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;"></div>

@endsection

@push('scripts')
<script>
const DURATION    = {{ $promotion->view_duration_seconds }};
const PROMO_ID    = {{ $promotion->id }};
const CIRCUMF     = {{ round(2 * pi() * 52, 2) }};
const PTS_VIEW    = {{ $promotion->points_per_view }};
const PTS_READ    = {{ $promotion->points_per_read ?? $promotion->points_per_view }};
const RECORD_URL  = '{{ route('promotions.view', $promotion) }}';
const CLICK_URL   = '{{ route('promotions.click', $promotion) }}';
const CONTENT_URL = '{{ $promotion->url }}';

let elapsed = 0, timer = null, started = false;

function openContent() {
    // Record click
    post(CLICK_URL);

    // Open content in new tab
    window.open(CONTENT_URL, '_blank');

    // Start timer
    document.getElementById('open-btn').style.display = 'none';
    document.getElementById('timer-status').style.display = 'block';
    started = true;

    timer = setInterval(() => {
        elapsed++;
        const remaining = Math.max(0, DURATION - elapsed);
        document.getElementById('timer-secs').textContent = remaining;

        // Update arc
        const progress = elapsed / DURATION;
        const offset   = CIRCUMF * (1 - Math.min(progress, 1));
        document.getElementById('timer-arc').style.strokeDashoffset = offset;

        if (elapsed >= DURATION) {
            clearInterval(timer);
            submitView();
        }
    }, 1000);
}

async function submitView() {
    document.getElementById('timer-secs').textContent = '✓';
    document.getElementById('timer-status').textContent = 'Claiming your points...';

    try {
        const r = await post(RECORD_URL, { duration: elapsed });
        if (r.success) {
            const earned = r.points_earned || PTS_VIEW;
            document.getElementById('earn-amount').textContent = `+${earned} pts`;
            document.getElementById('earn-popup').classList.add('show');
            document.getElementById('overlay').style.display = 'block';
        } else {
            document.getElementById('timer-status').textContent = r.error || 'Could not claim points.';
            document.getElementById('timer-status').style.color = 'var(--danger)';
        }
    } catch {
        document.getElementById('timer-status').textContent = 'Network error. Points may still be credited.';
    }
}

// Warn if user leaves before timer finishes
window.addEventListener('beforeunload', e => {
    if (started && elapsed < DURATION) {
        e.preventDefault();
        e.returnValue = 'Timer is still running. Leave and lose your points?';
    }
});
</script>
@endpush