@extends('core::layouts.master')

@section('title', $game['name'] . ' - ASETQU V.2')
@section('meta_description', $game['description'] ?? 'Mainkan ' . $game['name'] . ' dan dapatkan koin ASQ!')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/games.css') }}">
<style>
/* Game Play Page Styles */
.game-play-container {
    min-height: 80vh;
    padding: 40px 0;
    margin-top: 80px;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.game-play-header {
    text-align: center;
    margin-bottom: 32px;
}

.game-play-header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--cyan-primary);
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
    margin-bottom: 8px;
}

.game-play-header .game-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Session Info Banner */
.session-info-banner {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.session-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.session-stat i {
    font-size: 1.5rem;
    color: var(--cyan-primary);
}

.session-stat .stat-content {
    text-align: left;
}

.session-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
}

.session-stat .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.session-stat .stat-value.gold { color: #f59e0b; }
.session-stat .stat-value.cyan { color: var(--cyan-primary); }
.session-stat .stat-value.green { color: #10b981; }

/* Game Frame Container */
.game-frame-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(26, 23, 48, 0.8);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.2);
}

.game-frame-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
}

.game-frame-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 600;
}

.game-frame-controls {
    display: flex;
    gap: 8px;
}

.frame-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.game-iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #0a0812;
}

.game-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Loading Overlay */
.game-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 11, 26, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.game-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(139, 92, 246, 0.2);
    border-top-color: var(--purple-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Error State */
.game-error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 11, 26, 0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-align: center;
    padding: 20px;
}

.game-error-overlay.show {
    display: flex;
}

.error-icon {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 16px;
}

.error-title {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.error-message {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.btn-retry {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Game Status Bar */
.game-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(26, 23, 48, 0.6);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.status-left, .status-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-item i {
    color: var(--cyan-primary);
}

.status-item span {
    color: var(--text-primary);
    font-weight: 500;
}

.status-item .score-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f59e0b;
}

.status-item .score-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
    min-width: 60px;
    text-align: center;
}

/* Level Input Group */
.level-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    margin-right: 12px;
}

.level-input-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.level-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.level-input {
    width: 70px;
    padding: 8px 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.level-input:focus {
    outline: none;
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.2);
}

.btn-level-ctrl {
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 6px;
    color: #8b5cf6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-level-ctrl:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: #8b5cf6;
}

.level-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.play-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #f59e0b;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.play-timer.ready {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.btn-submit-score {
    padding: 10px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-submit-score:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-submit-score:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Back Button */
.back-section {
    text-align: center;
    margin-top: 32px;
}

.btn-back-games {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--purple-primary);
    border-radius: 25px;
    color: var(--purple-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back-games:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple-primary);
}

/* Result Modal */
.result-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.result-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.result-modal {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.result-modal-overlay.show .result-modal {
    transform: scale(1) translateY(0);
}

.result-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 3rem;
    animation: iconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

@keyframes iconPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.result-icon.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.3) 100%);
    color: #10b981;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.result-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
    color: #f59e0b;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

.result-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: rgba(139, 92, 246, 0.2);
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 16px;
    animation: scoreReveal 0.6s ease 0.3s backwards;
}

@keyframes scoreReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.result-score i {
    font-size: 2.5rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

.result-score .score-number {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 15px rgba(139, 92, 246, 0.8);
}

.result-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #10b981;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 32px;
    padding: 12px 24px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 12px;
    animation: rewardBounce 0.6s ease 0.5s backwards;
}

@keyframes rewardBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.result-reward i {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    animation: actionsFade 0.4s ease 0.6s backwards;
}

@keyframes actionsFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-play-again, .btn-close-result {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-play-again {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.btn-play-again:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
}

.btn-close-result {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-close-result:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .session-info-banner {
        gap: 12px;
    }

    .session-stat {
        padding: 10px 16px;
        flex: 1;
        min-width: calc(50% - 6px);
    }

    .game-status-bar {
        flex-direction: column;
        gap: 16px;
    }

    .status-left, .status-right {
        width: 100%;
        justify-content: center;
    }
}
</style>
@endpush

@section('content')
<div class="game-play-container">
    <div class="container">
        {{-- Header --}}
        <div class="game-play-header" data-aos="fade-up">
            <h1>{{ strtoupper($game['name']) }}</h1>
            @if($game['description'])
                <p class="game-description">{{ $game['description'] }}</p>
            @endif
        </div>

        {{-- Session Info --}}
        <div class="session-info-banner" data-aos="fade-up" data-aos-delay="100">
            <div class="session-stat">
                <i class="fas fa-coins"></i>
                <div class="stat-content">
                    <span class="stat-label">Reward</span>
                    <span class="stat-value gold">{{ $game['point_reward'] }} Poin</span>
                </div>
            </div>
            <div class="session-stat">
                <i class="fas fa-calendar-day"></i>
                <div class="stat-content">
                    <span class="stat-label">Sisa Main Hari Ini</span>
                    <span class="stat-value cyan" id="remainingPlays">{{ $remainingPlays ?? $game['daily_limit'] }}</span>
                </div>
            </div>
            <div class="session-stat">
                <i class="fas fa-trophy"></i>
                <div class="stat-content">
                    <span class="stat-label">Range Score</span>
                    <span class="stat-value">{{ $game['min_score'] }} - {{ $game['max_score'] }}</span>
                </div>
            </div>
        </div>

        {{-- Game Frame --}}
        <div class="game-frame-container" data-aos="fade-up" data-aos-delay="200">
            <div class="game-frame-header">
                <div class="game-frame-title">
                    <i class="fas fa-gamepad"></i>
                    <span>{{ $game['name'] }}</span>
                </div>
                <div class="game-frame-controls">
                    <button type="button" class="frame-control-btn" id="btnFullscreen" title="Fullscreen">
                        <i class="fas fa-expand"></i>
                    </button>
                    <button type="button" class="frame-control-btn" id="btnRefresh" title="Refresh">
                        <i class="fas fa-redo"></i>
                    </button>
                </div>
            </div>

            <div class="game-iframe-wrapper">
                {{-- Loading Overlay --}}
                <div class="game-loading-overlay" id="gameLoading">
                    <div class="loading-spinner"></div>
                    <span class="loading-text">Memuat game...</span>
                </div>

                {{-- Error Overlay --}}
                <div class="game-error-overlay" id="gameError">
                    <i class="fas fa-exclamation-triangle error-icon"></i>
                    <h3 class="error-title">Gagal Memuat Game</h3>
                    <p class="error-message" id="errorMessage">Terjadi kesalahan saat memuat game.</p>
                    <button type="button" class="btn-retry" onclick="loadGame()">
                        <i class="fas fa-redo"></i> Coba Lagi
                    </button>
                </div>

                {{-- Game Iframe --}}
                <iframe 
                    id="gameFrame"
                    class="game-iframe"
                    sandbox="allow-scripts allow-same-origin allow-pointer-lock"
                    allowfullscreen
                ></iframe>
            </div>

            {{-- Status Bar --}}
            <div class="game-status-bar">
                <div class="status-left">
                    <div class="status-item">
                        <i class="fas fa-trophy"></i>
                        <span>Score:</span>
                        <span class="score-value" id="currentScore">0</span>
                    </div>
                    <div class="status-item">
                        <i class="fas fa-clock"></i>
                        <span>Status:</span>
                        <span id="sessionStatus">Menunggu...</span>
                    </div>
                </div>
                <div class="status-right">
                    {{-- Score Input (shown when auto-score not detected) --}}
                    <div class="level-input-group" id="scoreInputGroup" style="display: none;">
                        <label for="scoreInput">
                            <i class="fas fa-star"></i>
                            Score:
                        </label>
                        <div class="level-controls">
                            <button type="button" class="btn-level-ctrl" onclick="adjustScore(-1)">
                                <i class="fas fa-minus"></i>
                            </button>
                            <input type="number" 
                                   id="scoreInput" 
                                   class="level-input" 
                                   value="0" 
                                   min="0" 
                                   max="100"
                                   step="1"
                                   onchange="updateScoreFromInput()">
                            <button type="button" class="btn-level-ctrl" onclick="adjustScore(1)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <small class="level-hint">Maksimal 100 score</small>
                        <div class="play-timer" id="playTimer" style="display: none;">
                            <i class="fas fa-hourglass-half"></i>
                            <span id="timerText">Tunggu 30 detik...</span>
                        </div>
                    </div>
                    
                    <button type="button" class="btn-submit-score" id="btnSubmitScore" disabled>
                        <i class="fas fa-paper-plane"></i>
                        Kirim Score
                    </button>
                </div>
            </div>
        </div>

        {{-- Back Button --}}
        <div class="back-section">
            <a href="{{ route('game.index') }}" class="btn-back-games">
                <i class="fas fa-arrow-left"></i>
                Kembali ke Daftar Game
            </a>
        </div>
    </div>
</div>

{{-- Result Modal --}}
<div class="result-modal-overlay" id="resultModal">
    <div class="result-modal">
        <div class="result-icon success" id="resultIcon">
            <i class="fas fa-check"></i>
        </div>
        <h3 class="result-title" id="resultTitle">Selamat!</h3>
        <div class="result-score">
            <i class="fas fa-trophy"></i>
            <span class="score-number" id="finalScore">0</span>
        </div>
        <div class="result-reward" id="resultReward">
            <i class="fas fa-coins"></i>
            <span>+{{ $game['point_reward'] }} Poin</span>
        </div>
        <div class="result-actions">
            <button type="button" class="btn-play-again" onclick="playAgain()">
                <i class="fas fa-redo"></i> Main Lagi
            </button>
            <button type="button" class="btn-close-result" onclick="closeResultModal()">
                Tutup
            </button>
        </div>
    </div>
</div>

{{-- Refresh Confirmation Modal --}}
<div class="result-modal-overlay" id="refreshModal">
    <div class="result-modal">
        <div class="result-icon warning">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3 class="result-title">Refresh Game?</h3>
        <p style="color: rgba(255,255,255,0.7); margin: 16px 0 32px; font-size: 1rem;">Refresh akan me-reset progress game dan memulai sesi baru.</p>
        <div class="result-actions">
            <button type="button" class="btn-play-again" onclick="confirmRefresh()">
                <i class="fas fa-redo"></i> Ya, Refresh
            </button>
            <button type="button" class="btn-close-result" onclick="closeRefreshModal()">
                Batal
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Game SDK --}}
<script src="{{ asset('js/game-sdk.js') }}"></script>
<script>
// Game Configuration
const gameConfig = {
    gameId: {{ $game['id'] }},
    gameSlug: '{{ $game['slug'] }}',
    gameUrl: '{{ asset("storage/games/" . $game['slug'] . "/index.html") }}',
    sessionToken: '{{ $session->session_token ?? '' }}',
    sessionId: {{ $session->id ?? 'null' }},
    minScore: {{ $game['min_score'] }},
    maxScore: {{ $game['max_score'] }},
    pointReward: {{ $game['point_reward'] }},
    csrfToken: '{{ csrf_token() }}'
};

// DOM Elements
const gameFrame = document.getElementById('gameFrame');
const gameLoading = document.getElementById('gameLoading');
const gameError = document.getElementById('gameError');
const errorMessage = document.getElementById('errorMessage');
const currentScoreEl = document.getElementById('currentScore');
const sessionStatusEl = document.getElementById('sessionStatus');
const btnSubmitScore = document.getElementById('btnSubmitScore');
const resultModal = document.getElementById('resultModal');

// Game State
let currentScore = 0;
let sessionActive = false;
let gameLoaded = false;

// Load Game
async function loadGame() {
    // Reset states
    gameLoaded = false;
    sessionActive = false;
    autoScoreDetected = false;
    if (scoreDetectionTimer) {
        clearTimeout(scoreDetectionTimer);
        scoreDetectionTimer = null;
    }
    
    // Clear iframe
    gameFrame.src = 'about:blank';
    
    // Show loading
    gameError.classList.remove('show');
    gameLoading.classList.remove('hidden');
    sessionStatusEl.textContent = 'Memuat...';
    sessionStatusEl.style.color = '#f59e0b';
    
    // Hide score input if shown
    const scoreInputGroup = document.getElementById('scoreInputGroup');
    if (scoreInputGroup) {
        scoreInputGroup.style.display = 'none';
    }
    
    try {
        // Abandon current session if exists
        if (gameConfig.sessionId) {
            sessionStatusEl.textContent = 'Menutup sesi lama...';
            await abandonSession(gameConfig.sessionId);
        }
        
        // Start new session
        sessionStatusEl.textContent = 'Memulai sesi baru...';
        const sessionData = await startSession();
        
        if (sessionData) {
            // Handle different response formats
            const session = sessionData.session || sessionData;
            gameConfig.sessionToken = session.session_token;
            gameConfig.sessionId = session.session_id || session.id;
            
            // Load game iframe with session token
            sessionStatusEl.textContent = 'Memuat game...';
            const gameUrlWithToken = gameConfig.gameUrl + '?token=' + session.session_token;
            gameFrame.src = gameUrlWithToken;
            
            gameFrame.onload = () => {
                gameLoading.classList.add('hidden');
                gameLoaded = true;
                sessionActive = true;
                sessionStatusEl.textContent = 'Bermain';
                sessionStatusEl.style.color = '#10b981';
                
                // Send init message to game
                sendToGame('GAME_INIT', {
                    sessionToken: gameConfig.sessionToken,
                    minScore: gameConfig.minScore,
                    maxScore: gameConfig.maxScore
                });
            };
            
            gameFrame.onerror = () => {
                showError('Gagal memuat file game');
            };
        }
    } catch (error) {
        showError(error.message || 'Gagal memulai sesi game');
    }
}

// Start Game Session
async function startSession() {
    try {
        const response = await fetch('/api/v1/games/{{ $game['slug'] }}/start', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': gameConfig.csrfToken,
                'Accept': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.error || data.message || 'Gagal memulai sesi');
        }
        
        // API returns data.data.session or data.session
        return data.data || data.session || data;
    } catch (error) {
        throw error;
    }
}

// Abandon current session
async function abandonSession(sessionId) {
    if (!sessionId) return;
    
    try {
        const response = await fetch(`/api/v1/sessions/${sessionId}/abandon`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': gameConfig.csrfToken,
                'Accept': 'application/json'
            }
        });
        
        const data = await response.json();
        return data.success;
    } catch (error) {
        console.error('Failed to abandon session:', error);
        return false;
    }
}

// Send message to game iframe
function sendToGame(type, payload) {
    try {
        gameFrame.contentWindow.postMessage({ type, payload }, '*');
    } catch (error) {
        console.error('Failed to send message to game:', error);
    }
}

// Score-based scoring
const MAX_SCORE = 100;
const MIN_PLAY_TIME = 30; // Minimal 30 detik bermain
const SCORE_COOLDOWN = 2; // 2 detik per score adjustment
let autoScoreDetected = false;
let scoreDetectionTimer = null;
let playStartTime = null;
let lastScoreChangeTime = null;
let manualScore = 0;

function showScoreInput() {
    document.getElementById('scoreInputGroup').style.display = 'flex';
    playStartTime = Date.now(); // Record start time
    lastScoreChangeTime = Date.now();
    
    // Show timer
    const timerEl = document.getElementById('playTimer');
    if (timerEl) {
        timerEl.style.display = 'flex';
        updatePlayTimer();
    }
}

function updatePlayTimer() {
    const timerEl = document.getElementById('playTimer');
    const timerText = document.getElementById('timerText');
    
    if (!playStartTime || !timerEl || !timerText) return;
    
    const elapsed = (Date.now() - playStartTime) / 1000;
    const remaining = Math.max(0, MIN_PLAY_TIME - elapsed);
    
    if (remaining > 0) {
        timerText.textContent = `Tunggu ${Math.ceil(remaining)} detik...`;
        timerEl.classList.remove('ready');
        setTimeout(updatePlayTimer, 1000);
    } else {
        timerText.textContent = 'Siap submit!';
        timerEl.classList.add('ready');
    }
}

function hideScoreInput() {
    document.getElementById('scoreInputGroup').style.display = 'none';
}

function adjustScore(delta) {
    const scoreInput = document.getElementById('scoreInput');
    const oldValue = parseInt(scoreInput.value) || 0;
    const newValue = Math.max(0, Math.min(MAX_SCORE, oldValue + delta));
    
    // Check cooldown if increasing score
    if (delta > 0 && newValue > manualScore) {
        const timeSinceLastChange = (Date.now() - lastScoreChangeTime) / 1000;
        if (timeSinceLastChange < SCORE_COOLDOWN) {
            const remaining = Math.ceil(SCORE_COOLDOWN - timeSinceLastChange);
            Swal.fire({
                icon: 'warning',
                title: 'Tunggu Sebentar',
                text: `Tunggu ${remaining} detik lagi sebelum menambah score`,
                confirmButtonColor: '#8b5cf6',
                timer: 2000
            });
            return;
        }
        lastScoreChangeTime = Date.now();
    }
    
    scoreInput.value = newValue;
    manualScore = newValue;
    updateScoreFromInput();
}

function updateScoreFromInput() {
    const score = parseInt(document.getElementById('scoreInput').value) || 0;
    updateScore(Math.min(MAX_SCORE, score));
}

function validatePlayTime() {
    if (!playStartTime) return true; // Auto-score, no validation needed
    
    const playDuration = (Date.now() - playStartTime) / 1000;
    
    if (playDuration < MIN_PLAY_TIME) {
        const remaining = Math.ceil(MIN_PLAY_TIME - playDuration);
        Swal.fire({
            icon: 'warning',
            title: 'Main Terlalu Cepat',
            text: `Minimal waktu bermain: ${MIN_PLAY_TIME} detik. Tunggu ${remaining} detik lagi.`,
            confirmButtonColor: '#8b5cf6'
        });
        return false;
    }
    
    return true;
}

function startAutoScoreDetection() {
    scoreDetectionTimer = setTimeout(() => {
        if (!autoScoreDetected) {
            console.log('[Game] No auto-score, showing score input');
            showScoreInput();
        }
    }, 5000);
}

// Listen for messages from iframe
window.addEventListener('message', (event) => {
    const { type, payload } = event.data || {};
    
    switch (type) {
        case 'SCORE_UPDATE':
            if (payload && typeof payload.score === 'number') {
                autoScoreDetected = true;
                hideScoreInput();
                if (scoreDetectionTimer) clearTimeout(scoreDetectionTimer);
                updateScore(payload.score);
            }
            break;
            
        case 'GAME_END':
            handleGameEnd(payload);
            break;
            
        case 'GAME_READY':
            startAutoScoreDetection();
            break;
    }
});

// Update score function (callable from postMessage)
function updateScore(score) {
    const numScore = parseInt(score) || 0;
    currentScore = Math.min(Math.max(numScore, gameConfig.minScore), gameConfig.maxScore);
    currentScoreEl.textContent = currentScore;
    
    // Enable submit button if score > 0
    if (currentScore > 0) {
        btnSubmitScore.disabled = false;
        sessionStatusEl.textContent = 'Bermain';
        sessionStatusEl.style.color = '#10b981';
    }
}

// Auto-monitor score from Construct 3 games (legacy - now using bridge)
function startScoreMonitoring() {
    // Monitoring now handled by injected bridge script
    startAutoScoreDetection();
}

// Handle Game End
function handleGameEnd(data) {
    sessionActive = false;
    btnSubmitScore.disabled = false;
    sessionStatusEl.textContent = 'Selesai';
    sessionStatusEl.style.color = '#f59e0b';
    
    if (data && data.score !== undefined) {
        updateScore(data.score);
    }
}

// Submit Score
btnSubmitScore.addEventListener('click', async () => {
    if (!gameConfig.sessionId) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Sesi game tidak valid',
            confirmButtonColor: '#8b5cf6'
        });
        return;
    }
    
    // Validate play time if using manual score input
    if (!validatePlayTime()) {
        return;
    }
    
    btnSubmitScore.disabled = true;
    btnSubmitScore.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengirim...';
    
    try {
        const response = await fetch('/api/v1/sessions/' + gameConfig.sessionId + '/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': gameConfig.csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                score: currentScore,
                session_token: gameConfig.sessionToken
            })
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.message || 'Gagal mengirim score');
        }
        
        // Show result modal
        showResult(data);
        
        // Update remaining plays
        const remainingEl = document.getElementById('remainingPlays');
        if (remainingEl && data.remaining_plays !== undefined) {
            remainingEl.textContent = data.remaining_plays;
        }
        
    } catch (error) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: error.message || 'Gagal mengirim score',
            confirmButtonColor: '#8b5cf6'
        });
        btnSubmitScore.disabled = false;
        btnSubmitScore.innerHTML = '<i class="fas fa-paper-plane"></i> Kirim Score';
    }
});

// Show Result Modal
function showResult(data) {
    document.getElementById('finalScore').textContent = currentScore;
    
    if (data.points_earned > 0) {
        document.getElementById('resultIcon').classList.remove('warning');
        document.getElementById('resultIcon').classList.add('success');
        document.getElementById('resultIcon').innerHTML = '<i class="fas fa-check"></i>';
        document.getElementById('resultTitle').textContent = 'Selamat!';
        document.getElementById('resultReward').style.display = 'flex';
        document.getElementById('resultReward').querySelector('span').textContent = '+' + data.points_earned + ' Poin';
    } else {
        document.getElementById('resultIcon').classList.remove('success');
        document.getElementById('resultIcon').classList.add('warning');
        document.getElementById('resultIcon').innerHTML = '<i class="fas fa-exclamation"></i>';
        document.getElementById('resultTitle').textContent = 'Game Selesai';
        document.getElementById('resultReward').style.display = 'none';
    }
    
    resultModal.classList.add('show');
}

// Close Result Modal
function closeResultModal() {
    resultModal.classList.remove('show');
    // Reset tombol submit score
    btnSubmitScore.disabled = true;
    btnSubmitScore.innerHTML = '<i class="fas fa-paper-plane"></i> Kirim Score';
}

// Play Again
function playAgain() {
    closeResultModal();
    
    // Reset all scores and states
    currentScore = 0;
    manualScore = 0;
    currentScoreEl.textContent = '0';
    
    // Reset button
    btnSubmitScore.disabled = true;
    btnSubmitScore.innerHTML = '<i class="fas fa-paper-plane"></i> Kirim Score';
    
    // Reset timer states
    playStartTime = null;
    lastScoreChangeTime = null;
    
    // Reset score input if exists
    const scoreInput = document.getElementById('scoreInput');
    if (scoreInput) {
        scoreInput.value = 0;
    }
    
    // Load new game
    loadGame();
}

// Show Error
function showError(message) {
    gameLoading.classList.add('hidden');
    errorMessage.textContent = message;
    gameError.classList.add('show');
    sessionStatusEl.textContent = 'Error';
    sessionStatusEl.style.color = '#ef4444';
}

// Fullscreen
document.getElementById('btnFullscreen').addEventListener('click', () => {
    if (gameFrame.requestFullscreen) {
        gameFrame.requestFullscreen();
    } else if (gameFrame.webkitRequestFullscreen) {
        gameFrame.webkitRequestFullscreen();
    }
});

// Refresh
const refreshModal = document.getElementById('refreshModal');

document.getElementById('btnRefresh').addEventListener('click', () => {
    refreshModal.classList.add('show');
});

function closeRefreshModal() {
    refreshModal.classList.remove('show');
}

function confirmRefresh() {
    closeRefreshModal();
    playAgain();
}

// Close modal on click outside
resultModal.addEventListener('click', (e) => {
    if (e.target === resultModal) {
        closeResultModal();
    }
});

refreshModal.addEventListener('click', (e) => {
    if (e.target === refreshModal) {
        closeRefreshModal();
    }
});

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    @if($session ?? false)
        // Session already started from controller
        sessionStatusEl.textContent = 'Memuat...';
        
        const gameUrlWithToken = gameConfig.gameUrl + '?token=' + gameConfig.sessionToken;
        gameFrame.src = gameUrlWithToken;
        
        gameFrame.onload = () => {
            gameLoading.classList.add('hidden');
            gameLoaded = true;
            sessionActive = true;
            sessionStatusEl.textContent = 'Bermain';
            sessionStatusEl.style.color = '#10b981';
            
            sendToGame('GAME_INIT', {
                sessionToken: gameConfig.sessionToken,
                minScore: gameConfig.minScore,
                maxScore: gameConfig.maxScore
            });
        };
        
        gameFrame.onerror = () => {
            showError('Gagal memuat file game');
        };
    @else
        // Need to start session first
        loadGame();
    @endif
});
</script>
@endpush