import gradio as gr
from assets.knowledge_cards_html import (
    TIME_DOMAIN_KNOWLEDGE,
    FREQUENCY_DOMAIN_KNOWLEDGE,
    ROOT_LOCUS_KNOWLEDGE
)

def create_header():
    """创建页面顶部的标题、横幅和在线计数器"""
    gr.HTML("<h1 class='main-title'> 自动控制理论AI+数智平台</h1>")
    gr.HTML("<p class='subtitle'>✨ 交互式控制系统分析与设计工具 | 时域·频域·根轨迹·AI问答 ✨</p>")
    
    online_counter = gr.HTML(elem_id="online-counter")
    
    gr.HTML("""
    <div class='project-info-banner'>
        <div style='display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 25px;'>
            <div style='display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1); padding: 12px 18px; border-radius: 12px; backdrop-filter: blur(10px);'>
                <span style='font-size: 1.8em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));'>📚</span>
                <div>
                    <div style='font-size: 0.8em; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.5px;'>课程 Course</div>
                    <div style='font-weight: 700; font-size: 1.15em; color: white; margin-top: 2px;'>自动控制理论</div>
                </div>
            </div>
            
            <div style='display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1); padding: 12px 18px; border-radius: 12px; backdrop-filter: blur(10px);'>
                <span style='font-size: 1.8em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));'>👨‍🏫</span>
                <div>
                    <div style='font-size: 0.8em; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.5px;'>负责人 Supervisor</div>
                    <div style='font-weight: 700; font-size: 1.15em; color: white; margin-top: 2px;'>魏鹏飞</div>
                </div>
            </div>
            
            <div style='display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1); padding: 12px 18px; border-radius: 12px; backdrop-filter: blur(10px);'>
                <span style='font-size: 1.8em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));'>📧</span>
                <div>
                    <div style='font-size: 0.8em; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.5px;'>联系方式 Contact</div>
                    <a href='mailto:pengfeiwei@nwpu.edu.cn' 
                       style='font-weight: 700; font-size: 1.15em; color: white; text-decoration: none; 
                              border-bottom: 2px solid rgba(255,255,255,0.5); padding-bottom: 2px; margin-top: 2px; display: inline-block;
                              transition: all 0.3s ease;'
                       onmouseover='this.style.borderColor="white"; this.style.transform="translateY(-1px)";'
                       onmouseout='this.style.borderColor="rgba(255,255,255,0.5)"; this.style.transform="translateY(0)";'>
                        pengfeiwei@nwpu.edu.cn
                    </a>
                </div>
            </div>
        </div>
        
        <div style='text-align: center; margin-top: 20px; padding-top: 18px; border-top: 2px solid rgba(255,255,255,0.2);'>
            <div style='display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); padding: 10px 20px; border-radius: 25px; backdrop-filter: blur(5px);'>
                <span style='font-size: 1.3em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));'>🎓</span>
                <span style='font-weight: 600; font-size: 1.05em; color: white;'>西北工业大学</span>
                <span style='color: white; opacity: 0.9; font-size: 1.05em;'>Northwestern Polytechnical University</span>
            </div>
            <div style='margin-top: 10px;'>
                <span style='color: white; opacity: 0.9; font-size: 0.95em; font-weight: 500;'>2025年校级本科生建设项目资助</span>
            </div>
        </div>
    </div>
    """)
    return online_counter

def create_time_domain_tab():
    """创建时域分析选项卡的UI组件"""
    ui_dict = {}
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Group():
                gr.HTML("<div class='card-title'>🔧 系统模型</div>")
                ui_dict["tf_display"] = gr.Markdown(label="当前传递函数", elem_classes="output-display")
                with gr.Row():
                    ui_dict["confirm_button"] = gr.Button("✓ 显示传递函数", variant="secondary", scale=1)
                    ui_dict["analyze_button"] = gr.Button("🚀 开始分析", variant="primary", scale=1, elem_classes="primary-btn")

            with gr.Group():
                gr.HTML("<div class='card-title'>📈 动态性能指标</div>")
                ui_dict["output_metrics"] = gr.Textbox(
                    label="Performance Metrics", lines=8, interactive=False, elem_classes="output-metrics"
                )
        with gr.Column(scale=2):
            ui_dict["output_plot"] = gr.Plot(label="时域响应曲线", elem_classes="plot-container")
            # 知识卡片
            gr.HTML(f"""
            <div id="time-domain-knowledge" style="max-height: 600px; overflow-y: auto; padding-right: 8px;">
                {TIME_DOMAIN_KNOWLEDGE}
            </div>
            <script>
                (function() {{
                    // 等待DOM加载完成
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', renderMath);
                    }} else {{
                        renderMath();
                    }}
                    
                    function renderMath() {{
                        // 延迟执行以确保MathJax已加载
                        setTimeout(function() {{
                            if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {{
                                MathJax.typesetPromise([document.getElementById('time-domain-knowledge')])
                                    .catch((err) => console.log('MathJax渲染错误:', err));
                            }} else {{
                                console.log('MathJax未加载，将在500ms后重试');
                                setTimeout(renderMath, 500);
                            }}
                        }}, 300);
                    }}
                }})();
            </script>
            """)
    return ui_dict

def create_frequency_domain_tab():
    """创建频域分析选项卡的UI组件"""
    ui_dict = {}
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Group():
                gr.HTML("<div class='card-title'>🎚️ 调整系统增益</div>")
                ui_dict["log_k_slider"] = gr.Slider(minimum=-4, maximum=4, value=1, step=0.01, label="对数增益 log₁₀(K)", info="💡 拖动滑块查看实时变化")
                ui_dict["k_number_display"] = gr.Number(value=10.0, label="当前增益 K", interactive=False, elem_classes="gain-display")
            with gr.Group():
                gr.HTML("<div class='card-title'>🔧 当前系统模型</div>")
                ui_dict["tf_display"] = gr.Markdown(label="含增益K的开环传递函数", elem_classes="output-display")
            with gr.Group():
                gr.HTML("<div class='card-title'>📊 稳定裕度分析</div>")
                ui_dict["metrics_display"] = gr.Textbox(label="Stability Margins", lines=4, interactive=False, elem_classes="output-metrics")
                ui_dict["stability_display"] = gr.Markdown(elem_classes="stability-result")
        with gr.Column(scale=2):
            ui_dict["plot_output"] = gr.Plot(label="频域响应图", elem_classes="plot-container")
            # 知识卡片
            gr.HTML(f"""
            <div id="freq-domain-knowledge" style="max-height: 600px; overflow-y: auto; padding-right: 8px;">
                {FREQUENCY_DOMAIN_KNOWLEDGE}
            </div>
            <script>
                (function() {{
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', renderMath);
                    }} else {{
                        renderMath();
                    }}
                    
                    function renderMath() {{
                        setTimeout(function() {{
                            if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {{
                                MathJax.typesetPromise([document.getElementById('freq-domain-knowledge')])
                                    .catch((err) => console.log('MathJax渲染错误:', err));
                            }} else {{
                                console.log('MathJax未加载，将在500ms后重试');
                                setTimeout(renderMath, 500);
                            }}
                        }}, 300);
                    }}
                }})();
            </script>
            """)
    return ui_dict

def create_root_locus_tab():
    """创建根轨迹分析选项卡的UI组件"""
    ui_dict = {}
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Group():
                gr.HTML("<div class='card-title'>🎚️ 调整系统增益</div>")
                ui_dict["log_k_slider"] = gr.Slider(minimum=-4, maximum=4, value=1, step=0.01, label="对数增益 log₁₀(K)", info="💡 拖动滑块观察极点移动")
                ui_dict["k_number_display"] = gr.Number(value=10.0, label="当前增益 K", interactive=False, elem_classes="gain-display")
            with gr.Group():
                gr.HTML("<div class='card-title'>📍 闭环极点位置</div>")
                ui_dict["poles_display"] = gr.Textbox(label="Closed-Loop Pole Locations", lines=6, interactive=False, elem_classes="output-metrics")
        with gr.Column(scale=2):
            ui_dict["plot_output"] = gr.Plot(label="根轨迹图")
            gr.HTML(f"""
            <div id="root-locus-knowledge" style="max-height: 600px; overflow-y: auto; padding-right: 8px;">
                {ROOT_LOCUS_KNOWLEDGE}
            </div>
            <script>
                (function() {{
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', renderMath);
                    }} else {{
                        renderMath();
                    }}
                    
                    function renderMath() {{
                        setTimeout(function() {{
                            if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {{
                                MathJax.typesetPromise([document.getElementById('root-locus-knowledge')])
                                    .catch((err) => console.log('MathJax渲染错误:', err));
                            }} else {{
                                console.log('MathJax未加载，将在500ms后重试');
                                setTimeout(renderMath, 500);
                            }}
                        }}, 300);
                    }}
                }})();
            </script>
            """)
    return ui_dict

def create_case_demo_tab():
    """创建算例演示选项卡的UI组件"""
    ui_dict = {}
    with gr.Row():
        with gr.Column(scale=1):
            with gr.Group():
                gr.HTML("<div class='card-title'>🧪 算例参数设置</div>")
                ui_dict["profile"] = gr.Dropdown(
                    choices=["起飞-巡航-降落", "高机动阶跃", "经济巡航"],
                    value="起飞-巡航-降落",
                    label="工况模板"
                )
                ui_dict["sim_time"] = gr.Slider(minimum=20, maximum=180, value=60, step=5, label="仿真时长 (s)")
                ui_dict["dt"] = gr.Dropdown(choices=[0.02, 0.05, 0.1], value=0.02, label="仿真步长 (s)")
                ui_dict["initial_soc"] = gr.Slider(minimum=20, maximum=90, value=60, step=1, label="初始SOC (%)")
                ui_dict["initial_engine_power"] = gr.Slider(minimum=20, maximum=250, value=50, step=5, label="初始发动机功率 (kW)")
                ui_dict["rpm_scale"] = gr.Slider(minimum=0.6, maximum=1.4, value=1.0, step=0.05, label="目标转速缩放系数")
                ui_dict["load_scale"] = gr.Slider(minimum=0.6, maximum=1.4, value=1.0, step=0.05, label="负载转矩缩放系数")
                ui_dict["run_button"] = gr.Button("🚀 运行混动算例", variant="primary", elem_classes="primary-btn")
            with gr.Group():
                gr.HTML("<div class='card-title'>📝 结果解读</div>")
                ui_dict["summary"] = gr.Markdown()
        with gr.Column(scale=2):
            ui_dict["plot"] = gr.Plot(label="混动系统响应图")
            ui_dict["table"] = gr.Dataframe(
                headers=["时间(s)", "目标转速", "实际转速", "发动机功率(kW)", "电池功率(kW)", "SOC(%)"],
                label="关键时刻数据",
                interactive=False
            )
    return ui_dict

def create_chatbot_tab():
    """创建AI问答选项卡的UI组件"""
    ui_dict = {}
    ui_dict["chatbot"] = gr.Chatbot(
        label="🎓 自控原理AI助教",
        type="messages",
        avatar_images=("https://img.icons8.com/fluency/96/user-male-circle.png", "https://img.icons8.com/fluency/96/chatbot.png"),
        height=650,
        latex_delimiters=[
            {"left": "$$", "right": "$$", "display": True},
            {"left": "$", "right": "$", "display": False},
            {"left": "\\[", "right": "\\]", "display": True},
            {"left": "\\(", "right": "\\)", "display": False}
        ],
        elem_classes="modern-chatbot",
        show_copy_button=True
    )
    with gr.Row():
        ui_dict["chat_input"] = gr.Textbox(label="", placeholder="💬 输入您的问题...", scale=4, lines=2, max_lines=4)
        with gr.Column(scale=1, min_width=120):
            ui_dict["send_button"] = gr.Button("📤 发送", variant="primary", size="lg")
            ui_dict["clear_button"] = gr.Button("🗑️ 清空", variant="secondary", size="lg")
    
    gr.Examples(
        examples=["什么是传递函数？", "如何判断系统稳定性？", "解释Bode图的物理意义", "PID控制器各参数的作用"],
        inputs=ui_dict["chat_input"],
        label="💡 试试这些问题："
    )
    return ui_dict