<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MBetther system</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: 'Text Message Overlay v1.0 loaded';
            position: absolute;
            top: 5px;
            left: 5px;
            color: rgba(255,255,255,0.5);
            font-size: 10px;
            z-index: 9999;
        }

        /* License Top Bar */
        .license-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(0, 123, 255, 0.40);
            border-radius: 0 0 20px 20px;
            padding: 15px 30px;
            text-align: center;
            z-index: 1000;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-top: none;
        }

        .license-text {
            color: rgba(255, 255, 255, 0.95);
            font-size: 16px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
            line-height: 1.4;
            word-wrap: break-word;
        }
        
        .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;
        }
        
        .message-panel {
            background: rgba(0, 123, 255, 0.40);
            border-radius: 20px;
            padding: 40px 60px;
            min-width: 500px;
            max-width: 80%;
            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.2);
            opacity: 0;
            transform: translateY(-30px);
            animation: slideInDown 1s ease-out forwards;
        }
        
        .message-title {
            color: #ffffff;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            opacity: 0;
            animation: titleFadeIn 1.5s ease-out 0.5s forwards;
        }
        
        .message-content {
            color: rgba(255, 255, 255, 0.95);
            font-size: 20px;
            text-align: center;
            line-height: 1.6;
            max-width: 100%;
            word-wrap: break-word;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
            opacity: 0;
            animation: contentFadeIn 1.5s ease-out 1s forwards;
        }
        
        .message-icon {
            font-size: 48px;
            color: #ffffff;
            margin-bottom: 20px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            opacity: 0;
            animation: iconBounce 2s ease-out 0.2s forwards;
        }
        
        /* Animations */
        @keyframes slideInDown {
            0% {
                opacity: 0;
                transform: translateY(-50px) scale(0.8);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes titleFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes contentFadeIn {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes iconBounce {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Background effects */
        .message-panel::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                transparent, rgba(255, 255, 255, 0.2), transparent,
                rgba(255, 255, 255, 0.2), transparent);
            border-radius: 20px;
            animation: shimmer 3s ease-in-out infinite;
            z-index: -1;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(200%);
            }
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .message-panel {
                padding: 30px 50px;
                min-width: 400px;
            }
            
            .message-title {
                font-size: 28px;
            }
            
            .message-content {
                font-size: 18px;
            }
            
            .message-icon {
                font-size: 40px;
            }
        }
        
        @media (max-width: 800px) {
            .message-panel {
                padding: 25px 35px;
                min-width: 90%;
                max-width: 95%;
            }
            
            .message-title {
                font-size: 24px;
                margin-bottom: 15px;
            }
            
            .message-content {
                font-size: 16px;
                line-height: 1.5;
            }
            
            .message-icon {
                font-size: 36px;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- License Top Bar -->
    <div class="license-bar" id="licenseBar">
        <div class="license-text" id="licenseText">Loading license text...</div>
    </div>

    <div class="overlay-container">
        <div class="message-panel" id="messagePanel">
            <div class="message-icon" id="messageIcon">📢</div>
            <div class="message-title" id="messageTitle">Townships Combat League</div>
            <div class="message-content" id="messageContent">Waiting for game to start....</div>
        </div>
    </div>

    <script>
        // Global variables for overlay data handling
        let overlayData = {};
        let currentTitle = 'Townships Combat League:';
        let currentMessage = 'Waiting for game to start...';
        let currentIcon = '🥊';
        let licenseText = 'Loading license text...';
        let licenseTextFromData = '';
        
        // Function to update overlay data (called by Qt WebChannel)
        function updateOverlayData(data) {
            console.log('Received text overlay data:', data);
            overlayData = data || {};

            let contentChanged = false;

            if (data && data.title && data.title !== currentTitle) {
                currentTitle = data.title;
                contentChanged = true;
            }

            if (data && data.message && data.message !== currentMessage) {
                currentMessage = data.message;
                contentChanged = true;
            }

            if (data && data.icon && data.icon !== currentIcon) {
                currentIcon = data.icon;
                contentChanged = true;
            }

            // Handle license text from overlay data
            if (data && data.license_text) {
                licenseTextFromData = data.license_text;
                licenseText = licenseTextFromData;
                updateLicenseDisplay();
            }

            // Only update message display and restart animations if content actually changed
            if (contentChanged) {
                updateMessageDisplay();
            }
        }
        
        // Update the message display
        function updateMessageDisplay() {
            const titleElement = document.getElementById('messageTitle');
            const contentElement = document.getElementById('messageContent');
            const iconElement = document.getElementById('messageIcon');

            // Update content
            titleElement.textContent = currentTitle;
            contentElement.textContent = currentMessage;
            iconElement.textContent = currentIcon;

            // Restart animations
            restartAnimations();
        }

        // Fetch license text from WebChannel
        async function fetchLicenseText() {
            try {
                // Only fetch from WebChannel if we don't have license text from overlay data yet
                if (!licenseTextFromData || licenseTextFromData.trim() === '') {
                    // Try to get license text from Qt WebChannel
                    if (window.overlay && window.overlay.getLicenseText) {
                        const licenseTextData = await window.overlay.getLicenseText();
                        if (licenseTextData) {
                            // Parse the JSON response to extract license_text
                            try {
                                const licenseData = JSON.parse(licenseTextData);
                                if (licenseData.license_text) {
                                    licenseText = licenseData.license_text;
                                    updateLicenseDisplay();
                                    console.log('License text loaded from WebChannel:', licenseText);
                                } else {
                                    console.log('No license_text found in WebChannel response');
                                }
                            } catch (parseError) {
                                console.log('Failed to parse license text JSON from WebChannel:', parseError);
                                // Keep default text if parsing fails
                            }
                        }
                    }
                }
            } catch (error) {
                console.log('Could not fetch license text from WebChannel, using default');
                // Keep default text if WebChannel is not available
            }
        }

        // Update license text display
        function updateLicenseDisplay() {
            const licenseBar = document.getElementById('licenseBar');
            const licenseElement = document.getElementById('licenseText');

            if (licenseElement && licenseBar) {
                if (licenseText && licenseText.trim() !== '') {
                    licenseElement.textContent = licenseText;
                    licenseBar.style.display = 'block';
                } else {
                    licenseBar.style.display = 'none';
                }
            }
        }
        
        // Restart animations
        function restartAnimations() {
            const messagePanel = document.getElementById('messagePanel');
            
            // Reset animations by removing and re-adding classes
            messagePanel.style.animation = 'none';
            messagePanel.offsetHeight; // Trigger reflow
            messagePanel.style.animation = null;
        }
        
        // Set message for testing/demo
        function setMessage(title, message, icon = '📢') {
            currentTitle = title;
            currentMessage = message;
            currentIcon = icon;
            updateMessageDisplay();
        }
        
        // Initialize when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Text message overlay initialized');
            updateMessageDisplay();

            // Setup WebChannel communication
            setupWebChannel();
        });

        // Setup WebChannel communication
        function setupWebChannel() {
            // Check if WebChannel is already set up by overlay.js
            if (window.overlay) {
                console.log('WebChannel already set up by overlay.js');

                // Listen for data updates from Python
                if (window.overlay.dataUpdated) {
                    window.overlay.dataUpdated.connect(function(data) {
                        console.log('Received data update from Python:', data);
                        updateOverlayData(data);
                    });
                }

                // Wait for WebChannel to be ready before fetching license text
                waitForWebChannelReady(() => {
                    fetchLicenseText(); // Fetch license text now that WebChannel is ready
                });
                return;
            }

            // Fallback: setup WebChannel if overlay.js didn't do it
            if (typeof qt !== 'undefined' && qt.webChannelTransport) {
                try {
                    new QWebChannel(qt.webChannelTransport, function(channel) {
                        console.log('WebChannel connected successfully (fallback)');

                        // Connect to overlay object
                        window.overlay = channel.objects.overlay;

                        // Listen for data updates from Python
                        if (window.overlay && window.overlay.dataUpdated) {
                            window.overlay.dataUpdated.connect(function(data) {
                                console.log('Received data update from Python (fallback):', data);
                                updateOverlayData(data);
                            });
                        }

                        // Wait for WebChannel to be ready before fetching license text
                        waitForWebChannelReady(() => {
                            fetchLicenseText(); // Fetch license text now that WebChannel is ready
                        });
                    });
                } catch (e) {
                    console.log('Failed to setup WebChannel:', e);
                }
            } else {
                console.log('WebChannel not available, using default settings');
            }
        }

        // Wait for WebChannel to be ready
        function waitForWebChannelReady(callback, maxWait = 10000) {
            const startTime = Date.now();

            const checkReady = () => {
                if (window.overlay && window.overlay.getLicenseText) {
                    console.log('WebChannel ready for license text fetch');
                    callback();
                } else if (Date.now() - startTime > maxWait) {
                    console.warn('WebChannel not ready after max wait time, proceeding anyway');
                    callback();
                } else {
                    setTimeout(checkReady, 100);
                }
            };

            checkReady();
        }
        
        // Export functions for external use
        window.setMessage = setMessage;
        window.updateOverlayData = updateOverlayData;
    </script>

    <!--
    IMPORTANT: When creating or editing custom templates, always maintain these 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>
