import streamlit as st

# Mermaid diagram in Markdown
mermaid_diagram = '''
graph TD;
    A[Resting Potential] --> B[Depolarization];
    B --> C[Repolarization];
    
    subgraph Neuron_Axon
        direction_of_impulse[Direction of Nerve Impulse]
        positive_ions[Positive Ions Rush In] --> depolarization_membrane[Membrane Channels Open];
        depolarization_membrane --> positive_outside[Excess Positive Ions Outside];
        repolarization_membrane[Membrane Pumps Positive Ions Out] --> excess_positive_inside[Excess Positive Ions Inside];
    end
    
    neurotransmitters[Neurotransmitters Role] --> excitatory[Excitatory Effect]
    neurotransmitters --> inhibitory[Inhibitory Effect]
    
    classDef process fill:#f9f,stroke:#333,stroke-width:2px;
    class A,B,C process;
'''

# JSON representation of the diagram
diagram_json = {
    "diagram": {
        "nodes": [
            { "id": "A", "label": "Resting Potential", "class": "process" },
            { "id": "B", "label": "Depolarization", "class": "process" },
            { "id": "C", "label": "Repolarization", "class": "process" },
            { "id": "direction_of_impulse", "label": "Direction of Nerve Impulse" },
            { "id": "positive_ions", "label": "Positive Ions Rush In" },
            { "id": "depolarization_membrane", "label": "Membrane Channels Open" },
            { "id": "positive_outside", "label": "Excess Positive Ions Outside" },
            { "id": "repolarization_membrane", "label": "Membrane Pumps Positive Ions Out" },
            { "id": "excess_positive_inside", "label": "Excess Positive Ions Inside" },
            { "id": "neurotransmitters", "label": "Neurotransmitters Role" },
            { "id": "excitatory", "label": "Excitatory Effect" },
            { "id": "inhibitory", "label": "Inhibitory Effect" }
        ],
        "edges": [
            { "source": "A", "target": "B" },
            { "source": "B", "target": "C" },
            { "source": "positive_ions", "target": "depolarization_membrane" },
            { "source": "depolarization_membrane", "target": "positive_outside" },
            { "source": "repolarization_membrane", "target": "excess_positive_inside" },
            { "source": "neurotransmitters", "target": "excitatory" },
            { "source": "neurotransmitters", "target": "inhibitory" }
        ],
        "styles": {
            "process": {
                "fill": "#f9f",
                "stroke": "#333",
                "stroke-width": "2px"
            }
        }
    }
}

# Streamlit rendering of Mermaid diagram and JSON
st.title("Neuron Action Potential Diagram")

# Mermaid Diagram
st.subheader("Mermaid Diagram")
st.markdown(f"```mermaid\n{mermaid_diagram}\n```")

# JSON Representation
st.subheader("JSON Representation")
st.json(diagram_json)