dashboard.py

import streamlit as st
import time
import random
import pandas as pd
import plotly.graph_objects as go

# ----------------------------------------------------
# PAGE CONFIGURATION (Dark / Modern UI Theme)
# ----------------------------------------------------
st.set_page_config(
    page_title="Smart Home Controller Dashboard",
    page_icon="🏠",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for glassmorphism and attractive cards
st.markdown("""
<style>
    .main {
        background-color: #0E1117;
    }
    .metric-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        backdrop-filter: blur(4px);
    }
    .status-badge-on {
        background-color: #00E676;
        color: black;
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: bold;
    }
    .status-badge-off {
        background-color: #FF5252;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: bold;
    }
    .header-title {
        font-size: 2.2rem;
        font-weight: 800;
        background: linear-gradient(90deg, #00C6FF, #0072FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>
""", unsafe_allow_html=True)

# ----------------------------------------------------
# SIDEBAR CONTROLS & OVERRIDES
# ----------------------------------------------------
with st.sidebar:
    st.image("https://img.icons8.com/fluency/96/smart-home-shield.png", width=70)
    st.title("🎛️ Control Panel")
    
    system_mode = st.radio("Operating Mode", ["Automation (Smart)", "Manual Override"])
    security_switch = st.toggle("🛡️ Arm Security Mode", value=False)
    
    st.markdown("---")
    st.subheader("Manual Overrides")
    manual_light = st.toggle("💡 Living Room Light", value=False, disabled=(system_mode == "Automation (Smart)"))
    manual_fan = st.toggle("🌀 Cooling Fan", value=False, disabled=(system_mode == "Automation (Smart)"))
    
    st.markdown("---")
    refresh_rate = st.slider("Telemetry Refresh Rate (s)", 1, 5, 2)

# ----------------------------------------------------
# MOCK / TELEMETRY DATA ENGINE
# ----------------------------------------------------
current_temp = random.uniform(26.0, 33.5)
ambient_lux = random.randint(150, 850)
motion_detected = random.choice([True, False, False])
is_dark = ambient_lux < 400

# Automation Decision Logic
if system_mode == "Automation (Smart)":
    light_state = is_dark and motion_detected
    fan_state = current_temp >= 30.0
else:
    light_state = manual_light
    fan_state = manual_fan

security_alert = security_switch and motion_detected

# ----------------------------------------------------
# MAIN DASHBOARD LAYOUT
# ----------------------------------------------------
st.markdown('<div class="header-title">Smart Home Controller - Edge Telemetry</div>', unsafe_allow_html=True)
st.caption("Real-Time Embedded System Monitoring & Closed-Loop Actuator Control")

# Security Alarm Banner
if security_alert:
    st.error("🚨 **CRITICAL SECURITY ALERT: INTRUSION DETECTED IN ARMED ZONE!** (Buzzer Active & Siren On)")

st.markdown("<br>", unsafe_allow_html=True)

# Top Metrics Row
col1, col2, col3, col4 = st.columns(4)

with col1:
    st.markdown(f"""
    <div class="metric-card">
        <h4 style="color: #9E9E9E; margin-bottom: 5px;">Ambient Temperature</h4>
        <h2 style="color: #00E5FF; margin: 0;">{current_temp:.1f} °C</h2>
        <small>{'🔥 Cooling Required' if current_temp >= 30.0 else '❄️ Normal Room Climate'}</small>
    </div>
    """, unsafe_allow_html=True)

with col2:
    st.markdown(f"""
    <div class="metric-card">
        <h4 style="color: #9E9E9E; margin-bottom: 5px;">Light Intensity (LDR)</h4>
        <h2 style="color: #FFD600; margin: 0;">{ambient_lux} Lux</h2>
        <small>{'🌑 Room Dark' if is_dark else '☀️ Sufficient Daylight'}</small>
    </div>
    """, unsafe_allow_html=True)

with col3:
    st.markdown(f"""
    <div class="metric-card">
        <h4 style="color: #9E9E9E; margin-bottom: 5px;">Occupancy (PIR)</h4>
        <h2 style="color: {'#00E676' if motion_detected else '#757575'}; margin: 0;">
            {'MOTION' if motion_detected else 'CLEAR'}
        </h2>
        <small>{'Human Presence Active' if motion_detected else 'No Movement'}</small>
    </div>
    """, unsafe_allow_html=True)

with col4:
    st.markdown(f"""
    <div class="metric-card">
        <h4 style="color: #9E9E9E; margin-bottom: 5px;">Security Subsystem</h4>
        <h2 style="color: {'#FF1744' if security_alert else ('#00E676' if security_switch else '#757575')}; margin: 0;">
            {'BREACH' if security_alert else ('ARMED' if security_switch else 'DISARMED')}
        </h2>
        <small>{'Alarm Triggered' if security_alert else 'System Protected'}</small>
    </div>
    """, unsafe_allow_html=True)

st.markdown("<br>", unsafe_allow_html=True)

# Actuators Status & Interactive Visuals Row
c_left, c_right = st.columns([1, 1.5])

with c_left:
    st.subheader("⚡ Actuator Relay States")
    
    st.markdown(f"""
    <div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <b>💡 Living Room Light Relay</b><br>
            <small style="color: #888;">Triggered by Dark + Motion (Timeout: 10s)</small>
        </div>
        <span class="{'status-badge-on' if light_state else 'status-badge-off'}">{'ACTIVE (ON)' if light_state else 'IDLE (OFF)'}</span>
    </div>
    """, unsafe_allow_html=True)

    st.markdown(f"""
    <div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <b>🌀 HVAC Cooling Fan Relay</b><br>
            <small style="color: #888;">Setpoint: 30°C | Hysteresis Deadband: 2°C</small>
        </div>
        <span class="{'status-badge-on' if fan_state else 'status-badge-off'}">{'ACTIVE (ON)' if fan_state else 'IDLE (OFF)'}</span>
    </div>
    """, unsafe_allow_html=True)

    st.markdown(f"""
    <div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <b>🔔 Piezo Security Siren</b><br>
            <small style="color: #888;">Active-High Buzzer Output</small>
        </div>
        <span class="{'status-badge-on' if security_alert else 'status-badge-off'}">{'ALARM SOUNDING' if security_alert else 'SILENT'}</span>
    </div>
    """, unsafe_allow_html=True)

with c_right:
    st.subheader("📊 Live Climate & Hysteresis Gauge")
    
    # Modern Plotly Gauge
    fig = go.Figure(go.Indicator(
        mode = "gauge+number",
        value = current_temp,
        domain = {'x': [0, 1], 'y': [0, 1]},
        title = {'text': "DHT11 Real-Time Temperature (°C)", 'font': {'size': 18, 'color': "white"}},
        gauge = {
            'axis': {'range': [15, 45], 'tickwidth': 1, 'tickcolor': "white"},
            'bar': {'color': "#00E5FF"},
            'bgcolor': "rgba(255,255,255,0.1)",
            'steps': [
                {'range': [15, 28], 'color': 'rgba(0, 230, 118, 0.3)'},
                {'range': [28, 30], 'color': 'rgba(255, 214, 0, 0.3)'},
                {'range': [30, 45], 'color': 'rgba(255, 23, 68, 0.4)'}
            ],
            'threshold': {
                'line': {'color': "red", 'width': 4},
                'thickness': 0.75,
                'value': 30.0
            }
        }
    ))
    fig.update_layout(paper_bgcolor="rgba(0,0,0,0)", font={'color': "white"}, height=280, margin=dict(l=20, r=20, t=40, b=20))
    st.plotly_chart(fig, use_container_width=True)

# ----------------------------------------------------
# AUTO REFRESH LOOP
# ----------------------------------------------------
time.sleep(refresh_rate)
st.rerun()