import streamlit as st
import googlemaps
from polyline import decode
import os
# from dotenv import load_dotenv
from bs4 import BeautifulSoup  # To clean HTML tags
import json

# load_dotenv()
API_KEY = 'AIzaSyBvsVrsscV50q6bVV7ofEm2tzCz08F1k1A'
gmaps = googlemaps.Client(key=API_KEY)

# Define avoided segments globally
avoid_list = [
    [(24.7970264, 46.719939), (24.7388275, 46.59441409999999)],
    [(24.954535, 47.0142416), (24.7258606, 46.583506)],
    [(24.796827, 46.5643251), (24.7089077, 46.6195443)],
    [(24.9229714, 46.7204701), (24.796827, 46.5643251)],
    [(24.796827, 46.5643251), (24.6575642, 46.5630617)],
    [(24.7575596, 46.6895021), (24.70444, 46.6237931)],
]

# Fetch directions from Google Maps API
def get_directions(start, end, alternatives=False):
    directions_result = gmaps.directions(start, end, mode="driving", alternatives=alternatives)
    if directions_result:
        return directions_result
    return None

# Decode a Google Maps encoded polyline to latitude and longitude points
def decode_polyline_to_points(polyline):
    return decode(polyline)

# Check if two routes intersect based on their polylines
def do_routes_intersect(route_a_steps, route_b_steps):
    # Loop through steps of both routes
    for step_a in route_a_steps:
        for step_b in route_b_steps:
            if step_a == step_b:
                road_name_a = get_road_name_from_step(step_a)
                road_name_b = get_road_name_from_step(step_b)
                if road_name_a == road_name_b:
                    return True
    return False

def get_road_name_from_step(step):
    if 'html_instructions' in step:
        instruction = step['html_instructions']
        road_name = extract_road_name(instruction)
        return road_name
    return None

def extract_road_name(instruction):
    return BeautifulSoup(instruction, "html.parser").text

# Functions for avoiding segments
def find_route_avoiding_segments(start, end, avoid_list):
    directions_a_b = get_directions(start, end, alternatives=True)
    if not directions_a_b:
        return None, None
    avoided_routes = []
    for route in directions_a_b:
        route_a_b_points = decode_polyline_to_points(route['overview_polyline']['points'])
        avoid_crossing = False
        for avoid_start, avoid_end in avoid_list:
            directions_c_d = get_directions(avoid_start, avoid_end, alternatives=False)
            if directions_c_d:
                route_c_d_points = decode_polyline_to_points(directions_c_d[0]['overview_polyline']['points'])
                if do_routes_intersect(route_a_b_points, route_c_d_points):
                    avoid_crossing = True
                    avoided_routes.append(directions_c_d[0])
                    break
        if not avoid_crossing:
            return route, avoided_routes
    return None, None

def find_mid_point_between(start, end):
    start_lat, start_lng = map(float, start.split(','))
    end_lat, end_lng = map(float, end.split(','))
    mid_lat = (start_lat + end_lat) / 2
    mid_lng = (start_lng + end_lng) / 2
    if is_within_bounds(mid_lat, mid_lng):
        return f"{mid_lat},{mid_lng}"
    return None

def recursive_route_search(start, end, avoid_list, depth=0, max_depth=3):
    if depth > max_depth:
        return None
    mid_point = find_mid_point_between(start, end)
    if not mid_point:
        return None
    first_segment = find_valid_route(start, mid_point, avoid_list)
    if not first_segment:
        return recursive_route_search(start, mid_point, avoid_list, depth + 1, max_depth)
    second_segment = find_valid_route(mid_point, end, avoid_list)
    if not second_segment:
        return recursive_route_search(mid_point, end, avoid_list, depth + 1, max_depth)
    return merge_segments(first_segment, second_segment)

def merge_segments(first_segment, second_segment):
    merged_route = {
        'legs': first_segment['legs'] + second_segment['legs'],
        'overview_polyline': {
            'points': first_segment['overview_polyline']['points'] + second_segment['overview_polyline']['points']
        }
    }
    return merged_route

def find_valid_route(start, end, avoid_list):
    routes = get_directions(start, end, alternatives=True)
    if not routes:
        return None
    for route in routes:
        route_a_b_points = decode_polyline_to_points(route['overview_polyline']['points'])
        if not is_route_within_bounds(route):
            continue
        avoid_crossing = False
        for avoid_start, avoid_end in avoid_list:
            directions_c_d = get_directions(avoid_start, avoid_end, alternatives=False)
            if directions_c_d:
                route_c_d_points = decode_polyline_to_points(directions_c_d[0]['overview_polyline']['points'])
                if do_routes_intersect(route_a_b_points, route_c_d_points):
                    avoid_crossing = True
                    break
        if not avoid_crossing:
            return route
    return None

RIYADH_BOUNDING_BOX = {
    'north': 25.0885,
    'south': 24.3246,
    'west': 46.2613,
    'east': 47.0484
}

def is_within_bounds(lat, lng):
    return (RIYADH_BOUNDING_BOX['south'] <= lat <= RIYADH_BOUNDING_BOX['north'] and
            RIYADH_BOUNDING_BOX['west'] <= lng <= RIYADH_BOUNDING_BOX['east'])

def is_route_within_bounds(route):
    for leg in route['legs']:
        for step in leg['steps']:
            start_lat = step['start_location']['lat']
            start_lng = step['start_location']['lng']
            end_lat = step['end_location']['lat']
            end_lng = step['end_location']['lng']
            if not is_within_bounds(start_lat, start_lng) or not is_within_bounds(end_lat, end_lng):
                return False
    return True

# Helper functions for JSON formatting
def format_route_to_json(route):
    return {
        'start_address': route['legs'][0]['start_address'],
        'end_address': route['legs'][0]['end_address'],
        'distance': route['legs'][0]['distance']['text'],
        'duration': route['legs'][0]['duration']['text'],
        'overview_polyline': route['overview_polyline']['points']
    }

# Vehicle cost and total vehicle functions
def get_truck_cost():
    return 500

def get_car_cost():
    return 300

def get_motorbike_cost():
    return 100

def get_total_vehicles():
    return 150

# Streamlit Interface
st.title("Riyadh Route Finder")

# Sidebar inputs
start = st.sidebar.text_input("Start Location (lat,lng)", "24.760322,46.732212")
end = st.sidebar.text_input("End Location (lat,lng)", "24.82734,46.80435")

if st.sidebar.button("Calculate Route"):
    route = find_valid_route(start, end, avoid_list)
    if not route:
        route = recursive_route_search(start, end, avoid_list)
    
    if route:
        st.success("Route found!")
        route_json = format_route_to_json(route)
        st.write(json.dumps(route_json, indent=2))
    else:
        st.error("All routes cross an avoided street or no valid route found.")

# HTML & JavaScript Map embedded using Streamlit
st.components.v1.html("""
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vehicle Dashboard</title>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvsVrsscV50q6bVV7ofEm2tzCz08F1k1A&libraries=geometry"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        /* General styling */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* Dashboard styling */
        .dashboard {
            background-color: #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Grid background */
        body {
            background-image: linear-gradient(#d3d3d3 1px, transparent 1px),
                linear-gradient(90deg, #d3d3d3 1px, transparent 1px);
            background-size: 40px 40px;
        }

        /* Icon and text styling */
        .dashboard-item {
            display: flex;
            align-items: center;
        }

        .dashboard-item i {
            font-size: 24px;
            margin-right: 10px;
        }

        .dashboard-item .label {
            font-size: 18px;
            font-weight: bold;
        }

        .dashboard-item .cost {
            font-size: 16px;
            color: #666;
        }

        .timestamp {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        /* Map container */
        #map {
            height: 500px;
            width: 100%;
        }

        /* Form buttons */
        #routeForm {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        #routeForm button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4caf50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #routeForm button:hover {
            background-color: #45a049;
        }

        /* Align buttons below the map */
        #routeForm {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- Dashboard Section -->
    <div class="dashboard">
        <div class="dashboard-item">
            <i class="fas fa-truck"></i>
            <div>
                <span class="label">Truck: </span>
                <span class="cost" id="truckCost">{{ truck_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-car"></i>
            <div>
                <span class="label">Car: </span>
                <span class="cost" id="carCost">{{ car_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-motorcycle"></i>
            <div>
                <span class="label">Motorbike: </span>
                <span class="cost" id="motorbikeCost">{{ motorbike_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-tachometer-alt"></i>
            <div>
                <span class="label">Total Vehicles: </span>
                <span class="cost" id="vehicleCounter">{{ total_vehicles }}</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-clock"></i>
            <div class="timestamp" id="timestamp"></div>
        </div>
    </div>

    <!-- Google Map Section -->
    <div id="map" style="height: 500px; width: 100%"></div>

    <!-- Form Section (Buttons below the map) -->
    <form id="routeForm">
        <input type="hidden" id="startLatLng" />
        <input type="hidden" id="endLatLng" />
        <button type="submit" disabled>Get Route</button>
        <button type="button" id="resetBtn">Reset</button>
    </form>

    <!-- JavaScript for Real-time Timestamp -->
    <script>
        // Initialize variables
        let map, routePath, startMarker, endMarker;
        let startLatLng = null;
        let endLatLng = null;
        let avoidedRoutePaths = []; // Store the avoided route paths

        // Update timestamp every second
        function updateTime() {
            const now = new Date();
            const formattedTime = now.toLocaleString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
            });
            document.getElementById("timestamp").innerText = formattedTime;
        }
        setInterval(updateTime, 1000); // Update time every second

        // Initialize the map
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 24.7136, lng: 46.6753 }, // Riyadh coordinates
                zoom: 12,
            });

            // Add click event listener to capture start and end locations
            map.addListener("click", function (event) {
                handleMapClick(event.latLng);
            });

            // Load and display avoided routes
            loadAvoidedRoutes();
        }

        // Load avoided routes from the server and display them on the map
        function loadAvoidedRoutes() {
            $.ajax({
                url: "/get-avoided-routes",
                type: "GET",
                success: function (response) {
                    if (response.status === "success") {
                        drawAvoidedRoutes(response.avoided_routes); // Draw avoided routes in red
                    } else {
                        alert("Failed to load avoided routes.");
                    }
                },
                error: function () {
                    alert("Failed to retrieve the avoided routes.");
                },
            });
        }

        // Draw the avoided routes in red
        function drawAvoidedRoutes(avoidedRoutes) {
            // Remove any existing avoided routes
            avoidedRoutePaths.forEach((path) => path.setMap(null));
            avoidedRoutePaths = [];

            avoidedRoutes.forEach((route) => {
                const decodedPolyline = google.maps.geometry.encoding.decodePath(
                    route.overview_polyline
                );
                const avoidedPath = new google.maps.Polyline({
                    path: decodedPolyline,
                    geodesic: true,
                    strokeColor: "#FF0000", // Red color for avoided routes
                    strokeOpacity: 0.7,
                    strokeWeight: 4,
                });
                avoidedPath.setMap(map);
                avoidedRoutePaths.push(avoidedPath); // Store the avoided route
            });
        }

        // Handle clicks on the map to select start and end points
        function handleMapClick(latLng) {
            if (!startLatLng) {
                // Set the start marker
                startLatLng = latLng;
                placeMarker(latLng, "Start");
                $("#startLatLng").val(latLng.lat() + "," + latLng.lng());

                // Log the start point for debugging
                console.log("Start LatLng set: ", $("#startLatLng").val());
            } else if (!endLatLng) {
                // Set the end marker
                endLatLng = latLng;
                placeMarker(latLng, "End");
                $("#endLatLng").val(latLng.lat() + "," + latLng.lng());

                // Log the end point for debugging
                console.log("End LatLng set: ", $("#endLatLng").val());

                // Enable the "Get Route" button after both points are selected
                $("button[type=submit]").prop("disabled", false);
            }
        }

        // Place marker for the selected location (start or end)
        function placeMarker(latLng, label) {
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                label: label,
                draggable: false,
            });

            if (label === "Start") {
                if (startMarker) startMarker.setMap(null); // Remove old marker
                startMarker = marker;
            } else if (label === "End") {
                if (endMarker) endMarker.setMap(null); // Remove old marker
                endMarker = marker;
            }
        }

        // Form submission handler to  and draw the route
        $("#routeForm").on("submit", function (e) {
            e.preventDefault();

            const start = $("#startLatLng").val();
            const end = $("#endLatLng").val();

            // Debugging: Log the start and end values before sending
            console.log("Submitting Start: ", start);
            console.log("Submitting End: ", end);

            if (!start || !end) {
                alert("Start and End points are required.");
                return;
            }

            $.ajax({
                url: "/calculate-route",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ start, end }),
                success: function (response) {
                    if (response.status === "success") {
                        drawMainRoute(response.route.overview_polyline); // Draw the main route in blue
                    } else {
                        alert(response.message); // Show the error message
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error: ", error);
                    alert("Failed to retrieve the route. Please try again.");
                },
            });
        });

        // Draw the main route in blue
        function drawMainRoute(polyline) {
            const decodedPolyline =
                google.maps.geometry.encoding.decodePath(polyline);
            if (routePath) {
                routePath.setMap(null); // Remove the old route
            }

            routePath = new google.maps.Polyline({
                path: decodedPolyline,
                geodesic: true,
                strokeColor: "#0000FF", // Blue color for main route
                strokeOpacity: 1.0,
                strokeWeight: 4,
            });

            routePath.setMap(map);
            map.fitBounds(getBounds(decodedPolyline)); // Adjust the map to fit the route
        }

        // Get the bounds for the polyline
        function getBounds(decodedPolyline) {
            const bounds = new google.maps.LatLngBounds();
            decodedPolyline.forEach((point) => {
                bounds.extend(point);
            });
            return bounds;
        }

        // Reset button handler: clear markers, route, and form
        $("#resetBtn").on("click", function () {
            // Remove markers and route from the map
            if (startMarker) startMarker.setMap(null);
            if (endMarker) endMarker.setMap(null);
            if (routePath) routePath.setMap(null);

            // Remove avoided routes
            avoidedRoutePaths.forEach((path) => path.setMap(null));
            avoidedRoutePaths = [];

            // Clear stored start/end points
            startLatLng = null;
            endLatLng = null;

            // Clear hidden input fields and disable "Get Route" button
            $("#startLatLng").val("");
            $("#endLatLng").val("");
            $("button[type=submit]").prop("disabled", true);

            // Reload avoided routes
            loadAvoidedRoutes();
        });

        // Initialize the map
        initMap();

        // Update timestamp every second
        function updateTime() {
            const now = new Date();
            const formattedTime = now.toLocaleString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
            });
            document.getElementById("timestamp").innerText = formattedTime;
        }
        setInterval(updateTime, 1000); // Update time every second

        // Function to fetch updated vehicle information from the server
        function fetchVehicleInfo() {
            $.ajax({
                url: "/get-vehicle-info",
                type: "GET",
                success: function (response) {
                    // Update the dashboard values with the latest info
                    $("#truckCost").text(response.truck_cost + " SAR");
                    $("#carCost").text(response.car_cost + " SAR");
                    $("#motorbikeCost").text(response.motorbike_cost + " SAR");
                    $("#vehicleCounter").text(response.total_vehicles);
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching vehicle info:", error);
                },
            });
        }

        // Fetch the vehicle info every second
        setInterval(fetchVehicleInfo, 1000); // Update the dashboard every second
    </script>
</body>

</html>
""", height=600)