Update app.py

app.py

@@ -29,24 +29,21 @@ def get_bookings():
     except:
         return pd.DataFrame()
 
-# 🔥🔥🔥 後端：暴力發送邏輯 (加上 Print Debug) 🔥🔥🔥
+# 🔥🔥🔥 核心後端：智慧判斷發送邏輯 (含 LINE Debug) 🔥🔥🔥
 def send_confirmation_hybrid(booking_id):
-    # Debug: 這裡會印在 Hugging Face 的 Logs 裡
-    print(f"🔥 [Backend] 收到發送請求，ID: {booking_id}") 
-    
-    if not booking_id: 
-        return "❌ 錯誤：後端收到的 ID 為空！"
+    if not booking_id: return "❌ 請輸入訂單 ID"
     
     try:
         # 1. 撈資料
         res = supabase.table("bookings").select("*").eq("id", booking_id).execute()
-        if not res.data: return f"❌ 找不到 ID 為 {booking_id} 的訂單"
+        if not res.data: return f"❌ 找不到 ID: {booking_id}"
         booking = res.data[0]
         
         email = booking.get('email')
         user_id = booking.get('user_id')
         current_status = booking.get('status', '')
         
+        # 連結
         confirm_link = f"{PUBLIC_SPACE_URL}/?id={booking_id}&action=confirm"
         cancel_link = f"{PUBLIC_SPACE_URL}/?id={booking_id}&action=cancel"
         
@@ -56,37 +53,41 @@ def send_confirmation_hybrid(booking_id):
         is_reminder = "確認" in current_status
 
         if is_reminder:
-            # 提醒模式
+            # --- 🔔 提醒模式 (Reminder) ---
             action_label = "提醒"
-            mail_subject = f"🔔 訂位提醒: {booking['date']} - Cié Cié Taipei"
+            mail_subject = f"🔔 行前提醒: {booking['date']} - Cié Cié Taipei"
+            
             line_text = (
-                f"🔔 訂位提醒\n\n"
+                f"🔔 行前提醒\n\n"
                 f"{booking['name']} 您好，期待今晚與您相見！\n\n"
                 f"📅 日期：{booking['date']}\n"
                 f"⏰ 時間：{booking['time']}\n"
                 f"👥 人數：{booking['pax']} 位\n\n"
                 f"座位已為您準備好，若需變更請聯繫我們。"
             )
+            
             mail_html = f"""
-            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px;">
-                <h2 style="text-align:center; border-bottom:1px solid #444;">Cié Cié Taipei</h2>
-                <p style="color:#eee;"><strong>{booking['name']}</strong> 您好，行前提醒：</p>
-                <div style="background:#2a2a2a; padding:15px; margin:20px 0; border-left:4px solid #f1c40f;">
-                    <ul style="color:#ddd;">
-                        <li>📅 日期：{booking['date']}</li>
-                        <li>⏰ 時間：{booking['time']}</li>
-                        <li>👥 人數：{booking['pax']} 位</li>
+            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif;">
+                <h2 style="text-align:center; border-bottom:1px solid #444; padding-bottom:15px;">Cié Cié Taipei</h2>
+                <p style="color:#eee; font-size:16px;"><strong>{booking['name']}</strong> 您好，行前提醒：</p>
+                <div style="background:#2a2a2a; padding:15px; border-radius:8px; margin:20px 0; border-left:4px solid #f1c40f;">
+                    <ul style="color:#ddd; padding-left:20px; line-height:1.8;">
+                        <li>📅 日期：<strong style="color:#fff;">{booking['date']}</strong></li>
+                        <li>⏰ 時間：<strong style="color:#fff;">{booking['time']}</strong></li>
+                        <li>👥 人數：<strong style="color:#fff;">{booking['pax']} 位</strong></li>
                     </ul>
                 </div>
                 <div style="text-align:center; margin-top:30px;">
-                    <a href="{cancel_link}" style="color:#aaa;">若無法前來，請點此取消</a>
+                    <span style="color:#888;">無需再次確認。</span><br><br>
+                    <a href="{cancel_link}" style="display:inline-block; border:1px solid #555; color:#aaa; padding:10px 20px; text-decoration:none; border-radius:50px; font-size:12px;">若無法前來，請點此取消</a>
                 </div>
             </div>
             """
         else:
-            # 確認模式
+            # --- 🚀 確認模式 (Confirmation) ---
             action_label = "確認"
             mail_subject = f"訂位確認: {booking['date']} - Cié Cié Taipei"
+            
             line_text = (
                 f"✅ 訂位確認\n\n"
                 f"{booking['name']} 您好，已收到您的預約。\n\n"
@@ -95,25 +96,27 @@ def send_confirmation_hybrid(booking_id):
                 f"👥 人數：{booking['pax']} 位\n\n"
                 f"請務必查收 Email 並點擊「確認出席」，謝謝！"
             )
+            
             mail_html = f"""
-            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px;">
-                <h2 style="text-align:center; border-bottom:1px solid #444;">Cié Cié Taipei</h2>
-                <p style="color:#eee;"><strong>{booking['name']}</strong> 您好，請確認您的訂位：</p>
-                <div style="background:#2a2a2a; padding:15px; margin:20px 0; border-left:4px solid #2ecc71;">
-                    <ul style="color:#ddd;">
-                        <li>📅 日期：{booking['date']}</li>
-                        <li>⏰ 時間：{booking['time']}</li>
-                        <li>👥 人數：{booking['pax']} 位</li>
+            <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif;">
+                <h2 style="text-align:center; border-bottom:1px solid #444; padding-bottom:15px;">Cié Cié Taipei</h2>
+                <p style="color:#eee; font-size:16px;"><strong>{booking['name']}</strong> 您好，請確認您的訂位：</p>
+                <div style="background:#2a2a2a; padding:15px; border-radius:8px; margin:20px 0; border-left:4px solid #2ecc71;">
+                    <ul style="color:#ddd; padding-left:20px; line-height:1.8;">
+                        <li>📅 日期：<strong style="color:#fff;">{booking['date']}</strong></li>
+                        <li>⏰ 時間：<strong style="color:#fff;">{booking['time']}</strong></li>
+                        <li>👥 人數：<strong style="color:#fff;">{booking['pax']} 位</strong></li>
                     </ul>
                 </div>
                 <div style="text-align:center; margin-top:30px;">
-                    <a href="{confirm_link}" style="background:#d4af37; color:#000; padding:12px 30px; text-decoration:none; border-radius:50px; font-weight:bold;">✅ 確認出席</a>
-                    <a href="{cancel_link}" style="color:#aaa; margin-left:20px;">取消</a>
+                    <a href="{confirm_link}" style="display:inline-block; background:#d4af37; color:#000; padding:12px 30px; text-decoration:none; border-radius:50px; font-weight:bold; margin-right:10px;">✅ 確認出席</a>
+                    <a href="{cancel_link}" style="display:inline-block; border:1px solid #555; color:#aaa; padding:11px 29px; text-decoration:none; border-radius:50px;">🚫 取消</a>
                 </div>
             </div>
             """
 
-        # 3. 發送
+        # 3. 執行發送
+        # Email
         if email and "@" in email and GAS_MAIL_URL:
             try:
                 requests.post(GAS_MAIL_URL, json={"to": email, "subject": mail_subject, "htmlBody": mail_html, "name": "Cié Cié Taipei"})
@@ -122,117 +125,94 @@ def send_confirmation_hybrid(booking_id):
         else:
             log_msg += "⚠️ 無Mail "
         
+        # LINE (增加錯誤代碼顯示，幫您 Debug 為什麼偶爾失敗)
         if user_id and len(str(user_id)) > 5 and LINE_ACCESS_TOKEN:
             try:
-                requests.post("https://api.line.me/v2/bot/message/push", 
+                r = requests.post("https://api.line.me/v2/bot/message/push", 
                               headers={"Authorization": f"Bearer {LINE_ACCESS_TOKEN}"}, 
                               json={"to": user_id, "messages": [{"type": "text", "text": line_text}]})
-                log_msg += f"✅ LINE({action_label}) "
+                if r.status_code == 200:
+                    log_msg += f"✅ LINE({action_label}) "
+                else:
+                    log_msg += f"❌ LINE失敗({r.status_code}: {r.text}) "
             except Exception as e: log_msg += f"❌ LINEErr({str(e)}) "
         else:
             log_msg += "⚠️ 無LINE ID "
 
+        # 4. 更新狀態 (僅在非提醒模式下更新)
         if not is_reminder:
             supabase.table("bookings").update({"status": "已發確認信"}).eq("id", booking_id).execute()
         
-        print(f"🔥 [Backend] 處理完成: {log_msg}")
         return log_msg
 
-    except Exception as e: 
-        print(f"🔥 [Backend] 嚴重錯誤: {str(e)}")
-        return f"嚴重錯誤: {str(e)}"
+    except Exception as e: return f"嚴重錯誤: {str(e)}"
 
-# --- 卡片渲染 (純 CSS 驅動點擊) ---
+# 🔥🔥🔥 卡片渲染 (純顯示，無 JS 互動) 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
-    count_html = f"<div style='color:#bbb; margin-bottom:20px; text-align:right; font-size:16px; padding: 0 10px;'>📊 共找到 <span style='color:#fff; font-weight:bold;'>{len(df)}</span> 筆資料</div>"
+    count_html = f"<div style='color:#bbb; margin-bottom:10px; text-align:right; font-size:14px;'>📊 共 <span style='color:#fff; font-weight:bold;'>{len(df)}</span> 筆資料</div>"
     if df.empty: return f"{count_html}<div style='text-align:center; padding:60px; color:#666; font-size:1.5em;'>📭 目前沒有訂位資料</div>"
     
-    cards_html = f"{count_html}<div style='display: flex; flex-direction: column; gap: 24px; padding-bottom: 50px;'>"
+    cards_html = f"{count_html}<div style='display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px;'>"
     
     for index, row in df.iterrows():
         status = row.get('status', '待處理')
         
-        status_color = "#ccc"; border_color = "#444"
-        if '確認' in status: status_color = "#2ecc71"; border_color = "#2ecc71"
-        elif '取消' in status: status_color = "#e74c3c"; border_color = "#e74c3c"
-        elif '已發' in status: status_color = "#f1c40f"; border_color = "#f1c40f"
-
-        is_canceled = '取消' in status
-        is_confirmed = '確認' in status
-        
-        # JS Class 標記
-        btn_class = "op-btn"
-        btn_data = f"data-id='{row['id']}'"
-        
-        if is_canceled:
-            btn_style = "background: #333; color: #666; cursor: not-allowed;"
-            btn_text = "🚫 已取消"
-            btn_class = "" # 取消狀態不給按
-        elif is_confirmed:
-            btn_style = "background: #2c3e50; color: #fff; border: 1px solid #555; box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);"
-            btn_text = "🔔 發送提醒"
-        elif '已發' in status:
-            btn_style = "background: #2c3e50; color: #ddd; border: 1px solid #555;"
-            btn_text = "🔄 重發確認"
-        else:
-            btn_style = "background: #d4af37; color: #000; font-weight:800; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);"
-            btn_text = "🚀 發送確認"
+        # 顏色邏輯
+        status_bg = "#ccc"; status_tx = "#000"; border_color = "#444"
+        if '確認' in status: 
+            status_bg = "#2ecc71"; status_tx = "#000"; border_color = "#2ecc71"
+        elif '取消' in status: 
+            status_bg = "#e74c3c"; status_tx = "#fff"; border_color = "#e74c3c"
+        elif '已發' in status: 
+            status_bg = "#f1c40f"; status_tx = "#000"; border_color = "#f1c40f"
 
+        # 這裡不放按鈕了，改放一個超大的 ID 顯示
         card = f"""
         <div class="booking-card" style="
-            background: #1a1a1a; border-left: 8px solid {border_color}; border-radius: 12px; padding: 24px; 
-            box-shadow: 0 8px 20px rgba(0,0,0,0.6); font-family: '微軟正黑體', sans-serif; position: relative; margin-bottom: 10px;">
+            background: #1a1a1a; 
+            border-left: 6px solid {border_color}; 
+            border-radius: 12px; 
+            padding: 20px; 
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
+            font-family: '微軟正黑體', sans-serif; 
+            position: relative;">
             
-            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid #333; padding-bottom:15px;">
-                <div style="font-size:1.3em; color:#fff; font-weight:bold;">
-                    <span style="font-size:0.8em; color:#aaa; margin-right:8px; font-weight:normal;">📅 日期</span>{row['date']}
+            <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:15px;">
+                <div>
+                    <span style="font-size:0.9em; color:#666; font-weight:bold; display:block;">訂單 ID</span>
+                    <span style="font-size:2.5em; color:#fff; font-weight:900; line-height:1; font-family:monospace;">{row['id']}</span>
                 </div>
-                <div style="color: {status_color}; background: {status_color}22; padding: 8px 16px; border-radius: 30px; font-size: 1em; font-weight: bold; border: 1px solid {status_color}44;">
+                <div style="background:{status_bg}; color:{status_tx}; padding:6px 12px; border-radius:4px; font-weight:bold; font-size:0.9em;">
                     {status}
                 </div>
             </div>
 
-            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:25px;">
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:15px; border-top:1px solid #333; padding-top:15px;">
                 <div>
-                    <div style="font-size:1em; color:#aaa; margin-bottom:5px;">⏰ 訂位時間</div>
-                    <div style="font-size:2.2em; color:#d4af37; font-weight:900; letter-spacing:-1px; line-height:1;">{row['time']}</div>
+                    <span style="color:#888; font-size:0.85em;">📅 日期 Date</span><br>
+                    <span style="color:#d4af37; font-size:1.2em; font-weight:bold;">{row['date']}</span>
                 </div>
                 <div>
-                    <div style="font-size:1em; color:#aaa; margin-bottom:5px;">👥 人數</div>
-                    <div style="font-size:2.2em; color:#fff; font-weight:900; line-height:1;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
+                    <span style="color:#888; font-size:0.85em;">⏰ 時間 Time</span><br>
+                    <span style="color:#d4af37; font-size:1.5em; font-weight:900;">{row['time']}</span>
                 </div>
             </div>
             
-            <div style="background:#222; padding:20px; border-radius:10px; margin-bottom:20px;">
-                <div style="margin-bottom:15px;">
-                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">👤 姓名 Name</span>
-                    <span style="color:#fff; font-size:1.5em; font-weight:bold;">{row['name']}</span>
-                </div>
-                <div style="margin-bottom:15px;">
-                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">📞 電話 Phone</span>
-                    <a href="tel:{row['tel']}" style="color:#69c0ff; text-decoration:none; font-size:1.4em; letter-spacing:1px; font-weight:600; border-bottom: 1px dotted #69c0ff;">{row['tel']}</a>
+            <div style="background:#222; padding:15px; border-radius:8px; margin-bottom:15px;">
+                <div style="margin-bottom:8px;">
+                    <span style="color:#fff; font-size:1.4em; font-weight:bold;">{row['name']}</span> 
+                    <span style="color:#aaa;">({row['pax']}位)</span>
                 </div>
-                <div>
-                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">✉️ 信箱 Email</span>
-                    <span style="color:#ddd; font-size:1.1em; word-break:break-all;">{row['email'] or '未提供'}</span>
-                </div>
-            </div>
-
-            <div style="margin-bottom:25px;">
-                <div style="font-size:1em; color:#aaa; margin-bottom:8px;">📝 備註 Note</div>
-                <div style="color:#f1c40f; background:#f1c40f11; padding:15px; border-radius:8px; font-size:1.1em; line-height:1.6; border: 1px solid #f1c40f33;">
-                    {row.get('remarks') or '無'}
+                <div style="font-size:1.1em; margin-bottom:5px;">
+                    📞 <a href="tel:{row['tel']}" style="color:#69c0ff; text-decoration:none;">{row['tel']}</a>
                 </div>
+                <div style="font-size:0.9em; color:#888;">✉️ {row['email'] or '-'}</div>
             </div>
 
-            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:20px;">
-                <div style="font-size: 1.1em; color: #000; font-weight: 900; background: #e0e0e0; padding: 8px 12px; border-radius: 6px; font-family: monospace;">
-                    ID: {row['id']}
-                </div>
-                <button class="{btn_class}" {btn_data} style="border: none; padding: 14px 30px; border-radius: 8px; font-size: 1.1em; transition: all 0.2s; min-width: 150px; cursor: pointer; {btn_style}">
-                    {btn_text}
-                </button>
+            <div style="background:#f1c40f11; padding:12px; border-radius:6px; border:1px solid #f1c40f33;">
+                <span style="color:#aaa; font-size:0.8em;">📝 備註:</span>
+                <span style="color:#f1c40f;">{row.get('remarks') or '無'}</span>
             </div>
         </div>
         """
@@ -251,56 +231,30 @@ def check_login(user, password):
         }
     else: return {error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"}
 
-# 🔥🔥🔥 Debug 版 JS：有彈窗，按鈕看得到 🔥🔥🔥
-GLOBAL_JS = """
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    console.log("🟢 Debug JS Loaded");
-});
-
-document.addEventListener('click', function(e) {
-    if (e.target && e.target.classList.contains('op-btn')) {
-        const id = e.target.getAttribute('data-id');
-        
-        // 1. 彈窗確認 JS 有活著
-        // alert("JS 偵測到點擊！準備發送 ID: " + id);
-        
-        const idInput = document.querySelector('#debug_id_input input');
-        
-        if (idInput) {
-            idInput.value = id;
-            idInput.dispatchEvent(new Event('input', { bubbles: true }));
-            
-            setTimeout(() => {
-                const sendBtn = document.querySelector('#debug_send_btn');
-                if (sendBtn) {
-                    console.log("🚀 Clicking send button...");
-                    sendBtn.click();
-                } else {
-                    alert("❌ 找不到發送按鈕 (#debug_send_btn)");
-                }
-            }, 100);
-        } else {
-            alert("❌ 找不到輸入框 (#debug_id_input)");
-        }
-    }
-});
-</script>
-"""
-
+# --- CSS ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
-#booking_display { height: auto !important; max-height: none !important; overflow: visible !important; margin-bottom: 50px; }
-button:active { transform: scale(0.96); }
-#header-panel { background: #1a1a1a; padding: 15px; margin-bottom: 20px; border-radius: 10px; }
-.op-btn { pointer-events: auto !important; }
 
-/* 暫時不隱藏，方便 Debug */
-/* #debug_ops { display: none; } */
+/* 讓操作區塊固定在頂部 (Sticky) */
+#op-panel {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #1a1a1a;
+    border-bottom: 2px solid #d4af37;
+    padding: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
+}
+
+#booking_display { 
+    height: auto !important; 
+    overflow: visible !important; 
+}
 """
 
+# --- 介面 ---
 with gr.Blocks(title="Admin") as demo:
-    gr.HTML(GLOBAL_JS)
     
     with gr.Group(visible=True) as login_row:
         gr.Markdown("# 🔒 Login")
@@ -311,28 +265,31 @@ with gr.Blocks(title="Admin") as demo:
         error_msg = gr.Markdown("")
         
     with gr.Group(visible=False) as admin_row:
-        with gr.Row(variant="panel", elem_id="header-panel"):
-            gr.Markdown("### 🍷 Cié Cié Dashboard")
-            refresh_btn = gr.Button("🔄 刷新列表", size="sm", variant="secondary")
-        
-        # ⚠️ 這裡我把隱藏區改名為 debug_ops 並且顯示出來
-        # 你會看到一個數字框和一個按鈕，這是正常的
-        with gr.Row(visible=True, elem_id="debug_ops"):
-            debug_id_input = gr.Number(label="Debug ID Input (Auto Fill)", elem_id="debug_id_input", precision=0)
-            debug_send_btn = gr.Button("Debug Send Button (Auto Click)", elem_id="debug_send_btn")
+        # 🔥 操作區 (固定在頂部)
+        with gr.Column(elem_id="op-panel"):
+            gr.Markdown("### 🍷 Cié Cié 訂位管理")
+            with gr.Row():
+                # 這裡就是最原始、最不會壞的輸入框 + 按鈕
+                id_input = gr.Number(label="輸入 ID 發送通知", precision=0, scale=2)
+                send_btn = gr.Button("🚀 發送通知 / 提醒 (Hybrid)", variant="primary", scale=1)
+                refresh_btn = gr.Button("🔄 刷新列表", scale=1)
             
+            log_output = gr.Textbox(label="執行結果", lines=1)
+
+        # 卡片顯示區
         booking_display = gr.HTML(elem_id="booking_display")
-        log_output = gr.Textbox(label="系統日誌 (System Log)", lines=1)
         
         login_btn.click(check_login, inputs=[username_input, password_input], outputs=[login_row, admin_row, error_msg]).then(
             render_booking_cards, outputs=booking_display
         )
+        
+        # 綁定刷新
         refresh_btn.click(render_booking_cards, outputs=booking_display)
         
-        # 綁定
-        debug_send_btn.click(
+        # 綁定發送 (發送完自動刷新列表)
+        send_btn.click(
             send_confirmation_hybrid, 
-            inputs=debug_id_input, 
+            inputs=id_input, 
             outputs=log_output
         ).then(
             render_booking_cards,