import gradio as gr
import datetime

# 自定義 CSS：打造高級黑金風格
custom_css = """
.gradio-container { background-color: #0c0c0c !important; color: #d4af37 !important; }
.gr-button-primary { background: linear-gradient(45deg, #af8f2c, #d4af37) !important; border: none !important; color: black !important; font-weight: bold !important; }
.gr-input, .gr-dropdown, .gr-number { background-color: #1a1a1a !important; border: 1px solid #333 !important; color: white !important; }
h1 { font-family: 'Playfair Display', serif; letter-spacing: 2px; }
.availability-box { padding: 10px; border: 1px solid #d4af37; border-radius: 5px; text-align: center; margin-bottom: 20px; }
"""

def get_available_slots(date_str):
    # 這裡未來會接 Supabase 查詢
    # 範例邏輯：如果是假日就剩比較少位子
    return [("18:00", "剩 4 位"), ("19:30", "剩 2 位"), ("21:00", "已客滿")]

def handle_booking(name, tel, pax, date, time):
    if not name or not tel:
        return "⚠️ 請完整填寫姓名與聯絡電話。"
    # 這裡執行寫入 Supabase 的邏輯
    return f"### 🥂 預約申請已提交！\n**{name}** 您好，我們已收到您的申請。請留意 Email 並於 24 小時內點擊「確認出席」以保留您的座位。"

with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
    gr.HTML("""
        <div style="text-align: center; padding: 20px;">
            <h1 style="font-size: 36px;">Cié Cié Taipei</h1>
            <p style="color: #888;">品味精緻時光，期待您的蒞臨</p>
        </div>
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            booking_date = gr.DateTime(label="1. 選擇日期", type="string")
            pax_count = gr.Slider(minimum=1, maximum=8, value=2, step=1, label="2. 用餐人數")
            
        with gr.Column(scale=1):
            # 這裡顯示即時剩餘座位狀態
            availability_display = gr.HTML("<div class='availability-box'>請先選擇日期以查看剩餘座位</div>")
            time_slot = gr.Dropdown(choices=["18:00", "19:30", "21:00"], label="3. 選擇時段")
            
    with gr.Group():
        gr.Markdown("### 4. 聯絡資訊")
        with gr.Row():
            cust_name = gr.Textbox(label="姓名", placeholder="請輸入訂位人姓名")
            cust_tel = gr.Textbox(label="電話", placeholder="請輸入手機號碼")
    
    confirm_btn = gr.Button("探索味蕾之旅 (提交預約)", variant="primary")
    result_output = gr.Markdown()

    # 當日期或人數改變時，動態更新顯示（互動性體驗）
    booking_date.change(lambda: "<div class='availability-box'>🔍 查詢中...</div>", outputs=availability_display)
    
    confirm_btn.click(
        handle_booking, 
        inputs=[cust_name, cust_tel, pax_count, booking_date, time_slot], 
        outputs=result_output
    )

demo.launch()