import re

import folium
from bs4 import BeautifulSoup
from folium.features import DivIcon


def get_color(point_type):
    return {
        "start": "#28a745",   # green
        "end": "#dc3545",     # red
        "service": "#007bff"  # blue
    }.get(point_type, "#6c757d")  # fallback: gray


def generate_route_map(route_data, output_path="optimized_route_map.html"):
    """
    Generates an interactive HTML map with a route visualization.

    Parameters:
        route_data (dict): Contains 'point_type', 'location_id', 'lat', and 'lon' lists.
        output_path (str): Path to save the resulting HTML file.
    """

    # Combine route into a list of tuples
    full_route = [
        (lat, lon, loc_id, p_type)
        for lat, lon, loc_id, p_type in zip(
            route_data["lat"],
            route_data["lon"],
            route_data["location_id"],
            route_data["point_type"]
        )
    ]

    # Detect circular route (start and end are identical)
    start = full_route[0]
    end = full_route[-1]
    is_circular = (
        start[2] == end[2] and
        start[0] == end[0] and
        start[1] == end[1]
    )

    # For markers: exclude duplicate end point if circular
    display_route = full_route[:-1] if is_circular else full_route

    # Create map centered on start
    route_map = folium.Map(location=[start[0], start[1]], zoom_start=10)

    # Add numbered markers
    for idx, (lat, lon, loc_id, p_type) in enumerate(display_route, start=1):
        folium.map.Marker(
            location=(lat, lon),
            icon=DivIcon(
                icon_size=(30, 30),
                icon_anchor=(15, 15),
                html=f"""
                    <div style="
                        background-color: {get_color(p_type)};
                        color: white;
                        border-radius: 50%;
                        text-align: center;
                        font-size: 14px;
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        border: 2px solid white;">
                        {idx}
                    </div>
                """
            ),
            popup=f"{idx}. {loc_id} ({p_type})"
        ).add_to(route_map)

    # Add polyline (always use full route to preserve loop)
    polyline_points = [(lat, lon) for lat, lon, *_ in full_route]
    folium.PolyLine(polyline_points, color='black', weight=3, opacity=0.7).add_to(route_map)

    # Save map
    route_map.save(output_path)



# route_data = {
#     "point_type": ["start", "service", "service", "service", "end"],
#     "location_id": ["v1", "s3", "s1", "s2", "v1"],
#     "lat": [32.814268, 32.802768, 32.460452, 32.008725, 32.814268],
#     "lon": [35.488181, 35.006878, 35.047826, 35.127033, 35.488181]
# }