import streamlit as st
import pandas as pd
import plotly.graph_objects as go

def scrollable_dataframe_1():
    st.title("Scrollable DataFrame Example")

    # 创建一个宽表格以测试滚动功能
    df = pd.DataFrame(
            {
                "1 column": [1, 2, 3, 4, 5, 6, 7],
                "2 column": [10, 20, 30, 40, 50, 60, 70],
                "3 column": [1, 2, 3, 4, 5, 6, 7],
                "4 column": [10, 20, 30, 40, 50, 60, 70],
                "5 column": [1, 2, 3, 4, 5, 6, 7],
                "6 column": [10, 20, 30, 40, 50, 60, 70],
                "7 column": [1, 2, 3, 4, 5, 6, 7],
                "8 column": [10, 20, 30, 40, 50, 60, 70],
                "9 column": [1, 2, 3, 4, 5, 6, 7],
                "10 column": [10, 20, 30, 40, 50, 60, 70],
                "11 column": [1, 2, 3, 4, 5, 6, 7],
                "12 column": [10, 20, 30, 40, 50, 60, 70],
            }
        )

    st.write("1 + 1 = ", 2)

    st.write("Below is a DataFrame:", df, "Above is a dataframe.")
    st.dataframe(df, width='content', height=100)

    st.latex(r'''
        a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
        \sum_{k=0}^{n-1} ar^k =
        a \left(\frac{1-r^{n}}{1-r}\right)
        ''')
    st.help(st.latex)

def scrollable_dataframe_2():
    st.title("Scrollable DataFrame with Custom CSS")
    # 大数据集
    df = pd.DataFrame({
        f"column_{i}": [f"data_{j}_{i}" for j in range(100)] 
        for i in range(20)
    })

    st.write("1 + 1 = ", 2)

    # 自定义CSS样式
    st.markdown("""
    <style>
    .custom-dataframe-container {
        height: 400px;
        width: 100%;
        max-width: 1000px;
        overflow: auto;
        border: 2px solid #4CAF50;
        border-radius: 10px;
        padding: 15px;
        margin: 10px 0;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .custom-dataframe-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .custom-dataframe-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .custom-dataframe-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .custom-dataframe-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    </style>
    """, unsafe_allow_html=True)

    # 应用自定义样式
    st.markdown("Below is a DataFrame:")
    st.markdown('<div class="custom-dataframe-container">', unsafe_allow_html=True)

    # 使用st.dataframe，它会继承容器的滚动设置
    # st.dataframe(df, use_container_width=True)
    st.dataframe(df, width='content')

    st.markdown('</div>', unsafe_allow_html=True)
    st.write("Above is a dataframe.")

def scrollable_dataframe_2_fixed():
    
    st.title("Scrollable DataFrame - Fixed Version")
    
    # 大数据集
    df = pd.DataFrame({
        f"column_{i}": [f"data_{j}_{i}" for j in range(100)] 
        for i in range(20)
    })

    st.write("1 + 1 = ", 2)
    st.markdown("Below is a DataFrame:")
    
    # 方案1：直接使用st.dataframe，不包装容器
    st.dataframe(
        df, 
        height=400,
        width=1000,
        use_container_width=False
    )
    
    st.write("Above is a dataframe.")

def scrollable_dataframe_3_plotly():
    st.title("Scrollable DataFrame with Plotly")
    
    # 大数据集
    df = pd.DataFrame({
        f"column_{i}": [f"data_{j}_{i}" for j in range(100)] 
        for i in range(15)
    })

    st.write("1 + 1 = ", 2)
    st.markdown("Below is a DataFrame:")
    
    # 使用Plotly表格
    fig = go.Figure(data=[go.Table(
        header=dict(
            values=list(df.columns),
            fill_color='paleturquoise',
            align='left',
            font=dict(size=12)
        ),
        cells=dict(
            values=[df[col] for col in df.columns],
            fill_color='lavender',
            align='left',
            font=dict(size=11)
        )
    )])
    
    fig.update_layout(
        width=1000,
        height=400,
        margin=dict(l=0, r=0, t=0, b=0)
    )
    
    # st.plotly_chart(fig, use_container_width=True)
    st.plotly_chart(fig, width='stretch')
    st.write("Above is a dataframe.")


# 页面选择
page = st.radio("Select Page", [
    "Scrollable DataFrame 1", 
    "Scrollable with Custom CSS",
    "Scrollable with Custom CSS Fixed Version", 
    "Plotly Version",
])

if page == "Scrollable DataFrame 1":
    scrollable_dataframe_1()
elif page == "Scrollable with Custom CSS":
    scrollable_dataframe_2()
elif page == "Scrollable with Custom CSS Fixed Version":
    scrollable_dataframe_2_fixed()
elif page == "Plotly Version":
    scrollable_dataframe_3_plotly()