import gradio as gr
import folium
import os
from bs4 import BeautifulSoup
import simplekml

# Function to create permaculture map
def create_permaculture_map(lat, lon):
    # Validate coordinates
    if not (-90 <= lat <= 90) or not (-180 <= lon <= 180):
        raise gr.Error("Invalid coordinates! Latitude: -90 to 90, Longitude: -180 to 180")
    
    # Create base map
    m = folium.Map(location=[lat, lon], zoom_start=16, control_scale=True)
    
    # Add permaculture elements
    elements = [
        {"name": "Building", "location": [lat+0.0001, lon+0.0001], "color": "red", "icon": "home"},
        {"name": "Vegetation", "location": [lat-0.0001, lon-0.0001], "color": "green", "icon": "tree"},
        {"name": "Water", "location": [lat+0.0002, lon-0.0002], "color": "blue", "icon": "tint"},
        {"name": "Energy", "location": [lat-0.0002, lon+0.0002], "color": "orange", "icon": "bolt"}
    ]
    
    for element in elements:
        folium.Marker(
            element["location"],
            popup=element["name"],
            icon=folium.Icon(color=element["color"], icon=element["icon"])
        ).add_to(m)
        
    # Add paths
    folium.PolyLine(
        locations=[[lat-0.0003, lon-0.0003], [lat+0.0003, lon+0.0003]],
        color="brown",
        weight=2
    ).add_to(m)
    
    # Save map
    os.makedirs("output", exist_ok=True)
    map_path = os.path.join("output", "map.html")
    m.save(map_path)
    
    # Return HTML content
    with open(map_path, "r") as f:
        return f.read()

# Gradio interface
with gr.Blocks() as app:
    gr.Markdown("# 🌿 Permaculture Base Map Creator")
    
    with gr.Row():
        with gr.Column():
            gr.Markdown("## 📍 Location Selection")
            with gr.Row():
                lat = gr.Number(label="Latitude", value=45.5236)
                lon = gr.Number(label="Longitude", value=-122.6750)
            gr.Markdown("### OR")
            gr.Markdown("Search on map below:")
            map_html = gr.HTML(value="<div id='map' style='height: 300px'></div>")
            btn = gr.Button("Generate Map", variant="primary")
        
        with gr.Column():
            gr.Markdown("## 🗺️ Your Permaculture Design")
            output_map = gr.HTML()
    
    # Interactive map script
    app.load(
        None,
        None,
        None,
        _js="""
        () => {
            const map = L.map('map').setView([45.5236, -122.6750], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
            
            let marker;
            map.on('click', (e) => {
                if(marker) map.removeLayer(marker);
                marker = L.marker(e.latlng).addTo(map);
                document.querySelector('#component-1 input').value = e.latlng.lat;
                document.querySelector('#component-2 input').value = e.latlng.lng;
            });
        }
        """
    )
    
    btn.click(
        fn=create_permaculture_map,
        inputs=[lat, lon],
        outputs=output_map,
        _js="(lat, lon) => `<iframe srcdoc='${create_permaculture_map(lat, lon)}' width='100%' height='500'></iframe>`"
    )

if __name__ == "__main__":
    app.launch()