<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Results Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: transparent;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        /* Debug indicator to verify CSS is loaded */
        body::before {
            content: 'Results Overlay v1.0 loaded';
            position: absolute;
            top: 5px;
            left: 5px;
            color: rgba(255,255,255,0.5);
            font-size: 10px;
            z-index: 9999;
        }
        
        .overlay-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .results-panel {
            background: rgba(0, 123, 255, 0.40);
            border-radius: 20px;
            padding: 50px;
            min-width: 600px;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            opacity: 0;
            transform: scale(0.5) rotate(-10deg);
            animation: dramaticEntrance 1.5s ease-out forwards;
            display: none; /* Initially hidden until data is available */
        }
        
        .results-title {
            color: white;
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            opacity: 0;
            animation: titleBounce 2s ease-out 0.5s forwards;
        }
        
        .outcome-display {
            background: rgba(255, 255, 255, 0.2);
            border: 3px solid rgba(255, 255, 255, 0.4);
            border-radius: 15px;
            padding: 40px 60px;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(50px);
            animation: outcomeSlideIn 1.5s ease-out 1s forwards;
        }
        
        .outcome-display::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                transparent, rgba(255, 255, 255, 0.3), transparent,
                rgba(255, 255, 255, 0.3), transparent);
            border-radius: 15px;
            animation: shimmer 2s ease-in-out infinite;
            z-index: -1;
        }
        
        .outcome-text {
            font-size: 72px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
            text-align: center;
            letter-spacing: 4px;
            animation: textPulse 2s ease-in-out infinite;
        }
        
        .match-info {
            color: rgba(255, 255, 255, 0.9);
            font-size: 18px;
            text-align: center;
            margin-top: 25px;
            opacity: 0;
            animation: fadeInUp 1s ease-out 1.5s forwards;
        }
        
        .match-number {
            font-weight: bold;
            font-size: 22px;
            color: #ffffff;
        }
        
        .fighters {
            margin: 10px 0;
            font-size: 20px;
            color: #e6f3ff;
        }
        
        .winning-fighter {
            margin: 5px 0;
            font-size: 22px;
            font-weight: bold;
            color: #ffff99;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }
        
        .venue {
            font-style: italic;
            color: #ccddff;
        }
        
        .celebration-effects {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: -1;
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0;
            animation: confettiFall 3s ease-out infinite;
        }
        
        .confetti:nth-child(odd) {
            background: rgba(255, 215, 0, 0.8);
            border-radius: 50%;
            animation-delay: 0.5s;
        }
        
        .confetti:nth-child(even) {
            background: rgba(255, 255, 255, 0.8);
            width: 8px;
            height: 12px;
            animation-delay: 1s;
        }
        
        .flash-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 20px;
            animation: flashEffect 0.5s ease-out 2s;
        }
        
        /* Outcome-specific styling */
        .outcome-win1 .outcome-display {
            border-color: rgba(40, 167, 69, 0.6);
            background: rgba(40, 167, 69, 0.2);
        }
        
        .outcome-win2 .outcome-display {
            border-color: rgba(220, 53, 69, 0.6);
            background: rgba(220, 53, 69, 0.2);
        }
        
        .outcome-draw .outcome-display {
            border-color: rgba(255, 193, 7, 0.6);
            background: rgba(255, 193, 7, 0.2);
        }
        
        .outcome-ko .outcome-display {
            border-color: rgba(220, 53, 69, 0.8);
            background: rgba(220, 53, 69, 0.3);
            animation: outcomeSlideIn 1.5s ease-out 1s forwards, koSpecial 0.5s ease-out 2.5s;
        }
        
        .outcome-pts .outcome-display {
            border-color: rgba(0, 123, 255, 0.6);
            background: rgba(0, 123, 255, 0.2);
        }
        
        .outcome-under .outcome-display {
            border-color: rgba(23, 162, 184, 0.6);
            background: rgba(23, 162, 184, 0.2);
        }
        
        .outcome-over .outcome-display {
            border-color: rgba(253, 126, 20, 0.6);
            background: rgba(253, 126, 20, 0.2);
        }
        
        /* Animations */
        @keyframes dramaticEntrance {
            0% {
                opacity: 0;
                transform: scale(0.5) rotate(-10deg);
            }
            50% {
                transform: scale(1.1) rotate(2deg);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }
        
        @keyframes titleBounce {
            0% {
                opacity: 0;
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(5px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes outcomeSlideIn {
            0% {
                opacity: 0;
                transform: translateY(50px) scale(0.8);
            }
            70% {
                transform: translateY(-10px) scale(1.05);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes textPulse {
            0%, 100% {
                transform: scale(1);
                text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
            }
            50% {
                transform: scale(1.05);
                text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);
            }
        }
        
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(200%);
            }
        }
        
        @keyframes confettiFall {
            0% {
                opacity: 1;
                transform: translateY(-100vh) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(100vh) rotate(360deg);
            }
        }
        
        @keyframes flashEffect {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 0.6;
            }
        }
        
        @keyframes koSpecial {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 30px rgba(220, 53, 69, 0.8);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .results-panel {
                padding: 40px;
                min-width: 500px;
                min-height: 300px;
            }
            
            .results-title {
                font-size: 30px;
            }
            
            .outcome-text {
                font-size: 60px;
            }
            
            .match-info {
                font-size: 16px;
            }
        }
        
        @media (max-width: 800px) {
            .results-panel {
                padding: 30px;
                min-width: 90%;
                min-height: 250px;
            }
            
            .results-title {
                font-size: 24px;
                margin-bottom: 20px;
            }
            
            .outcome-text {
                font-size: 48px;
                letter-spacing: 2px;
            }
            
            .outcome-display {
                padding: 30px 40px;
            }
            
            .match-info {
                font-size: 14px;
            }
            
            .match-number {
                font-size: 18px;
            }
            
            .fighters {
                font-size: 16px;
            }
        }
        
        /* Loading state styles */
        .loading-state {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 24px;
            font-weight: normal;
        }
        
        .loading-dots {
            display: inline-block;
            animation: loadingDots 1.5s infinite;
        }
        
        @keyframes loadingDots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }
        
        .loading-dots::after {
            content: '';
            animation: loadingDots 1.5s infinite;
        }
    </style>
</head>
<body>
    <div class="overlay-container">
        <!-- Always show results panel with default content -->
        <div class="results-panel" id="resultsPanel" style="display: flex;">
            <div class="celebration-effects" id="celebrationEffects">
                <!-- Confetti will be generated here -->
            </div>
            <div class="flash-effect"></div>
            
            <div class="results-title">MATCH RESULTS</div>
            
            <div class="outcome-display" id="outcomeDisplay">
                <div class="outcome-text" id="outcomeText">READY</div>
            </div>
            
            <div class="match-info" id="matchInfo">
                <div class="match-number">Match #<span id="matchNumber">--</span></div>
                <div class="fighters">
                    <span id="fighter1">Fighter 1</span> vs <span id="fighter2">Fighter 2</span>
                </div>
                <div class="winning-fighter" id="winningFighter" style="display: none;">
                    Winner: <span id="winnerName"></span>
                </div>
                <div class="venue">@ <span id="venue">Venue</span></div>
            </div>
        </div>
    </div>

    <script>
        // Global variables for overlay data handling
        let overlayData = {};
        let currentOutcome = 'WIN1';
        let currentMatch = null;
        
        // Outcome categories for styling
        const outcomeCategories = {
            'WIN1': 'win1',
            'WIN2': 'win2', 
            'X': 'draw',
            'DRAW': 'draw',
            'DKO': 'draw',
            'KO1': 'ko',
            'KO2': 'ko',
            'PTS1': 'pts',
            'PTS2': 'pts',
            'RET1': 'pts',
            'RET2': 'pts',
            'UNDER': 'under',
            'OVER': 'over'
        };
        
        // Function to update overlay data (called by Qt WebChannel)
        function updateOverlayData(data) {
            console.log('Received overlay data:', data);
            overlayData = data || {};
            
            // Only update if we have valid data
            if (data && (data.outcome || data.result)) {
                if (data.outcome) {
                    currentOutcome = data.outcome;
                } else if (data.result) {
                    currentOutcome = data.result;
                }
                
                if (data.match) {
                    currentMatch = data.match;
                }
                
                if (data.winning_fighter) {
                    winningFighter = data.winning_fighter;
                }
                
                // Show results panel and hide loading state
                showResultsPanel();
                updateResultsDisplay();
            } else {
                // No valid data, show loading state
                showLoadingState();
            }
        }
        
        // Show results panel (always visible now)
        function showResultsPanel() {
            const resultsPanel = document.getElementById('resultsPanel');
            resultsPanel.style.display = 'flex';
        }
        
        // Update the results display
        function updateResultsDisplay() {
            // Don't update if no valid outcome data
            if (!currentOutcome) {
                showLoadingState();
                return;
            }
            
            const outcomeText = document.getElementById('outcomeText');
            const resultsPanel = document.getElementById('resultsPanel');
            const matchNumber = document.getElementById('matchNumber');
            const fighter1 = document.getElementById('fighter1');
            const fighter2 = document.getElementById('fighter2');
            const venue = document.getElementById('venue');
            const winningFighterDiv = document.getElementById('winningFighter');
            const winnerName = document.getElementById('winnerName');
            
            // Update outcome text
            outcomeText.textContent = currentOutcome;
            
            // Apply outcome-specific styling
            const category = outcomeCategories[currentOutcome] || 'default';
            resultsPanel.className = `results-panel outcome-${category}`;
            
            // Update match info if available
            if (currentMatch) {
                matchNumber.textContent = currentMatch.match_number || '';
                fighter1.textContent = currentMatch.fighter1_township || '';
                fighter2.textContent = currentMatch.fighter2_township || '';
                venue.textContent = currentMatch.venue_kampala_township || '';
            }
            
            // Update winning fighter if available
            if (overlayData.winning_fighter) {
                winnerName.textContent = overlayData.winning_fighter;
                winningFighterDiv.style.display = 'block';
            } else {
                // Try to determine winner from outcome and fighter names
                if (currentOutcome === 'WIN1' && currentMatch && currentMatch.fighter1_township) {
                    winnerName.textContent = currentMatch.fighter1_township;
                    winningFighterDiv.style.display = 'block';
                } else if (currentOutcome === 'WIN2' && currentMatch && currentMatch.fighter2_township) {
                    winnerName.textContent = currentMatch.fighter2_township;
                    winningFighterDiv.style.display = 'block';
                } else if (currentOutcome.includes('1') && currentMatch && currentMatch.fighter1_township) {
                    winnerName.textContent = currentMatch.fighter1_township;
                    winningFighterDiv.style.display = 'block';
                } else if (currentOutcome.includes('2') && currentMatch && currentMatch.fighter2_township) {
                    winnerName.textContent = currentMatch.fighter2_township;
                    winningFighterDiv.style.display = 'block';
                } else {
                    winningFighterDiv.style.display = 'none';
                }
            }
            
            // Generate confetti effects
            generateConfetti();
            
            // Restart animations
            restartAnimations();
        }
        
        // Generate confetti effects
        function generateConfetti() {
            const celebrationEffects = document.getElementById('celebrationEffects');
            celebrationEffects.innerHTML = '';
            
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.animationDelay = Math.random() * 3 + 's';
                confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
                celebrationEffects.appendChild(confetti);
            }
        }
        
        // Restart animations
        function restartAnimations() {
            const resultsPanel = document.getElementById('resultsPanel');
            
            // Reset animations by removing and re-adding classes
            resultsPanel.style.animation = 'none';
            resultsPanel.offsetHeight; // Trigger reflow
            resultsPanel.style.animation = null;
        }
        
        // Set outcome for testing/demo
        function setOutcome(outcome, matchData = null) {
            if (outcome) {
                currentOutcome = outcome;
                if (matchData) {
                    currentMatch = matchData;
                }
                showResultsPanel();
                updateResultsDisplay();
            } else {
                showLoadingState();
            }
        }
        
        // Initialize when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Results overlay initialized');
            
            // Always show results panel with default content
            showResultsPanel();
        });
        
        // Qt WebChannel initialization (when available)
        if (typeof QWebChannel !== 'undefined') {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                console.log('WebChannel initialized for results overlay');
                
                // Connect to overlay object if available
                if (channel.objects.overlay) {
                    channel.objects.overlay.dataChanged.connect(function(data) {
                        updateOverlayData(data);
                    });
                    
                    // Get initial data
                    if (channel.objects.overlay.getCurrentData) {
                        channel.objects.overlay.getCurrentData(function(data) {
                            updateOverlayData(data);
                        });
                    }
                }
            });
        }
        
        // Export functions for external use
        window.setOutcome = setOutcome;
        window.updateOverlayData = updateOverlayData;
    </script>

    <!--
    IMPORTANT: When creating or editing custom templates, always maintain these two script tags:
    1. qrc:///qtwebchannel/qwebchannel.js - Required for Qt WebChannel communication
    2. overlay://overlay.js - Required for overlay functionality and data updates
    
    These scripts enable communication between the Qt application and the overlay template.
    Without them, the template will not receive data updates or function properly.
    
    NOTE: When editing this template or creating new ones, never remove these script sources!
    The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
    -->
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script src="overlay://overlay.js"></script>
</body>
</html>