<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Management API</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns=
http://www.w3.org/2000/svg viewBox=0
0
32
32%3E%3Cpath fill=%234F46E5 d=M16
2C8.27
2
2
8.27
2
2v28c0
6.27
6.27
14
14v6c0
1.1.9
2
2
2h8c1.1
0
2-.9
2-2V4c0-1.1-.9-2-2-2H4c-1.1
0-2
.9-2
2v28c0
1.1.9
2
2
2h8c1.1
0
2-.9
2-2V4c0-1.1-.9-2-2-2z/%3E%3C/svg%3E" />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui;
        }
        
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
        }
        
        .bg-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(8px);
        }
        
        .animated-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        
        .animated-bg div {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.7;
            mix-blend-mode: multiply;
            animation: pulse 4s ease-in-out infinite;
        }
        
        .animated-bg .bg-1 {
            top: 5rem;
            left: 5rem;
            width: 18rem;
            height: 18rem;
            background: #c084fc;
        }
        
        .animated-bg .bg-2 {
            top: 10rem;
            right: 5rem;
            width: 18rem;
            height: 18rem;
            background: #facc15;
            animation-delay: 2s;
        }
        
        .animated-bg .bg-3 {
            bottom: -2rem;
            left: 10rem;
            width: 18rem;
            height: 18rem;
            background: #f472b6;
            animation-delay: 4s;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        
        .container {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 1rem;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            padding: 2rem;
            max-width: 64rem;
            width: 100%;
        }
        
        .header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .icon-container {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
            border-radius: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .icon {
            width: 2.5rem;
            height: 2.5rem;
            color: white;
        }
        
        .title {
            font-size: 3rem;
            font-weight: 800;
            color: white;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 1rem;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
        }
        
        .status-dot {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: #4ade80;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .status-dot.offline {
            background: #ef4444;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .status-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 1rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .status-card:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }
        
        .status-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }
        
        .status-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        }
        
        .status-icon.offline {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }
        
        .status-icon.mqtt {
            background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
        }
        
        .status-icon.mqtt.offline {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }
        
        .status-icon.api {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        }
        
        .status-label {
            font-weight: 600;
            color: white;
        }
        
        .status-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .status-dot-small {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background: #4ade80;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .status-dot-small.offline {
            background: #ef4444;
        }
        
        .status-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
        }
        
        .footer {
            text-align: center;
        }
        
        .footer-card {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 1rem;
            padding: 1rem;
        }
        
        .clock-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            color: white;
            margin-bottom: 0.5rem;
        }
        
        .clock-icon {
            width: 1rem;
            height: 1rem;
        }
        
        .clock {
            font-size: 1.125rem;
        }
        
        .date {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
        }
        
        .version {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.75rem;
            margin-top: 0.5rem;
        }
        
        @media (min-width: 768px) {
            .glass-card {
                padding: 3rem;
            }
            
            .title {
                font-size: 4rem;
            }
        }
    </style>
</head>
<body>
    <div class="bg-overlay"></div>
    <div class="animated-bg">
        <div class="bg-1"></div>
        <div class="bg-2"></div>
        <div class="bg-3"></div>
    </div>

    <div class="container">
        <div class="glass-card">
            <!-- Header -->
            <div class="header">
                <div class="icon-container">
                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path>
                    </svg>
                </div>
                <h1 class="title">API Status</h1>
                <p class="subtitle">Home Management System is Running</p>
                <div class="status-indicator">
                    <div class="status-dot" id="overall-status"></div>
                    <span id="overall-text">All Systems Operational</span>
                </div>
            </div>

            <!-- Status Grid -->
            <div class="grid">
                <div class="status-card">
                    <div class="status-header">
                        <div class="status-icon" id="db-icon">
                            <svg class="icon" style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                            </svg>
                        </div>
                        <span class="status-label">Database</span>
                    </div>
                    <div class="status-info">
                        <div class="status-dot-small" id="db-status"></div>
                        <span class="status-text" id="db-text">Connected</span>
                    </div>
                </div>

                <div class="status-card">
                    <div class="status-header">
                        <div class="status-icon api">
                            <svg class="icon" style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        <span class="status-label">API Server</span>
                    </div>
                    <div class="status-info">
                        <div class="status-dot-small"></div>
                        <span class="status-text">Active</span>
                    </div>
                </div>

                <div class="status-card">
                    <div class="status-header">
                        <div class="status-icon mqtt" id="mqtt-icon">
                            <svg class="icon" style="width: 1.25rem; height: 1.25rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
                            </svg>
                        </div>
                        <span class="status-label">MQTT</span>
                    </div>
                    <div class="status-info">
                        <div class="status-dot-small mqtt" id="mqtt-status"></div>
                        <span class="status-text" id="mqtt-text">Connected</span>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="footer">
                <div class="footer-card">
                    <div class="clock-container">
                        <svg class="clock-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span class="clock" id="clock">00:00:00</span>
                    </div>
                    <div class="date" id="date">Loading...</div>
                    <div class="version">
                        Version 1.0.0  Home Management API
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Update clock
        function updateClock() {
            const now = new Date();
            const timeString = now.toLocaleTimeString("id-ID", { 
                hour: "2-digit", 
                minute: "2-digit", 
                second: "2-digit" 
            });
            const dateString = now.toLocaleDateString("id-ID", { 
                weekday: "long", 
                year: "numeric", 
                month: "long", 
                day: "numeric" 
            });
            
            document.getElementById("clock").textContent = timeString;
            document.getElementById("date").textContent = dateString;
        }
        
        updateClock();
        setInterval(updateClock, 1000);
        
        // Fetch real-time status
        async function fetchStatus() {
            try {
                const response = await fetch("/api/status");
                const data = await response.json();
                
                // Update database status
                const dbConnected = data.services.database === "connected";
                const dbStatus = document.getElementById("db-status");
                const dbText = document.getElementById("db-text");
                const dbIcon = document.getElementById("db-icon");
                
                if (dbConnected) {
                    dbStatus.classList.remove("offline");
                    dbText.textContent = "Connected";
                    dbIcon.classList.remove("offline");
                } else {
                    dbStatus.classList.add("offline");
                    dbText.textContent = "Disconnected";
                    dbIcon.classList.add("offline");
                }
                
                // Update MQTT status
                const mqttConnected = data.services.mqtt === "connected";
                const mqttStatus = document.getElementById("mqtt-status");
                const mqttText = document.getElementById("mqtt-text");
                const mqttIcon = document.getElementById("mqtt-icon");
                
                if (mqttConnected) {
                    mqttStatus.classList.remove("offline");
                    mqttText.textContent = "Connected";
                    mqttIcon.classList.remove("offline");
                } else {
                    mqttStatus.classList.add("offline");
                    mqttText.textContent = "Disconnected";
                    mqttIcon.classList.add("offline");
                }
                
                // Update overall status
                const overallStatus = document.getElementById("overall-status");
                const overallText = document.getElementById("overall-text");
                
                if (dbConnected && mqttConnected) {
                    overallStatus.classList.remove("offline");
                    overallText.textContent = "All Systems Operational";
                } else {
                    overallStatus.classList.add("offline");
                    overallText.textContent = "Some Services Offline";
                }
                
            } catch (error) {
                // Set all to offline on error
                document.getElementById("db-status").classList.add("offline");
                document.getElementById("db-text").textContent = "Disconnected";
                document.getElementById("db-icon").classList.add("offline");
                document.getElementById("mqtt-status").classList.add("offline");
                document.getElementById("mqtt-text").textContent = "Disconnected";
                document.getElementById("mqtt-icon").classList.add("offline");
                document.getElementById("overall-status").classList.add("offline");
                document.getElementById("overall-text").textContent = "Some Services Offline";
            }
        }
        
        // Initial status fetch and periodic updates
        fetchStatus();
        setInterval(fetchStatus, 5000);
    </script>
</body>
</html>