import json
import html
import folium
import gradio as gr
from folium import plugins

from lib import RequestFunction


def CreateMap() -> folium.Map:
    """Çizim araçları ve çoklu temel katmanlar içeren ana haritayı oluşturur."""
    fmap = folium.Map(location=[37.511905, 38.51532], zoom_start=6, world_copy_jump=True, tiles=None)

    # Temel katmanlar
    folium.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", attr="OpenStreetMap", name="OpenStreetMap").add_to(fmap)

    folium.TileLayer("http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}", attr="Google", name="Google Uydu").add_to(fmap)

    folium.TileLayer(
        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attr="Esri", name="Esri Dünya Uydu"
    ).add_to(fmap)

    folium.TileLayer(
        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
        attr="Esri",
        name="Esri Dünya Sokak",
    ).add_to(fmap)

    folium.TileLayer(
        "https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", attr="CartoDB", name="CartoDB Açık"
    ).add_to(fmap)

    # Koordinat göstergesi
    formatter = "function(num) {return L.Util.formatNum(num, 5) + ' ° ';};"
    plugins.MousePosition(
        position="bottomright", separator=" | ", lng_first=True, prefix="Konum:", lat_formatter=formatter, lng_formatter=formatter
    ).add_to(fmap)

    plugins.Geocoder(position="topleft").add_to(fmap)
    plugins.Draw(export=True, filename="drawing.geojson", position="topleft", show_geometry_on_click=False).add_to(fmap)
    plugins.Fullscreen(position="topright").add_to(fmap)
    folium.LayerControl(position="bottomleft").add_to(fmap)

    # Çizim olaylarını Gradio bileşenlerine bağla
    map_name = fmap.get_name()
    fmap.get_root().html.add_child(
        folium.Element(
            f"""
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {{
                var idx = 0;
                var drawnItems = new L.FeatureGroup();
                {map_name}.addLayer(drawnItems);

                const updateGeoJsonOutput = (geoJsonData) => {{
                    const textArea = parent.document.querySelector('#geojson_output textarea');
                    if (!textArea) return;
                    textArea.value = JSON.stringify(geoJsonData);
                    textArea.dispatchEvent(new Event('input'));
                }};

                // "GeoJSON Al" butonuna tıklandığında güncel veriyi aktar
                const processBtn = parent.document.getElementById('geojson_process');
                if (processBtn) {{
                    processBtn.onclick = function() {{
                        updateGeoJsonOutput(drawnItems.toGeoJSON());
                    }};
                }}

                {map_name}.on('draw:created', function(e) {{
                    var layer = e.layer;
                    var title, value;

                    do {{
                        title = prompt('Şekle bir isim giriniz:', '');
                        if (title === null) return;
                    }} while (!title.trim());

                    do {{
                        value = prompt('Şekle bir değer giriniz:', '');
                        if (value === null) return;
                    }} while (!value.trim());

                    var id = idx++;
                    var feature     = layer.feature = layer.feature || {{}};
                    feature.type    = 'Feature';
                    var props       = feature.properties = feature.properties || {{}};
                    props.Id    = id;
                    props.Title = title;
                    props.Value = value;

                    layer.bindTooltip(
                        `Şekil: ${{id + 1}} | İsim: ${{title}} | Değer: ${{value}}`,
                        {{ permanent: false, direction: 'center', className: 'label-tooltip' }}
                    );

                    drawnItems.addLayer(layer);
                    updateGeoJsonOutput(drawnItems.toGeoJSON());
                }});

                {map_name}.on('draw:deleted', function(e) {{
                    e.layers.eachLayer(function(layer) {{
                        drawnItems.removeLayer(layer);
                    }});
                    updateGeoJsonOutput(drawnItems.toGeoJSON());
                }});

                {map_name}.on('draw:edited', function(e) {{
                    updateGeoJsonOutput(drawnItems.toGeoJSON());
                }});
            }});
        </script>
    """
        )
    )

    return fmap


def CreateDatasetMap(geojson_data: str) -> str:
    """GeoJSON verisinden GEE haritası üretir ve iframe olarak döndürür."""
    if not geojson_data:
        return "<p>Lütfen önce haritada bir bölge çizin.</p>"

    geojson = json.loads(geojson_data)
    features = geojson.get("features", [])

    if not features:
        return "<p>Çizili şekil bulunamadı.</p>"

    coords = features[0]["geometry"]["coordinates"][0]
    fmap = RequestFunction(coords)

    if fmap is None:
        return "<p>Veri alınamadı.</p>"

    raw_html = fmap._repr_html_()
    escaped = html.escape(raw_html)

    return f"""<iframe
        style="width:100%; height:520px; border:none;"
        sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-modals"
        allowfullscreen
        srcdoc='{escaped}'
    ></iframe>"""


# Ana haritayı oluştur
basemap = CreateMap()

# Gradio Arayüzü
with gr.Blocks(title="GEE Harita Uygulaması") as app:

    gr.Markdown("# GEE Harita Uygulaması")
    gr.Markdown("Çalışmak istediğiniz bölgeyi harita üzerinde çizin, ardından veri çekin.")

    with gr.Row():
        geojson_process_btn = gr.Button("GeoJSON Al", elem_id="geojson_process", variant="secondary")
        prepare_dataset_btn = gr.Button("Veri Çek", elem_id="prepare_dataset", variant="primary")

    # Ana harita
    map_html = gr.HTML(basemap._repr_html_(), elem_id="map_container")

    # GEE sonuç haritası
    dataset_map_html = gr.HTML(elem_id="dataset_map_container")

    # Ham GeoJSON çıktısı (JS tarafından doldurulan gizli alan)
    geojson_output = gr.Textbox(
        value="",
        placeholder="Çizilen şekillerin GeoJSON verisi burada görünür.",
        label="Ham GeoJSON",
        lines=4,
        elem_id="geojson_output",
        interactive=False,
    )

    # GeoJSON görünümü
    geojson_view = gr.JSON(label="GeoJSON Görünümü")

    # Event bağlantıları
    geojson_process_btn.click(
        fn=lambda data: json.loads(data) if data else {}, inputs=geojson_output, outputs=geojson_view, scroll_to_output=True
    )

    prepare_dataset_btn.click(fn=CreateDatasetMap, inputs=geojson_output, outputs=dataset_map_html, scroll_to_output=True)


app.queue(max_size=10)
app.launch(share_server_protocol="https")