from dash import Dash, dcc, html, Input, Output
import pandas as pd
import numpy as np
import plotly.express as px
import folium
from folium.plugins import MarkerCluster
from branca.element import Figure
import polyline

def get_segment(df , lId):
  df = df[df['id'].isin(lId)]
  df["polyline"] = df["map_pol"].apply(polyline.decode)
  return df["polyline"].tolist()

df_seg  = pd.read_csv("segments.csv")
df_tsne = pd.read_csv("tnse_vect_2d.csv")

#  app
app = Dash(__name__)
server = app.server  # req Hugging Face

scatter_fig = px.scatter(
    df_tsne,
    x="x",
    y="y",
    hover_name="item",
    hover_data=["item"],
    custom_data=["item"],
    title="t-SNE visualization Segments Embeddings"
)
scatter_fig.update_layout(dragmode='lasso')

app.layout = html.Div([
    html.H3("Select Segment(Embeddings) to visualize them on a Map(location)"),

    html.Div([
        dcc.Graph(id="scatter", figure=scatter_fig, style={"width": "50%", "height": "500px"}),
        html.Iframe(id="folium_map", width="50%", height="500")
    ], style={"display": "flex", "justify-content": "space-between"}),

    html.Div(id="output", style={"marginTop": "20px"})
])

@app.callback(
    Output("output", "children"),
    Output("folium_map", "srcDoc"),
    Input("scatter", "selectedData")
)
def actualizar_mapa(selection):
    if not selection or "points" not in selection:
        return "Select at least one point.", ""
    try:
        ids = [p['customdata'][0] for p in selection['points']]
    except (KeyError, TypeError):
        # Fallback por si no llega customdata
        ids = [int(p['hovertext']) for p in selection['points']]
        
    global df_seg

    lSegments = get_segment(df_seg , ids)
  
    m = folium.Map(location=[-0.19204405740703162, -78.47700359958313], zoom_start=10)
    
    color_list = [
        'red', 'blue', 'green', 'orange', 'purple', 'darkred',
        'cadetblue', 'darkgreen', 'pink', 'black'
    ]

    for idx, route in enumerate(lSegments):
        color = color_list[idx % len(color_list)]
        folium.PolyLine(
        locations=route,
        color=color,
        weight=5,
        opacity=0.8
        ).add_to(m)

    fig = Figure()
    fig.add_child(m)
    mapa_html = m.get_root().render()

    return  f"IDs : {ids}" , mapa_html

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=7860)