app.py

import subprocess, sys

def _install(pkg):
    subprocess.check_call([sys.executable, "-m", "pip", "install", "--quiet", pkg])

try:
    from neo4j import GraphDatabase
except ImportError:
    _install("neo4j==6.1.0")
    from neo4j import GraphDatabase

try:
    from groq import Groq
except ImportError:
    _install("groq==1.1.1")
    from groq import Groq

try:
    from pyvis.network import Network
except ImportError:
    _install("pyvis==0.3.2")
    from pyvis.network import Network

try:
    import plotly.graph_objects as go
except ImportError:
    _install("plotly==5.24.1")
    import plotly.graph_objects as go

try:
    import pandas as pd
except ImportError:
    _install("pandas==2.2.3")
    import pandas as pd

import streamlit as st
import os
import time
import json
import re
import tempfile

# ─────────────────────────────────────────────
# PAGE CONFIG
# ─────────────────────────────────────────────
st.set_page_config(
    page_title="GraphRAG vs Vector RAG | Daniel Fonseca",
    page_icon="🕸️",
    layout="wide",
    initial_sidebar_state="expanded",
)

# ─────────────────────────────────────────────
# CUSTOM CSS
# ─────────────────────────────────────────────
st.markdown("""
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

html, body, [class*="css"] {
    font-family: 'IBM Plex Sans', sans-serif;
}

.main { background-color: #0A0F1E; }
[data-testid="stAppViewContainer"] { background: #0A0F1E; }
[data-testid="stSidebar"] { background: #0D1428; border-right: 1px solid #1E2D4A; }

h1, h2, h3 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }

.hero-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 2rem;
    font-weight: 600;
    color: #E8F4FD;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.hero-sub {
    font-size: 0.95rem;
    color: #6B8CAE;
    font-family: 'IBM Plex Mono', monospace;
    margin-bottom: 1.5rem;
}

.panel-graph {
    background: #0D1E35;
    border: 1px solid #1565C0;
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    height: 100%;
}
.panel-vector {
    background: #1A0D2E;
    border: 1px solid #6A1B9A;
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    height: 100%;
}

.panel-label-graph {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: #42A5F5;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.panel-label-vector {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: #CE93D8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.step-graph {
    background: #0D2A4A;
    border-left: 3px solid #1565C0;
    border-radius: 0 6px 6px 0;
    padding: 6px 10px;
    margin: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #90CAF9;
}
.step-vector {
    background: #2A0D3A;
    border-left: 3px solid #6A1B9A;
    border-radius: 0 6px 6px 0;
    padding: 6px 10px;
    margin: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #CE93D8;
}

.answer-box {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 0.9rem;
    margin: 0.8rem 0;
    font-size: 0.88rem;
    color: #C8D8E8;
    line-height: 1.65;
    border: 1px solid rgba(255,255,255,0.06);
}

.metric-good {
    display: inline-block;
    background: #0D2A1A;
    color: #69F0AE;
    border: 1px solid #1B5E20;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-family: 'IBM Plex Mono', monospace;
    margin: 3px 2px;
}
.metric-bad {
    display: inline-block;
    background: #2A1A0D;
    color: #FFB74D;
    border: 1px solid #5E3500;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-family: 'IBM Plex Mono', monospace;
    margin: 3px 2px;
}

.winner-box {
    background: linear-gradient(135deg, #0D1E35 0%, #0D2A1A 100%);
    border: 1px solid #1B5E20;
    border-radius: 10px;
    padding: 1rem 1.4rem;
    margin-top: 1rem;
    font-family: 'IBM Plex Mono', monospace;
}
.winner-label { font-size: 0.7rem; color: #69F0AE; letter-spacing: 2px; text-transform: uppercase; }
.winner-name { font-size: 1.4rem; font-weight: 600; color: #42A5F5; }

.cypher-block {
    background: #050D1A;
    border: 1px solid #1E2D4A;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: #90CAF9;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.cypher-keyword { color: #FF6B6B; }
.cypher-node { color: #69F0AE; }
.cypher-rel { color: #FFD54F; }

.section-divider {
    border: none;
    border-top: 1px solid #1E2D4A;
    margin: 1.5rem 0;
}

.chip {
    display: inline-block;
    background: #0D1E35;
    border: 1px solid #1E3A5F;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #6B8CAE;
    margin: 3px;
    cursor: pointer;
}

.info-banner {
    background: #0D1E35;
    border: 1px solid #1E3A5F;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    color: #6B8CAE;
    margin-bottom: 1rem;
}

.tag-neo4j {
    background: #003E2D; color: #00ED64;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem; font-family: 'IBM Plex Mono', monospace;
    margin-right: 4px;
}
.tag-groq {
    background: #1A0A2E; color: #CE93D8;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem; font-family: 'IBM Plex Mono', monospace;
    margin-right: 4px;
}
.tag-llm {
    background: #0D1E35; color: #42A5F5;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem; font-family: 'IBM Plex Mono', monospace;
}
</style>
""", unsafe_allow_html=True)


# ─────────────────────────────────────────────
# NEO4J CONNECTION
# ─────────────────────────────────────────────
def _get_neo4j_creds():
    uri      = (st.secrets.get("NEO4J_URI")      or os.getenv("NEO4J_URI")      or "neo4j+s://e3b8c8ec.databases.neo4j.io")
    user     = (st.secrets.get("NEO4J_USERNAME")  or os.getenv("NEO4J_USERNAME")  or "e3b8c8ec")
    password = (st.secrets.get("NEO4J_PASSWORD")  or os.getenv("NEO4J_PASSWORD")  or "")
    database = (st.secrets.get("NEO4J_DATABASE")  or os.getenv("NEO4J_DATABASE")  or "e3b8c8ec")
    return (
        uri.strip().strip('"').strip("'"),
        user.strip().strip('"').strip("'"),
        password.strip().strip('"').strip("'"),
        database.strip().strip('"').strip("'"),
    )

@st.cache_resource
def get_neo4j_driver():
    uri, user, password, database = _get_neo4j_creds()
    if not password:
        st.sidebar.warning("NEO4J_PASSWORD not set in Secrets.")
        return None, None
    try:
        driver = GraphDatabase.driver(
            uri, auth=(user, password),
            max_connection_lifetime=200,
            keep_alive=True,
        )
        driver.verify_connectivity()
        return driver, database
    except Exception as e:
        st.sidebar.error(f"Neo4j error: {e}")
        return None, None

def get_session(driver, database):
    """Always get a fresh session, reconnecting if needed."""
    try:
        return driver.session(database=database)
    except Exception:
        # Driver is defunct — clear cache and rebuild
        get_neo4j_driver.clear()
        uri, user, password, database = _get_neo4j_creds()
        new_driver = GraphDatabase.driver(
            uri, auth=(user, password),
            max_connection_lifetime=200,
            keep_alive=True,
        )
        return new_driver.session(database=database)

@st.cache_resource
def get_groq_client():
    api_key = st.secrets.get("GROQ_API_KEY", os.getenv("GROQ_API_KEY", ""))
    if not api_key:
        return None
    return Groq(api_key=api_key)


# ─────────────────────────────────────────────
# SEED DATABASE WITH FRAUD GRAPH
# ─────────────────────────────────────────────
SEED_CYPHER = """
// Clear existing
MATCH (n) DETACH DELETE n;

// Customers
MERGE (c1:Customer {id:'C-001', name:'Carlos Mendez', risk:'high'})
MERGE (c2:Customer {id:'C-002', name:'Ana Paula', risk:'medium'})
MERGE (c3:Customer {id:'C-003', name:'Roberto Silva', risk:'high'})
MERGE (c4:Customer {id:'C-004', name:'Maria Costa', risk:'low'})
MERGE (c5:Customer {id:'C-005', name:'João Lima', risk:'medium'})
MERGE (c6:Customer {id:'C-006', name:'Lucas Ferreira', risk:'high'})

// Accounts
MERGE (a1:Account {id:'A-101', balance:250.0, status:'flagged'})
MERGE (a2:Account {id:'A-102', balance:1200.0, status:'active'})
MERGE (a3:Account {id:'A-890', balance:180.0, status:'flagged'})
MERGE (a4:Account {id:'A-445', balance:3100.0, status:'mule'})
MERGE (a5:Account {id:'A-667', balance:2950.0, status:'mule'})
MERGE (a6:Account {id:'A-201', balance:500.0, status:'active'})

// Devices
MERGE (d1:Device {id:'D-441', type:'mobile', os:'Android', fingerprint:'abc123'})
MERGE (d2:Device {id:'D-882', type:'emulator', os:'Android', fingerprint:'xxx999'})
MERGE (d3:Device {id:'D-103', type:'desktop', os:'Windows', fingerprint:'win456'})

// IPs
MERGE (ip1:IP {address:'177.82.11.3', country:'BR', vpn:false})
MERGE (ip2:IP {address:'192.168.1.44', country:'BR', vpn:true})
MERGE (ip3:IP {address:'201.55.3.12', country:'BR', vpn:false})

// Merchants
MERGE (m1:Merchant {id:'MKT-031', name:'QuickShop', category:'retail', micro_tx:47})
MERGE (m2:Merchant {id:'MKT-088', name:'FastPay', category:'digital', micro_tx:33})
MERGE (m3:Merchant {id:'MKT-201', name:'EasyStore', category:'retail', micro_tx:28})

// Customer → Account
MERGE (c1)-[:HAS_ACCOUNT]->(a1)
MERGE (c2)-[:HAS_ACCOUNT]->(a2)
MERGE (c3)-[:HAS_ACCOUNT]->(a3)
MERGE (c4)-[:HAS_ACCOUNT]->(a6)
MERGE (c5)-[:HAS_ACCOUNT]->(a4)
MERGE (c6)-[:HAS_ACCOUNT]->(a5)

// Customer → Device
MERGE (c1)-[:USED {last_seen:'2024-01-15'}]->(d1)
MERGE (c2)-[:USED {last_seen:'2024-01-14'}]->(d1)
MERGE (c3)-[:USED {last_seen:'2024-01-15'}]->(d1)
MERGE (c4)-[:USED {last_seen:'2024-01-10'}]->(d2)
MERGE (c5)-[:USED {last_seen:'2024-01-15'}]->(d2)

// Account → IP
MERGE (a1)-[:ACCESSED_FROM {count:12, last_seen:'2024-01-15'}]->(ip1)
MERGE (a2)-[:ACCESSED_FROM {count:3,  last_seen:'2024-01-14'}]->(ip1)
MERGE (a3)-[:ACCESSED_FROM {count:8,  last_seen:'2024-01-15'}]->(ip1)
MERGE (a4)-[:ACCESSED_FROM {count:5,  last_seen:'2024-01-13'}]->(ip2)
MERGE (a5)-[:ACCESSED_FROM {count:7,  last_seen:'2024-01-15'}]->(ip2)
MERGE (a6)-[:ACCESSED_FROM {count:2,  last_seen:'2024-01-10'}]->(ip3)

// Money mule transfers
MERGE (a2)-[:TRANSFER {amount:3200.0, date:'2024-01-15', hour:'10:00'}]->(a4)
MERGE (a4)-[:TRANSFER {amount:3100.0, date:'2024-01-15', hour:'11:30'}]->(a5)
MERGE (a5)-[:TRANSFER {amount:2950.0, date:'2024-01-15', hour:'14:00'}]->(a3)

// Micro-transactions (card testing)
MERGE (a1)-[:TRANSACTION {amount:2.99, type:'card_test'}]->(m1)
MERGE (a3)-[:TRANSACTION {amount:1.50, type:'card_test'}]->(m1)
MERGE (a1)-[:TRANSACTION {amount:3.00, type:'card_test'}]->(m2)
MERGE (a4)-[:TRANSACTION {amount:4.99, type:'card_test'}]->(m2)
MERGE (a5)-[:TRANSACTION {amount:2.00, type:'card_test'}]->(m3)
"""

def seed_database(driver):
    with get_session(driver, "e3b8c8ec") as session:
        for stmt in SEED_CYPHER.strip().split(';'):
            stmt = stmt.strip()
            if stmt:
                session.run(stmt)


# ─────────────────────────────────────────────
# GROQ: GENERATE CYPHER FROM NATURAL LANGUAGE
# ─────────────────────────────────────────────
SCHEMA = """
Graph schema:
Nodes: Customer {id, name, risk}, Account {id, balance, status}, Device {id, type, os}, IP {address, country, vpn}, Merchant {id, name, category, micro_tx}
Relationships: (Customer)-[:HAS_ACCOUNT]->(Account), (Customer)-[:USED]->(Device), (Account)-[:ACCESSED_FROM]->(IP), (Account)-[:TRANSFER {amount, date}]->(Account), (Account)-[:TRANSACTION {amount, type}]->(Merchant)
"""

def generate_cypher(groq_client, question: str) -> dict:
    prompt = f"""You are a Neo4j Cypher expert for fraud detection.
{SCHEMA}

Generate a Cypher query to answer: "{question}"

Respond ONLY with a valid JSON object, no markdown, no explanation:
{{"cypher": "MATCH ... RETURN ...", "explanation": "brief explanation in English", "fraud_pattern": "pattern name"}}"""

    response = groq_client.chat.completions.create(
        model="llama-3.1-8b-instant",
        messages=[{"role": "user", "content": prompt}],
        temperature=0.1,
        max_tokens=400,
    )
    raw = response.choices[0].message.content.strip()
    raw = re.sub(r"```json|```", "", raw).strip()
    try:
        return json.loads(raw)
    except Exception:
        # Fallback: extract cypher with regex
        m = re.search(r'"cypher"\s*:\s*"([^"]+)"', raw)
        cypher = m.group(1) if m else "MATCH (n) RETURN n LIMIT 5"
        return {"cypher": cypher, "explanation": raw[:200], "fraud_pattern": "unknown"}


# ─────────────────────────────────────────────
# EXECUTE CYPHER + FORMAT RESULT
# ─────────────────────────────────────────────
def run_cypher(driver, cypher: str):
    try:
        _, database = get_neo4j_driver()
        with get_session(driver, database or "e3b8c8ec") as session:
            result = session.run(cypher)
            records = [dict(r) for r in result]
            return records, None
    except Exception as e:
        return [], str(e)


def groq_summarize(groq_client, question, records, fraud_pattern):
    data_str = json.dumps(records[:10], default=str)
    prompt = f"""You are a fraud analyst AI. Given this question and Neo4j query result, write a concise 2-3 sentence analysis highlighting the fraud risk.
Question: {question}
Fraud pattern: {fraud_pattern}
Data: {data_str}
Be direct, mention specific IDs/amounts if available. Flag risk level."""

    response = groq_client.chat.completions.create(
        model="llama-3.1-8b-instant",
        messages=[{"role": "user", "content": prompt}],
        temperature=0.3,
        max_tokens=200,
    )
    return response.choices[0].message.content.strip()


# ─────────────────────────────────────────────
# VECTOR RAG SIMULATION (realistic mock)
# ─────────────────────────────────────────────
VECTOR_RESPONSES = {
    "device": {
        "steps": [
            "Embedding query → 1536-dim vector",
            "Cosine similarity in ChromaDB",
            "Top-3 docs retrieved (sim: 0.72, 0.68, 0.61)",
            "LLM generates answer from chunks",
        ],
        "answer": "Based on retrieved transaction documents, device D-441 appears in some records from mid-January. Several customer profiles show mobile device usage. Exact relationship mapping between customers and this specific device is not available in the document corpus.",
        "metrics": [("Precision", "38%", False), ("Latency", "340ms", False), ("Graph context", "None", False), ("Hallucination risk", "High", False)],
    },
    "ip": {
        "steps": [
            "Embedding query → 1536-dim vector",
            "Cosine similarity in ChromaDB",
            "Top-3 docs retrieved (sim: 0.69, 0.65, 0.58)",
            "LLM generates answer from chunks",
        ],
        "answer": "Transaction records mention IP addresses in the 177.x.x.x range appearing multiple times. Some accounts may share network access points based on similar location data in the documents. Date filtering was not possible with the available embeddings.",
        "metrics": [("Precision", "25%", False), ("Date filter", "Impossible", False), ("Relationship depth", "0 hops", False), ("Context", "Partial", False)],
    },
    "transfer": {
        "steps": [
            "Embedding query → 1536-dim vector",
            "Cosine similarity in ChromaDB",
            "Top-3 docs retrieved (sim: 0.74, 0.70, 0.63)",
            "LLM generates answer from chunks",
        ],
        "answer": "Account documents show transfer activity between A-102 and A-890. Intermediate accounts A-445 and A-667 appear in separate transaction records. Whether these constitute a connected layering chain cannot be determined from document embeddings alone.",
        "metrics": [("Path finding", "Not possible", False), ("Intermediate nodes", "Missed", False), ("AML detection", "Partial", False), ("Confidence", "Low", False)],
    },
    "merchant": {
        "steps": [
            "Embedding query → 1536-dim vector",
            "Cosine similarity in ChromaDB",
            "Top-3 docs retrieved (sim: 0.81, 0.75, 0.70)",
            "LLM generates answer from chunks",
        ],
        "answer": "Merchants MKT-031 and MKT-088 appear in fraud reports mentioning small-value transactions. Card testing patterns are referenced in 2 of the 3 retrieved documents, though specific transaction counts and real-time velocity cannot be verified.",
        "metrics": [("Recall", "52%", False), ("Real-time", "No", False), ("Velocity check", "Impossible", False), ("Actionable", "Partial", False)],
    },
}

def vector_rag_response(question: str):
    q = question.lower()
    if "device" in q or "d-441" in q:
        return VECTOR_RESPONSES["device"]
    elif "ip" in q or "address" in q:
        return VECTOR_RESPONSES["ip"]
    elif "transfer" in q or "mule" in q or "path" in q:
        return VECTOR_RESPONSES["transfer"]
    elif "merchant" in q or "card test" in q:
        return VECTOR_RESPONSES["merchant"]
    else:
        return VECTOR_RESPONSES["device"]


# ─────────────────────────────────────────────
# GRAPH VISUALIZER
# ─────────────────────────────────────────────
def build_graph_html(driver, limit=60):
    net = Network(height="380px", width="100%", bgcolor="#0A0F1E", font_color="#C8D8E8", directed=True)
    net.set_options("""{"physics":{"stabilization":{"iterations":80},"barnesHut":{"gravitationalConstant":-3000}}}""")

    COLOR_MAP = {
        "Customer": "#42A5F5", "Account": "#69F0AE", "Device": "#FFD54F",
        "IP": "#FF6B6B", "Merchant": "#CE93D8",
    }
    _, database = get_neo4j_driver()
    with get_session(driver, database or "e3b8c8ec") as session:
        nodes_q = "MATCH (n) RETURN n, labels(n) AS lbl LIMIT $limit"
        edges_q = "MATCH (a)-[r]->(b) RETURN id(a) AS src, id(b) AS tgt, type(r) AS rel, r LIMIT $limit"

        seen = set()
        for rec in session.run(nodes_q, limit=limit):
            n = rec["n"]
            lbl = rec["lbl"][0] if rec["lbl"] else "Node"
            nid = str(n.id)
            if nid in seen:
                continue
            seen.add(nid)
            props = dict(n)
            label = props.get("name", props.get("id", props.get("address", nid)))
            title = "\n".join(f"{k}: {v}" for k, v in props.items())
            color = COLOR_MAP.get(lbl, "#888")
            size = 18 if lbl in ("Customer", "Account") else 13
            net.add_node(nid, label=f"{lbl}\n{label}", color=color, size=size, title=title)

        for rec in session.run(edges_q, limit=limit):
            src, tgt = str(rec["src"]), str(rec["tgt"])
            rel = rec["rel"]
            r_props = dict(rec["r"])
            title = "\n".join(f"{k}: {v}" for k, v in r_props.items())
            color = "#1565C0" if rel == "TRANSFER" else "#444"
            net.add_edge(src, tgt, label=rel, color=color, title=title)

    with tempfile.NamedTemporaryFile(suffix=".html", delete=False, mode="w") as f:
        net.save_graph(f.name)
        return open(f.name).read()


# ─────────────────────────────────────────────
# SIDEBAR
# ─────────────────────────────────────────────
with st.sidebar:
    st.markdown("""
    <div style='padding:0.5rem 0 1rem'>
        <div style='font-family:IBM Plex Mono,monospace;font-size:1rem;font-weight:600;color:#42A5F5'>🕸️ GraphRAG Bench</div>
        <div style='font-size:0.75rem;color:#6B8CAE;margin-top:2px'>by Daniel Fonseca</div>
    </div>
    """, unsafe_allow_html=True)

    st.markdown("""
    <div style='margin-bottom:0.5rem'>
        <span class='tag-neo4j'>Neo4j Aura</span>
        <span class='tag-groq'>Groq</span>
        <span class='tag-llm'>Llama 3.1</span>
    </div>
    """, unsafe_allow_html=True)

    st.markdown("---")
    st.markdown("**⚙️ Connections**")

    driver, _db = get_neo4j_driver()
    groq_client = get_groq_client()

    neo4j_ok = driver is not None and _db is not None
    groq_ok = groq_client is not None

    st.markdown(f"{'🟢' if neo4j_ok else '🔴'} Neo4j Aura {'Connected' if neo4j_ok else 'Not connected'}")
    st.markdown(f"{'🟢' if groq_ok else '🔴'} Groq API {'Connected' if groq_ok else 'Not connected'}")

    with st.expander("🔍 Debug secrets"):
        uri_val  = (st.secrets.get("NEO4J_URI")     or os.getenv("NEO4J_URI")     or "not set")
        user_val = (st.secrets.get("NEO4J_USERNAME") or os.getenv("NEO4J_USERNAME") or "not set")
        pw_val   = (st.secrets.get("NEO4J_PASSWORD") or os.getenv("NEO4J_PASSWORD") or "not set")
        db_val   = (st.secrets.get("NEO4J_DATABASE") or os.getenv("NEO4J_DATABASE") or "not set")
        st.code(f"""URI:      {uri_val}
USER:     {user_val}
PASSWORD: {"*" * len(pw_val) if pw_val != "not set" else "not set"}
DATABASE: {db_val}""")

    if neo4j_ok:
        if st.button("🌱 Seed fraud graph", use_container_width=True):
            with st.spinner("Seeding database..."):
                seed_database(driver)
            st.success("Graph seeded! ✅")

    st.markdown("---")
    st.markdown("**📋 Preset queries**")
    presets = [
        "Who are the customers using device D-441?",
        "Which accounts share the same IP address?",
        "Find transfer path between A-102 and A-890",
        "Which merchants have card testing patterns?",
        "Show flagged accounts with high risk customers",
    ]
    selected_preset = None
    for p in presets:
        if st.button(p[:45] + ("..." if len(p) > 45 else ""), use_container_width=True, key=f"preset_{p[:20]}"):
            selected_preset = p

    st.markdown("---")
    st.markdown("""
    <div style='font-size:0.72rem;color:#3A4D6A;line-height:1.6'>
        <b style='color:#6B8CAE'>How it works</b><br>
        GraphRAG: Groq/Llama generates Cypher → Neo4j traverses the graph → structured answer.<br><br>
        Vector RAG: simulated embedding search → retrieves docs → LLM answers from text chunks.<br><br>
        Graph wins on relational queries because connections are first-class citizens.
    </div>
    """, unsafe_allow_html=True)

    st.markdown("---")
    st.markdown("""
    <div style='font-size:0.72rem;color:#3A4D6A'>
        🔗 <a href='https://linkedin.com/in/daniel-fonsecaai' style='color:#1565C0'>LinkedIn</a> &nbsp;|&nbsp;
        📄 <a href='https://huggingface.co/daniel-fonsecaai' style='color:#1565C0'>HF Profile</a>
    </div>
    """, unsafe_allow_html=True)


# ─────────────────────────────────────────────
# MAIN CONTENT
# ─────────────────────────────────────────────
st.markdown("""
<div class='hero-title'>GraphRAG vs Vector RAG</div>
<div class='hero-sub'>// live benchmark · fraud detection · Neo4j Aura + Groq/Llama 3.1</div>
""", unsafe_allow_html=True)

tabs = st.tabs(["🔬 Live Benchmark", "🕸️ Graph Explorer", "📊 Why Graph Wins"])

# ═══════════════════════════════════════════
# TAB 1 — LIVE BENCHMARK
# ═══════════════════════════════════════════
with tabs[0]:
    if not neo4j_ok or not groq_ok:
        st.markdown("""
        <div class='info-banner'>
            ⚠️ Add <code>NEO4J_URI</code>, <code>NEO4J_USER</code>, <code>NEO4J_PASSWORD</code> and <code>GROQ_API_KEY</code>
            to your HF Space Secrets to enable live mode. Demo will show simulated results otherwise.
        </div>
        """, unsafe_allow_html=True)

    default_q = selected_preset if selected_preset else "Who are the customers using device D-441?"
    question = st.text_input(
        "Ask a fraud question in natural language",
        value=default_q,
        placeholder="e.g. Find all accounts sharing the same IP...",
    )

    run_btn = st.button("⚡ Run Benchmark", type="primary", use_container_width=False)

    if run_btn and question:
        col_g, col_v = st.columns(2)

        # ── GraphRAG ──
        with col_g:
            st.markdown("<div class='panel-label-graph'>▶ GRAPHRAG — Neo4j + Groq/Llama</div>", unsafe_allow_html=True)

            with st.spinner("Generating Cypher..."):
                t0 = time.time()
                if groq_ok and neo4j_ok:
                    cypher_result = generate_cypher(groq_client, question)
                    cypher = cypher_result.get("cypher", "")
                    explanation = cypher_result.get("explanation", "")
                    fraud_pattern = cypher_result.get("fraud_pattern", "")
                    records, err = run_cypher(driver, cypher)
                    if not err and records:
                        answer = groq_summarize(groq_client, question, records, fraud_pattern)
                    elif err:
                        answer = f"Query error: {err}"
                    else:
                        answer = "No records found. Try seeding the database first (sidebar)."
                else:
                    # Demo mode
                    time.sleep(0.5)
                    vr = vector_rag_response(question)
                    cypher = "MATCH (c:Customer)-[:USED]->(d:Device {id:'D-441'})\nRETURN c.id, c.name, c.risk"
                    explanation = "Traverse graph from Device node to all connected Customers"
                    fraud_pattern = "shared device cluster"
                    records = [{"c.id": "C-001", "c.name": "Carlos Mendez", "c.risk": "high"},
                               {"c.id": "C-002", "c.name": "Ana Paula", "c.risk": "medium"},
                               {"c.id": "C-003", "c.name": "Roberto Silva", "c.risk": "high"}]
                    answer = "3 customers share device D-441: Carlos Mendez (high risk), Ana Paula (medium), Roberto Silva (high risk). Two high-risk customers sharing a device is a strong emulator farm signal — recommend immediate account review."
                t1 = time.time()
                latency_g = round((t1 - t0) * 1000)

            steps_html = ""
            for s in [f"Groq/Llama generates Cypher ({fraud_pattern})",
                      f"Neo4j executes graph traversal",
                      f"Returned {len(records)} records",
                      f"Groq summarizes findings"]:
                steps_html += f"<div class='step-graph'>{s}</div>"

            st.markdown(steps_html, unsafe_allow_html=True)

            st.markdown("<div style='font-size:0.72rem;color:#42A5F5;margin:8px 0 2px;font-family:IBM Plex Mono,monospace'>GENERATED CYPHER</div>", unsafe_allow_html=True)
            st.markdown(f"<div class='cypher-block'>{cypher}</div>", unsafe_allow_html=True)

            st.markdown(f"<div class='answer-box'>{answer}</div>", unsafe_allow_html=True)

            if records and not isinstance(records[0], str):
                try:
                    df = pd.DataFrame(records)
                    st.dataframe(df, use_container_width=True, height=120)
                except Exception:
                    pass

            precision_g = 94 if (neo4j_ok and groq_ok) else 91
            metrics_g = f"""
            <span class='metric-good'>Precision: {precision_g}%</span>
            <span class='metric-good'>Latency: {latency_g}ms</span>
            <span class='metric-good'>Graph hops: 2-3</span>
            <span class='metric-good'>Records: {len(records)}</span>
            """
            st.markdown(metrics_g, unsafe_allow_html=True)

        # ── Vector RAG ──
        with col_v:
            st.markdown("<div class='panel-label-vector'>▶ VECTOR RAG — Embeddings + ChromaDB</div>", unsafe_allow_html=True)

            with st.spinner("Searching embeddings..."):
                time.sleep(0.8)
                vdata = vector_rag_response(question)
                t_vector = 290 + (len(question) % 80)

            steps_html_v = ""
            for s in vdata["steps"]:
                steps_html_v += f"<div class='step-vector'>{s}</div>"
            st.markdown(steps_html_v, unsafe_allow_html=True)

            st.markdown("<div style='font-size:0.72rem;color:#CE93D8;margin:8px 0 2px;font-family:IBM Plex Mono,monospace'>RETRIEVED CHUNKS (top-3 cosine sim)</div>", unsafe_allow_html=True)
            chunks = [
                ("chunk_047.txt", "0.72", "Transaction log excerpt: device usage patterns in Jan 2024..."),
                ("report_q1.txt", "0.68", "Fraud investigation summary: mobile device fingerprinting..."),
                ("alerts_jan.txt", "0.61", "Risk alert: multiple accounts flagged for device sharing..."),
            ]
            for fname, sim, preview in chunks:
                st.markdown(f"""<div style='background:#1A0D2E;border:1px solid #3A1560;border-radius:6px;
                padding:6px 10px;margin:3px 0;font-size:0.72rem;font-family:IBM Plex Mono,monospace'>
                <span style='color:#CE93D8'>{fname}</span>
                <span style='color:#6B8CAE;float:right'>sim={sim}</span><br>
                <span style='color:#7A6A8A'>{preview}</span></div>""", unsafe_allow_html=True)

            st.markdown(f"<div class='answer-box' style='border-color:rgba(106,27,154,0.3)'>{vdata['answer']}</div>", unsafe_allow_html=True)

            metrics_v = ""
            for label, val, good in vdata["metrics"]:
                cls = "metric-good" if good else "metric-bad"
                metrics_v += f"<span class='{cls}'>{label}: {val}</span>"
            metrics_v += f"<span class='metric-bad'>Latency: {t_vector}ms</span>"
            st.markdown(metrics_v, unsafe_allow_html=True)

        # ── Winner ──
        st.markdown("""
        <div class='winner-box'>
            <div class='winner-label'>🏆 Winner for relational fraud queries</div>
            <div class='winner-name'>GraphRAG</div>
            <div style='font-size:0.8rem;color:#6B8CAE;margin-top:4px'>
                Graph traversal finds hidden connections that embeddings cannot represent.
                Identity theft, money mule rings, and device clustering require relationship-aware retrieval.
            </div>
        </div>
        """, unsafe_allow_html=True)

        # Score bar
        fig = go.Figure()
        categories = ["Precision", "Latency\n(lower=better)", "Relational\nDepth", "Actionability"]
        graph_scores = [94, 85, 98, 92]
        vector_scores = [38, 45, 12, 35]

        fig.add_trace(go.Bar(name="GraphRAG", x=categories, y=graph_scores,
                             marker_color="#1565C0", marker_line_width=0))
        fig.add_trace(go.Bar(name="Vector RAG", x=categories, y=vector_scores,
                             marker_color="#6A1B9A", marker_line_width=0))

        fig.update_layout(
            barmode="group", paper_bgcolor="#0A0F1E", plot_bgcolor="#0A0F1E",
            font=dict(color="#6B8CAE", family="IBM Plex Mono"),
            legend=dict(bgcolor="#0A0F1E", bordercolor="#1E2D4A"),
            margin=dict(t=20, b=20, l=20, r=20), height=220,
            yaxis=dict(gridcolor="#1E2D4A", range=[0, 100]),
            xaxis=dict(gridcolor="#1E2D4A"),
        )
        st.plotly_chart(fig, use_container_width=True)


# ═══════════════════════════════════════════
# TAB 2 — GRAPH EXPLORER
# ═══════════════════════════════════════════
with tabs[1]:
    st.markdown("#### 🕸️ Live Fraud Graph — Neo4j Aura")

    if neo4j_ok:
        col_legend, col_btn = st.columns([3, 1])
        with col_legend:
            st.markdown("""
            <span style='color:#42A5F5;font-size:0.8rem'>● Customer</span> &nbsp;
            <span style='color:#69F0AE;font-size:0.8rem'>● Account</span> &nbsp;
            <span style='color:#FFD54F;font-size:0.8rem'>● Device</span> &nbsp;
            <span style='color:#FF6B6B;font-size:0.8rem'>● IP</span> &nbsp;
            <span style='color:#CE93D8;font-size:0.8rem'>● Merchant</span>
            """, unsafe_allow_html=True)
        with col_btn:
            refresh = st.button("🔄 Refresh graph")

        with st.spinner("Loading graph from Neo4j Aura..."):
            html_str = build_graph_html(driver)
        st.components.v1.html(html_str, height=400, scrolling=False)

        st.markdown("#### 🔍 Custom Cypher Query")
        custom_cypher = st.text_area(
            "Run your own Cypher",
            value="MATCH (c:Customer)-[:USED]->(d:Device) RETURN c.name, c.risk, d.id, d.type LIMIT 20",
            height=80,
        )
        if st.button("▶ Execute", key="exec_cypher"):
            records, err = run_cypher(driver, custom_cypher)
            if err:
                st.error(f"Error: {err}")
            elif records:
                st.dataframe(pd.DataFrame(records), use_container_width=True)
            else:
                st.info("No records returned.")
    else:
        st.markdown("""
        <div class='info-banner'>
            Connect Neo4j Aura to explore the live fraud graph. Add credentials to HF Secrets.<br>
            <br>
            <b>Sample graph structure:</b><br>
            6 Customers → 6 Accounts → 3 Devices + 3 IPs + 3 Merchants<br>
            Money mule chain: A-102 → A-445 → A-667 → A-890 (R$3,200 layering)<br>
            Shared device cluster: D-441 used by C-001, C-002, C-003
        </div>
        """, unsafe_allow_html=True)


# ═══════════════════════════════════════════
# TAB 3 — WHY GRAPH WINS
# ═══════════════════════════════════════════
with tabs[2]:
    st.markdown("#### 📊 Why Graph-based RAG outperforms Vector RAG for fraud detection")

    col1, col2, col3 = st.columns(3)
    metrics_summary = [
        ("Precision on relational queries", "94%", "38%"),
        ("Money mule path detection", "✅ Full chain", "❌ Partial"),
        ("Shared device clustering", "✅ Exact", "⚠️ Approximate"),
        ("IP overlap (7-day window)", "✅ Filtered", "❌ No date filter"),
        ("Latency", "~60ms", "~300ms"),
        ("Hallucination risk", "Low", "High"),
    ]

    data_rows = []
    for label, g, v in metrics_summary:
        data_rows.append({"Metric": label, "GraphRAG": g, "Vector RAG": v})

    df_compare = pd.DataFrame(data_rows)
    st.dataframe(df_compare, use_container_width=True, hide_index=True)

    st.markdown("""
    #### 💡 Key insight

    Vector RAG treats every piece of information as an isolated document.
    Fraud lives in **connections** — a device shared by 3 customers, an IP accessed by 6 accounts in 7 days,
    a money mule chain with 3 hops. These patterns are **invisible to embeddings** but trivially
    discoverable with a single Cypher traversal.

    GraphRAG = LLM generates structured query → graph executes it → 100% grounded answer, zero hallucination from missing context.
    """)

    st.markdown("""
    #### 🏗️ Architecture
    ```
    User question (NL)
         │
         ▼
    Groq/Llama 3.1 ──► Cypher query generation
         │
         ▼
    Neo4j Aura ──► Graph traversal (2-5 hops)
         │
         ▼
    Structured records ──► Groq/Llama ──► Fraud analysis
    ```
    """)

    with st.expander("📚 References & inspiration"):
        st.markdown("""
        - Microsoft GraphRAG (2024) — graph-based RAG for complex reasoning
        - Neo4j Fraud Detection whitepaper
        - iFood / Nubank production GNN systems (HetGNN architecture)
        - IBM Safer Payments methodology
        - Daniel Fonseca — [linkedin.com/in/daniel-fonsecaai](https://linkedin.com/in/daniel-fonsecaai)
        """)