webpage/static/script.js

/* ==========================================
   NAVIGATION & MOBILE MENU
   ========================================== */
function toggleHamburger() {
    const navLinks = document.getElementById('navLinks');
    const hamburger = document.querySelector('.hamburger');
    navLinks.classList.toggle('mobile-open');
    hamburger.classList.toggle('active');
}

// Initialisierung
document.addEventListener('DOMContentLoaded', () => {
    // ... dein bestehender Code ...
    const savedTheme = localStorage.getItem('theme') || 'auto';
    applyTheme(savedTheme);

    // Hamburger Menü schließen bei Klick auf einen Link
    const navLinksContainer = document.getElementById('navLinks');
    const navLinks = navLinksContainer.querySelectorAll('a');
    const hamburger = document.querySelector('.hamburger');

    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            // Prüfen, ob das Menü gerade offen ist
            if (navLinksContainer.classList.contains('mobile-open')) {
                navLinksContainer.classList.remove('mobile-open');
                hamburger.classList.remove('active');
            }
        });
    });
});

/* ==========================================
   DROPDOWN LOGIC (Vereinheitlicht)
   ========================================== */
const langBtn = document.getElementById('langBtn');
const langDropdown = document.getElementById('langDropdown');
const themeBtn = document.getElementById('themeBtn');
const themeDropdown = document.getElementById('themeDropdown');

// Funktion zum Schließen aller Dropdowns
function closeAllDropdowns() {
    if (langDropdown) langDropdown.classList.remove('show');
    if (themeDropdown) themeDropdown.classList.remove('show');
}

// Event Listener für Sprach-Dropdown
if (langBtn) {
    langBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        closeAllDropdowns();
        langDropdown.classList.toggle('show');
    });
}

// Event Listener für Theme-Dropdown
if (themeBtn) {
    themeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        closeAllDropdowns();
        themeDropdown.classList.toggle('show');
    });
}

// Klick außerhalb schließt alle
window.addEventListener('click', () => {
    closeAllDropdowns();
});

/* ==========================================
   LANGUAGE SWITCHER LOGIC
   ========================================== */
if (langDropdown) {
    langDropdown.querySelectorAll('.theme-option').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const selectedLang = link.getAttribute('data-lang');
            const currentPath = window.location.pathname;

            // URL Logik: Pfad ersetzen
            let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
            if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
                newPath = '/' + selectedLang + '/';
            }
            newPath = newPath.replace(/\/+/g, '/');
            window.location.href = newPath;
        });
    });
}

/* ==========================================
   THEME SWITCHER LOGIC
   ========================================== */
const themeOptions = document.querySelectorAll('#themeDropdown .theme-option');
const htmlEl = document.documentElement;

themeOptions.forEach(btn => {
    btn.addEventListener('click', () => {
        const action = btn.getAttribute('data-theme');
        let theme;
        if (action === 'setdark') theme = 'dark';
        else if (action === 'setlight') theme = 'light';
        else theme = 'auto';

        applyTheme(theme);
    });
});

function applyTheme(theme) {
    if (theme === 'auto') {
        localStorage.removeItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
        themeBtn.innerHTML = '🌓';
    } else {
        htmlEl.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
        themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
    }
}

async function startDemoChat() {
    try {
        const response = await fetch('/api/v1/chats/new', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json'
                // WICHTIG: Wenn dein Nginx den Token nicht setzt, 
                // muss er hier hin: 'Authorization': 'Bearer DEIN_TOKEN'
            },
            body: JSON.stringify({
                "title": "Demo Chat",
                "chat": { "model": "arcee-ai/trinity-large-preview:free"}
            })
        });

        if (!response.ok) {
            const errorData = await response.json();
            console.error('API Fehlerdetails:', errorData);
            throw new Error(`Fehler: ${response.status}`);
        }

        const data = await response.json();
        const sessionId = data.id;

        // --- DER KORREKTE DYNAMISCHE PFAD ---
        
        // 1. Hole den aktuellen Sprachpfad (z.B. "/de/", "/en/")
        // split('/') macht aus "/de/about/" -> ["", "de", "about", ""]
        const pathSegments = window.location.pathname.split('/');
        const lang = pathSegments[1] || 'de'; // Fallback auf "de", falls kein Pfad da ist

        // 2. Leite auf den Pfad MIT Sprache und Session-ID um
        // Das ergibt dann z.B. /de/chat/?session=...
        window.location.href = `/${lang}/chat/?session=${sessionId}`;
        //window.location.href = `/de/chat/?session=${sessionId}`;

    } catch (error) {
        console.error('Fehler beim Starten:', error);
        alert('Demo-Chat konnte nicht gestartet werden.');
    }
}