import gradio as gr

from engine_03.flow.graph_models import table_to_flowgraph
from engine_03.flow.mermaid_renderer import build_mermaid
from engine_03.flow.simulator import simulate_flowgraph
from engine_03.flow.sql_adapter import apply_command


def build_flowstudio_tab():
    gr.Markdown(
        """
        ## 🧩 MindsEye Flow Studio

        - Define **nodes** (id, label, type, style).  
        - Define **edges** (source, target, label, style).  
        - Click **Update Diagram** to generate a Mermaid-style graph.  
        - Click **Simulate Flow** to walk the graph and see an execution log.  
        - Use the **Flow Command** box to modify the graph with a tiny SQL-like syntax.
        """
    )

    sample_nodes = [
        ["event_in", "Incoming Event", "event", ""],
        ["handler", "Handle Event / Transform", "function", ""],
        ["log", "Log to Ledger (conceptual)", "function", ""],
        ["out", "Emit Output", "output", ""],
    ]
    sample_edges = [
        ["event_in", "handler", "", ""],
        ["handler", "log", "", ""],
        ["log", "out", "", ""],
    ]

    with gr.Row():
        with gr.Column(scale=2):
            gr.Markdown("### Nodes")
            nodes_df = gr.Dataframe(
                headers=["id", "label", "type", "style"],
                datatype=["str", "str", "str", "str"],
                value=sample_nodes,
                row_count=(4, "dynamic"),
                col_count=4,
                interactive=True,
                label="Nodes Table",
            )

        with gr.Column(scale=2):
            gr.Markdown("### Edges")
            edges_df = gr.Dataframe(
                headers=["source", "target", "label", "style"],
                datatype=["str", "str", "str", "str"],
                value=sample_edges,
                row_count=(3, "dynamic"),
                col_count=4,
                interactive=True,
                label="Edges Table",
            )

    with gr.Row():
        update_btn = gr.Button("🔄 Update Diagram")
        simulate_btn = gr.Button("▶️ Simulate Flow")

    diagram_md = gr.Markdown(
        value=build_mermaid(table_to_flowgraph(sample_nodes, sample_edges)),
        label="Flow Diagram (Mermaid)",
    )
    sim_log = gr.Markdown(
        value="Click **Simulate Flow** to see a run log.",
        label="Execution Log",
    )

    gr.Markdown("### Flow Command (SQL-ish)")

    command_box = gr.Textbox(
        label="Command",
        placeholder=(
            'Examples:\n'
            '  ADD NODE id=event_in label="Incoming Event" type=event\n'
            '  ADD EDGE source=event_in target=handler label="to handler"\n'
            '  DELETE NODE id=log\n'
            '  DELETE EDGE source=handler target=log\n'
            '  STYLE NODE id=handler style="fill:#0ea5e9,stroke:#0369a1"\n'
            '  STYLE EDGE source=handler target=log style="stroke:#f97316,stroke-width:2px"'
        ),
        lines=4,
    )

    run_cmd_btn = gr.Button("⚙️ Run Command")

    command_output = gr.Markdown(
        value="Command output will appear here.",
        label="Command Output",
    )

    # Core functions

    def update_diagram(nodes, edges):
        flow = table_to_flowgraph(nodes, edges)
        return build_mermaid(flow)

    def simulate(nodes, edges):
        flow = table_to_flowgraph(nodes, edges)
        return simulate_flowgraph(flow)

    def run_command(cmd, nodes, edges):
        new_nodes, new_edges, msg = apply_command(cmd, nodes, edges)
        flow = table_to_flowgraph(new_nodes, new_edges)
        new_diagram = build_mermaid(flow)
        # Clear the command box after execution
        return "", new_nodes, new_edges, msg, new_diagram

    update_btn.click(update_diagram, [nodes_df, edges_df], [diagram_md])
    simulate_btn.click(simulate, [nodes_df, edges_df], [sim_log])

    run_cmd_btn.click(
        run_command,
        [command_box, nodes_df, edges_df],
        [command_box, nodes_df, edges_df, command_output, diagram_md],
    )