<script type="module">
    import { DesignTool } from '/js/DesignTool.js';
    import config from '/config/dt_config.js'
    const template = '{{template}}';
    const product_id = '{{product_id}}';
    const design_id = '{{design_id}}';
    const agent_id = '{{agent_id}}';
    const project_id = '{{project_id}}';
    const designTool = new DesignTool(config, template, product_id, "design", project_id, design_id);
    window.DT2024 = designTool;
</script>

<script src="/js/default/detectSportPreview.js"></script>
<script>
    function startup() {
        // designTool.init();
        // Initialize dark mode from localStorage
        const savedTheme = localStorage.getItem('dt-theme') || 'light';
        document.documentElement.setAttribute('data-theme', savedTheme);
        updateDarkModeIcon(savedTheme);
    }
    function cancelEdit() {
        document.getElementById('code_editor').style.display = 'none';
    }
    const trinity__productid = '{{product_id}}';

    // Dark mode toggle functionality
    function toggleDarkMode() {
        const html = document.documentElement;
        const currentTheme = html.getAttribute('data-theme') || 'light';
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        html.setAttribute('data-theme', newTheme);
        localStorage.setItem('dt-theme', newTheme);
        updateDarkModeIcon(newTheme);
        
        // Update DT2024.controlColor if it exists
        if (window.DT2024) {
            window.DT2024.controlColor = getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() || '#777777';
        }
    }

    function updateDarkModeIcon(theme) {
        const icon = document.getElementById('darkModeIcon');
        if (icon) {
            icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
        }
    }

    // Language selection functionality
    function changeLanguage() {
        const langSelect = document.getElementById('languageSelect');
        if (!langSelect) return;
        
        const selectedLang = langSelect.value;
        
        console.log('Changing language to:', selectedLang);
        
        // Set global trinity__lang variable
        window.trinity__lang = selectedLang;
        
        // Function to update language and redraw UI
        function updateLanguageAndUI() {
            if (!window.DT2024) {
                console.warn('DT2024 is not available, retrying...');
                setTimeout(updateLanguageAndUI, 100);
                return;
            }
            
            console.log('Setting DT2024.lang to:', selectedLang);
            window.DT2024.lang = selectedLang;
            console.log('DT2024.lang is now:', window.DT2024.lang);
            
            // Redraw the tools menu with new translations
            if (typeof window.DT2024.initToolsMenu === 'function') {
                console.log('Calling initToolsMenu()');
                window.DT2024.initToolsMenu();
            } else {
                console.warn('initToolsMenu is not a function');
            }
            
            // Also redraw the tools sidebar
            if (typeof window.DT2024.initTools === 'function') {
                console.log('Calling initTools()');
                // Clear existing tools first
                const toolDiv = document.getElementById('dt_tools');
                if (toolDiv) {
                    toolDiv.innerHTML = '';
                }
                window.DT2024.initTools();
            }
            if (window.DT2024.topMenu && typeof window.DT2024.topMenu.initialize === 'function') {
                console.log('Calling topMenu.initialize()');
                window.DT2024.topMenu.initialize();
            }
            
            // Update property panel button labels
            const propButton = document.getElementById('prop_bt');
            const layerButton = document.getElementById('layer_bt');
            const historyButton = document.getElementById('history_bt');
            if (propButton && typeof window.DT2024.getTranslation === 'function') {
                propButton.innerHTML = window.DT2024.getTranslation('properties');
            }
            if (layerButton && typeof window.DT2024.getTranslation === 'function') {
                layerButton.innerHTML = window.DT2024.getTranslation('layers');
            }
            if (historyButton && typeof window.DT2024.getTranslation === 'function') {
                historyButton.innerHTML = window.DT2024.getTranslation('history');
            }
        }
        
        // Try to update immediately, or wait for DT2024 to be available
        updateLanguageAndUI();
        
        // Save to localStorage
        localStorage.setItem('dt-language', selectedLang);
    }

    // Initialize language from localStorage or DesignTool
    function initLanguage() {
        const langSelect = document.getElementById('languageSelect');
        if (!langSelect) return;
        
        let savedLang = localStorage.getItem('dt-language');
        
        // If no saved language, try to get from DesignTool
        if (!savedLang && window.DT2024 && window.DT2024.lang) {
            savedLang = window.DT2024.lang;
        }
        
        // If still no language, try global trinity__lang
        if (!savedLang && window.trinity__lang) {
            savedLang = window.trinity__lang;
        }
        
        // If still no language, try to get from DesignTool's languages config
        if (!savedLang && window.DT2024 && window.DT2024.languages && window.DT2024.languages.length > 0) {
            savedLang = window.DT2024.languages[0];
        }
        
        // Default to 'en' if nothing found
        if (!savedLang) {
            savedLang = 'en';
        }
        
        // Ensure it's a valid 2-letter code
        if (savedLang.length > 2) {
            savedLang = savedLang.substring(0, 2);
        }
        
        // Set the dropdown value
        langSelect.value = savedLang;
        
        // Set global variables
        window.trinity__lang = savedLang;
        if (window.DT2024) {
            window.DT2024.lang = savedLang;
        }
    }

    // Set up event listener when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        const toggle = document.getElementById('darkModeToggle');
        if (toggle) {
            toggle.addEventListener('click', toggleDarkMode);
        }
        
        const langSelect = document.getElementById('languageSelect');
        if (langSelect) {
            langSelect.addEventListener('change', changeLanguage);
        }
        
        // Initialize theme on page load
        startup();
        
        // Initialize language after a short delay to ensure DT2024 is available
        setTimeout(initLanguage, 100);
    });
</script>

<div id="dt_main" class="dt-main">
    <div id="dt_topbar" class="dt-topbar">
        <button id="darkModeToggle" class="dark-mode-toggle" title="Toggle Dark Mode">
            <span class="material-icons" id="darkModeIcon">dark_mode</span>
        </button>

        <div class="view-buttons">
            <div id="view2d" class="view-bt">2D</div>
            <div id="viewcombo" class="view-bt">COMBO</div>
            <div id="view3d" class="view-bt">3D</div>
        </div>

        <select id="languageSelect" class="language-select" title="Select Language">
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="zh">中文</option>
        </select>

        <a href="/documentation/index.html" target="_blank" class="help-link" title="Help Documentation">
            <span class="material-icons">help_outline</span>
            <span class="help-text">HELP</span>
        </a>
    </div>
    <div id="dt_tools" class="dt-tools">

    </div>
    <div id="view" class="dt-view">
        <div id="dt_canvas" class="dt-canvas">
            <div id="svg-preview" class="svg-preview"></div>
        </div>
        <div id="dt_divide" class="dt-divide"></div>
        <div id="dt_3d" class="dt-3d"></div>
    </div>
    <div id="dt_properties_panel" class="dt-properties-panel">
        <div class="fan-button-row">
            <div id="prop_bt" class="fan-bt">
                <h3>Properties</h3>
            </div>
            <div id="layer_bt" class="fan-bt">
                <h3>Layers</h3>
            </div>
            <div id="history_bt" class="fan-bt">
                <h3>History</h3>
            </div>
        </div>
        <div id="dt_properties" class="dt-properties"></div>
        <div id="dt_layers" class="dt-properties"></div>
        <div id="dt_history" class="dt-properties"></div>
        <div id="dt_properties_buttons" class="dt-properties-buttons"></div>
        

    </div>
    <div id="edit-buttons" class="edit-buttons"></div>
    <div id="code_editor" class="code-editor">
        <form action="" method="post">
            <textarea name="svgcode" id="codearea">loading...</textarea>
            <br>
            <div style="text-align:right">
                <button type="button" onclick="cancelEdit()">Cancel</button> <input type="submit" name="Update"
                    id="update" value="Update" />
        </form>
    </div>
</div>
