import dash
from dash import dcc, html
import pandas as pd
import numpy as np
import plotly.graph_objects as go
import random

# Constants
SITES = ['Hyderabad', 'Kurnool', 'Bangalore', 'Warangal']
POLES_PER_SITE = 12
ALERT_THRESHOLD = 80

# Generate sample pole data
def generate_data():
    data = []
    for site in SITES:
        for pole in range(1, POLES_PER_SITE + 1):
            status = random.randint(0, 100)
            data.append({'Site': site, 'Pole': f'P{pole}', 'Status': status})
    return pd.DataFrame(data)

df = generate_data()

# Create heatmap figure
def create_heatmap(dataframe):
    pivot_df = dataframe.pivot(index='Site', columns='Pole', values='Status')
    fig = go.Figure(data=go.Heatmap(
        z=pivot_df.values,
        x=pivot_df.columns,
        y=pivot_df.index,
        colorscale="Viridis",
        colorbar=dict(title="Status"),
        zmin=0,
        zmax=100
    ))
    fig.update_layout(title="Pole Status Heatmap", height=500)
    return fig

# Dash app setup
app = dash.Dash(__name__)
server = app.server  # for Hugging Face Spaces

# App layout
app.layout = html.Div([
    html.H1("Pole Management Dashboard", style={'textAlign': 'center'}),
    dcc.Graph(figure=create_heatmap(df)),

    html.Div([
        html.H3("🚨 Red Alert Poles:", style={"textAlign": "center", "color": "red"}),
        html.Div([
            html.Span(f"{row['Site']} - {row['Pole']}", style={
                "animation": "blinker 1s linear infinite",
                "color": "red",
                "fontWeight": "bold",
                "fontSize": "20px",
                "margin": "10px",
                "display": "inline-block"
            })
            for _, row in df[df["Status"] > ALERT_THRESHOLD].iterrows()
        ], style={"textAlign": "center"})
    ]),

    dcc.Markdown('''
    <style>
    @keyframes blinker {
        50% { opacity: 0; }
    }
    </style>
    ''', dangerously_allow_html=True)
])

# Run server
if __name__ == '__main__':
    app.run_server(debug=False, host='0.0.0.0', port=7860)