import pandas as pd
import plotly.express as px
import gradio as gr
import os
from huggingface_hub import login
from datasets import load_dataset

# --- Hugging Face login ---
token = os.getenv("HF_TOKEN")
login(token=token)

# --- Load dataset ---
df = pd.DataFrame(load_dataset("SelmaNajih001/MapsData")["train"])

# --- Metric choices with friendly labels ---
metric_choices = {
    "busy_aprile": "April Busy",
    "busy_maggio": "May Busy",
    "StarsAprile_numeric": "April Stars",
    "StarsMaggio_numeric": "May Stars"
}

# --- Description from your thesis in English ---
description_text = """
This map was created using data collected from Google Maps.
The main objective was to monitor all the stores of a specific company in order to track customer traffic and gain some real-time insights into sales trends.
This approach can be easily replicated for any other company.
"""

# --- Function to update the map ---
def update_map(selected_label):
    # Map friendly label back to dataset column
    metric = {v: k for k, v in metric_choices.items()}[selected_label]

    fig = px.scatter_mapbox(
        df,
        lat="Lat",
        lon="Long",
        size=metric,
        color=metric,
        hover_name="Name",
        hover_data=[
            "busy_aprile",
            "busy_maggio",
            "Variazione",
            "StarsAprile_numeric",
            "StarsMaggio_numeric",
            "VariazioneStelle",
            "VariazionePercentuale"
        ],
        zoom=2,
        height=800,
        color_continuous_scale=px.colors.cyclical.IceFire
    )
    fig.update_layout(mapbox_style="open-street-map")
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
    return fig

# --- Gradio interface ---
with gr.Blocks() as demo:
    # Title
    gr.Markdown("<h1 style='text-align:center;color:#4B8BBE;'>Interactive Map</h1>")
    
    # Description at the top
    gr.Markdown(f"<p style='text-align:center;'>{description_text}</p>")

    # Dropdown centered below the description
    dropdown = gr.Dropdown(
        choices=list(metric_choices.values()),
        value="April Busy",
        label="Select Metric"
    )

    # Submit button
    submit_btn = gr.Button("Submit")

    # Map below the dropdown
    plot = gr.Plot()

    # Update map when button is clicked
    submit_btn.click(update_map, inputs=dropdown, outputs=plot)

demo.launch()