<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WallClock</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="manifest" href="manifest.webmanifest">
    <link rel="icon" href="clock-icon.svg" type="image/svg+xml">
    <meta name="theme-color" content="#ffffff">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

<body>

    <!-- Banner container with state-based banners -->
    <div id="banner-container" class="fader">
        <div id="banner-content">
            <div id="banner-unavailable">🚫 Microphone permission denied</div>
            <div id="banner-disabled">🚫 Voice control disabled</div>
            <div id="banner-waiting">🎤 Say "hey timer" or "go timer"</div>
            <div id="banner-listening">🎤 Listening • Say "help" or click for commands</div>
            <div id="banner-speech-blocked">🔇 Speech unavailable - Silent mode or no speech synthesis</div>
            <div id="banner-network-error">⚠️ Network error - Speech recognition temporarily unavailable</div>
        </div>

        <!-- Single shared progress bar container -->
        <div id="progress-container" class="hidden">
            <div class="timeout-progress-bar"></div>
        </div>
    </div>

    <!-- Main content area for clock -->
    <div id="main-content">
        <div id="clock-container">
            <svg id="analog-clock" viewBox="0 0 400 400">
                <!-- Clock face -->
                <circle cx="200" cy="200" r="190" fill="var(--clock-bg)" stroke="var(--clock-numbers)"
                    stroke-width="4" />

                <!-- Hour markers and numbers -->
                <g id="hour-markers"></g>

                <!-- Digital time display -->
                <text id="digital-time" x="200" y="250" text-anchor="middle" dominant-baseline="middle" font-size="64"
                    font-family="var(--clock-font)" fill="none" stroke="var(--digital-time-color)"
                    stroke-width="1"></text>

                <!-- Clock hands (after digital time so they appear in front) -->
                <line id="hour-hand" x1="200" y1="200" x2="200" y2="90" stroke-width="6" stroke-linecap="round"
                    class="hour-hand" />
                <line id="minute-hand" x1="200" y1="200" x2="200" y2="50" stroke-width="4" stroke-linecap="round"
                    class="minute-hand" />
                <line id="second-hand" x1="200" y1="200" x2="200" y2="40" stroke-width="2" stroke-linecap="round"
                    class="second-hand" />

                <!-- Timer countdown display -->
                <text id="timer-countdown" x="200" y="160" text-anchor="middle" dominant-baseline="middle"
                    font-size="64" font-family="var(--clock-font)" fill="var(--timer-seconds-color)"
                    font-weight="bold"></text>


                <!-- Timer countdown circles - 60 dots at second positions -->
                <g id="countdown-dots">
                    <!-- Generated 60 dots positioned at second marks (every 6 degrees) -->
                    <circle class="countdown-dot" data-second="0" cx="250" cy="30" r="8"
                        transform="rotate(0 250 250)" />
                    <circle class="countdown-dot" data-second="1" cx="250" cy="30" r="8"
                        transform="rotate(6 250 250)" />
                    <circle class="countdown-dot" data-second="2" cx="250" cy="30" r="8"
                        transform="rotate(12 250 250)" />
                    <circle class="countdown-dot" data-second="3" cx="250" cy="30" r="8"
                        transform="rotate(18 250 250)" />
                    <circle class="countdown-dot" data-second="4" cx="250" cy="30" r="8"
                        transform="rotate(24 250 250)" />
                    <circle class="countdown-dot" data-second="5" cx="250" cy="30" r="8"
                        transform="rotate(30 250 250)" />
                    <circle class="countdown-dot" data-second="6" cx="250" cy="30" r="8"
                        transform="rotate(36 250 250)" />
                    <circle class="countdown-dot" data-second="7" cx="250" cy="30" r="8"
                        transform="rotate(42 250 250)" />
                    <circle class="countdown-dot" data-second="8" cx="250" cy="30" r="8"
                        transform="rotate(48 250 250)" />
                    <circle class="countdown-dot" data-second="9" cx="250" cy="30" r="8"
                        transform="rotate(54 250 250)" />
                    <circle class="countdown-dot" data-second="10" cx="250" cy="30" r="8"
                        transform="rotate(60 250 250)" />
                    <circle class="countdown-dot" data-second="11" cx="250" cy="30" r="8"
                        transform="rotate(66 250 250)" />
                    <circle class="countdown-dot" data-second="12" cx="250" cy="30" r="8"
                        transform="rotate(72 250 250)" />
                    <circle class="countdown-dot" data-second="13" cx="250" cy="30" r="8"
                        transform="rotate(78 250 250)" />
                    <circle class="countdown-dot" data-second="14" cx="250" cy="30" r="8"
                        transform="rotate(84 250 250)" />
                    <circle class="countdown-dot" data-second="15" cx="250" cy="30" r="8"
                        transform="rotate(90 250 250)" />
                    <circle class="countdown-dot" data-second="16" cx="250" cy="30" r="8"
                        transform="rotate(96 250 250)" />
                    <circle class="countdown-dot" data-second="17" cx="250" cy="30" r="8"
                        transform="rotate(102 250 250)" />
                    <circle class="countdown-dot" data-second="18" cx="250" cy="30" r="8"
                        transform="rotate(108 250 250)" />
                    <circle class="countdown-dot" data-second="19" cx="250" cy="30" r="8"
                        transform="rotate(114 250 250)" />
                    <circle class="countdown-dot" data-second="20" cx="250" cy="30" r="8"
                        transform="rotate(120 250 250)" />
                    <circle class="countdown-dot" data-second="21" cx="250" cy="30" r="8"
                        transform="rotate(126 250 250)" />
                    <circle class="countdown-dot" data-second="22" cx="250" cy="30" r="8"
                        transform="rotate(132 250 250)" />
                    <circle class="countdown-dot" data-second="23" cx="250" cy="30" r="8"
                        transform="rotate(138 250 250)" />
                    <circle class="countdown-dot" data-second="24" cx="250" cy="30" r="8"
                        transform="rotate(144 250 250)" />
                    <circle class="countdown-dot" data-second="25" cx="250" cy="30" r="8"
                        transform="rotate(150 250 250)" />
                    <circle class="countdown-dot" data-second="26" cx="250" cy="30" r="8"
                        transform="rotate(156 250 250)" />
                    <circle class="countdown-dot" data-second="27" cx="250" cy="30" r="8"
                        transform="rotate(162 250 250)" />
                    <circle class="countdown-dot" data-second="28" cx="250" cy="30" r="8"
                        transform="rotate(168 250 250)" />
                    <circle class="countdown-dot" data-second="29" cx="250" cy="30" r="8"
                        transform="rotate(174 250 250)" />
                    <circle class="countdown-dot" data-second="30" cx="250" cy="30" r="8"
                        transform="rotate(180 250 250)" />
                    <circle class="countdown-dot" data-second="31" cx="250" cy="30" r="8"
                        transform="rotate(186 250 250)" />
                    <circle class="countdown-dot" data-second="32" cx="250" cy="30" r="8"
                        transform="rotate(192 250 250)" />
                    <circle class="countdown-dot" data-second="33" cx="250" cy="30" r="8"
                        transform="rotate(198 250 250)" />
                    <circle class="countdown-dot" data-second="34" cx="250" cy="30" r="8"
                        transform="rotate(204 250 250)" />
                    <circle class="countdown-dot" data-second="35" cx="250" cy="30" r="8"
                        transform="rotate(210 250 250)" />
                    <circle class="countdown-dot" data-second="36" cx="250" cy="30" r="8"
                        transform="rotate(216 250 250)" />
                    <circle class="countdown-dot" data-second="37" cx="250" cy="30" r="8"
                        transform="rotate(222 250 250)" />
                    <circle class="countdown-dot" data-second="38" cx="250" cy="30" r="8"
                        transform="rotate(228 250 250)" />
                    <circle class="countdown-dot" data-second="39" cx="250" cy="30" r="8"
                        transform="rotate(234 250 250)" />
                    <circle class="countdown-dot" data-second="40" cx="250" cy="30" r="8"
                        transform="rotate(240 250 250)" />
                    <circle class="countdown-dot" data-second="41" cx="250" cy="30" r="8"
                        transform="rotate(246 250 250)" />
                    <circle class="countdown-dot" data-second="42" cx="250" cy="30" r="8"
                        transform="rotate(252 250 250)" />
                    <circle class="countdown-dot" data-second="43" cx="250" cy="30" r="8"
                        transform="rotate(258 250 250)" />
                    <circle class="countdown-dot" data-second="44" cx="250" cy="30" r="8"
                        transform="rotate(264 250 250)" />
                    <circle class="countdown-dot" data-second="45" cx="250" cy="30" r="8"
                        transform="rotate(270 250 250)" />
                    <circle class="countdown-dot" data-second="46" cx="250" cy="30" r="8"
                        transform="rotate(276 250 250)" />
                    <circle class="countdown-dot" data-second="47" cx="250" cy="30" r="8"
                        transform="rotate(282 250 250)" />
                    <circle class="countdown-dot" data-second="48" cx="250" cy="30" r="8"
                        transform="rotate(288 250 250)" />
                    <circle class="countdown-dot" data-second="49" cx="250" cy="30" r="8"
                        transform="rotate(294 250 250)" />
                    <circle class="countdown-dot" data-second="50" cx="250" cy="30" r="8"
                        transform="rotate(300 250 250)" />
                    <circle class="countdown-dot" data-second="51" cx="250" cy="30" r="8"
                        transform="rotate(306 250 250)" />
                    <circle class="countdown-dot" data-second="52" cx="250" cy="30" r="8"
                        transform="rotate(312 250 250)" />
                    <circle class="countdown-dot" data-second="53" cx="250" cy="30" r="8"
                        transform="rotate(318 250 250)" />
                    <circle class="countdown-dot" data-second="54" cx="250" cy="30" r="8"
                        transform="rotate(324 250 250)" />
                    <circle class="countdown-dot" data-second="55" cx="250" cy="30" r="8"
                        transform="rotate(330 250 250)" />
                    <circle class="countdown-dot" data-second="56" cx="250" cy="30" r="8"
                        transform="rotate(336 250 250)" />
                    <circle class="countdown-dot" data-second="57" cx="250" cy="30" r="8"
                        transform="rotate(342 250 250)" />
                    <circle class="countdown-dot" data-second="58" cx="250" cy="30" r="8"
                        transform="rotate(348 250 250)" />
                    <circle class="countdown-dot" data-second="59" cx="250" cy="30" r="8"
                        transform="rotate(354 250 250)" />
                </g>
            </svg>

            <!-- Digital time overlay (outside SVG for better positioning) -->
            <div id="digital-time-overlay"></div>

            <!-- AM/PM indicator in lower left -->
            <div id="ampm-indicator"></div>

            <!-- Battery indicator -->
            <div id="battery-indicator" class="hidden">
                <span id="battery-percentage"></span>%
            </div>

            <!-- Always-active timer cancel button -->
            <button id="timer-cancel-floating" class="hidden">Cancel Timer</button>

            <!-- Log overlay -->
            <div id="log-overlay" class="collapsed">
                <div id="log-content">
                    <h3>Debug Log</h3>
                    <div id="log-messages"></div>
                    <p><small>Touch anywhere to close</small></p>
                </div>
            </div>

            <!-- Settings panel -->
            <div id="settings-panel" class="collapsed">
                <div id="settings-content">
                    <h3>Timer Settings</h3>
                    <div>
                        <label for="timer-minutes">Minutes:</label>
                        <input type="number" id="timer-minutes" min="0" max="59" value="0">
                    </div>
                    <div>
                        <label for="timer-seconds">Seconds:</label>
                        <input type="number" id="timer-seconds" min="0" max="59" value="0">
                    </div>
                    <button id="start-timer">Start Timer</button>
                    <button id="cancel-timer" disabled>Cancel Timer</button>

                    <h3>Display Options</h3>
                    <div>
                        <label for="show-digital">
                            <input type="checkbox" id="show-digital"> Show 24-hour digital time
                        </label>
                    </div>
                    <div>
                        <label for="silent-mode">
                            <input type="checkbox" id="silent-mode"> Silent mode (audio only for timer alerts)
                        </label>
                    </div>
                    <div>
                        <label for="theme-select">Theme:</label>
                        <select id="theme-select">
                            <option value="system">System</option>
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>

                    <h3>Voice Control</h3>
                    <button id="voice-toggle">Enable Voice Control</button>
                    <div>
                        <label for="microphone-select">Microphone:</label>
                        <select id="microphone-select">
                            <option value="">Default</option>
                        </select>
                        <button id="refresh-microphones" type="button">Refresh</button>
                    </div>
                    <div>
                        <label for="listening-timeout">Listening timeout (seconds):</label>
                        <input type="number" id="listening-timeout" min="5" max="60" value="15">
                    </div>
                    <div>
                        <label for="ai-parsing">
                            <input type="checkbox" id="ai-parsing"> Enhanced AI parsing (for complex commands)
                        </label>
                    </div>
                    <div id="ai-config" class="hidden">
                        <label for="ai-service">AI Service:</label>
                        <select id="ai-service">
                            <option value="openai">OpenAI GPT</option>
                            <option value="claude">Anthropic Claude</option>
                            <option value="gemini">Google Gemini</option>
                        </select>
                        <div>
                            <label for="ai-api-key">API Key:</label>
                            <input type="password" id="ai-api-key" placeholder="Enter your API key">
                        </div>
                    </div>
                    <div id="voice-status"></div>
                    <div class="settings-actions">
                        <button id="reset-settings" type="button" class="danger-button">Reset All Settings</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fixed controls as z-plane overlay -->
    <div id="fixed-controls" class="fader">
        <button id="settings-toggle" title="Settings">⚙️</button>
        <button id="log-toggle" title="Show Debug Log (Ctrl+L)">^L 📋</button>
        <button id="install-button" title="Install App" class="hidden">📱 Install</button>
        <div id="version-box">loading...</div>
        <div id="inactivity-countdown">30s</div>
        <div id="memory-display"></div>
    </div>

    <!-- Debug log panel as z-plane overlay -->
    <div id="debug-log" class="hidden">
        <div id="debug-log-content"></div>
        <div id="debug-log-controls">
            <button id="clear-log">Clear Log</button>
            <div id="debug-log-legend">^C: Copy | ^F: Save to File | ESC: Close</div>
        </div>
    </div>

    <!-- Help dialog -->
    <div id="help-dialog" class="hidden">
        <div id="help-dialog-content">
            <button id="help-close">✕</button>
            <h2>Voice Commands</h2>
            <div class="help-section">
                <h3>Timer Commands</h3>
                <ul>
                    <li>"timer 5 minutes" - Set a 5 minute timer</li>
                    <li>"timer 30 seconds" - Set a 30 second timer</li>
                    <li>"timer 1 and a half hours" - Set a 90 minute timer</li>
                    <li>"cancel timer" - Cancel the current timer</li>
                </ul>
            </div>
            <div class="help-section">
                <h3>Display Commands</h3>
                <ul>
                    <li>"show digital time" - Show digital clock overlay</li>
                    <li>"hide digital time" - Hide digital clock overlay</li>
                    <li>"fullscreen" - Enter fullscreen mode</li>
                    <li>"exit fullscreen" - Exit fullscreen mode</li>
                </ul>
            </div>
            <div class="help-section">
                <h3>Theme Commands</h3>
                <ul>
                    <li>"light mode" - Switch to light theme</li>
                    <li>"dark mode" - Switch to dark theme</li>
                    <li>"system theme" - Use system theme preference</li>
                </ul>
            </div>
            <div class="help-section">
                <h3>Other Commands</h3>
                <ul>
                    <li>"silent" - Toggle silent mode</li>
                    <li>"stop voice" - Disable voice control</li>
                    <li>"what time is it" - Announce the current time</li>
                    <li>"stop" - Stop speaking help</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Timer complete audio -->
    <audio id="timer-sound" preload="auto">
        <source
            src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZURE"
            type="audio/wav">
    </audio>

    <!-- TensorFlow.js and Speech Commands Model -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands@0.5.4/dist/speech-commands.min.js"></script>

    <!-- Porcupine model loaded dynamically when needed -->
    <!-- <script src="porcupine-model-base64.js"></script> -->
    <script src="clock.js" type="module" defer></script>
    <script>
        // Register service worker for PWA functionality when served from server
        if ('serviceWorker' in navigator && window.location.protocol !== 'file:') {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js')
                    .then(reg => {
                        // Service worker registered successfully - no console logging to avoid violations
                    })
                    .catch(err => {
                        // Service worker registration failed - only log actual errors
                        if (err.name !== 'SecurityError') {
                            console.error('Service Worker registration failed:', err);
                        }
                    });
            });
        }
    </script>
</body>

</html>