modules/visuals.py

import streamlit as st
import plotly.express as px

def display_dashboard(df):
    st.subheader("📊 System Summary")
    col1, col2, col3 = st.columns(3)
    col1.metric("Total Poles", df.shape[0])
    col2.metric("🚨 Red Alerts", df[df["Alert Level"] == "Red"].shape[0])
    col3.metric("⚡ Power Issues", df[df["Power Sufficient"] == "No"].shape[0])

def display_map_with_alerts(df):
    fig = px.scatter_mapbox(
        df,
        lat="Latitude",
        lon="Longitude",
        color="Alert Level",
        hover_name="Pole ID",
        zoom=6.2,
        mapbox_style="carto-positron",
        height=500
    )
    st.plotly_chart(fig, use_container_width=True)

    # Blinking red poles (HTML)
    red_df = df[df["Alert Level"] == "Red"]
    if not red_df.empty:
        st.markdown("### 🔴 Blinking Red Alerts (Hub Notification)")
        for _, row in red_df.iterrows():
            st.markdown(
                f"<div style='padding:8px;background:#ffe6e6;animation:blink 1s infinite;'>"
                f"<b>{row['Pole ID']}</b> in <b>{row['Site']}</b>: {row['Anomalies']}</div>",
                unsafe_allow_html=True
            )
        st.markdown("""
            <style>
            @keyframes blink {
              50% { background-color: #ff4d4d; }
            }
            </style>
        """, unsafe_allow_html=True)

def display_charts(df):
    st.bar_chart(df.set_index("Pole ID")[["SolarGen(kWh)", "WindGen(kWh)"]])
    st.scatter_chart(df.rename(columns={"Tilt(°)": "Tilt", "Vibration(g)": "Vibration"}).set_index("Pole ID")[["Tilt", "Vibration"]])