<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Text Message 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: '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;
        }
        
        .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>
    <div class="overlay-container">
        <div class="message-panel" id="messagePanel">
            <div class="message-icon" id="messageIcon">📢</div>
            <div class="message-title" id="messageTitle">Announcement</div>
            <div class="message-content" id="messageContent">This is a custom message from the system.</div>
        </div>
    </div>

    <script>
        // Global variables for overlay data handling
        let overlayData = {};
        let currentTitle = 'Announcement';
        let currentMessage = 'This is a custom message from the system.';
        let currentIcon = '📢';
        
        // Function to update overlay data (called by Qt WebChannel)
        function updateOverlayData(data) {
            console.log('Received text overlay data:', data);
            overlayData = data || {};
            
            if (data && data.title) {
                currentTitle = data.title;
            }
            
            if (data && data.message) {
                currentMessage = data.message;
            }
            
            if (data && data.icon) {
                currentIcon = data.icon;
            }
            
            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();
        }
        
        // 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();
        });
        
        // Qt WebChannel initialization (when available)
        if (typeof QWebChannel !== 'undefined') {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                console.log('WebChannel initialized for text message 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.setMessage = setMessage;
        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>