import json
from fastapi import FastAPI, Request
from fastapi.responses import JSONResponse
from nicegui import app, ui

# Initialize FastAPI alongside NiceGUI
fastapi_app = FastAPI()

# InMemory database to store active school bus tracks for the sandbox
# In production, this can be backed by Redis or MySQL
ACTIVE_TRACKS = {}

# --- FASTAPI ENDPOINTS (High-Speed Data Ingestion) ---

@fastapi_app.post("/api/track/{route_id}")
async def update_location(route_id: str, request: Request):
    """
    Secure endpoint for the driver's browser to POST real-time GPS coordinates.
    """
    try:
        data = await request.json()
        lat = data.get("lat")
        lng = data.get("lng")
        
        if lat and lng:
            ACTIVE_TRACKS[route_id] = {
                "lat": float(lat),
                "lng": float(lng),
                "school_name": data.get("school_name", "Demo School"),
                "route_name": data.get("route_name", "Route 1")
            }
            return {"status": "success"}
        return JSONResponse(status_code=400, content={"error": "Invalid coordinates"})
    except Exception as e:
        return JSONResponse(status_code=500, content={"error": str(e)})

@fastapi_app.get("/api/location/{route_id}")
async def get_location(route_id: str):
    """
    Endpoint for the parent UI to poll the latest location without reloading.
    """
    if route_id in ACTIVE_TRACKS:
        return ACTIVE_TRACKS[route_id]
    return JSONResponse(status_code=404, content={"error": "Route inactive"})


# --- NICEGUI USER INTERFACES (Frontend) ---

# 1. Driver's Transmission Screen
@ui.page('/drive/{route_id}')
def driver_page(route_id: str):
    # Retrieve mock or setup parameters
    school = "Demo School"
    route = f"Route {route_id.upper()}"
    
    ui.colors(primary='#1e3a8a') # Professional deep blue
    
    with ui.card().classes('w-full max-w-md mx-auto my-10 p-6 text-center shadow-lg rounded-xl'):
        ui.label(school).classes('text-xs uppercase tracking-wider text-gray-400 font-bold')
        ui.label(f"📍 Broadcasting: {route}").classes('text-xl font-bold text-slate-800')
        ui.markdown("---")
        
        status_label = ui.label("Ready to transmit location...").classes('text-amber-600 font-medium my-4')
        
        # HTML5 Javascript Injection to handle low-overhead background geo-tracking
        ui.add_head_html("""
            <script>
                let watchId = null;
                function toggleTracking(routeId, schoolName, routeName) {
                    if (watchId) {
                        navigator.geolocation.clearWatch(watchId);
                        watchId = null;
                        document.getElementById('c7').innerText = 'Tracking Stopped'; // Reference component text
                        return false;
                    }
                    
                    if (!navigator.geolocation) {
                        alert('Geolocation is not supported by your browser');
                        return false;
                    }
                    
                    watchId = navigator.geolocation.watchPosition(
                        (position) => {
                            const data = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude,
                                school_name: schoolName,
                                route_name: routeName
                            };
                            fetch('/api/track/' + routeId, {
                                method: 'POST',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify(data)
                            });
                        },
                        (error) => console.error(error),
                        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
                    );
                    return true;
                }
            </script>
        """)
        
        def on_toggle(e):
            if e.value:
                status_label.set_text("🟢 LIVE: Transmitting location data...")
                status_label.classes('text-green-600', remove='text-amber-600')
                ui.run_javascript(f"toggleTracking('{route_id}', '{school}', '{route}')")
            else:
                status_label.set_text("🛑 Paused: Transmission off.")
                status_label.classes('text-amber-600', remove='text-green-600')
                ui.run_javascript(f"toggleTracking('{route_id}', '{school}', '{route}')")

        ui.switch('Start Route Sharing', on_change=on_toggle).classes('mx-auto scale-125 my-4')


# 2. Parent's Map View Screen
@ui.page('/route/{route_id}')
def parent_page(route_id: str):
    ui.colors(primary='#1e3a8a')
    
    # Inject LeafletJS css/js for open-source map visualization (Zero API key dependencies)
    ui.add_head_html("""
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
        <style> #map { height: 400px; border-radius: 12px; } </style>
    """)
    
    with ui.header().classes('bg-blue-900 text-white p-4 flex justify-between items-center'):
        ui.label("🎒 Real-Time Bus Tracker Sandbox").classes('font-bold text-lg')
        
    with ui.column().classes('w-full max-w-4xl mx-auto p-4 gap-4'):
        with ui.card().classes('w-full p-4 shadow'):
            ui.label(f"Tracking ID: {route_id.upper()}").classes('text-sm text-gray-500')
            ui.html('<div id="map"></div>')
            
        # Lead Generation Bottom Banner
        with ui.card().classes('w-full bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 p-6 rounded-xl flex flex-col md:flex-row items-center justify-between gap-4'):
            with ui.column():
                ui.label("Want this tracking system automated for your entire school fleet?").classes('font-bold text-slate-800 text-base')
                ui.label("Get Geofencing alerts, parent WhatsApp updates, and speed compliance monitoring frameworks.").classes('text-sm text-slate-600')
            ui.button("Request Premium Upgrade", on_click=lambda: ui.notify("Redirecting to SaaS Booking form..."))
            
    # Polling logic via Javascript to smoothly update the map marker position
    ui.add_body_html(f"""
        <script>
            setTimeout(() => {{
                var map = L.map('map').setView([10.8050, 78.6856], 13); // Default location centered on Trichy
                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
                    attribution: '© OpenStreetMap contributors'
                }}).addTo(map);
                
                var marker = L.marker([10.8050, 78.6856]).addTo(map).bindPopup('Bus Location').openPopup();
                
                // Poll the FastAPI location data engine every 5 seconds
                setInterval(async () => {{
                    try {{
                        let response = await fetch('/api/location/{route_id}');
                        if (response.ok) {{
                            let data = await response.json();
                            let pos = [data.lat, data.lng];
                            marker.setLatLng(pos);
                            map.panTo(pos);
                        }}
                    }} catch (e) {{ console.error("Error polling position data:", e); }}
                }}, 5000);
            }}, 500);
        </script>
    """)

# Integrate NiceGUI cleanly within the master FastAPI app deployment pipelines
ui.run_with(fastapi_app, storage_secret='7f83b1a2c5e4d9f0a1b2c3d4e5f6a7b8', mount_path='/')