import json
import gradio as gr
import pandas as pd
import plotly.express as px
from notebook import Notebook

# Height of the Tabs Text Area
TAB_LINES = 8

    
# Custom CSS styling
custom_css = """
.gradio-container {
    background-color: #f0f4f8;
}
.logo {
    max-width: 300px;
    margin: 20px auto;
    display: block;
.gr-button {
    background-color: #4a90e2 !important;
}
.gr-button:hover {
    background-color: #3a7bc8 !important;
}
}
"""

def read_data(path):
    with open(path, "r") as f:
        data = json.load(f)
    return data
data = read_data(path="output.json")


def build_chart(fig_data, chart_config):
    chart_type = chart_config.get("type")

    if chart_type == "bar":
        fig = px.bar(fig_data, x='x', y='y', title=chart_config['title'],
                labels={'y': chart_config['y_axis_label'], 'x': chart_config['x_axis_label']},
                color='x', template='plotly_white')

    if chart_type == "line":
        fig = px.line(fig_data, x='x', y='y', title=chart_config['title'],
                labels={'y': chart_config['y_axis_label'], 'x': chart_config['x_axis_label']},
                template='plotly_white'
                )

    if chart_type == "pie":
        fig = px.pie(fig_data, values='y', names='x',
        title=chart_config['title'], labels={'y': chart_config['y_axis_label']},template='plotly_white',
        hole=0.3
        )
        fig.update_traces(
            textposition='inside',  
            textfont_size=12,  
        )

    if chart_type == "hist":
        fig_data['bin_center'] = (fig_data['bin_start'] + fig_data['bin_end']) / 2
        fig = px.bar(fig_data, x='bin_center', y='frequency', title=chart_config['title'],
                labels={'frequency': chart_config['y_axis_label'], 'bin_center': chart_config['x_axis_label']},
                template='plotly_white')
    
    fig.update_layout(showlegend=False)

    return fig

def display_data(data_item):
    body = json.loads(data_item.get("body"))

    sql_config = body.get("sql_config")
    sql_query, query_description = sql_config.get("sql_query"), sql_config.get("explanation")
    
    table_data = body.get("table_data")
    table_data = pd.DataFrame(table_data)

    chart_data = body.get("chart_data")
    config = body.get("chart_config")
    chart_type = config.get("type")
    fig_data = pd.DataFrame(chart_data.get(chart_type).get("data"))
    fig = build_chart(fig_data=fig_data, chart_config=config)

    return sql_query, query_description, table_data, fig


def export_notebook():
    global data
    notebook = Notebook(data=data)
    notebook_path = notebook.export_notebook()
    return notebook_path


with gr.Blocks(theme=gr.themes.Soft(primary_hue="purple", secondary_hue="indigo")) as demo:
    gr.Image("logo.png", label=None, show_label=False, container=False, height=100)
    gr.HTML("""
    <div style='text-align: center;'>
        <h1 style='font-size: 36px;'>Export As Notebook</h1>
        <p style='font-size: 20px;'>Automate Export Multiple Tabs to Jupyter Notebook.</p>
    </div>
    """)
    with gr.Row():
        with gr.Tabs():
            for i,data_item in enumerate(data):
                sql_query, query_description, table_data, fig = display_data(data_item=data_item)
                with gr.Tab(f"Tab {i+1}"):
                    with gr.Row():
                        with gr.Column():
                            row1 = gr.Textbox(lines=TAB_LINES, label="Generated SQL", value=sql_query, interactive=False,
                                                autoscroll=False)
                        with gr.Column():
                            row2 = gr.Textbox(lines=TAB_LINES, label="Query Description", value=query_description, interactive=False,
                                                autoscroll=False)

                    with gr.Row():
                        with gr.Column():
                            row3 = gr.DataFrame(label="Table Data", value=table_data, interactive=False,
                                                 max_height=400, min_width=800)
                        with gr.Column():    
                            row4 = gr.Plot(value=fig)
                            
    exprt_btn = gr.Button("Export as Notebook", variant="primary")
    download_component = gr.File(label="Click on the File Size Below 👇 to Download Notebook",visible=False, interactive=False)
    exprt_btn.click(export_notebook, inputs=None, outputs=download_component)
    download_component.change(
        lambda x: gr.update(visible=bool(x)),
        inputs=download_component,
        outputs=download_component
    )

if __name__ == "__main__":
    demo.launch(debug=True)