import os
import sys
import gradio as gr
from threading import Thread
import time

# 將src目錄加入Python路徑
sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))

# 導入Flask應用程式
from src.main import app

def run_flask():
    """在背景執行Flask應用程式"""
    app.run(host='0.0.0.0', port=7860, debug=False)

def create_gradio_interface():
    """建立Gradio介面來包裝Flask應用程式"""
    
    # 在背景啟動Flask
    flask_thread = Thread(target=run_flask, daemon=True)
    flask_thread.start()
    
    # 等待Flask啟動
    time.sleep(3)
    
    # 建立簡單的Gradio介面，重定向到Flask應用程式
    with gr.Blocks(
        title="我們的旅遊清單",
        theme=gr.themes.Soft(),
        css="""
        .gradio-container {
            max-width: 100% !important;
            padding: 0 !important;
        }
        """
    ) as demo:
        gr.HTML("""
        <div style="text-align: center; padding: 20px;">
            <h1>🗺️ 我們的旅遊清單</h1>
            <p>和另一半一起規劃美好的旅程</p>
            <p style="margin: 20px 0;">
                <a href="/" target="_blank" style="
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 12px 24px;
                    text-decoration: none;
                    border-radius: 8px;
                    font-weight: bold;
                    display: inline-block;
                ">開始使用旅遊清單 →</a>
            </p>
            <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                <h3>功能特色</h3>
                <ul style="text-align: left; max-width: 400px; margin: 0 auto;">
                    <li>🔐 使用代碼存取共同清單</li>
                    <li>✅ 完成項目自動移到底部</li>
                    <li>📝 雙方可即時編輯</li>
                    <li>🎨 美觀的響應式介面</li>
                </ul>
            </div>
            <div style="margin-top: 20px; font-size: 14px; color: #666;">
                <p>💡 建立清單後，將代碼分享給另一半</p>
                <p>🔄 雙方都可以即時編輯和更新清單</p>
                <p>✅ 完成的項目會自動移到清單底部</p>
            </div>
        </div>
        """)
        
        # 嵌入Flask應用程式的iframe
        gr.HTML("""
        <iframe 
            src="/" 
            width="100%" 
            height="800px" 
            frameborder="0"
            style="border-radius: 8px; margin-top: 20px;"
        ></iframe>
        """)
    
    return demo

if __name__ == "__main__":
    # 建立並啟動Gradio介面
    demo = create_gradio_interface()
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        show_error=True
    )