class DashboardApp {
    constructor() {
        this.locale = this.resolveLocale();
        this.translations = this.buildTranslations();

        this.elements = {
            loginOverlay: document.getElementById('loginOverlay'),
            loginForm: document.getElementById('loginForm'),
            loginButton: document.getElementById('loginButton'),
            loginError: document.getElementById('loginError'),
            username: document.getElementById('username'),
            password: document.getElementById('password'),
            brandLogo: document.getElementById('brandLogo'),
            statusDot: document.getElementById('statusDot'),
            connectionStatus: document.getElementById('connectionStatus'),
            sessionUsername: document.getElementById('sessionUsername'),
            logoutButton: document.getElementById('logoutButton'),
            requestTemplate: document.getElementById('requestTemplate'),
            responseTemplate: document.getElementById('responseTemplate'),
            incomingMessage: document.getElementById('incomingMessage'),
            easterEggOverlay: document.getElementById('easterEggOverlay'),
            easterEggCanvas: document.getElementById('easterEggCanvas'),
            easterEggClose: document.getElementById('easterEggClose'),
            easterEggScore: document.getElementById('easterEggScore'),
            chargerTableBody: document.getElementById('chargerTableBody'),
            chargerEmptyRow: document.getElementById('chargerEmptyRow'),
            fetchSessionsButton: document.getElementById('fetchSessionsButton'),
            downloadSessionsButton: document.getElementById('downloadSessionsButton'),
            carFilter: document.getElementById('carFilter'),
            sessionStartFilter: document.getElementById('sessionStartFilter'),
            sessionEndFilter: document.getElementById('sessionEndFilter'),
            chargingSessionsTableBody: document.getElementById('chargingSessionsTableBody'),
            chargingSessionsEmptyRow: document.getElementById('chargingSessionsEmptyRow'),
            chargingSessionsOutput: document.getElementById('chargingSessionsOutput'),
            panelButtons: Array.from(document.querySelectorAll('[data-panel-target]')),
            contentPanels: Array.from(document.querySelectorAll('[data-panel]'))
        };

        this.sessionKey = 'evdash.session';
        this.socket = null;
        this.token = null;
        this.tokenExpiry = null;
        this.username = null;
        this.pendingRequests = new Map();
        this.reconnectTimer = null;
        this.tokenRefreshTimer = null;
        this.refreshInFlight = false;
        this.chargers = new Map();
        this.expandedChargers = new Set();
        this.cars = new Map();
        this.sessions = [];
        this.activePanel = null;
        this.easterEggClickCount = 0;
        this.easterEggClickResetTimer = null;
        this.easterEggGame = {
            running: false,
            frameId: null,
            player: { x: 30, y: 30, size: 16, speed: 3.2 },
            target: { x: 200, y: 140, size: 10 },
            score: 0,
            keys: {}
        };
        this.chargerColumns = [
            { key: 'id', label: 'ID', hidden: true },
            { key: 'name', label: 'Name' },
            { key: 'assignedCar', label: 'Car' },
            { key: 'energyManagerMode', label: 'Energy manager mode' },
            { key: 'connected', label: 'Reachable' },
            { key: 'status', label: 'Status' },
            { key: 'chargingCurrent', label: 'Charging current' },
            { key: 'chargingPhases', label: 'Charging phases' },
            { key: 'currentPower', label: 'Current power' },
            { key: 'sessionEnergy', label: 'Session energy' }
        ];

        this.translateDocument();
        this.updateEasterEggScore();
        this.renderStaticTemplates();
        this.attachEventListeners();
        this.initializePanelNavigation();
        this.restoreSession();
        this.toggleChargerEmptyState();
        this.updateCarSelector();
    }

    resolveLocale() {
        const overrideKey = 'evdash.language';
        try {
            const stored = window.localStorage.getItem(overrideKey);
            if (stored && typeof stored === 'string')
                return stored.trim().toLowerCase().startsWith('de') ? 'de' : 'en';
        } catch (error) {
            // ignore
        }

        const candidates = Array.isArray(navigator.languages) && navigator.languages.length
            ? navigator.languages
            : [navigator.language || 'en'];

        const normalized = candidates
            .filter(Boolean)
            .map(value => String(value).toLowerCase());

        if (normalized.some(value => value === 'de' || value.startsWith('de-')))
            return 'de';

        return 'en';
    }

    buildTranslations() {
        return {
            en: {
                'header.tagline': 'Monitor & troubleshoot EV chargers.',
                'header.awaitingLogin': 'Awaiting login…',
                'header.authenticateHint': 'Load the dashboard to authenticate.',
                'header.logout': 'Logout',

                'sidebar.dashboardSections': 'Dashboard sections',
                'sidebar.sections': 'Sections',
                'sidebar.workspace': 'Workspace',
                'sidebar.overview': 'Overview',
                'sidebar.chargers': 'Chargers',
                'sidebar.chargersSubtitle': 'Live table & telemetry',
                'sidebar.sessions': 'Charging sessions',
                'sidebar.sessionsSubtitle': 'History of charging sessions',
                'sidebar.help': 'Help',
                'sidebar.helpSubtitle': 'API concept & debug logs',
                'sidebar.version': 'Version',

                'chargers.liveOverview': 'Live overview',
                'chargers.title': 'Chargers',
                'chargers.empty': 'No chargers loaded yet.',
                'chargers.columns.name': 'Name',
                'chargers.columns.car': 'Car',
                'chargers.columns.energyManagerMode': 'Energy manager mode',
                'chargers.columns.connected': 'Reachable',
                'chargers.columns.status': 'Status',
                'chargers.columns.lastStatusUpdate': 'Last status update',
                'chargers.columns.chargingCurrent': 'Charging current',
                'chargers.columns.chargingPhases': 'Charging phases',
                'chargers.columns.currentPower': 'Current power',
                'chargers.columns.sessionEnergy': 'Session energy',
                'chargers.columns.version': 'Version',
                'chargers.columns.temperature': 'Temperature',
                'chargers.columns.digitalInputMode': 'Digital input',
                'chargerStatus.Init': 'Initializing',
                'chargerStatus.A1': 'Charger ready',
                'chargerStatus.A2': 'Charger ready',
                'chargerStatus.B1': 'Car connected, autorization required',
                'chargerStatus.B2': 'Car connected',
                'chargerStatus.C1': 'Charging pause, car ready',
                'chargerStatus.C2': 'Charging',
                'chargerStatus.F': 'Error',

                'sessions.history': 'History',
                'sessions.title': 'Charging sessions',
                'sessions.filterCar': 'Car',
                'sessions.allCars': 'All cars',
                'sessions.filterStartDate': 'Start date',
                'sessions.filterEndDate': 'End date',
                'sessions.fetch': 'Refresh view',
                'sessions.downloadCsv': 'Download CSV',
                'sessions.helper': 'Optionally filter charging sessions by car and time range before downloading.',
                'sessions.columns.name': 'Name',
                'sessions.columns.charger': 'Charger',
                'sessions.columns.car': 'Car',
                'sessions.columns.start': 'Start',
                'sessions.columns.end': 'End',
                'sessions.columns.energy': 'Energy (kWh)',
                'sessions.emptyFetched': 'No charging sessions fetched yet.',
                'sessions.noneFound': 'No charging sessions found.',
                'sessions.noneInRange': 'No charging sessions match the selected time range.',
                'sessions.fetchFailed': 'Failed to fetch charging sessions.',
                'sessions.requestFailed': 'Unable to request charging sessions. Check the connection status.',
                'sessions.displayFailed': 'Unable to display charging sessions.',
                'sessions.startBeforeEnd': 'Start date must be earlier than end date.',
                'sessions.sessionIdLabel': 'Session {id}',

                'help.guides': 'Guides',
                'help.title': 'API Contract',
                'help.helper': 'Use <code>app.sendAction(action, payload)</code> after authenticating.',
                'help.requestTemplate': 'Request template',
                'help.responses': 'Responses',
                'help.diagnostics': 'Diagnostics',
                'help.lastMessage': 'Last WebSocket message',
                'help.diagnosticsHelper': 'Sign in to reuse the stored session and inspect backend payloads.',
                'help.noMessagesYet': 'No messages received yet.',
                'help.debugging': 'Debugging',
                'help.sessionsPayload': 'Charging sessions payload',
                'help.sessionsPayloadHelper': 'Raw session JSON for troubleshooting.',
                'help.reference': 'Reference',
                'help.chargerTableBasics': 'Charger table basics',
                'help.referenceBullet1': 'The dashboard keeps one row per charger ID and updates it with backend notifications.',
                'help.referenceBullet2': 'Columns follow the order defined by <code>EvDashEngine::packCharger</code> so new properties show up automatically.',
                'help.referenceBullet3': 'Branding (colours, fonts) is managed via CSS variables at the top of this file for easy overrides.',
                'help.referenceBullet4': 'Select a charger row to expand additional charger details.',

                'easterEgg.hiddenTreat': 'Hidden treat',
                'easterEgg.title': 'Grid Dash',
                'easterEgg.close': 'Close',
                'easterEgg.instructions': 'Use arrow keys or WASD to drive the tiny EV and catch lightning bolts. Press Esc or close to exit.',
                'easterEgg.score': 'Score: {score}',
                'easterEgg.hint': 'Stay inside the grid!',
                'easterEgg.canvasLabel': 'Mini game canvas',

                'login.title': 'Sign in',
                'login.required': 'Authorization required.',
                'login.username': 'Username',
                'login.password': 'Password',
                'login.helper': 'Contact the administrator to receive valid credentials.',
                'login.signIn': 'Sign in',
                'login.signingIn': 'Signing in…',
                'login.emptyCredentials': 'Username and password are required.',
                'login.failed': 'Login failed. Please try again.',
                'login.networkError': 'Unable to reach the login endpoint. Please check your connection.',
                'login.unexpectedResponse': 'Received an unexpected response from the server.',
                'login.invalidResponse': 'Invalid response from server.',
                'login.invalidRequest': 'The login request was malformed. Please reload the page and try again.',
                'login.unauthorized': 'The provided credentials were not accepted.',

                'connection.connecting': 'Connecting…',
                'connection.authenticating': 'Authenticating…',
                'connection.connected': 'Connected',
                'connection.disconnected': 'Disconnected',
                'connection.error': 'Connection error',
                'connection.authenticationRequired': 'Authentication required',
                'connection.loggedOut': 'Logged out',
                'connection.sessionExpired': 'Session expired. Please sign in again.',
                'connection.sessionExpiredRestore': 'Your session has expired. Please sign in again.',
                'connection.restoreFailed': 'We could not restore your previous session. Please sign in again.',
                'connection.loggedOutOverlay': 'You have been logged out.',
                'connection.authFailed': 'Authentication failed. Please try again.',

                'value.true': 'True',
                'value.false': 'False',
                'value.yes': 'Yes',
                'value.no': 'No',
                'value.unknownWithValue': 'Unknown ({value})',

                'energyManagerMode.quick': 'Quick',
                'energyManagerMode.eco': 'Eco',
                'energyManagerMode.ecoTime': 'Eco + Time',

                'digitalInputMode.chargingAllowed': 'Charging allowed',
                'digitalInputMode.chargingAllowedInverted': 'Charging allowed inverted',
                'digitalInputMode.pwmAndS0': 'PWM and S0 signaling',
                'digitalInputMode.limitAndS0': 'Limit and S0 signaling',

                'csv.sessionId': 'Session ID',
                'csv.chargerName': 'Charger name',
                'csv.chargerSerialNumber': 'Charger serial number',
                'csv.car': 'Car',
                'csv.start': 'Start',
                'csv.end': 'End',
                'csv.energyKwh': 'Energy [kWh]',
                'csv.meterStartKwh': 'Meter start [kWh]',
                'csv.meterEndKwh': 'Meter end [kWh]',

                'ws.parseFailed': 'Failed to parse message: {error}'
            },
            de: {
                'header.tagline': 'Überwachen & Fehleranalyse von EV-Ladestationen.',
                'header.awaitingLogin': 'Warte auf Anmeldung…',
                'header.authenticateHint': 'Dashboard laden, um dich zu authentifizieren.',
                'header.logout': 'Abmelden',

                'sidebar.dashboardSections': 'Dashboard-Bereiche',
                'sidebar.sections': 'Bereiche',
                'sidebar.workspace': 'Arbeitsbereich',
                'sidebar.overview': 'Übersicht',
                'sidebar.chargers': 'Ladestationen',
                'sidebar.chargersSubtitle': 'Live-Tabelle & Telemetrie',
                'sidebar.sessions': 'Ladevorgänge',
                'sidebar.sessionsSubtitle': 'Historie der Ladevorgänge',
                'sidebar.help': 'Hilfe',
                'sidebar.helpSubtitle': 'API-Konzept & Debug-Logs',
                'sidebar.version': 'Version',

                'chargers.liveOverview': 'Live-Übersicht',
                'chargers.title': 'Ladestationen',
                'chargers.empty': 'Noch keine Ladestationen geladen.',
                'chargers.columns.name': 'Name',
                'chargers.columns.car': 'Fahrzeug',
                'chargers.columns.energyManagerMode': 'Energiemanager-Modus',
                'chargers.columns.connected': 'Erreichbar',
                'chargers.columns.status': 'Status',
                'chargers.columns.lastStatusUpdate': 'Letzte Statusaktualisierung',
                'chargers.columns.chargingCurrent': 'Ladestrom',
                'chargers.columns.chargingPhases': 'Ladephasen',
                'chargers.columns.currentPower': 'Aktuelle Leistung',
                'chargers.columns.sessionEnergy': 'Energie (Sitzung)',
                'chargers.columns.version': 'Version',
                'chargers.columns.temperature': 'Temperatur',
                'chargers.columns.digitalInputMode': 'Digitaler Eingang',
                'chargerStatus.Init': 'Initialisierung',
                'chargerStatus.A1': 'Ladestation bereit',
                'chargerStatus.A2': 'Ladestation bereit',
                'chargerStatus.B1': 'Fahrzeug verbunden, Autorisierung erforderlich',
                'chargerStatus.B2': 'Fahrzeug verbunden',
                'chargerStatus.C1': 'Ladepause, Fahrzeug bereit',
                'chargerStatus.C2': 'Laden',
                'chargerStatus.F': 'Fehler',

                'sessions.history': 'Historie',
                'sessions.title': 'Ladevorgänge',
                'sessions.filterCar': 'Fahrzeug',
                'sessions.allCars': 'Alle Fahrzeuge',
                'sessions.filterStartDate': 'Startdatum',
                'sessions.filterEndDate': 'Enddatum',
                'sessions.fetch': 'Ansicht aktualisieren',
                'sessions.downloadCsv': 'CSV herunterladen',
                'sessions.helper': 'Optional nach Fahrzeug und Zeitraum filtern, bevor du die CSV herunterlädst.',
                'sessions.columns.name': 'Name',
                'sessions.columns.charger': 'Ladestation',
                'sessions.columns.car': 'Fahrzeug',
                'sessions.columns.start': 'Start',
                'sessions.columns.end': 'Ende',
                'sessions.columns.energy': 'Energie (kWh)',
                'sessions.emptyFetched': 'Noch keine Ladevorgänge geladen.',
                'sessions.noneFound': 'Keine Ladevorgänge gefunden.',
                'sessions.noneInRange': 'Keine Ladevorgänge im ausgewählten Zeitraum.',
                'sessions.fetchFailed': 'Ladevorgänge konnten nicht geladen werden.',
                'sessions.requestFailed': 'Ladevorgänge konnten nicht angefragt werden. Bitte Verbindungsstatus prüfen.',
                'sessions.displayFailed': 'Ladevorgänge können nicht angezeigt werden.',
                'sessions.startBeforeEnd': 'Das Startdatum muss vor dem Enddatum liegen.',
                'sessions.sessionIdLabel': 'Sitzung {id}',

                'help.guides': 'Leitfäden',
                'help.title': 'API-Vertrag',
                'help.helper': 'Nach der Authentifizierung kannst du <code>app.sendAction(action, payload)</code> verwenden.',
                'help.requestTemplate': 'Request-Vorlage',
                'help.responses': 'Antworten',
                'help.diagnostics': 'Diagnose',
                'help.lastMessage': 'Letzte WebSocket-Nachricht',
                'help.diagnosticsHelper': 'Anmelden, um die gespeicherte Sitzung zu nutzen und Backend-Payloads zu prüfen.',
                'help.noMessagesYet': 'Noch keine Nachrichten empfangen.',
                'help.debugging': 'Debugging',
                'help.sessionsPayload': 'Ladevorgänge-Payload',
                'help.sessionsPayloadHelper': 'Rohes Session-JSON zur Fehlersuche.',
                'help.reference': 'Referenz',
                'help.chargerTableBasics': 'Grundlagen der Ladestationen-Tabelle',
                'help.referenceBullet1': 'Das Dashboard hält eine Zeile pro Ladestations-ID und aktualisiert sie über Backend-Benachrichtigungen.',
                'help.referenceBullet2': 'Die Spalten folgen der Reihenfolge aus <code>EvDashEngine::packCharger</code>, sodass neue Eigenschaften automatisch erscheinen.',
                'help.referenceBullet3': 'Branding (Farben, Schrift) wird über CSS-Variablen am Anfang dieser Datei gesteuert.',
                'help.referenceBullet4': 'Wähle eine Ladestationszeile aus, um zusätzliche Details einzublenden.',

                'easterEgg.hiddenTreat': 'Verstecktes Extra',
                'easterEgg.title': 'Grid Dash',
                'easterEgg.close': 'Schließen',
                'easterEgg.instructions': 'Mit Pfeiltasten oder WASD fahren, Blitze einsammeln. Mit Esc oder Schließen beenden.',
                'easterEgg.score': 'Punkte: {score}',
                'easterEgg.hint': 'Bleib im Raster!',
                'easterEgg.canvasLabel': 'Mini-Spiel-Leinwand',

                'login.title': 'Anmelden',
                'login.required': 'Autorisierung erforderlich.',
                'login.username': 'Benutzername',
                'login.password': 'Passwort',
                'login.helper': 'Wende dich an den Administrator, um gültige Zugangsdaten zu erhalten.',
                'login.signIn': 'Anmelden',
                'login.signingIn': 'Anmeldung…',
                'login.emptyCredentials': 'Benutzername und Passwort sind erforderlich.',
                'login.failed': 'Anmeldung fehlgeschlagen. Bitte erneut versuchen.',
                'login.networkError': 'Login-Endpunkt nicht erreichbar. Bitte Verbindung prüfen.',
                'login.unexpectedResponse': 'Unerwartete Antwort vom Server erhalten.',
                'login.invalidResponse': 'Ungültige Serverantwort.',
                'login.invalidRequest': 'Die Login-Anfrage war fehlerhaft. Bitte Seite neu laden und erneut versuchen.',
                'login.unauthorized': 'Die eingegebenen Zugangsdaten wurden nicht akzeptiert.',

                'connection.connecting': 'Verbinden…',
                'connection.authenticating': 'Authentifizierung…',
                'connection.connected': 'Verbunden',
                'connection.disconnected': 'Getrennt',
                'connection.error': 'Verbindungsfehler',
                'connection.authenticationRequired': 'Authentifizierung erforderlich',
                'connection.loggedOut': 'Abgemeldet',
                'connection.sessionExpired': 'Sitzung abgelaufen. Bitte erneut anmelden.',
                'connection.sessionExpiredRestore': 'Deine Sitzung ist abgelaufen. Bitte erneut anmelden.',
                'connection.restoreFailed': 'Die vorige Sitzung konnte nicht wiederhergestellt werden. Bitte erneut anmelden.',
                'connection.loggedOutOverlay': 'Du wurdest abgemeldet.',
                'connection.authFailed': 'Authentifizierung fehlgeschlagen. Bitte erneut versuchen.',

                'value.true': 'Wahr',
                'value.false': 'Falsch',
                'value.yes': 'Ja',
                'value.no': 'Nein',
                'value.unknownWithValue': 'Unbekannt ({value})',

                'energyManagerMode.quick': 'Schnell',
                'energyManagerMode.eco': 'Eco',
                'energyManagerMode.ecoTime': 'Eco + Zeit',

                'digitalInputMode.chargingAllowed': 'Laden erlaubt',
                'digitalInputMode.chargingAllowedInverted': 'Laden erlaubt (invertiert)',
                'digitalInputMode.pwmAndS0': 'PWM- und S0-Signalisierung',
                'digitalInputMode.limitAndS0': 'Limit- und S0-Signalisierung',

                'csv.sessionId': 'Sitzungs-ID',
                'csv.chargerName': 'Ladestationsname',
                'csv.chargerSerialNumber': 'Seriennummer der Ladestation',
                'csv.car': 'Fahrzeug',
                'csv.start': 'Start',
                'csv.end': 'Ende',
                'csv.energyKwh': 'Energie [kWh]',
                'csv.meterStartKwh': 'Zählerstand Start [kWh]',
                'csv.meterEndKwh': 'Zählerstand Ende [kWh]',

                'ws.parseFailed': 'Nachricht konnte nicht gelesen werden: {error}'
            }
        };
    }

    t(key, variables) {
        const locale = this.locale in this.translations ? this.locale : 'en';
        const table = this.translations[locale] || {};
        const fallback = this.translations.en || {};
        let text = (key && key in table) ? table[key] : (key in fallback ? fallback[key] : String(key));

        if (variables && typeof variables === 'object') {
            Object.entries(variables).forEach(([name, value]) => {
                text = text.replaceAll(`{${name}}`, value === undefined || value === null ? '' : String(value));
            });
        }

        return text;
    }

    translateDocument() {
        try {
            document.documentElement.lang = this.locale;
        } catch (error) {
            // ignore
        }

        const nodes = document.querySelectorAll('[data-i18n]');
        nodes.forEach(node => {
            const key = node.dataset.i18n;
            if (!key)
                return;
            const attr = node.dataset.i18nAttr;
            const text = this.t(key);
            if (attr)
                node.setAttribute(attr, text);
            else if (node.dataset.i18nMode === 'html')
                node.innerHTML = text;
            else
                node.textContent = text;
        });
    }

    attachEventListeners() {
        if (this.elements.loginForm) {
            this.elements.loginForm.addEventListener('submit', event => {
                event.preventDefault();
                this.submitLogin();
            });
        }

        if (this.elements.logoutButton) {
            this.elements.logoutButton.addEventListener('click', () => {
                this.logout();
            });
        }

        if (this.elements.fetchSessionsButton) {
            this.elements.fetchSessionsButton.addEventListener('click', () => {
                this.fetchChargingSessions();
            });
        }

        if (this.elements.carFilter) {
            this.elements.carFilter.addEventListener('change', () => {
                const carId = this.elements.carFilter.value;
                if (carId)
                    this.fetchChargingSessions();
            });
        }

        if (this.elements.downloadSessionsButton) {
            this.elements.downloadSessionsButton.addEventListener('click', () => {
                this.downloadChargingSessionsCsv();
            });
        }

        if (this.elements.sessionStartFilter) {
            this.elements.sessionStartFilter.addEventListener('change', () => {
                this.renderChargingSessionsTable(this.sessions);
            });
        }

        if (this.elements.sessionEndFilter) {
            this.elements.sessionEndFilter.addEventListener('change', () => {
                this.renderChargingSessionsTable(this.sessions);
            });
        }

        if (this.elements.brandLogo) {
            this.elements.brandLogo.addEventListener('click', () => {
                this.handleBrandLogoClick();
            });
        }

        if (this.elements.easterEggClose) {
            this.elements.easterEggClose.addEventListener('click', () => {
                this.stopEasterEggGame();
            });
        }

        if (this.elements.easterEggOverlay) {
            this.elements.easterEggOverlay.addEventListener('click', event => {
                if (event.target === this.elements.easterEggOverlay)
                    this.stopEasterEggGame();
            });
        }

        if (this.elements.chargerTableBody) {
            this.elements.chargerTableBody.addEventListener('click', event => {
                const targetRow = event.target ? event.target.closest('tr[data-charger-id]') : null;
                if (!targetRow || !targetRow.dataset || !targetRow.dataset.chargerId)
                    return;
                this.toggleChargerDetails(targetRow.dataset.chargerId);
            });

            this.elements.chargerTableBody.addEventListener('keydown', event => {
                if (!event || (event.key !== 'Enter' && event.key !== ' '))
                    return;

                const targetRow = event.target ? event.target.closest('tr[data-charger-id]') : null;
                if (!targetRow || !targetRow.dataset || !targetRow.dataset.chargerId)
                    return;

                event.preventDefault();
                this.toggleChargerDetails(targetRow.dataset.chargerId);
            });
        }
    }

    initializePanelNavigation() {
        const buttons = Array.isArray(this.elements.panelButtons) ? this.elements.panelButtons : [];
        const panels = Array.isArray(this.elements.contentPanels) ? this.elements.contentPanels : [];
        if (!buttons.length || !panels.length)
            return;

        const activatePanel = target => {
            if (!target)
                return;

            const hasTarget = panels.some(panel => panel.dataset.panel === target);
            if (!hasTarget)
                return;

            this.activePanel = target;
            panels.forEach(panel => {
                const isActive = panel.dataset.panel === target;
                panel.classList.toggle('active', isActive);
                panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
            });

            buttons.forEach(button => {
                const isActive = button.dataset.panelTarget === target;
                button.classList.toggle('active', isActive);
                button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
            });

            const desiredHash = `#${target}`;
            if (window.location.hash !== desiredHash) {
                try {
                    window.history.replaceState(null, '', desiredHash);
                } catch (error) {
                    window.location.hash = target;
                }
            }
        };

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                activatePanel(button.dataset.panelTarget);
            });
        });

        const hashPanel = this.normalizePanelTargetFromHash(window.location.hash);
        const preselected = buttons.find(button => button.classList.contains('active'));
        const fallback = buttons[0];
        const initialTarget = hashPanel
            || (preselected ? preselected.dataset.panelTarget : null)
            || (fallback ? fallback.dataset.panelTarget : null);

        if (initialTarget)
            activatePanel(initialTarget);

        window.addEventListener('hashchange', () => {
            const target = this.normalizePanelTargetFromHash(window.location.hash);
            if (target && target !== this.activePanel)
                activatePanel(target);
        });
    }

    normalizePanelTargetFromHash(hash) {
        if (!hash || hash.length < 2)
            return null;

        const lookup = hash.replace('#', '').trim().toLowerCase();
        if (!lookup)
            return null;

        const panels = Array.isArray(this.elements.contentPanels) ? this.elements.contentPanels : [];
        const match = panels.find(panel => {
            const id = panel.dataset.panel || '';
            return id.toLowerCase() === lookup;
        });

        return match ? match.dataset.panel : null;
    }

    renderStaticTemplates() {
        const contract = {
            login: {
                method: 'POST /evdash/api/login',
                payload: {
                    username: 'user',
                    password: 'secret'
                }
            },
            websocket: {
                request: {
                    requestId: 'uuid',
                    action: 'ActionName',
                    payload: {}
                },
                authenticate: {
                    requestId: 'uuid',
                    action: 'authenticate',
                    payload: {
                        token: 'issued-token'
                    }
                }
            }
        };

        const responses = {
            success: {
                requestId: 'uuid',
                success: true,
                payload: {}
            },
            failure: {
                requestId: 'uuid',
                success: false,
                error: 'Error message'
            },
            examplePing: {
                requestId: 'uuid',
                success: true,
                payload: {
                    timestamp: '2025-01-12T09:30:00Z'
                }
            }
        };

        if (this.elements.requestTemplate)
            this.elements.requestTemplate.textContent = JSON.stringify(contract, null, 2);
        if (this.elements.responseTemplate)
            this.elements.responseTemplate.textContent = JSON.stringify(responses, null, 2);
    }

    restoreSession() {
        const stored = window.localStorage.getItem(this.sessionKey);
        if (!stored) {
            this.showLoginOverlay();
            return;
        }

        try {
            const parsed = JSON.parse(stored);
            if (!parsed || !parsed.token || !parsed.expiresAt) {
                this.clearSession();
                this.showLoginOverlay();
                return;
            }

            const expiresAt = new Date(parsed.expiresAt);
            if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
                this.clearSession();
                this.showLoginOverlay(this.t('connection.sessionExpiredRestore'));
                return;
            }

            this.token = parsed.token;
            this.tokenExpiry = expiresAt;
            this.username = parsed.username || null;
            this.scheduleTokenRefresh();
            this.updateSessionUser();
            this.hideLoginOverlay();
            this.connectWebSocket();
        } catch (error) {
            console.warn('Failed to restore session', error);
            this.clearSession();
            this.showLoginOverlay(this.t('connection.restoreFailed'));
        }
    }

    submitLogin() {
        if (!this.elements.username || !this.elements.password || !this.elements.loginButton)
            return;

        const username = this.elements.username.value.trim();
        const password = this.elements.password.value;

        if (!username || !password) {
            this.showLoginError(this.t('login.emptyCredentials'));
            return;
        }

        this.setLoginLoading(true);
        this.performLoginRequest(username, password)
            .then(session => {
                this.persistSession({ ...session, username });
                this.hideLoginOverlay();
                this.updateSessionUser();
                this.connectWebSocket(true);
            })
            .catch(error => {
                const message = error && error.message ? error.message : this.t('login.failed');
                this.showLoginError(message);
            })
            .finally(() => {
                this.setLoginLoading(false);
                if (this.elements.password)
                    this.elements.password.value = '';
            });
    }

    async performLoginRequest(username, password) {
        let response;
        try {
            response = await fetch('/evdash/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            });
        } catch (networkError) {
            console.warn('Login request failed', networkError);
            throw new Error(this.t('login.networkError'));
        }

        let data;
        try {
            data = await response.json();
        } catch (parseError) {
            console.warn('Failed to parse login response', parseError);
            throw new Error(this.t('login.unexpectedResponse'));
        }

        if (!response.ok || !data.success) {
            const errorCode = data && data.error ? data.error : 'unauthorized';
            throw new Error(this.describeLoginError(errorCode));
        }

        if (!data.token || !data.expiresAt)
            throw new Error(this.t('login.invalidResponse'));

        return {
            token: data.token,
            expiresAt: data.expiresAt
        };
    }

    describeLoginError(code) {
        switch (code) {
        case 'invalidRequest':
            return this.t('login.invalidRequest');
        case 'unauthorized':
            return this.t('login.unauthorized');
        default:
            return this.t('login.failed');
        }
    }

    persistSession(session) {
        this.token = session.token;
        this.tokenExpiry = new Date(session.expiresAt);
        this.username = session.username || null;

        try {
            window.localStorage.setItem(this.sessionKey, JSON.stringify({
                token: this.token,
                expiresAt: this.tokenExpiry.toISOString(),
                username: this.username
            }));
        } catch (error) {
            console.warn('Failed to persist session', error);
        }

        this.scheduleTokenRefresh();
    }

    clearSession() {
        this.token = null;
        this.tokenExpiry = null;
        this.username = null;
        this.pendingRequests.clear();
        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = null;
        clearTimeout(this.tokenRefreshTimer);
        this.tokenRefreshTimer = null;
        this.refreshInFlight = false;
        this.chargers.clear();
        this.cars.clear();
        this.resetChargerTable();
        this.updateCarSelector();
        this.renderChargingSessions([], this.t('sessions.emptyFetched'));

        try {
            window.localStorage.removeItem(this.sessionKey);
        } catch (error) {
            console.warn('Failed to clear session', error);
        }

        this.updateSessionUser();
    }

    connectWebSocket(resetPending = false) {
        if (!this.token) {
            this.updateConnectionStatus(this.t('header.awaitingLogin'), 'connecting');
            return;
        }

        if (this.tokenExpiry && this.tokenExpiry <= new Date()) {
            this.clearSession();
            this.showLoginOverlay(this.t('connection.sessionExpiredRestore'));
            return;
        }

        if (this.socket && (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING))
            return;

        if (resetPending)
            this.pendingRequests.clear();

        clearTimeout(this.reconnectTimer);
        this.updateConnectionStatus(this.t('connection.connecting'), 'connecting');
        const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
        const host = window.location.hostname || 'localhost';
        const port = 4449;
        const normalizedHost = host.includes(':') ? `[${host}]` : host;
        const url = `${protocol}${normalizedHost}:${port}`;

        this.socket = new WebSocket(url);
        this.socket.addEventListener('open', () => {
            this.updateConnectionStatus(this.t('connection.authenticating'), 'authenticating');
            this.sendAuthenticate();
        });

        this.socket.addEventListener('message', event => {
            this.onSocketMessage(event);
        });

        this.socket.addEventListener('error', () => {
            this.updateConnectionStatus(this.t('connection.error'), 'error');
        });

        this.socket.addEventListener('close', () => {
            this.onSocketClosed();
        });
    }

    sendAuthenticate() {
        if (!this.socket || this.socket.readyState !== WebSocket.OPEN)
            return;

        this.sendAction('authenticate', {
            token: this.token
        });
    }

    onSocketMessage(event) {
        let data;
        try {
            data = JSON.parse(event.data);
        } catch (error) {
            console.warn('Failed to parse WebSocket message', error);
            this.elements.incomingMessage.textContent = `Failed to parse message: ${error.message}`;
            return;
        }

        console.log('<--', data);

        if (this.elements.incomingMessage)
            this.elements.incomingMessage.textContent = JSON.stringify(data, null, 2);

        let handled = false;
        if (data.requestId && this.pendingRequests.has(data.requestId)) {
            const pending = this.pendingRequests.get(data.requestId);
            this.pendingRequests.delete(data.requestId);
            handled = this.handlePendingResponse(pending, data);
        } else {
            handled = this.handleUnsolicitedMessage(data);
        }

        if (!handled && data.success === false && data.error === 'unauthenticated')
            this.onAuthenticationFailed('unauthenticated');
    }

    handlePendingResponse(pending, data) {
        if (!pending)
            return false;

        const type = typeof pending.type === 'string' ? pending.type.toLowerCase() : '';

        if (type === 'authenticate') {
            if (data.success)
                this.onAuthenticationSucceeded();
            else
                this.onAuthenticationFailed(data.error || 'unauthorized');
            return true;
        }

        if (type === 'getchargers') {
            if (data.success) {
                const payload = data && data.payload ? data.payload : {};
                const chargers = Array.isArray(payload.chargers) ? payload.chargers : [];
                this.processChargerList(chargers);
            } else if (data.error === 'unauthenticated') {
                this.onAuthenticationFailed('unauthenticated');
            } else {
                console.warn('GetChargers request failed', data.error || 'unknownError');
            }
            return true;
        }

        if (type === 'getcars') {
            if (data.success) {
                const payload = data && data.payload ? data.payload : {};
                const cars = Array.isArray(payload.cars) ? payload.cars : [];
                this.processCarList(cars);
            } else if (data.error === 'unauthenticated') {
                this.onAuthenticationFailed('unauthenticated');
            } else {
                console.warn('GetCars request failed', data.error || 'unknownError');
            }
            return true;
        }

        if (type === 'getchargingsessions') {
            if (data.success) {
                const payload = data && data.payload ? data.payload : {};
                const sessions = Array.isArray(payload.sessions) ? payload.sessions : [];
                this.renderChargingSessions(sessions, this.t('sessions.noneFound'));
            } else if (data.error === 'unauthenticated') {
                this.onAuthenticationFailed('unauthenticated');
            } else {
                console.warn('GetChargingSessions request failed', data.error || 'unknownError');
                this.renderChargingSessions([], this.t('sessions.fetchFailed'));
            }
            return true;
        }

        return false;
    }

    handleUnsolicitedMessage(data) {
        if (!data)
            return false;

        if (data.event && this.handleNotificationEvent(data.event, data.payload))
            return true;

        if (!data.payload)
            return false;

        const payload = data.payload;

        if (Array.isArray(payload.chargers)) {
            this.processChargerList(payload.chargers);
            return true;
        }

        if (Array.isArray(payload.cars)) {
            this.processCarList(payload.cars);
            return true;
        }

        if (Array.isArray(payload.sessions)) {
            this.renderChargingSessions(payload.sessions);
            return true;
        }

        if (payload.charger) {
            this.upsertCharger(payload.charger);
            return true;
        }

        if (payload.car) {
            this.upsertCar(payload.car);
            return true;
        }

        return false;
    }

    handleNotificationEvent(eventName, payload) {
        if (!eventName)
            return false;

        const normalizedEvent = typeof eventName === 'string' ? eventName.toLowerCase() : '';
        switch (normalizedEvent) {
        case 'chargeradded':
        case 'chargerchanged':
            this.upsertCharger(payload);
            return true;
        case 'chargerremoved':
            this.removeCharger(payload);
            return true;
        case 'caradded':
        case 'carchanged':
            this.upsertCar(payload);
            return true;
        case 'carremoved':
            this.removeCar(payload);
            return true;
        case 'chargingsessionsupdated':
            if (payload && Array.isArray(payload.sessions))
                this.renderChargingSessions(payload.sessions);
            return true;
        default:
            return false;
        }
    }

    onAuthenticationSucceeded() {
        this.updateConnectionStatus(this.t('connection.connected'), 'connected');
        this.updateSessionUser();
        this.sendGetCars();
        this.sendGetChargers();
        this.fetchChargingSessions();
    }

    onAuthenticationFailed(reason) {
        const message = reason === 'unauthenticated'
            ? this.t('connection.sessionExpired')
            : this.t('connection.authFailed');

        console.warn('Authentication failed', reason);
        this.clearSession();
        this.showLoginOverlay(message);
        this.updateConnectionStatus(this.t('connection.authenticationRequired'), 'error');

        if (this.socket && this.socket.readyState === WebSocket.OPEN)
            this.socket.close();
    }

    onSocketClosed() {
        this.pendingRequests.clear();
        this.updateConnectionStatus(this.t('connection.disconnected'), 'error');
        if (!this.token) {
            this.showLoginOverlay();
            return;
        }

        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = setTimeout(() => {
            this.connectWebSocket();
        }, 3000);
    }

    sendAction(action, payload = {}) {
        if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
            console.warn('Cannot send action. WebSocket not connected.');
            return null;
        }

        if (action !== 'authenticate' && this.pendingRequests.size && !this.isAuthenticated()) {
            console.warn('Cannot send action before authentication succeeded.');
            return null;
        }

        const requestId = this.generateRequestId();
        const message = {
            requestId,
            action,
            payload
        };

        const normalizedAction = typeof action === 'string' ? action.toLowerCase() : '';
        this.pendingRequests.set(requestId, { type: normalizedAction });

        this.socket.send(JSON.stringify(message));
        return requestId;
    }

    isAuthenticated() {
        for (const pending of this.pendingRequests.values()) {
            if (pending.type === 'authenticate')
                return false;
        }
        return !!this.token && !!this.socket && this.socket.readyState === WebSocket.OPEN;
    }

    sendPing() {
        return this.sendAction('ping', { timestamp: new Date().toISOString() });
    }

    sendGetCars() {
        return this.sendAction('GetCars', { });
    }

    sendGetChargers() {
        return this.sendAction('GetChargers', { });
    }

    fetchChargingSessions() {
        const payload = {};
        const carId = this.elements.carFilter ? this.elements.carFilter.value : '';
        if (carId)
            payload.carId = carId;

        const requestId = this.sendAction('GetChargingSessions', payload);
        if (!requestId)
            this.renderChargingSessions([], this.t('sessions.requestFailed'));

        return requestId;
    }

    processChargerList(chargers = []) {
        if (!Array.isArray(chargers)) {
            console.warn('Expected chargers array in payload.');
            return;
        }

        const seen = new Set();
        chargers.forEach(charger => {
            const key = this.getChargerKey(charger);
            if (!key)
                return;
            seen.add(key);
            this.upsertCharger(charger);
        });

        for (const existingId of Array.from(this.chargers.keys())) {
            if (!seen.has(existingId))
                this.removeCharger(existingId);
        }
    }

    upsertCharger(charger) {
        const key = this.getChargerKey(charger);
        if (!key)
            return;

        const hasExisting = this.chargers.has(key);
        const previous = hasExisting ? this.chargers.get(key) : {};
        const merged = { ...previous, ...charger };
        merged.thingId = key;
        this.chargers.set(key, merged);
        this.syncChargerRow(merged, !hasExisting);
    }

    syncChargerRow(charger, forceCreate = false) {
        const key = this.getChargerKey(charger);
        if (!charger || !key || !this.elements.chargerTableBody)
            return;

        let row = this.findChargerRow(key);
        if (!row || forceCreate) {
            if (row && row.parentElement) {
                const detailsRow = this.findChargerDetailsRow(key);
                if (detailsRow && detailsRow.parentElement)
                    detailsRow.parentElement.removeChild(detailsRow);
                row.parentElement.removeChild(row);
            }
            row = this.buildChargerRow(charger);
            this.elements.chargerTableBody.appendChild(row);
        } else {
            this.chargerColumns.forEach(column => {
                if (column.hidden)
                    return;
                const cell = row.querySelector(`td[data-column="${column.key}"]`);
                if (!cell)
                    return;
                this.renderCellValue(cell, column.key, charger[column.key]);
            });
        }

        this.syncChargerDetailsVisibility(key);
        this.toggleChargerEmptyState();
    }

    buildChargerRow(charger) {
        const row = document.createElement('tr');
        row.classList.add('charger-row');
        row.dataset.chargerId = this.getChargerKey(charger) || '';
        row.tabIndex = 0;
        row.setAttribute('role', 'button');
        row.setAttribute('aria-expanded', 'false');
        this.chargerColumns.forEach(column => {
            if (column.hidden)
                return;
            const cell = document.createElement('td');
            cell.dataset.column = column.key;
            this.renderCellValue(cell, column.key, charger[column.key]);
            row.appendChild(cell);
        });
        return row;
    }

    toggleChargerDetails(chargerId) {
        if (!chargerId)
            return;

        const key = this.getChargerKey(chargerId);
        if (!key)
            return;

        if (this.expandedChargers.has(key))
            this.collapseChargerDetails(key);
        else
            this.expandChargerDetails(key);
    }

    expandChargerDetails(chargerId) {
        if (!chargerId)
            return;

        const key = this.getChargerKey(chargerId);
        if (!key)
            return;

        this.expandedChargers.add(key);
        this.syncChargerDetailsVisibility(key);
    }

    collapseChargerDetails(chargerId) {
        if (!chargerId)
            return;

        const key = this.getChargerKey(chargerId);
        if (!key)
            return;

        this.expandedChargers.delete(key);
        this.syncChargerDetailsVisibility(key);
    }

    syncChargerDetailsVisibility(chargerId) {
        if (!chargerId || !this.elements.chargerTableBody)
            return;

        const key = this.getChargerKey(chargerId);
        if (!key)
            return;

        const isExpanded = this.expandedChargers.has(key);
        const row = this.findChargerRow(key);
        if (row) {
            row.classList.toggle('is-expanded', isExpanded);
            row.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
        }

        const detailsRow = this.findChargerDetailsRow(key);
        if (!isExpanded) {
            if (detailsRow && detailsRow.parentElement)
                detailsRow.parentElement.removeChild(detailsRow);
            return;
        }

        if (!row)
            return;

        const ensured = detailsRow || this.buildChargerDetailsRow(key);
        if (ensured && ensured !== detailsRow) {
            this.elements.chargerTableBody.insertBefore(ensured, row.nextSibling);
        }

        this.updateChargerDetailsRow(key);
    }

    buildChargerDetailsRow(chargerId) {
        const row = document.createElement('tr');
        row.classList.add('charger-details-row');
        row.dataset.chargerDetailsFor = this.getChargerKey(chargerId) || '';

        const cell = document.createElement('td');
        cell.colSpan = this.getVisibleChargerColumnCount();
        const list = document.createElement('dl');
        list.className = 'charger-details-list';
        cell.appendChild(list);
        row.appendChild(cell);
        return row;
    }

    updateChargerDetailsRow(chargerId) {
        if (!chargerId)
            return;

        const key = this.getChargerKey(chargerId);
        if (!key || !this.expandedChargers.has(key))
            return;

        const charger = this.chargers && this.chargers.get(key) ? this.chargers.get(key) : null;
        const detailsRow = this.findChargerDetailsRow(key);
        if (!detailsRow)
            return;

        const list = detailsRow.querySelector('dl.charger-details-list');
        if (!list)
            return;

        const items = [
            { label: this.t('chargers.columns.lastStatusUpdate'), key: 'lastStatusUpdate' },
            { label: this.t('chargers.columns.version'), key: 'version' },
            { label: this.t('chargers.columns.temperature'), key: 'temperature' },
            { label: this.t('chargers.columns.digitalInputMode'), key: 'digitalInputMode' }
        ];

        list.innerHTML = '';
        items.forEach(item => {
            const term = document.createElement('dt');
            term.textContent = item.label;
            const description = document.createElement('dd');
            const value = charger && Object.prototype.hasOwnProperty.call(charger, item.key) ? charger[item.key] : null;
            description.textContent = this.formatChargerValue(item.key, value);
            list.appendChild(term);
            list.appendChild(description);
        });
    }

    findChargerDetailsRow(chargerId) {
        if (!this.elements.chargerTableBody || !chargerId)
            return null;

        const normalizedId = typeof CSS !== 'undefined' && CSS.escape
            ? CSS.escape(String(chargerId))
            : String(chargerId).replace(/"/g, '\\"');
        return this.elements.chargerTableBody.querySelector(`tr[data-charger-details-for="${normalizedId}"]`);
    }

    getVisibleChargerColumnCount() {
        return this.chargerColumns.filter(column => !column.hidden).length;
    }

    renderCellValue(cell, key, value) {
        if (!cell)
            return;

        if (typeof value === 'boolean') {
            cell.innerHTML = '';
            const dot = document.createElement('span');
            dot.className = `value-dot ${value ? 'value-dot-true' : 'value-dot-false'}`;
            dot.setAttribute('role', 'img');
            dot.setAttribute('aria-label', value ? this.t('value.true') : this.t('value.false'));
            dot.title = value ? this.t('value.true') : this.t('value.false');
            const srText = document.createElement('span');
            srText.className = 'sr-only';
            srText.textContent = value ? this.t('value.true') : this.t('value.false');
            cell.appendChild(dot);
            cell.appendChild(srText);
            return;
        }

        cell.textContent = this.formatChargerValue(key, value);
    }

    removeCharger(identifier) {
        const key = this.getChargerKey(identifier);
        if (!key)
            return;

        this.expandedChargers.delete(key);
        this.chargers.delete(key);
        const row = this.findChargerRow(key);
        const detailsRow = this.findChargerDetailsRow(key);
        if (row && row.parentElement)
            row.parentElement.removeChild(row);
        if (detailsRow && detailsRow.parentElement)
            detailsRow.parentElement.removeChild(detailsRow);

        this.toggleChargerEmptyState();
    }

    resetChargerTable() {
        if (!this.elements.chargerTableBody)
            return;

        this.expandedChargers.clear();
        const rows = this.elements.chargerTableBody.querySelectorAll('tr[data-charger-id], tr[data-charger-details-for]');
        rows.forEach(row => {
            if (row.parentElement)
                row.parentElement.removeChild(row);
        });

        this.toggleChargerEmptyState();
    }

    findChargerRow(chargerId) {
        if (!this.elements.chargerTableBody || !chargerId)
            return null;

        const normalizedId = typeof CSS !== 'undefined' && CSS.escape
            ? CSS.escape(String(chargerId))
            : String(chargerId).replace(/"/g, '\\"');
        return this.elements.chargerTableBody.querySelector(`tr[data-charger-id="${normalizedId}"]`);
    }

    getChargerKey(source) {
        if (!source)
            return null;

        if (typeof source === 'string')
            return source;

        if (source.thingId)
            return source.thingId;

        if (source.id)
            return source.id;

        return null;
    }

    toggleChargerEmptyState() {
        if (!this.elements.chargerEmptyRow)
            return;

        const hasChargers = this.chargers && this.chargers.size > 0;
        this.elements.chargerEmptyRow.classList.toggle('hidden', hasChargers);
    }

    processCarList(cars = []) {
        if (!Array.isArray(cars)) {
            console.warn('Expected cars array in payload.');
            return;
        }

        const seen = new Set();
        cars.forEach(car => {
            const key = this.getCarKey(car);
            if (!key)
                return;
            seen.add(key);
            this.upsertCar(car);
        });

        for (const existingId of Array.from(this.cars.keys())) {
            if (!seen.has(existingId))
                this.removeCar(existingId);
        }
    }

    upsertCar(car) {
        const key = this.getCarKey(car);
        if (!key)
            return;

        const hasExisting = this.cars.has(key);
        const previous = hasExisting ? this.cars.get(key) : {};
        const merged = { ...previous, ...car };
        merged.thingId = key;
        this.cars.set(key, merged);
        this.updateCarSelector();
    }

    removeCar(identifier) {
        const key = this.getCarKey(identifier);
        if (!key)
            return;

        this.cars.delete(key);
        this.updateCarSelector();
    }

    getCarKey(source) {
        if (!source)
            return null;

        if (typeof source === 'string')
            return source;

        if (source.thingId)
            return source.thingId;

        if (source.id)
            return source.id;

        return null;
    }

    updateCarSelector() {
        const select = this.elements.carFilter;
        if (!select)
            return;

        const currentValue = select.value;
        while (select.options.length > 0)
            select.remove(0);

        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.textContent = this.t('sessions.allCars');
        select.appendChild(defaultOption);

        const cars = Array.from(this.cars.values())
            .sort((a, b) => (a.name || '').localeCompare(b.name || '', undefined, { sensitivity: 'base' }));

        cars.forEach(car => {
            const option = document.createElement('option');
            option.value = this.getCarKey(car) || '';
            option.textContent = car.name || option.value;
            select.appendChild(option);
        });

        const hasValue = currentValue && select.querySelector
            && typeof CSS !== 'undefined' && CSS.escape
            && select.querySelector(`option[value="${CSS.escape(currentValue)}"]`);

        select.value = hasValue ? currentValue : '';
    }

    formatNumber(value, unit) {
        if (!Number.isFinite(value))
            return '—';

        const rounded = Number.parseFloat(value.toFixed(2));
        return unit ? `${rounded} ${unit}` : String(rounded);
    }

    formatNumberMaxDecimals(value, unit, decimals = 2) {
        if (!Number.isFinite(value))
            return '—';

        const factor = 10 ** decimals;
        const rounded = Math.round(value * factor) / factor;
        let text = rounded.toFixed(decimals).replace(/\.?0+$/, '');
        if (text === '-0')
            text = '0';
        return unit ? `${text} ${unit}` : text;
    }

    coerceFiniteNumber(value) {
        if (typeof value === 'number')
            return Number.isFinite(value) ? value : null;

        if (typeof value !== 'string')
            return null;

        const normalized = value.trim().replace(',', '.');
        if (!normalized)
            return null;

        const parsed = Number.parseFloat(normalized);
        return Number.isFinite(parsed) ? parsed : null;
    }

    formatChargerValue(key, value) {
        if (value === null || value === undefined || value === '')
            return '—';

        if (key === 'status') {
            const code = String(value).trim();
            const statusKeys = {
                Init: 'chargerStatus.Init',
                A1: 'chargerStatus.A1',
                A2: 'chargerStatus.A2',
                B1: 'chargerStatus.B1',
                B2: 'chargerStatus.B2',
                C1: 'chargerStatus.C1',
                C2: 'chargerStatus.C2',
                F: 'chargerStatus.F'
            };
            if (code in statusKeys)
                return `${code}: ${this.t(statusKeys[code])}`;
            return code || '—';
        }

        if (key === 'energyManagerMode') {
            const modes = {
                0: this.t('energyManagerMode.quick'),
                1: this.t('energyManagerMode.eco'),
                2: this.t('energyManagerMode.ecoTime')
            };
            if (value in modes)
                return modes[value];
            return Number.isFinite(value) ? this.t('value.unknownWithValue', { value }) : '—';
        }

        if (key === 'digitalInputMode') {
            const modes = {
                0: this.t('digitalInputMode.chargingAllowed'),
                1: this.t('digitalInputMode.chargingAllowedInverted'),
                2: this.t('digitalInputMode.pwmAndS0'),
                3: this.t('digitalInputMode.limitAndS0')
            };
            if (value in modes)
                return modes[value];
            return Number.isFinite(value) ? this.t('value.unknownWithValue', { value }) : '—';
        }

        if (key === 'lastStatusUpdate') {
            const numeric = typeof value === 'string' ? Number.parseFloat(value) : value;
            if (!Number.isFinite(numeric))
                return '—';

            const ms = numeric > 1e12 ? numeric : numeric * 1000;
            const date = new Date(ms);
            if (Number.isNaN(date.getTime()))
                return '—';

            const pad = part => String(part).padStart(2, '0');
            const day = pad(date.getDate());
            const month = pad(date.getMonth() + 1);
            const year = date.getFullYear();
            const hours = pad(date.getHours());
            const minutes = pad(date.getMinutes());
            const seconds = pad(date.getSeconds());

            return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
        }

        if (key === 'currentPower' || key === 'sessionEnergy') {
            const numericValue = this.coerceFiniteNumber(value);
            if (numericValue === null)
                return typeof value === 'string' ? value : '—';

            const unit = key === 'currentPower' ? 'kW' : 'kWh';
            if (key === 'currentPower')
                return numericValue >= 0 && numericValue < 50 ? `0 ${unit}` : this.formatNumberMaxDecimals(numericValue / 1000, unit, 2);

            return this.formatNumber(numericValue, unit);
        }

        if (typeof value === 'boolean')
            return value ? this.t('value.yes') : this.t('value.no');

        if (typeof value === 'number')
            return this.formatNumber(value);

        if (typeof value === 'string')
            return value;

        try {
            return JSON.stringify(value);
        } catch (error) {
            console.warn(`Failed to stringify value for ${key}`, error);
            return '—';
        }
    }

    renderChargingSessions(sessions, fallbackMessage) {
        const normalizedSessions = Array.isArray(sessions) ? sessions : [];
        this.sessions = normalizedSessions;

        this.renderChargingSessionsTable(normalizedSessions, fallbackMessage);

        if (!this.elements.chargingSessionsOutput)
            return;

        if (!normalizedSessions.length) {
            this.elements.chargingSessionsOutput.textContent = fallbackMessage || this.t('sessions.noneFound');
            return;
        }

        try {
            this.elements.chargingSessionsOutput.textContent = JSON.stringify(normalizedSessions, null, 2);
        } catch (error) {
            console.warn('Failed to render charging sessions', error);
            this.elements.chargingSessionsOutput.textContent = this.t('sessions.displayFailed');
        }
    }

    renderChargingSessionsTable(sessions, fallbackMessage) {
        const body = this.elements.chargingSessionsTableBody;
        const emptyRow = this.elements.chargingSessionsEmptyRow;
        if (!body)
            return;

        const normalizedSessions = Array.isArray(sessions) ? sessions : [];
        const filteredSessions = this.filterChargingSessionsByTimeRange(normalizedSessions);
        const hasTimeRangeFilter = this.hasChargingSessionTimeRangeFilter();

        const rows = body.querySelectorAll('tr[data-session-id]');
        rows.forEach(row => {
            if (row.parentElement)
                row.parentElement.removeChild(row);
        });

        if (!normalizedSessions.length || !filteredSessions.length) {
            if (emptyRow) {
                const cell = emptyRow.querySelector('td');
                if (cell) {
                    if (!normalizedSessions.length) {
                        cell.textContent = fallbackMessage || this.t('sessions.emptyFetched');
                    } else if (hasTimeRangeFilter) {
                        cell.textContent = this.t('sessions.noneInRange');
                    } else {
                        cell.textContent = fallbackMessage || this.t('sessions.noneFound');
                    }
                }
                emptyRow.classList.remove('hidden');
            }
            return;
        }

        if (emptyRow)
            emptyRow.classList.add('hidden');

        filteredSessions.forEach(session => {
            body.appendChild(this.buildChargingSessionRow(session));
        });
    }

    hasChargingSessionTimeRangeFilter() {
        const start = this.elements.sessionStartFilter ? this.elements.sessionStartFilter.value : '';
        const end = this.elements.sessionEndFilter ? this.elements.sessionEndFilter.value : '';
        return !!start || !!end;
    }

    getChargingSessionTimeRangeMs() {
        const startValue = this.elements.sessionStartFilter ? this.elements.sessionStartFilter.value : '';
        const endValue = this.elements.sessionEndFilter ? this.elements.sessionEndFilter.value : '';
        const startMs = this.parseDateInputToMs(startValue, { endOfDay: false });
        const endMs = this.parseDateInputToMs(endValue, { endOfDay: true });

        if (this.elements.sessionStartFilter)
            this.elements.sessionStartFilter.setCustomValidity('');
        if (this.elements.sessionEndFilter)
            this.elements.sessionEndFilter.setCustomValidity('');

        if (Number.isFinite(startMs) && Number.isFinite(endMs) && startMs > endMs) {
            const message = this.t('sessions.startBeforeEnd');
            if (this.elements.sessionStartFilter)
                this.elements.sessionStartFilter.setCustomValidity(message);
            if (this.elements.sessionEndFilter)
                this.elements.sessionEndFilter.setCustomValidity(message);
            return { startMs: null, endMs: null };
        }

        return {
            startMs: Number.isFinite(startMs) ? startMs : null,
            endMs: Number.isFinite(endMs) ? endMs : null
        };
    }

    parseDateInputToMs(value, options = {}) {
        if (!value)
            return null;

        const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
        if (!match)
            return null;

        const year = Number.parseInt(match[1], 10);
        const month = Number.parseInt(match[2], 10);
        const day = Number.parseInt(match[3], 10);
        if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day))
            return null;

        const date = new Date(year, month - 1, day);
        let ms = date.getTime();
        if (!Number.isFinite(ms))
            return null;

        if (options && options.endOfDay)
            ms += 24 * 60 * 60 * 1000 - 1;

        return ms;
    }

    normalizeTimestampToMs(timestamp) {
        const numeric = typeof timestamp === 'string' ? Number.parseFloat(timestamp) : timestamp;
        if (!Number.isFinite(numeric))
            return null;

        const ms = numeric > 1e12 ? numeric : numeric * 1000;
        return Number.isFinite(ms) ? ms : null;
    }

    filterChargingSessionsByTimeRange(sessions) {
        if (!Array.isArray(sessions) || !sessions.length)
            return [];

        const { startMs, endMs } = this.getChargingSessionTimeRangeMs();
        if (!Number.isFinite(startMs) && !Number.isFinite(endMs))
            return sessions;

        return sessions.filter(session => {
            const sessionStart = this.normalizeTimestampToMs(session ? session.startTimestamp : null);
            const sessionEnd = this.normalizeTimestampToMs(session ? session.endTimestamp : null);
            const effectiveStart = Number.isFinite(sessionStart) ? sessionStart : null;
            const effectiveEnd = Number.isFinite(sessionEnd)
                ? sessionEnd
                : (Number.isFinite(sessionStart) ? sessionStart : null);

            if (!Number.isFinite(effectiveStart) && !Number.isFinite(effectiveEnd))
                return true;

            if (Number.isFinite(startMs) && Number.isFinite(effectiveEnd) && effectiveEnd < startMs)
                return false;

            if (Number.isFinite(endMs) && Number.isFinite(effectiveStart) && effectiveStart > endMs)
                return false;

            return true;
        });
    }

    buildChargingSessionRow(session) {
        const row = document.createElement('tr');
        row.dataset.sessionId = session && session.sessionId ? session.sessionId : '';

        const cells = [
            this.deriveSessionName(session),
            session && session.chargerName ? session.chargerName : '—',
            session && session.carName ? session.carName : '—',
            this.formatTimestamp(session ? session.startTimestamp : null),
            this.formatTimestamp(session ? session.endTimestamp : null),
            this.formatSessionEnergy(session)
        ];

        cells.forEach((value, index) => {
            const cell = document.createElement('td');
            if (index === 5)
                cell.classList.add('numeric');
            cell.textContent = value;
            row.appendChild(cell);
        });

        return row;
    }

    deriveSessionName(session) {
        if (!session)
            return '—';

        if (session.name)
            return session.name;

        if (session.property)
            return session.property;

        if (session.sessionId)
            return this.t('sessions.sessionIdLabel', { id: session.sessionId });

        return '—';
    }

    formatTimestamp(timestamp) {
        const numeric = typeof timestamp === 'string' ? Number.parseFloat(timestamp) : timestamp;
        if (!Number.isFinite(numeric))
            return '—';

        const ms = numeric > 1e12 ? numeric : numeric * 1000;
        const date = new Date(ms);
        if (Number.isNaN(date.getTime()))
            return '—';

        const pad = value => String(value).padStart(2, '0');
        const day = pad(date.getDate());
        const month = pad(date.getMonth() + 1);
        const year = date.getFullYear();
        const hours = pad(date.getHours());
        const minutes = pad(date.getMinutes());

        return `${day}.${month}.${year} ${hours}:${minutes}`;
    }

    formatSessionEnergy(session) {
        const value = session && Number.isFinite(session.sessionEnergy)
            ? session.sessionEnergy
            : this.calculateSessionEnergyFromRange(session);
        if (!Number.isFinite(value))
            return '—';

        return `${value.toFixed(2)} kWh`;
    }

    calculateSessionEnergyFromRange(session) {
        if (!session)
            return null;

        const end = typeof session.energyEnd === 'string' ? Number.parseFloat(session.energyEnd) : session.energyEnd;
        const start = typeof session.energyStart === 'string' ? Number.parseFloat(session.energyStart) : session.energyStart;

        if (!Number.isFinite(end) || !Number.isFinite(start))
            return null;

        return end - start;
    }

    downloadChargingSessionsCsv() {
        const sessions = this.filterChargingSessionsByTimeRange(this.sessions);
        if (!sessions.length) {
            console.warn('No charging sessions to download.');
            return;
        }

        const csvContent = this.buildSessionsCsv(sessions);
        if (!csvContent) {
            console.warn('Failed to build CSV for charging sessions.');
            return;
        }

        const carId = this.elements.carFilter ? this.elements.carFilter.value : '';
        const carName = carId && this.cars.has(carId) ? this.cars.get(carId).name : '';
        const carSuffix = carName ? `-${this.sanitizeFilename(carName)}` : '';
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `charging-sessions${carSuffix}-${new Date().toISOString().slice(0, 10)}.csv`;
        document.body.appendChild(link);
        link.click();
        setTimeout(() => {
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }, 0);
    }

    buildSessionsCsv(sessions) {
        if (!Array.isArray(sessions) || !sessions.length)
            return '';

        const columns = [
            { label: this.t('csv.sessionId'), key: 'sessionId' },
            { label: this.t('csv.chargerName'), key: 'chargerName' },
            { label: this.t('csv.chargerSerialNumber'), key: 'chargerSerialNumber' },
            { label: this.t('csv.car'), key: 'carName' },
            { label: this.t('csv.start'), key: 'startTimestamp', formatter: value => this.formatCsvTimestamp(value) },
            { label: this.t('csv.end'), key: 'endTimestamp', formatter: value => this.formatCsvTimestamp(value) },
            { label: this.t('csv.energyKwh'), key: 'sessionEnergy' },
            { label: this.t('csv.meterStartKwh'), key: 'energyStart' },
            { label: this.t('csv.meterEndKwh'), key: 'energyEnd' }
        ];

        const lines = [];
        lines.push(columns.map(column => column.label).join(';'));
        sessions.forEach(session => {
            const row = columns.map(column => {
                const raw = session ? session[column.key] : '';
                const formatted = typeof column.formatter === 'function'
                    ? column.formatter(raw)
                    : this.formatCsvPrimitive(raw);
                return this.escapeCsvValue(formatted);
            });
            lines.push(row.join(';'));
        });

        return lines.join('\n');
    }

    formatCsvPrimitive(value) {
        if (value === null || value === undefined)
            return '';

        if (typeof value === 'number')
            return Number.isFinite(value) ? String(value) : '';

        if (typeof value === 'string') {
            const trimmed = value.trim();
            return trimmed.length ? trimmed : '';
        }

        if (Array.isArray(value)) {
            if (!value.length)
                return '';
            try {
                return JSON.stringify(value);
            } catch (error) {
                return '';
            }
        }

        if (typeof value === 'object') {
            if (!Object.keys(value).length)
                return '';
            try {
                return JSON.stringify(value);
            } catch (error) {
                return '';
            }
        }

        return String(value);
    }

    formatCsvTimestamp(value) {
        const numeric = typeof value === 'string' ? Number.parseFloat(value) : value;
        if (!Number.isFinite(numeric))
            return '';

        const ms = numeric > 1e12 ? numeric : numeric * 1000;
        const date = new Date(ms);
        if (Number.isNaN(date.getTime()))
            return '';

        const pad = part => String(part).padStart(2, '0');
        const day = pad(date.getDate());
        const month = pad(date.getMonth() + 1);
        const year = date.getFullYear();
        const hours = pad(date.getHours());
        const minutes = pad(date.getMinutes());

        return `${day}.${month}.${year} ${hours}:${minutes}`;
    }

    escapeCsvValue(value) {
        if (value === null || value === undefined)
            return '';

        if (typeof value === 'number' && !Number.isFinite(value))
            return '';

        if (typeof value === 'object') {
            try {
                value = JSON.stringify(value);
            } catch (error) {
                value = String(value);
            }
        }

        let stringValue = String(value);
        if (stringValue.includes('"'))
            stringValue = stringValue.replace(/"/g, '""');

        if (stringValue.search(/[;\n"]/g) !== -1)
            stringValue = `"${stringValue}"`;

        return stringValue;
    }

    handleBrandLogoClick() {
        clearTimeout(this.easterEggClickResetTimer);
        this.easterEggClickCount += 1;
        this.easterEggClickResetTimer = setTimeout(() => {
            this.easterEggClickCount = 0;
        }, 1200);

        if (this.easterEggClickCount >= 10) {
            this.easterEggClickCount = 0;
            this.startEasterEggGame();
        }
    }

    startEasterEggGame() {
        if (!this.elements.easterEggOverlay || !this.elements.easterEggCanvas)
            return;

        this.elements.easterEggOverlay.classList.remove('hidden');
        this.elements.easterEggOverlay.setAttribute('aria-hidden', 'false');

        const game = this.easterEggGame;
        const canvas = this.elements.easterEggCanvas;
        game.running = true;
        game.score = 0;
        game.keys = {};
        game.lastTime = null;
        game.player.x = canvas.width * 0.2;
        game.player.y = canvas.height * 0.5;
        this.spawnEasterEggTarget();
        this.updateEasterEggScore();
        this.toggleEasterEggListeners(true);

        const loop = timestamp => {
            if (!game.running)
                return;

            if (!game.lastTime)
                game.lastTime = timestamp;
            const delta = Math.min((timestamp - game.lastTime) / 16.67, 3);
            game.lastTime = timestamp;

            this.updateEasterEggPhysics(delta);
            this.drawEasterEggFrame();
            game.frameId = window.requestAnimationFrame(loop);
        };

        game.frameId = window.requestAnimationFrame(loop);
    }

    stopEasterEggGame() {
        const game = this.easterEggGame;
        game.running = false;
        game.keys = {};
        if (game.frameId) {
            window.cancelAnimationFrame(game.frameId);
            game.frameId = null;
        }

        if (this.elements.easterEggOverlay) {
            this.elements.easterEggOverlay.classList.add('hidden');
            this.elements.easterEggOverlay.setAttribute('aria-hidden', 'true');
        }

        this.toggleEasterEggListeners(false);
    }

    toggleEasterEggListeners(enable) {
        if (!this._easterEggKeyDownHandler) {
            this._easterEggKeyDownHandler = event => this.handleEasterEggKey(event, true);
            this._easterEggKeyUpHandler = event => this.handleEasterEggKey(event, false);
        }

        if (enable) {
            document.addEventListener('keydown', this._easterEggKeyDownHandler);
            document.addEventListener('keyup', this._easterEggKeyUpHandler);
        } else {
            document.removeEventListener('keydown', this._easterEggKeyDownHandler);
            document.removeEventListener('keyup', this._easterEggKeyUpHandler);
        }
    }

    handleEasterEggKey(event, isDown) {
        if (!this.easterEggGame.running)
            return;

        const key = event.key ? event.key.toLowerCase() : '';
        const movableKeys = ['arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'w', 'a', 's', 'd'];
        if (key === 'escape') {
            this.stopEasterEggGame();
            return;
        }

        if (movableKeys.includes(key)) {
            event.preventDefault();
            this.easterEggGame.keys[key] = isDown;
        }
    }

    updateEasterEggPhysics(delta) {
        const canvas = this.elements.easterEggCanvas;
        if (!canvas)
            return;

        const game = this.easterEggGame;
        const { player, target } = game;
        const input = {
            x: (game.keys.arrowright || game.keys.d ? 1 : 0) - (game.keys.arrowleft || game.keys.a ? 1 : 0),
            y: (game.keys.arrowdown || game.keys.s ? 1 : 0) - (game.keys.arrowup || game.keys.w ? 1 : 0)
        };

        if (input.x !== 0 || input.y !== 0) {
            const length = Math.hypot(input.x, input.y) || 1;
            const speed = player.speed * delta;
            player.x += (input.x / length) * speed;
            player.y += (input.y / length) * speed;
        }

        const minX = player.size;
        const maxX = canvas.width - player.size;
        const minY = player.size;
        const maxY = canvas.height - player.size;
        player.x = Math.min(Math.max(player.x, minX), maxX);
        player.y = Math.min(Math.max(player.y, minY), maxY);

        const dx = player.x - target.x;
        const dy = player.y - target.y;
        const distance = Math.hypot(dx, dy);
        if (distance <= player.size + target.size) {
            game.score += 1;
            player.speed = Math.min(player.speed + 0.15, 7.5);
            this.updateEasterEggScore();
            this.spawnEasterEggTarget();
        }
    }

    drawEasterEggFrame() {
        const canvas = this.elements.easterEggCanvas;
        if (!canvas)
            return;

        const ctx = canvas.getContext('2d');
        const game = this.easterEggGame;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, '#0f1c3d');
        gradient.addColorStop(1, '#092037');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = 'rgba(255,255,255,0.08)';
        ctx.lineWidth = 1;
        for (let x = 20; x < canvas.width; x += 40) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
            ctx.stroke();
        }
        for (let y = 20; y < canvas.height; y += 40) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
            ctx.stroke();
        }

        const { player, target } = game;
        ctx.fillStyle = '#f4b400';
        ctx.beginPath();
        ctx.moveTo(target.x, target.y - target.size);
        ctx.lineTo(target.x - target.size * 0.6, target.y + target.size * 0.2);
        ctx.lineTo(target.x - target.size * 0.2, target.y + target.size * 0.2);
        ctx.lineTo(target.x - target.size, target.y + target.size);
        ctx.lineTo(target.x + target.size * 0.2, target.y + target.size * 0.2);
        ctx.lineTo(target.x + target.size * 0.6, target.y - target.size * 0.8);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = 'rgba(0,0,0,0.2)';
        ctx.lineWidth = 1.2;
        ctx.stroke();

        const carWidth = player.size * 2.4;
        const carHeight = player.size * 1.4;
        const carX = player.x - carWidth / 2;
        const carY = player.y - carHeight / 2;

        const carGradient = ctx.createLinearGradient(carX, carY, carX + carWidth, carY + carHeight);
        carGradient.addColorStop(0, '#e30a18');
        carGradient.addColorStop(1, '#f48221');
        ctx.fillStyle = carGradient;

        ctx.beginPath();
        ctx.moveTo(carX + carWidth * 0.15, carY + carHeight);
        ctx.lineTo(carX + carWidth * 0.15, carY + carHeight * 0.55);
        ctx.lineTo(carX + carWidth * 0.35, carY + carHeight * 0.25);
        ctx.lineTo(carX + carWidth * 0.65, carY + carHeight * 0.25);
        ctx.lineTo(carX + carWidth * 0.85, carY + carHeight * 0.55);
        ctx.lineTo(carX + carWidth * 0.85, carY + carHeight);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = 'rgba(255,255,255,0.35)';
        ctx.lineWidth = 2;
        ctx.stroke();

        const wheelRadius = player.size * 0.35;
        const wheelY = carY + carHeight;
        ctx.fillStyle = '#0d1221';
        ctx.beginPath();
        ctx.arc(carX + carWidth * 0.28, wheelY, wheelRadius, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(carX + carWidth * 0.72, wheelY, wheelRadius, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = 'rgba(255,255,255,0.35)';
        ctx.fillRect(carX + carWidth * 0.42, carY + carHeight * 0.32, carWidth * 0.22, carHeight * 0.2);
    }

    spawnEasterEggTarget() {
        const canvas = this.elements.easterEggCanvas;
        if (!canvas)
            return;

        const target = this.easterEggGame.target;
        const player = this.easterEggGame.player;
        const padding = target.size + 12;
        let attempts = 0;
        do {
            target.x = padding + Math.random() * (canvas.width - padding * 2);
            target.y = padding + Math.random() * (canvas.height - padding * 2);
            attempts++;
        } while (Math.hypot(player.x - target.x, player.y - target.y) < player.size * 2 && attempts < 12);
    }

    updateEasterEggScore() {
        if (!this.elements.easterEggScore)
            return;
        this.elements.easterEggScore.textContent = this.t('easterEgg.score', { score: this.easterEggGame.score });
    }

    sanitizeFilename(value) {
        if (typeof value !== 'string')
            return '';

        const trimmed = value.trim();
        if (!trimmed.length)
            return '';

        return trimmed
            .replace(/[^a-z0-9-_]+/gi, '-')
            .replace(/-+/g, '-')
            .replace(/^-|-$/g, '')
            .toLowerCase();
    }

    updateConnectionStatus(text, state) {
        if (this.elements.connectionStatus)
            this.elements.connectionStatus.textContent = text;

        if (!this.elements.statusDot)
            return;

        const dot = this.elements.statusDot;
        dot.classList.remove('connecting', 'connected', 'authenticating', 'error');
        dot.classList.add(state);
    }

    updateSessionUser() {
        if (!this.elements.sessionUsername)
            return;

        const defaultLabel = document.body && document.body.dataset.mode === 'help'
            ? this.t('header.authenticateHint')
            : this.t('header.awaitingLogin');

        if (!this.token || !this.username) {
            this.elements.sessionUsername.textContent = defaultLabel;
            this.toggleLogoutButton(false);
            return;
        }

        this.elements.sessionUsername.textContent = this.username;
        this.toggleLogoutButton(true);
    }

    showLoginOverlay(message) {
        this.setAuthLayout(true);
        if (this.elements.loginOverlay)
            this.elements.loginOverlay.classList.remove('hidden');
        if (typeof message === 'string' && message.length > 0)
            this.showLoginError(message);
        else
            this.hideLoginError();

        if (this.elements.username)
            setTimeout(() => this.elements.username.focus(), 50);
    }

    hideLoginOverlay() {
        this.setAuthLayout(false);
        if (this.elements.loginOverlay)
            this.elements.loginOverlay.classList.add('hidden');
        this.hideLoginError();
    }

    showLoginError(message) {
        if (!this.elements.loginError)
            return;
        this.elements.loginError.textContent = message;
        this.elements.loginError.classList.remove('hidden');
    }

    hideLoginError() {
        if (!this.elements.loginError)
            return;
        this.elements.loginError.textContent = '';
        this.elements.loginError.classList.add('hidden');
    }

    setLoginLoading(loading) {
        if (!this.elements.loginButton)
            return;
        this.elements.loginButton.disabled = loading;
        this.elements.loginButton.textContent = loading ? this.t('login.signingIn') : this.t('login.signIn');
    }

    generateRequestId() {
        if (window.crypto && window.crypto.randomUUID)
            return window.crypto.randomUUID();

        return `req-${Date.now()}-${Math.random().toString(16).slice(2)}`;
    }

    setAuthLayout(requireAuth) {
        const body = document.body;
        if (!body)
            return;
        body.classList.toggle('needs-auth', requireAuth);
    }

    toggleLogoutButton(visible) {
        if (!this.elements.logoutButton)
            return;
        this.elements.logoutButton.classList.toggle('hidden', !visible);
    }

    logout() {
        this.clearSession();
        if (this.socket && this.socket.readyState === WebSocket.OPEN)
            this.socket.close();
        this.updateConnectionStatus(this.t('connection.loggedOut'), 'connecting');
        this.updateSessionUser();
        this.showLoginOverlay(this.t('connection.loggedOutOverlay'));
    }

    scheduleTokenRefresh() {
        clearTimeout(this.tokenRefreshTimer);
        this.tokenRefreshTimer = null;

        if (!this.token || !this.tokenExpiry)
            return;

        const now = Date.now();
        const expiryTime = this.tokenExpiry.getTime();
        const leadTimeMs = 60 * 1000; // refresh one minute before expiry
        const delay = Math.max(expiryTime - leadTimeMs - now, 5 * 1000);

        this.tokenRefreshTimer = setTimeout(() => {
            this.refreshToken();
        }, delay);
    }

    async refreshToken() {
        if (!this.token || this.refreshInFlight)
            return;

        this.refreshInFlight = true;

        try {
            const response = await fetch('/evdash/api/refresh', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ token: this.token })
            });

            const data = await response.json();
            if (!response.ok || !data.success)
                throw new Error(data && data.error ? data.error : 'refreshFailed');

            if (!data.token || !data.expiresAt)
                throw new Error(this.t('login.invalidResponse'));

            this.persistSession({
                token: data.token,
                expiresAt: data.expiresAt,
                username: this.username
            });
            this.updateSessionUser();
        } catch (error) {
            console.warn('Token refresh failed', error);
            this.clearSession();
            this.updateConnectionStatus(this.t('connection.authenticationRequired'), 'error');
            if (this.socket && this.socket.readyState === WebSocket.OPEN)
                this.socket.close();
            this.showLoginOverlay(this.t('connection.sessionExpired'));
        } finally {
            this.refreshInFlight = false;
        }
    }
}

window.app = new DashboardApp();