modules/visuals.py

import streamlit as st
import plotly.express as px
import plotly.graph_object as go
import pandas as pd

def display_dashboard(df, location):
    st.subheader(f"📊 System Summary - {location}")
    col1, col2, col3 = st.columns(3)
    col1.metric("Total Poles", df.shape[0])
    col2.metric("🚨 Red Alerts", df[df['AlertLevel'] == "Red"].shape[0])
    col3.metric("⚡ Power Issues", df[df['PowerSufficient'] == "No"].shape[0])

def display_charts(df):
    st.subheader("⚙️ Energy Generation Trends")
    st.bar_chart(df.groupby("Zone")[["SolarGen(kWh)", "WindGen(kWh)"]].sum())
    st.subheader("📉 Tilt vs Vibration")
    st.scatter_chart(df.rename(columns={"Tilt(°)": "Tilt", "Vibration(g)": "Vibration"}).set_index("PoleID")[["Tilt", "Vibration"]])

def display_map_heatmap(df, location):
    if df.empty:
        st.warning("No data available for this location.")
        return

# Example DataFrame with location data
df = pd.DataFrame({
    'latitude': [17.385044, 17.444418],
    'longitude': [78.486671, 78.348397],
    'alert_level': ['red', 'yellow'],
    'location': ['Location A', 'Location B']
})
    
    # Debug: Print DataFrame to verify coordinates
    st.write("Debug: Sample Data", df[["Latitude", "Longitude", "AlertLevel"]].head())  # Temporary debug
    
    # Map AlertLevel to sizes, colors, and styles with dark theme preference
    df = df.copy()
    df["MarkerColor"] = df["AlertLevel"].map({"Green": "green", "Yellow": "yellow", "Red": "red"})
    df["MarkerSize"] = df["AlertLevel"].map({"Green": 20, "Yellow": 25, "Red": 35})
    df["MarkerSymbol"] = df["AlertLevel"].map({"Green": "circle", "Yellow": "circle", "Red": "star"})
    df["MarkerOpacity"] = df["AlertLevel"].map({"Green": 0.6, "Yellow": 0.8, "Red": 1.0})  # Higher opacity for red
    
    # Create scatter map with dark theme
    fig = px.scatter_mapbox(
        df,
        lat="Latitude",
        lon="Longitude",
        color="AlertLevel",
        color_discrete_map={"Green": "green", "Yellow": "yellow", "Red": "red"},
        size="MarkerSize",
        size_max=35,
        zoom=15 if location == "Hyderabad" else 11,
        hover_data={
            "PoleID": True,
            "RFID": True,
            "Timestamp": True,
            "AlertLevel": True,
            "Anomalies": True,
            "Zone": True,
            "Latitude": False,
            "Longitude": False
        },
        title=f"Pole Alert Map - {location}",
        height=600
    )
    fig.update_traces(
        marker=dict(
            color=df["MarkerColor"],  # Explicitly set marker color
            symbol=df["MarkerSymbol"],
            opacity=df["MarkerOpacity"],
            size=df["MarkerSize"]
        )
    )
    fig.update_layout(
        mapbox_style="dark",  # Changed to dark theme
        margin={"r": 0, "t": 50, "l": 0, "b": 0},
        showlegend=True,
        legend=dict(
            itemsizing="constant",
            bgcolor="rgba(0, 0, 0, 0.7)",
            font=dict(color="white"),
            traceorder="normal"
        )
    )
fig.update_layout(
    mapbox=dict(
        style="open-street-map",  # Base style
        center=dict(lat=17.385044, lon=78.486671),
        zoom=12  # Zoom to an appropriate level
    )
)

fig.show()
fig = go.Figure(go.Scattermapbox(
    lat=df['latitude'],
    lon=df['longitude'],
    mode='markers',
    marker=go.scattermapbox.Marker(
        size=14,  # Increased size
        color=df['alert_level'],  # Colors based on alert level
        colorscale='YlOrRd',  # Set a color scale
        opacity=0.9  # Increased opacity for visibility
    ),
    text=df['location'],
))
    st.plotly_chart(fig, use_container_width=True)