import streamlit as st
# KORREKTER IMPORT für 'pip install streamlit-cytoscapejs'
from streamlit_cytoscapejs import st_cytoscapejs
from qdrant_client import models
from ui_config import COLLECTION_PREFIX, GRAPH_COLORS
from ui_callbacks import switch_to_editor_callback

def render_graph_explorer_cytoscape(graph_service):
    st.header("🕸️ Graph Explorer (Cytoscape)")
    
    if "graph_center_id" not in st.session_state: 
        st.session_state.graph_center_id = None

    # Layout Defaults für COSE
    st.session_state.setdefault("cy_node_repulsion", 1000000)
    st.session_state.setdefault("cy_ideal_edge_len", 150)

    col_ctrl, col_graph = st.columns([1, 4]) 
    
    # --- CONTROLS ---
    with col_ctrl:
        st.subheader("Fokus")
        search_term = st.text_input("Suche Notiz", placeholder="Titel eingeben...", key="cy_search")
        
        if search_term:
            hits, _ = graph_service.client.scroll(
                collection_name=f"{COLLECTION_PREFIX}_notes",
                limit=10,
                scroll_filter=models.Filter(must=[models.FieldCondition(key="title", match=models.MatchText(text=search_term))])
            )
            options = {h.payload['title']: h.payload['note_id'] for h in hits}
            if options:
                selected_title = st.selectbox("Ergebnisse:", list(options.keys()), key="cy_select")
                if st.button("Laden", use_container_width=True, key="cy_load"):
                    st.session_state.graph_center_id = options[selected_title]
                    st.rerun()
        
        st.divider()
        with st.expander("👁️ Layout Einstellungen", expanded=True):
            st.caption("COSE Layout")
            st.session_state.cy_ideal_edge_len = st.slider("Kantenlänge", 50, 500, st.session_state.cy_ideal_edge_len)
            st.session_state.cy_node_repulsion = st.slider("Knoten-Abstoßung", 100000, 2000000, st.session_state.cy_node_repulsion, step=100000)
            
            if st.button("Neu berechnen", key="cy_rerun"):
                st.rerun()

        st.divider()
        st.caption("Legende")
        for k, v in list(GRAPH_COLORS.items())[:8]:
            st.markdown(f"<span style='color:{v}'>●</span> {k}", unsafe_allow_html=True)

    # --- GRAPH AREA ---
    with col_graph:
        center_id = st.session_state.graph_center_id
        
        if center_id:
            action_container = st.container()

            # 1. Daten laden
            with st.spinner("Lade Graph..."):
                # Wir nutzen die bestehende Logik aus dem Service
                nodes_data, edges_data = graph_service.get_ego_graph(center_id) 
                note_data = graph_service.get_note_with_full_content(center_id)

            # 2. Action Bar
            with action_container:
                c1, c2 = st.columns([3, 1])
                with c1: st.caption(f"Zentrum: **{center_id}**")
                with c2:
                    if note_data:
                        st.button("📝 Bearbeiten", use_container_width=True, on_click=switch_to_editor_callback, args=(note_data,), key="cy_edit")
            
            # 3. Konvertierung zu Cytoscape JSON
            cy_elements = []
            
            for n in nodes_data:
                # Node
                cy_node = {
                    "data": {
                        "id": n.id,
                        "label": n.label,
                        "bg_color": n.color, # Wichtig: Eigenes Attribut für Style mapping
                        "size": 40 if n.id == center_id else 25,
                        "tooltip": n.title   
                    },
                    "selected": (n.id == center_id)
                }
                cy_elements.append(cy_node)
            
            for e in edges_data:
                # Edge Fix: e.to statt e.target nutzen!
                target_id = getattr(e, "to", getattr(e, "target", None))
                
                cy_edge = {
                    "data": {
                        "source": e.source,
                        "target": target_id, # KORRIGIERT
                        "label": e.label,
                        "line_color": e.color
                    }
                }
                cy_elements.append(cy_edge)

            # 4. Stylesheet
            stylesheet = [
                {
                    "selector": "node",
                    "style": {
                        "label": "data(label)",
                        "width": "data(size)",
                        "height": "data(size)",
                        "background-color": "data(bg_color)", # Mapping auf unser data feld
                        "color": "#333",
                        "font-size": "12px",
                        "text-valign": "center",
                        "text-halign": "center",
                        "border-width": 2,
                        "border-color": "#fff"
                    }
                },
                {
                    "selector": "node:selected",
                    "style": {
                        "border-width": 4,
                        "border-color": "#FF5733"
                    }
                },
                {
                    "selector": "edge",
                    "style": {
                        "width": 2,
                        "line-color": "data(line_color)",
                        "target-arrow-color": "data(line_color)",
                        "target-arrow-shape": "triangle",
                        "curve-style": "bezier",
                        "label": "data(label)",
                        "font-size": "10px",
                        "color": "#777",
                        "text-background-opacity": 1,
                        "text-background-color": "#fff"
                    }
                }
            ]

            # 5. Rendering
            # Die Bibliothek gibt eine Liste von geklickten Elementen zurück
            clicked_elements = st_cytoscapejs(
                elements=cy_elements,
                stylesheet=stylesheet,
                layout={
                    "name": "cose", 
                    "idealEdgeLength": st.session_state.cy_ideal_edge_len,
                    "nodeOverlap": 20,
                    "refresh": 20,
                    "fit": True,
                    "padding": 30,
                    "randomize": False,
                    "componentSpacing": 100,
                    "nodeRepulsion": st.session_state.cy_node_repulsion,
                    "edgeElasticity": 100,
                    "nestingFactor": 5,
                    "gravity": 80,
                    "numIter": 1000,
                    "initialTemp": 200,
                    "coolingFactor": 0.95,
                    "minTemp": 1.0
                },
                key="cyto_graph_obj",
                height="800px"
            )

            # Interaktion: Klick Event verarbeiten
            if clicked_elements:
                # clicked_elements ist eine Liste von Dictionaries
                # Wir suchen nach einem Node-Klick
                for el in clicked_elements:
                    # Prüfen ob es ein Node ist (hat 'id' aber keine 'source'/'target' im root, 
                    # allerdings liefert die Lib oft die rohen Daten)
                    # Wir schauen auf die ID.
                    clicked_id = el.get("data", {}).get("id") if "data" in el else el.get("id")
                    
                    if clicked_id and clicked_id != center_id:
                        # Safety check: ist es eine edge? Edges haben source/target
                        is_edge = "source" in el.get("data", {})
                        if not is_edge:
                            st.session_state.graph_center_id = clicked_id
                            st.rerun()

        else:
            st.info("👈 Bitte wähle links eine Notiz aus.")