ui/components/results.py

"""
LifeFlow AI - Results Component
✅ 新增 Chat with LifeFlow Tab
✅ 支援任務修改對話
"""
import gradio as gr

import gradio as gr


def create_team_area(create_agent_card_func):
    """創建 AI Team 展示區域"""
    with gr.Group(visible=False) as team_area:
        gr.Markdown("### 🤖 Agent Status")

        # 使用 HTML 容器
        agent_container_start = gr.HTML('<div class="agent-grid">')
        agent_displays = []

        # 🔥 [關鍵修正] 這裡的名單必須跟 app.py 的 _get_agent_outputs 一模一樣！
        target_agents = ['team', 'scout', 'optimizer', 'navigator', 'weatherman', 'presenter']

        for agent_key in target_agents:
            # 初始狀態
            card_html = create_agent_card_func(agent_key, "idle", "Waiting")
            # 存入 list，這會成為 build_interface 中的 outputs 元件
            agent_displays.append(gr.HTML(value=card_html, show_label=False))

        agent_container_end = gr.HTML('</div>')

        # 套用 CSS Class
        for display in agent_displays:
            display.elem_classes = ["agent-grid-item"]

    return team_area, agent_displays


def create_result_area(create_animated_map_func):
    """創建結果展示區域"""
    with gr.Group(visible=False) as result_area:
        result_display = gr.HTML()
        timeline_display = gr.HTML()
        metrics_display = gr.HTML()

    return result_area, result_display, timeline_display, metrics_display


def create_tabs(create_animated_map_func, reasoning_html):
    """
    創建標籤頁
    Tab 順序: Chat with LifeFlow (default) → Full Report → Route Map → AI Conversation
    """
    with gr.Tabs(selected="chat_lifeflow_tab") as tabs:
        # 🆕 Tab 1: Chat with LifeFlow (用於任務修改，Step 1 默認選擇)
        with gr.Tab("💬 Chat with LifeFlow", id="chat_lifeflow_tab"):
            gr.Markdown("*Ask me to modify your tasks*", elem_classes="tab-subtitle")

            # Chat 輸出區域（顯示對話歷史）
            chat_history_output = gr.HTML(
                value='<div style="padding: 20px; text-align: center; opacity: 0.6;">Chat will be available after task analysis...</div>',
                elem_classes="chat-history"
            )

            # Chat 輸入區域（Step 1 時隱藏，Step 2 時顯示）
            with gr.Group(visible=False, elem_classes="chat-input-group") as chat_input_area:
                with gr.Row():
                    chat_input = gr.Textbox(
                        placeholder="e.g., Change task 2 to high priority, or add a new task...",
                        show_label=False,
                        scale=4,
                        elem_classes="chat-input"
                    )
                    chat_send = gr.Button("Send", variant="primary", scale=1)

        # Tab 2: Full Report (專家推理過程，Step 3 時變為默認)
        with gr.Tab("📊 Full Report", id="report_tab", visible=False) as report_tab:
            gr.Markdown("*AI Expert Team Reasoning Process*", elem_classes="tab-subtitle")
            report_output = gr.Markdown()

        # Tab 3: Route Map
        with gr.Tab("🗺️ Route Map", id="map_tab", visible=False) as map_tab:
            map_output = gr.Plot(value=create_animated_map_func(), show_label=False)

        # Tab 4: AI Conversation (原有的 reasoning stream)
        with gr.Tab("🔍 AI Conversation", id="ai_conversation_tab"):
            gr.Markdown("*Real-time AI reasoning*", elem_classes="tab-subtitle")
            reasoning_output = gr.HTML(value=reasoning_html)

    return (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
            chat_input_area, chat_history_output, chat_input, chat_send)