Update app.py

app.py

@@ -29,48 +29,52 @@ def get_bookings():
     except:
         return pd.DataFrame()
 
-# 🔥🔥🔥 核心修正：這裡決定「按下去要發什麼」 🔥🔥🔥
+# 🔥🔥🔥 核心後端：區分「確認信」與「提醒信」 🔥🔥🔥
 def send_confirmation_hybrid(booking_id):
-    if not booking_id: return "❌ 無效 ID"
+    if not booking_id: return "❌ 無效 ID (JS Error)"
     try:
-        # 1. 先去資料庫抓最新的狀態
+        # 1. 抓取最新資料
         res = supabase.table("bookings").select("*").eq("id", booking_id).execute()
         if not res.data: return "❌ 找不到訂單"
         booking = res.data[0]
         
         email = booking.get('email')
         user_id = booking.get('user_id')
-        current_status = booking.get('status', '') # 抓取當前狀態
+        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"
         
         log_msg = f"🆔 {booking_id}: "
 
-        # 2. 判斷邏輯：是「已確認」還是「未確認」？
-        if "顧客已確認" in current_status:
+        # 2. 判斷：是「發送提醒」還是「發送確認」？
+        # 如果狀態包含 "確認"，代表客人已經確認過了 -> 發送行前提醒
+        is_reminder = "確認" in current_status
+
+        if is_reminder:
             # ==========================================
-            # 🔔 模式 A：發送「行前提醒」 (Reminder)
+            # 🔔 模式 A：行前提醒 (Reminder)
             # ==========================================
-            action_type = "提醒"
+            action_label = "提醒"
             mail_subject = f"🔔 行前提醒: {booking['date']} - Cié Cié Taipei"
             
-            # LINE 內容：強調期待光臨，沒有確認按鈕
+            # LINE: 純文字提醒，無按鈕
             line_text = (
                 f"🔔 行前提醒\n\n"
                 f"{booking['name']} 您好，期待今晚與您相見！\n\n"
                 f"📅 日期：{booking['date']}\n"
                 f"⏰ 時間：{booking['time']}\n"
                 f"👥 人數：{booking['pax']} 位\n\n"
-                f"若需更改行程，請聯繫我們或點擊下方連結取消。"
+                f"座位已為您準備好，若需變更請聯繫我們。"
             )
             
-            # Email 內容：純提醒，只留取消按鈕
+            # Email: 沒有確認按鈕，只有取消連結
             mail_html = f"""
             <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif; border:1px solid #333;">
                 <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 #d4af37;">
+                <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>
@@ -78,35 +82,35 @@ def send_confirmation_hybrid(booking_id):
                     </ul>
                 </div>
                 <div style="text-align:center; margin-top:30px;">
-                    <span style="color:#888;">我們已為您準備好座位，期待您的光臨。</span><br><br>
+                    <span style="color:#888; font-size:14px;">這是一封行前提醒，您無需再次確認。</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:
             # ==========================================
-            # 🚀 模式 B：發送「訂位確認」 (Confirmation)
+            # 🚀 模式 B：訂位確認 (Confirmation)
             # ==========================================
-            action_type = "確認"
+            action_label = "確認"
             mail_subject = f"訂位確認: {booking['date']} - Cié Cié Taipei"
             
-            # LINE 內容：包含確認請求
+            # LINE: 要求確認
             line_text = (
                 f"✅ 訂位確認\n\n"
                 f"{booking['name']} 您好，已收到您的預���。\n\n"
                 f"📅 日期：{booking['date']}\n"
                 f"⏰ 時間：{booking['time']}\n"
                 f"👥 人數：{booking['pax']} 位\n\n"
-                f"請務必查收 Email 確認信並點擊「確認出席」按鈕，謝謝！"
+                f"請務必查收 Email 並點擊「確認出席」，謝謝！"
             )
             
-            # Email 內容：包含巨大的確認按鈕
+            # Email: 有巨大的確認按鈕
             mail_html = f"""
             <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif; border:1px solid #333;">
                 <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 #d4af37;">
+                <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>
@@ -120,12 +124,12 @@ def send_confirmation_hybrid(booking_id):
             </div>
             """
 
-        # 3. 執行發送 (共用發送模組)
+        # 3. 執行發送
         # Send 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"})
-                log_msg += f"✅ Mail({action_type}) "
+                log_msg += f"✅ Mail({action_label}) "
             except: log_msg += "❌ MailErr "
         
         # Send LINE
@@ -134,17 +138,17 @@ def send_confirmation_hybrid(booking_id):
                 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_type}) "
+                log_msg += f"✅ LINE({action_label}) "
             except: log_msg += "❌ LINEErr"
 
-        # 4. 更新資料庫狀態 (只有在非確認狀態下才更新，避免覆蓋「已確認」)
-        if action_type == "確認":
+        # 4. 更新狀態 (僅在非提醒模式下更新，避免覆蓋已確認狀態)
+        if not is_reminder:
             supabase.table("bookings").update({"status": "已發確認信"}).eq("id", booking_id).execute()
         
         return log_msg
     except Exception as e: return f"Error: {e}"
 
-# 🔥🔥🔥 卡片渲染 (介面邏輯：決定按鈕長怎樣) 🔥🔥🔥
+# 🔥🔥🔥 前端卡片生成 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
     
@@ -157,32 +161,28 @@ def render_booking_cards():
     
     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"
+        # 顏色邏輯
+        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 # 判斷是否已確認
+        is_confirmed = '確認' in status
         
-        # 🟢 修正重點：只要不是已取消，按鈕永遠可以點擊，只是文字不同
+        # JS 事件綁定 (只要不是取消，都能點)
         btn_onclick = "" if is_canceled else f"cardAction({row['id']})"
         
+        # 按鈕外觀邏輯
         if is_canceled:
             btn_style = "background: #333; color: #666; cursor: not-allowed;"
             btn_text = "🚫 已取消"
         elif is_confirmed:
-            # 🔔 狀態是「顧客已確認」時，按鈕變成「發送提醒」
-            # 點擊後 -> 觸發 send_confirmation_hybrid -> 函式內會判斷狀態 -> 發送「提醒信」
-            btn_style = "background: #2c3e50; color: #fff; border: 1px solid #555; box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);"
-            btn_text = "🔔 發送提醒"
+            # 🔔 已確認 -> 發送提醒
+            btn_style = "background: #2c3e50; color: #fff; border: 1px solid #555; box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);"
+            btn_text = "🔔 發送提醒" 
         elif '已發' in status:
-            btn_style = "background: #2c3e50; color: #ddd; border: 1px solid #555;"
+            btn_style = "background: #444; color: #ddd; border: 1px solid #666;"
             btn_text = "🔄 重發確認"
         else:
             btn_style = "background: #d4af37; color: #000; font-weight:800; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);"
@@ -190,28 +190,14 @@ def render_booking_cards():
 
         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: 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;">
             
             <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>
-                <div style="
-                    color: {status_color}; 
-                    background: {status_color}22; 
-                    padding: 8px 16px; 
-                    border-radius: 30px; 
-                    font-size: 1em; 
-                    font-weight: bold;
-                    letter-spacing: 1px;
-                    border: 1px solid {status_color}44;">
+                <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;">
                     {status}
                 </div>
             </div>
@@ -250,26 +236,13 @@ def render_booking_cards():
             </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;">
+                <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 onclick="{btn_onclick}" style="
-                    border: none; 
-                    padding: 14px 30px; 
-                    border-radius: 8px; 
-                    font-size: 1.1em; 
-                    transition: all 0.2s;
-                    min-width: 150px;
-                    cursor: pointer;
-                    {btn_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>
@@ -289,31 +262,30 @@ def check_login(user, password):
             error_msg: ""
         }
     else:
-        return {
-            error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
-        }
+        return {error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"}
 
-# --- JS 邏輯 ---
+# --- JS 邏輯 (強化版: 找按鈕更精確) ---
 js_logic = """
 function() {
     window.cardAction = function(id) {
-        let idInput = document.querySelector('#hidden_id_input input') || 
-                      document.querySelector('#hidden_id_input textarea');
+        // 1. 更新隱藏 ID
+        let idInput = document.querySelector('#hidden_id_input input');
+        if (!idInput) return alert("System Error: Cannot find ID input");
         
-        if (idInput) {
-            idInput.value = id;
-            idInput.dispatchEvent(new Event('input', { bubbles: true }));
-        }
+        idInput.value = id;
+        idInput.dispatchEvent(new Event('input', { bubbles: true }));
         
+        // 2. 觸發隱藏按鈕 (針對 Off-screen 元件的點擊)
         setTimeout(() => {
             const sendBtn = document.querySelector('#hidden_send_btn');
             if (sendBtn) sendBtn.click();
-        }, 150);
+            else alert("System Error: Cannot find Send button");
+        }, 100);
     }
 }
 """
 
-# --- CSS (修復元件隱藏問題) ---
+# --- CSS (🔥 關鍵修正：移出螢幕而非隱藏，保證 JS 按得到) ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
 
@@ -333,8 +305,16 @@ button:active { transform: scale(0.96); }
     border-radius: 10px;
 }
 
+/* 🔥 這裡最重要：不要用 display: none，而是移到畫面外 */
+/* 這樣 Gradio 會認為它是可見的，點擊事件才會生效 */
 #hidden_ops {
-    display: none !important;
+    position: absolute !important;
+    left: -9999px !important;
+    top: -9999px !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
 }
 """
 
@@ -356,7 +336,7 @@ with gr.Blocks(title="Admin") as demo:
         
         booking_display = gr.HTML(elem_id="booking_display")
         
-        # 🔥 隱藏的操作區 (確保 visible=True)
+        # 🔥 隱藏操作區：visible=True (讓元件存在)，但 CSS 把它踢到外太空
         with gr.Column(visible=True, elem_id="hidden_ops"):
             hidden_id_input = gr.Number(elem_id="hidden_id_input", precision=0)
             hidden_send_btn = gr.Button("Send", elem_id="hidden_send_btn")