<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaltyBot Dashboard</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>🤖 SaltyBot Monitor</h1>
            <div class="connection-status">
                <span id="status-indicator" class="status-dot"></span>
                <span id="status-text">Connecting...</span>
            </div>
        </header>

        <main>
            <!-- Battery & Health Row -->
            <div class="grid-2">
                <div class="card battery-card">
                    <h2>⚡ Battery</h2>
                    <div class="battery-display">
                        <div class="battery-bar">
                            <div id="battery-fill" class="battery-fill"></div>
                        </div>
                        <div class="battery-text">
                            <span id="battery-percent">100%</span>
                            <span id="battery-voltage" class="subtitle">12.4V</span>
                        </div>
                    </div>
                </div>

                <div class="card state-card">
                    <h2>🎯 State</h2>
                    <div class="state-display">
                        <span id="robot-state" class="state-badge">IDLE</span>
                        <div class="sensor-health">
                            <span class="health-item" title="Camera">📷 <span id="camera-health" class="health-ok">✓</span></span>
                            <span class="health-item" title="Lidar">🔍 <span id="lidar-health" class="health-ok">✓</span></span>
                            <span class="health-item" title="Audio">🎤 <span id="audio-health" class="health-ok">✓</span></span>
                            <span class="health-item" title="IMU">📡 <span id="imu-health" class="health-ok">✓</span></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Motor & WiFi Row -->
            <div class="grid-2">
                <div class="card motors-card">
                    <h2>⚙️ Motors</h2>
                    <div class="motors-display">
                        <div class="motor-item">
                            <label>Left</label>
                            <div class="motor-meter">
                                <div id="left-motor" class="motor-bar"></div>
                            </div>
                            <span id="left-speed">0 RPM</span>
                        </div>
                        <div class="motor-item">
                            <label>Right</label>
                            <div class="motor-meter">
                                <div id="right-motor" class="motor-bar"></div>
                            </div>
                            <span id="right-speed">0 RPM</span>
                        </div>
                    </div>
                </div>

                <div class="card wifi-card">
                    <h2>📶 WiFi</h2>
                    <div class="wifi-display">
                        <div class="wifi-icon" id="wifi-icon">📡</div>
                        <div class="wifi-text">
                            <span id="wifi-strength">-50 dBm</span>
                            <span class="subtitle">Signal Strength</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Map & Events Row -->
            <div class="grid-full">
                <div class="card map-card">
                    <h2>🗺️ Map</h2>
                    <canvas id="map-canvas" class="map-display"></canvas>
                    <div class="map-info">
                        <span id="map-res">--</span> | <span id="map-size">--</span>
                    </div>
                </div>
            </div>

            <div class="grid-full">
                <div class="card events-card">
                    <h2>📋 Event Log (Last 20)</h2>
                    <div id="event-log" class="event-list">
                        <p class="placeholder">Waiting for events...</p>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <span id="update-time">Last update: --</span>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</body>
</html>
