<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>3D Weather Clock</title>
        <meta name="theme-color" content="#2E1A47" />
      <script type="module" crossorigin src="./weather-clock/assets/index-BCFONjnb.js"></script>
      <link rel="modulepreload" crossorigin href="./weather-clock/assets/three-core-Dsei6XGI.js">
      <link rel="modulepreload" crossorigin href="./weather-clock/assets/three-addons-BwMOWpl7.js">
      <link rel="modulepreload" crossorigin href="./weather-clock/assets/app-BrOmszL5.js">
      <link rel="stylesheet" crossorigin href="./weather-clock/assets/app-BeXdqjTg.css">
    <link rel="manifest" href="./weather-clock/manifest.webmanifest"></head>
    <body>
        <div id="canvas-container"></div>

        <!-- Top Bar -->
        <div id="top-bar">
            <div class="top-bar-left">
                <div class="location-display">
                    <span id="location">Detecting Location...</span>
                    <button id="retry-location" class="retry-btn" title="Retry Location">
                        <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path
                                d="M2,8 A6,6 0 1,0 8,2"
                                stroke="currentColor"
                                fill="none"
                                stroke-width="1.5"
                                stroke-linecap="round"
                            />
                            <polyline
                                points="2,4 2,8 6,8"
                                stroke="currentColor"
                                fill="none"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </button>
                </div>
                <div id="offline-status" class="offline-status" hidden>Offline</div>
                <script>
                    (function () {
                        const el = document.getElementById('offline-status');
                        if (!el) return;
                        function offlineText() {
                            try {
                                const lat = localStorage.getItem('weatherclock_lat');
                                const lon = localStorage.getItem('weatherclock_lon');
                                if (!lat || !lon) return 'Offline';
                                const roundedLat = Math.round(Number(lat) * 100) / 100;
                                const roundedLon = Math.round(Number(lon) * 100) / 100;
                                const cached = JSON.parse(
                                    localStorage.getItem(`weatherclock_${roundedLat}_${roundedLon}_weather`)
                                );
                                if (cached && cached.timestamp) {
                                    const timeStr = new Date(cached.timestamp).toLocaleTimeString([], {
                                        hour: 'numeric',
                                        minute: '2-digit'
                                    });
                                    return `Offline — showing data from ${timeStr}`;
                                }
                            } catch (error) {
                                // Fall through to generic offline label
                            }
                            return 'Offline';
                        }
                        function sync() {
                            if (!navigator.onLine) {
                                el.hidden = false;
                                el.classList.add('visible');
                                el.textContent = offlineText();
                            } else {
                                el.hidden = true;
                                el.classList.remove('visible');
                            }
                        }
                        window.addEventListener('offline', sync);
                        window.addEventListener('online', sync);
                        sync();
                    })();
                </script>
                <div class="search-container">
                    <input type="text" id="location-search" class="search-input" placeholder="City name…" />
                </div>
                <button id="search-btn" class="search-btn">
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <circle cx="7" cy="7" r="5" stroke="currentColor" fill="none" stroke-width="1.5" />
                        <line
                            x1="11"
                            y1="11"
                            x2="14"
                            y2="14"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                    </svg>
                </button>
            </div>
            <div class="top-bar-right">
                <button id="photo-capture" class="mode-toggle-btn" title="Save photo (P)">
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <rect
                            x="1.5"
                            y="4.5"
                            width="13"
                            height="9"
                            rx="1.5"
                            stroke="currentColor"
                            fill="none"
                            stroke-width="1.5"
                        />
                        <circle cx="8" cy="9" r="2.5" stroke="currentColor" fill="none" stroke-width="1.5" />
                        <path
                            d="M5.5 4.5 6.5 2.5h3l1 2"
                            stroke="currentColor"
                            fill="none"
                            stroke-width="1.5"
                            stroke-linejoin="round"
                        />
                    </svg>
                </button>
                <button id="timelapse-record" class="mode-toggle-btn" title="Export time-lapse (L)">
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <circle cx="8" cy="8" r="6.5" stroke="currentColor" fill="none" stroke-width="1.5" />
                        <circle cx="8" cy="8" r="2.5" fill="currentColor" />
                    </svg>
                </button>
                <button
                    id="kiosk-toggle"
                    class="mode-toggle-btn"
                    title="Enter kiosk mode (fullscreen + keep screen on)"
                    aria-pressed="false"
                    hidden
                >
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <rect
                            x="2"
                            y="3"
                            width="12"
                            height="10"
                            rx="1"
                            stroke="currentColor"
                            fill="none"
                            stroke-width="1.5"
                        />
                        <line
                            x1="5"
                            y1="7"
                            x2="5"
                            y2="9"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                        <line
                            x1="11"
                            y1="7"
                            x2="11"
                            y2="9"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                    </svg>
                </button>
                <button id="ambience-toggle" class="mode-toggle-btn" title="Ambient sound (muted)" aria-pressed="false">
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <path
                            d="M2 6h2.5L8 3v10L4.5 10H2V6z"
                            fill="currentColor"
                            stroke="currentColor"
                            stroke-width="1"
                            stroke-linejoin="round"
                        />
                        <line
                            x1="10.5"
                            y1="4"
                            x2="14"
                            y2="12"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                        <line
                            x1="14"
                            y1="4"
                            x2="10.5"
                            y2="12"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                    </svg>
                </button>
                <button id="mode-toggle" class="mode-toggle-btn" title="Switch to Timeline View (T)">
                    <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none" stroke-width="1.5" />
                        <line
                            x1="8"
                            y1="8"
                            x2="8"
                            y2="4"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                        <line
                            x1="8"
                            y1="8"
                            x2="11"
                            y2="10"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                    </svg>
                </button>
                <div
                    id="unit-toggle"
                    class="unit-segmented"
                    data-unit="metric"
                    role="button"
                    tabindex="0"
                    aria-label="Toggle temperature unit"
                >
                    <button class="segment" data-segment="celsius">°C</button>
                    <button class="segment" data-segment="fahrenheit">°F</button>
                    <button class="segment" data-segment="kmh">km/h</button>
                    <button class="segment" data-segment="mph">mph</button>
                </div>
            </div>
        </div>

        <!-- Severe Weather Alert Banner -->
        <div id="alert-banner" class="alert-banner" role="alert" hidden>
            <button id="alert-banner-toggle" class="alert-banner-summary" aria-expanded="false">
                <span id="alert-banner-headline" class="alert-banner-headline">--</span>
                <svg
                    class="icon-svg alert-banner-chevron"
                    viewBox="0 0 16 16"
                    width="14"
                    height="14"
                    aria-hidden="true"
                >
                    <polyline
                        points="4,6 8,10 12,6"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
            </button>
            <div id="alert-banner-body" class="alert-banner-body" hidden></div>
        </div>

        <!-- Center Overlay -->
        <div id="center-overlay">
            <div id="time-display" class="time-display">--:--</div>
            <div id="date-display">--</div>
            <div id="current-temp">--°</div>
            <div id="current-description">Loading...</div>
        </div>

        <!-- Left Drawer -->
        <div id="panel-left" class="panel drawer">
            <div class="drawer-handle">
                <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <polyline
                        points="6,3 11,8 6,13"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                <span class="drawer-handle-label">PREVIOUS</span>
            </div>
            <div class="drawer-content">
                <h3>Previous <span id="past-time-display" style="font-size: 0.8em; opacity: 0.8"></span></h3>
                <div id="past-description" class="description">--</div>
                <div class="stat-row">
                    <span class="stat-label">Temp</span>
                    <span id="past-temp" class="stat-value">--°</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Feels Like</span>
                    <span id="past-feels-like" class="stat-value">--°</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Wind</span>
                    <span id="past-wind" class="stat-value">-- km/h</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Humidity</span>
                    <span id="past-humidity" class="stat-value">--%</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Cloud Cover</span>
                    <span id="past-cloud" class="stat-value">--%</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Precip. Prob.</span>
                    <span id="past-precip-prob" class="stat-value">--%</span>
                </div>
                <canvas id="sparkline" width="280" height="60"></canvas>
            </div>
        </div>

        <!-- Right Drawer -->
        <div id="panel-right" class="panel drawer">
            <div class="drawer-handle">
                <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <polyline
                        points="10,3 5,8 10,13"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                <span class="drawer-handle-label">FORECAST</span>
            </div>
            <div class="drawer-content">
                <h3>Forecast <span id="forecast-time-display" style="font-size: 0.8em; opacity: 0.8"></span></h3>
                <div id="forecast-description" class="description">--</div>
                <div class="stat-row">
                    <span class="stat-label">Temp</span>
                    <span id="forecast-temp" class="stat-value">--°</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Feels Like</span>
                    <span id="forecast-feels-like" class="stat-value">--°</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Wind</span>
                    <span id="forecast-wind" class="stat-value">-- km/h</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Humidity</span>
                    <span id="forecast-humidity" class="stat-value">--%</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Cloud Cover</span>
                    <span id="forecast-cloud" class="stat-value">--%</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Precip. Prob.</span>
                    <span id="forecast-precip-prob" class="stat-value">--%</span>
                </div>
                <canvas id="pressure-gauge" width="140" height="140"></canvas>
            </div>
        </div>

        <!-- Bottom Mini Bar -->
        <div id="bottom-mini-bar" class="center-stats">
            <span class="cs-item">
                <svg id="wind-compass" class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none" stroke-width="1.5" />
                    <g
                        id="wind-arrow"
                        style="transform-origin: 8px 8px; transform: rotate(0deg); transition: transform 0.5s ease"
                    >
                        <path
                            d="M8,2 L5,10 L8,8 L11,10 Z"
                            stroke="currentColor"
                            fill="none"
                            stroke-width="1.5"
                            stroke-linejoin="round"
                        />
                    </g>
                </svg>
                <span id="current-wind" class="stat-value">--</span> km/h
            </span>
            <span class="cs-item">
                <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <path
                        d="M8,2 C8,2 4,7 4,10 A4,4 0 0,0 12,10 C12,7 8,2 8,2Z"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                    />
                </svg>
                <span id="current-humidity" class="stat-value">--%</span>
            </span>
            <span class="cs-item">
                <svg class="icon-svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <path
                        d="M10,2 A6,6 0 1,1 6,14 A5,5 0 1,0 10,2Z"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                    />
                </svg>
                <span id="moon-phase" class="stat-value">--</span>
            </span>
            <span class="cs-item day-progress-arc">
                <svg width="40" height="20" viewBox="0 0 40 20" aria-hidden="true">
                    <path class="day-arc-track" d="M 2,20 A 18,18 0 0,1 38,20" stroke-width="1.5" />
                    <path
                        class="day-arc-active"
                        d="M 2,20 A 18,18 0 0,1 38,20"
                        stroke-width="1.5"
                        stroke-dasharray="28.27 56.55"
                    />
                    <circle class="day-arc-dot" cx="20" cy="2" r="2" />
                </svg>
                <span id="sunrise-time" class="stat-value">--:--</span> –
                <span id="sunset-time" class="stat-value">--:--</span>
            </span>
            <span id="current-uv" class="uv-badge">UV --</span>
            <span id="current-aqi" class="aqi-badge" hidden>AQI --</span>
            <span id="current-pollen" class="pollen-badge" hidden>Pollen --</span>
        </div>

        <!-- Advanced Drawer -->
        <div id="panel-advanced" class="advanced-drawer">
            <div class="drawer-handle-grip">
                <span class="drawer-handle-grip-label">History • Accuracy • Nearby</span>
            </div>
            <div class="drawer-tabs">
                <button class="tab-btn active" data-tab="history">History</button>
                <button class="tab-btn" data-tab="accuracy">Accuracy</button>
                <button class="tab-btn" data-tab="nearby">Nearby</button>
            </div>
            <div class="tab-panels">
                <div class="tab-content active" id="tab-history">
                    <div class="adv-section">
                        <h3>1 Year Ago</h3>
                        <div id="history-temp" class="adv-val-big">--°</div>
                        <div id="history-desc" class="adv-sub">--</div>
                    </div>
                </div>
                <div class="tab-content" id="tab-accuracy">
                    <div
                        class="adv-section"
                        title="Mean absolute error of the 1-day- and 3-day-ahead model forecasts vs. observed temperatures over the last 24 hours (Open-Meteo Previous Runs API). Score: 100% minus 10 points per °C of error."
                    >
                        <h3>Forecast Accuracy</h3>
                        <div id="accuracy-delta" class="adv-val-big">--</div>
                        <div id="accuracy-score" class="adv-sub">Score: --%</div>
                    </div>
                </div>
                <div class="tab-content" id="tab-nearby">
                    <div class="adv-section">
                        <h3>Nearby Regions</h3>
                        <div id="regional-list" class="regional-list"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timeline Scrubber -->
        <div id="timeline-scrubber">
            <button id="scrubber-play-btn" class="scrubber-btn" title="Play/Pause (W)">
                <svg id="scrubber-play-icon" viewBox="0 0 16 16" aria-hidden="true">
                    <polygon
                        points="5,3 13,8 5,13"
                        stroke="currentColor"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                    />
                </svg>
            </button>
            <div class="scrubber-main">
                <div class="scrubber-chips">
                    <span class="scrubber-chip" id="scrubber-time-chip">--:--</span>
                    <button class="speed-chip" id="scrubber-speed-chip" data-speed="60">60×</button>
                </div>
                <div class="scrubber-track" id="scrubber-track">
                    <div class="scrubber-playhead" id="scrubber-playhead"></div>
                </div>
            </div>
        </div>

        <!-- Timeline UI Container (hidden by default) -->
        <div id="timeline-ui-container"></div>

        <!-- DEV hint -->
        <div id="dev-hint">` — toggle stats</div>
        <div id="toast-container"></div>

        <!-- Time-lapse recording progress -->
        <div id="timelapse-progress" class="timelapse-progress" hidden>
            <span class="timelapse-label">Recording time-lapse</span>
            <div class="timelapse-bar"><div id="timelapse-progress-fill" class="timelapse-bar-fill"></div></div>
            <span id="timelapse-progress-pct">0%</span>
            <button id="timelapse-cancel" class="timelapse-cancel-btn">Cancel</button>
        </div>

        <script>
            // Minimal delegation for mode-toggle since ModeController skips attaching when element already exists
            document.addEventListener('click', function (e) {
                if (e.target.closest('#mode-toggle') && window.modeController) {
                    window.modeController.toggleMode();
                }
            });

            // Tab switching for advanced drawer
            document.querySelectorAll('#panel-advanced .tab-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var tab = btn.dataset.tab;
                    document.querySelectorAll('#panel-advanced .tab-btn').forEach(function (b) {
                        b.classList.remove('active');
                    });
                    document.querySelectorAll('#panel-advanced .tab-content').forEach(function (c) {
                        c.classList.remove('active');
                    });
                    btn.classList.add('active');
                    document.getElementById('tab-' + tab).classList.add('active');
                });
            });

            // Expand/collapse advanced drawer via drag handle click
            var advDrawer = document.getElementById('panel-advanced');
            var dragHandle = advDrawer.querySelector('.drawer-handle-grip');
            if (dragHandle) {
                dragHandle.addEventListener('click', function () {
                    advDrawer.classList.toggle('expanded');
                });
            }

            // Drawer interaction listeners
            document.getElementById('panel-left')?.addEventListener('click', function (e) {
                if (e.target.closest('.drawer-handle')) {
                    this.classList.toggle('expanded');
                }
            });

            document.getElementById('panel-right')?.addEventListener('click', function (e) {
                if (e.target.closest('.drawer-handle')) {
                    this.classList.toggle('expanded');
                }
            });

            // DOM Binding Validator
            window.DOMBindingValidator = {
                validate: function () {
                    var results = {
                        elements: {},
                        issues: []
                    };
                    var requiredElements = [
                        'panel-left',
                        'panel-right',
                        'panel-advanced',
                        'center-overlay',
                        'timeline-scrubber',
                        'canvas-container',
                        'top-bar'
                    ];
                    requiredElements.forEach(function (id) {
                        var el = document.getElementById(id);
                        results.elements[id] = !!el;
                        if (!el) results.issues.push('Missing element: #' + id);
                    });
                    console.log('DOM Binding Validation:', results);
                    return results;
                }
            };

            // Z-Index Manager
            window.ZIndexManager = {
                verify: function () {
                    var elements = {
                        'canvas-container': document.getElementById('canvas-container'),
                        'center-overlay': document.getElementById('center-overlay'),
                        'bottom-mini-bar': document.getElementById('bottom-mini-bar'),
                        'panel-advanced': document.getElementById('panel-advanced'),
                        'panel-left': document.getElementById('panel-left'),
                        'panel-right': document.getElementById('panel-right'),
                        'timeline-scrubber': document.getElementById('timeline-scrubber'),
                        'top-bar': document.getElementById('top-bar')
                    };
                    var zIndices = {};
                    for (var key in elements) {
                        if (elements[key]) {
                            zIndices[key] = window.getComputedStyle(elements[key]).zIndex || 'auto';
                        }
                    }
                    console.log('Z-Index Stacking:', zIndices);
                    return zIndices;
                }
            };

            // Debug API
            window.aetherDebug = {
                getLocation: function () {
                    if (window.weatherService) {
                        return {
                            latitude: window.weatherService.latitude,
                            longitude: window.weatherService.longitude,
                            location: window.weatherService.location
                        };
                    }
                    return null;
                },
                toggleDrawer: function (side) {
                    var panel = document.getElementById('panel-' + side);
                    if (panel) {
                        panel.classList.toggle('expanded');
                    }
                },
                validateAll: function () {
                    console.log('=== Aether Clock Debug Report ===');
                    DOMBindingValidator.validate();
                    ZIndexManager.verify();
                    console.log('Location:', this.getLocation());
                }
            };
        </script>
        <span id="current-feels-like" style="display: none">--</span>
    </body>
</html>