webapp

Running

File size: 37,802 Bytes

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เซียนกุ้งลาดพร้าว - Ladprao Shrimp Oracle</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap');
    
    body {
      font-family: 'Prompt', sans-serif;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.1);
      border-radius: 4px;
    }
    
    @keyframes fadeSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .animate-fade-slide {
      animation: fadeSlideIn 0.5s ease-out forwards;
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); }
      50% { box-shadow: 0 0 25px rgba(249, 115, 22, 0.5); }
    }
    
    .pulse-glow {
      animation: pulse-glow 2s infinite;
    }
    
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(1) opacity(0.5);
    }
  </style>
</head>
<body class="min-h-screen bg-[#0f172a] text-slate-100 flex flex-col">
  
  <!-- Background -->
  <div class="fixed inset-0 z-0 pointer-events-none">
    <div class="absolute top-0 left-0 w-full h-[300px] bg-gradient-to-b from-purple-900/30 to-transparent"></div>
  </div>

  <!-- Header -->
  <header class="flex-none h-16 bg-[#0f172a]/90 backdrop-blur-md border-b border-white/10 flex items-center justify-between px-4 z-50 sticky top-0">
    <div class="flex items-center gap-3">
      <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center shadow-lg pulse-glow">
        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
        </svg>
      </div>
      <div class="leading-tight">
        <h1 id="headerTitle" class="text-base font-bold text-white">เซียนกุ้งลาดพร้าว</h1>
        <p id="headerSubtitle" class="text-[10px] text-slate-400">AI ทำนายผล คู่/คี่</p>
      </div>
    </div>
    
    <div class="flex gap-2">
      <button id="langBtn" class="p-2 bg-white/5 rounded-full hover:bg-white/10 transition-colors">
        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="10"/>
          <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
        </svg>
      </button>
      <button id="resetBtn" class="p-2 bg-white/5 rounded-full text-red-400 hover:bg-white/10 transition-colors hidden">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
      </button>
    </div>
  </header>

  <!-- Main Content -->
  <main id="mainContent" class="flex-1 p-4 pb-48 custom-scrollbar relative z-10">
    
    <!-- Input Step -->
    <div id="inputStep" class="max-w-md mx-auto space-y-6 animate-fade-slide">
      
      <!-- Intro Card -->
      <div class="bg-gradient-to-br from-slate-800 to-slate-900 border border-white/10 rounded-2xl p-5 shadow-xl">
        <h2 class="text-orange-400 font-bold mb-2 flex items-center gap-2 text-sm uppercase tracking-wider">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
          </svg>
          <span id="introTitle">ระบบคำนวณดวงเกมตกกุ้ง</span>
        </h2>
        <p id="introText" class="text-xs text-slate-300 leading-relaxed">ระบบ AI ผสานศาสตร์ปาจื้อและชี่เหมินตุ้นเจี๋ย วิเคราะห์เกมชั่งน้ำหนักกุ้งลาดพร้าว คำนวณดัชนีโชคลาภและฟันธง 'คู่' หรือ 'คี่' ตามเวลาจริง</p>
      </div>

      <!-- API Key -->
      <div class="space-y-2">
        <label id="apiKeyLabel" class="text-xs font-semibold text-purple-400 uppercase ml-1">1. ใส่คีย์สมอง (OpenAI API)</label>
        <div class="relative">
          <svg class="absolute left-3 top-3.5 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
          </svg>
          <input
            type="password"
            id="apiKeyInput"
            placeholder="sk-..."
            class="w-full pl-10 pr-4 py-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm focus:border-orange-500 outline-none transition-all"
          />
        </div>
        <p id="apiKeyNote" class="text-[10px] text-slate-500 ml-1">*คีย์ใช้ส่งข้อมูลหา AI เท่านั้น ไม่มีการบันทึก</p>
        
        <!-- Demo Mode Toggle -->
        <label class="flex items-center gap-2 mt-2 cursor-pointer group">
          <input type="checkbox" id="demoModeToggle" class="w-4 h-4 rounded bg-slate-800 border-orange-500 text-orange-500 focus:ring-orange-500 focus:ring-offset-0">
          <span id="demoModeLabel" class="text-xs text-orange-400 group-hover:text-orange-300">🎮 โหมดทดสอบ (ไม่ต้องใช้ API Key)</span>
        </label>
      </div>

      <!-- User Form -->
      <div class="space-y-3 bg-white/5 p-4 rounded-2xl border border-white/5">
        <label id="userInfoLabel" class="text-xs font-semibold text-purple-400 uppercase mb-2 block">2. ข้อมูลเจ้าชะตา (กรอกครั้งเดียว)</label>
        
        <div class="grid grid-cols-2 gap-3">
          <div>
            <label id="nameLabelEl" class="text-[10px] text-slate-500 mb-1 block">ชื่อเล่น</label>
            <input type="text" id="nameInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm outline-none focus:border-orange-500" />
          </div>
          <div>
            <label id="genderLabelEl" class="text-[10px] text-slate-500 mb-1 block">เพศ</label>
            <div class="flex bg-slate-900 rounded-lg p-1 border border-white/10 h-[38px]">
              <button id="maleBtn" class="flex-1 rounded-md text-xs bg-blue-600 text-white transition-colors">ชาย</button>
              <button id="femaleBtn" class="flex-1 rounded-md text-xs text-slate-500 transition-colors">หญิง</button>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div>
            <label id="birthDateLabelEl" class="text-[10px] text-slate-500 mb-1 block">วันเกิด</label>
            <input type="date" id="birthDateInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm text-slate-300 outline-none focus:border-orange-500" />
          </div>
          <div>
            <label id="birthTimeLabelEl" class="text-[10px] text-slate-500 mb-1 block">เวลาเกิด</label>
            <input type="time" id="birthTimeInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm text-slate-300 outline-none focus:border-orange-500" />
          </div>
        </div>
        
        <div>
          <label id="birthCityLabelEl" class="text-[10px] text-slate-500 mb-1 block">จังหวัดเกิด</label>
          <input type="text" id="birthCityInput" placeholder="กทม." class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm outline-none focus:border-orange-500" />
        </div>
      </div>

      <!-- Initial Target -->
      <div class="space-y-3">
        <label id="targetLabel" class="text-xs font-semibold text-purple-400 uppercase ml-1">3. เริ่มทำนายรอบแรก</label>
        <div class="grid grid-cols-2 gap-3">
          <div class="relative">
            <svg class="absolute left-3 top-3 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
              <line x1="16" y1="2" x2="16" y2="6"/>
              <line x1="8" y1="2" x2="8" y2="6"/>
              <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <input type="date" id="targetDateInput" class="w-full pl-9 p-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm text-white outline-none focus:border-orange-500" />
          </div>
          <div class="relative">
            <svg class="absolute left-3 top-3 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12 6 12 12 16 14"/>
            </svg>
            <input type="time" id="targetTimeInput" value="20:30" class="w-full pl-9 p-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm text-white outline-none focus:border-orange-500" />
          </div>
        </div>
      </div>

      <!-- Start Button -->
      <button id="startBtn" class="w-full py-4 bg-gradient-to-r from-orange-600 to-red-600 text-white font-bold rounded-xl shadow-lg shadow-orange-900/40 active:scale-95 transition-transform flex items-center justify-center gap-2 hover:from-orange-500 hover:to-red-500">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
        </svg>
        <span id="startBtnText">วิเคราะห์ผล (คู่/คี่)</span>
      </button>

      <!-- Advanced Toggle -->
      <div class="pt-2 text-center">
        <button id="advancedToggle" class="text-[10px] text-slate-500 flex items-center justify-center gap-1 mx-auto hover:text-slate-400 transition-colors">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="3"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
          </svg>
          <span id="advancedText">ตั้งค่า AI (ขั้นสูง)</span>
          <svg id="advancedChevron" class="w-3 h-3 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </button>
        <div id="advancedPanel" class="hidden mt-2">
          <textarea id="systemPromptInput" class="w-full h-32 bg-black/30 border border-white/10 rounded-lg p-2 text-[10px] font-mono text-slate-400 outline-none focus:border-orange-500"></textarea>
          <button id="restoreDefaultBtn" class="mt-2 text-[10px] text-orange-400 hover:text-orange-300">คืนค่าเดิม</button>
        </div>
      </div>
    </div>

    <!-- Chat Step -->
    <div id="chatStep" class="max-w-md mx-auto space-y-4 hidden">
      <div id="chatMessages"></div>
      
      <!-- Loading -->
      <div id="loadingIndicator" class="hidden flex justify-start">
        <div class="bg-slate-800 rounded-2xl rounded-tl-none p-3 flex items-center gap-2">
          <svg class="w-4 h-4 animate-spin text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
          <span id="loadingText" class="text-xs text-slate-400">AI กำลังคำนวณดวง...</span>
        </div>
      </div>
      
      <div id="chatEnd" class="h-4"></div>
    </div>
  </main>

  <!-- Bottom Action Bar (for repeat bets) -->
  <div id="bottomBar" class="fixed bottom-0 left-0 right-0 bg-[#0f172a]/95 backdrop-blur-xl border-t border-white/10 p-4 z-50 hidden animate-fade-slide">
    <div class="max-w-md mx-auto">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-bold text-purple-400 uppercase flex items-center gap-1">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
          <span id="nextRoundTitle">รอบถัดไป?</span>
        </span>
        <span id="nextRoundDesc" class="text-[10px] text-slate-500">ดวงเดิม เปลี่ยนแค่เวลาแทง</span>
      </div>
      
      <div class="flex gap-2">
        <div class="relative flex-1">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-4 w-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12 6 12 12 16 14"/>
            </svg>
          </div>
          <input 
            type="time" 
            id="nextTimeInput"
            value="20:30"
            class="block w-full pl-10 pr-2 py-3 bg-slate-900 border border-white/20 rounded-xl text-sm text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none font-mono"
          />
        </div>
        <button 
          id="predictNextBtn"
          class="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-500 hover:to-red-500 text-white px-6 rounded-xl font-bold shadow-lg shadow-orange-900/30 active:scale-95 transition-all flex items-center gap-2"
        >
          <span id="predictNextText">ทำนายรอบใหม่</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <line x1="5" y1="12" x2="19" y2="12"/>
            <polyline points="12 5 19 12 12 19"/>
          </svg>
        </button>
      </div>
      <div class="mt-2 text-center">
        <input 
          type="date" 
          id="nextDateInput"
          class="bg-transparent text-[10px] text-slate-600 text-center w-24 outline-none"
        />
      </div>
    </div>
  </div>

  <script>
    // --- Translation Data ---
    const TRANSLATIONS = {
      'th': {
        title: "เซียนกุ้งลาดพร้าว",
        subtitle: "AI ทำนายผล คู่/คี่",
        reset: "ล้างข้อมูล",
        introTitle: "ระบบคำนวณดวงเกมตกกุ้ง",
        introText: "ระบบ AI ผสานศาสตร์ปาจื้อและชี่เหมินตุ้นเจี๋ย วิเคราะห์เกมชั่งน้ำหนักกุ้งลาดพร้าว คำนวณดัชนีโชคลาภและฟันธง 'คู่' หรือ 'คี่' ตามเวลาจริง",
        apiKeyLabel: "1. ใส่คีย์สมอง (OpenAI API)",
        apiKeyPlaceholder: "sk-...",
        apiKeyNote: "*คีย์ใช้ส่งข้อมูลหา AI เท่านั้น ไม่มีการบันทึก",
        userInfoLabel: "2. ข้อมูลเจ้าชะตา (กรอกครั้งเดียว)",
        nameLabel: "ชื่อเล่น",
        genderLabel: "เพศ",
        male: "ชาย",
        female: "หญิง",
        birthDateLabel: "วันเกิด",
        birthTimeLabel: "เวลาเกิด",
        birthCityLabel: "จังหวัดเกิด",
        birthCityPlaceholder: "กทม.",
        targetLabel: "3. เริ่มทำนายรอบแรก",
        targetDateLabel: "วันที่เล่น",
        targetQuestionLabel: "เวลาที่จะแทง",
        advancedSettings: "ตั้งค่า AI (ขั้นสูง)",
        restoreDefault: "คืนค่าเดิม",
        startAnalysis: "วิเคราะห์ผล (คู่/คี่)",
        loading: "AI กำลังคำนวณดวง...",
        reportTitle: "ผลการทำนาย",
        errorApiKey: "ต้องใส่ API Key ก่อนครับ",
        errorInfo: "กรุณากรอกวันเวลาเกิดให้ครบ",
        aiRole: "หมอดู AI",
        initialGreeting: (name) => `สวัสดีคุณ ${name} ได้รับข้อมูลดวงชะตาแล้ว กำลังเชื่อมต่อจักรวาล...`,
        nextRoundTitle: "รอบถัดไป?",
        nextRoundDesc: "ดวงเดิม เปลี่ยนแค่เวลาแทง",
        predictNext: "ทำนายรอบใหม่"
      },
      'zh-TW': {
        title: "曼谷運勢智囊",
        subtitle: "OpenAI GPT 驅動 - 釣蝦場單雙預測",
        reset: "重置",
        introTitle: "命理融合預測系統",
        introText: "本系統結合八字與奇門遁甲，專門針對曼谷 Ladprao 釣蝦場的秤重遊戲進行分析。AI 將計算您的偏財指數與最佳下注策略（單/雙）。",
        apiKeyLabel: "1. OpenAI API 金鑰",
        apiKeyPlaceholder: "sk-...",
        apiKeyNote: "*您的 Key 不會被儲存。",
        userInfoLabel: "2. 命主資料",
        nameLabel: "暱稱",
        genderLabel: "性別",
        male: "男",
        female: "女",
        birthDateLabel: "出生日期",
        birthTimeLabel: "出生時間",
        birthCityLabel: "出生地",
        birthCityPlaceholder: "曼谷",
        targetLabel: "3. 首次預測",
        targetDateLabel: "日期",
        targetQuestionLabel: "下注時間",
        advancedSettings: "進階設定",
        restoreDefault: "恢復預設",
        startAnalysis: "開始預測",
        loading: "正在計算...",
        reportTitle: "預測報告",
        errorApiKey: "請輸入 API Key。",
        errorInfo: "請填寫完整資訊。",
        aiRole: "AI",
        initialGreeting: (name) => `您好 ${name}，資料已確認，正在推算...`,
        nextRoundTitle: "下一輪預測?",
        nextRoundDesc: "保留命盤，僅修改時間",
        predictNext: "預測新時間"
      },
      'en': {
        title: "Ladprao Oracle",
        subtitle: "Shrimp Game AI Prediction",
        reset: "Reset",
        introTitle: "Prediction System",
        introText: "Combines BaZi and QiMen DunJia to analyze the Ladprao Shrimp weighing game. AI calculates Odd/Even strategy based on time.",
        apiKeyLabel: "1. OpenAI API Key",
        apiKeyPlaceholder: "sk-...",
        apiKeyNote: "*Key is not stored.",
        userInfoLabel: "2. Your Details",
        nameLabel: "Name",
        genderLabel: "Gender",
        male: "Male",
        female: "Female",
        birthDateLabel: "Birth Date",
        birthTimeLabel: "Birth Time",
        birthCityLabel: "Birth City",
        birthCityPlaceholder: "Bangkok",
        targetLabel: "3. First Bet",
        targetDateLabel: "Game Date",
        targetQuestionLabel: "Bet Time",
        advancedSettings: "Advanced",
        restoreDefault: "Default",
        startAnalysis: "Predict Odd/Even",
        loading: "Calculating...",
        reportTitle: "Report",
        errorApiKey: "API Key required.",
        errorInfo: "Incomplete Info.",
        aiRole: "AI",
        initialGreeting: (name) => `Hello ${name}, calculating your luck...`,
        nextRoundTitle: "Next Round?",
        nextRoundDesc: "Same person, new time",
        predictNext: "Predict Next"
      }
    };

    // --- System Prompts ---
    const SYSTEM_PROMPTS = {
      'th': `คุณคือปรมาจารย์โหราศาสตร์ (ปาจื้อและชี่เหมินตุ้นเจี๋ย) หน้าที่ของคุณคือวิเคราะห์ดวงโชคลาภสำหรับเกมเสี่ยงโชค

โปรดปฏิบัติตามตรรกะนี้:

[ตรรกะการวิเคราะห์]
1. คำนวณธาตุให้คุณและดาวโชคลาภในเรือนทรัพย์สินจากวันเกิด
2. **วิเคราะห์เกม**: นี่คือเกมที่บ่อตกกุ้งลาดพร้าว กรุงเทพฯ หลัง 20:00 น. จะมีการชั่งน้ำหนักกุ้ง 9 ตัว ให้ทายเลขท้ายน้ำหนักว่า "คี่" หรือ "คู่"
   - คี่ (Odd) = ปุ่มสีแดง
   - คู่ (Even) = ปุ่มสีน้ำเงิน
3. คุณต้องคำนวณ "ดัชนีโชคลาภ" ของผู้ใช้ ณ เวลาที่ระบุ และฟันธงว่าเวลานี้ ควรแทง "คี่" หรือ "คู่"

[รูปแบบการตอบกลับ - ห้ามเยิ่นเย้อ]
1. **เวลา**: [เวลาที่ถาม]
2. **ดัชนีโชค**: (0-100%)
3. **ฟันธง**: 🔴 คี่ (RED) หรือ 🔵 คู่ (BLUE) (เลือก 1 อย่างเท่านั้นให้ชัดเจน)
4. **เคล็ดลับสั้นๆ**: ทิศที่ควรนั่ง หรือ สีเสื้อเสริมดวง`,

      'zh-TW': `你是一位精通「八字」與「奇門遁甲」的大師。針對曼谷 Ladprao 釣蝦場秤重遊戲進行單雙預測。
  
遊戲規則：晚上8點後，秤9隻蝦，猜尾數單雙。
請根據用戶提供的出生資料與下注時間，計算當下的偏財運。

【輸出格式 - 請簡潔】
1. **下注時間**: [時間]
2. **偏財指數**: (0-100%)
3. **建議選擇**: 🔴 單 (RED) 或 🔵 雙 (BLUE)
4. **簡短建議**: 吉祥方位或顏色`,

      'en': `You are an Astrology Master. Analyze luck for the Ladprao Shrimp Weighing Game (Odd/Even betting) using BaZi and QiMen DunJia.
Based on birth data and betting time, calculate the windfall luck.

[Output Format - Be Concise]
1. **Time**: [Target Time]
2. **Luck Index**: (0-100%)
3. **Prediction**: 🔴 ODD (RED) or 🔵 EVEN (BLUE)
4. **Tip**: Lucky direction or color`
    };

    // --- App State ---
    let state = {
      lang: 'th',
      step: 'input',
      gender: 'male',
      chatHistory: [],
      loading: false,
      demoMode: false
    };

    // --- DOM Elements ---
    const $ = (id) => document.getElementById(id);

    // Set today's date as default
    const todayDate = new Date().toISOString().split('T')[0];
    $('targetDateInput').value = todayDate;
    $('nextDateInput').value = todayDate;
    $('systemPromptInput').value = SYSTEM_PROMPTS['th'];

    // --- Update UI based on language ---
    function updateLanguage() {
      const t = TRANSLATIONS[state.lang];
      
      $('headerTitle').textContent = t.title;
      $('headerSubtitle').textContent = t.subtitle;
      $('introTitle').textContent = t.introTitle;
      $('introText').textContent = t.introText;
      $('apiKeyLabel').textContent = t.apiKeyLabel;
      $('apiKeyInput').placeholder = t.apiKeyPlaceholder;
      $('apiKeyNote').textContent = t.apiKeyNote;
      $('userInfoLabel').textContent = t.userInfoLabel;
      $('nameLabelEl').textContent = t.nameLabel;
      $('genderLabelEl').textContent = t.genderLabel;
      $('maleBtn').textContent = t.male;
      $('femaleBtn').textContent = t.female;
      $('birthDateLabelEl').textContent = t.birthDateLabel;
      $('birthTimeLabelEl').textContent = t.birthTimeLabel;
      $('birthCityLabelEl').textContent = t.birthCityLabel;
      $('birthCityInput').placeholder = t.birthCityPlaceholder;
      $('targetLabel').textContent = t.targetLabel;
      $('advancedText').textContent = t.advancedSettings;
      $('restoreDefaultBtn').textContent = t.restoreDefault;
      $('startBtnText').textContent = t.startAnalysis;
      $('loadingText').textContent = t.loading;
      $('nextRoundTitle').textContent = t.nextRoundTitle;
      $('nextRoundDesc').textContent = t.nextRoundDesc;
      $('predictNextText').textContent = t.predictNext;
      
      $('systemPromptInput').value = SYSTEM_PROMPTS[state.lang];
    }

    // --- Render chat messages ---
    function renderContent(text) {
      return text.split('\n').map(line => {
        if (line.includes('🔴') || line.includes('คี่') || line.includes('ODD') || line.includes('單')) {
          return `<div class="bg-red-500/20 border border-red-500/50 text-red-100 p-3 rounded-xl my-2 font-bold text-lg text-center shadow-[0_0_15px_rgba(239,68,68,0.3)]">${line}</div>`;
        }
        if (line.includes('🔵') || line.includes('คู่') || line.includes('EVEN') || line.includes('雙')) {
          return `<div class="bg-blue-500/20 border border-blue-500/50 text-blue-100 p-3 rounded-xl my-2 font-bold text-lg text-center shadow-[0_0_15px_rgba(59,130,246,0.3)]">${line}</div>`;
        }
        if (line.startsWith('**')) {
          return `<p class="font-bold text-amber-400 mt-2">${line.replace(/\*\*/g, '')}</p>`;
        }
        return `<p class="mb-1">${line}</p>`;
      }).join('');
    }

    function renderChat() {
      const t = TRANSLATIONS[state.lang];
      const container = $('chatMessages');
      container.innerHTML = state.chatHistory.map((msg, idx) => {
        if (msg.role === 'assistant') {
          return `
            <div class="flex justify-start animate-fade-slide" style="animation-delay: ${idx * 0.1}s">
              <div class="max-w-[90%] bg-slate-800 border border-white/10 rounded-2xl rounded-tl-none p-4 shadow-md">
                <div class="flex items-center gap-2 mb-2 border-b border-white/5 pb-2">
                  <div class="w-5 h-5 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-[8px] font-bold">AI</div>
                  <span class="text-xs font-bold text-purple-300">${t.reportTitle}</span>
                </div>
                <div class="text-sm text-slate-200 leading-relaxed">${renderContent(msg.content)}</div>
              </div>
            </div>
          `;
        } else {
          return `
            <div class="flex justify-end animate-fade-slide">
              <div class="max-w-[80%] bg-orange-600 text-white rounded-2xl rounded-tr-none p-3 shadow-md text-sm">
                ${msg.content}
              </div>
            </div>
          `;
        }
      }).join('');
      
      // Scroll to bottom
      setTimeout(() => {
        $('chatEnd').scrollIntoView({ behavior: 'smooth' });
      }, 100);
    }

    // --- Generate Demo Response ---
    function generateDemoResponse(targetTime, name) {
      const isOdd = Math.random() > 0.5;
      const luckIndex = Math.floor(Math.random() * 40) + 55; // 55-95%
      const directions = ['ทิศตะวันออก', 'ทิศเหนือ', 'ทิศใต้', 'ทิศตะวันตก'];
      const colors = ['สีแดง', 'สีทอง', 'สีเขียว', 'สีขาว'];
      const dir = directions[Math.floor(Math.random() * directions.length)];
      const color = colors[Math.floor(Math.random() * colors.length)];
      
      if (state.lang === 'th') {
        return `**เวลา**: ${targetTime}

**ดัชนีโชค**: ${luckIndex}%

**ฟันธง**: ${isOdd ? '🔴 คี่ (RED)' : '🔵 คู่ (BLUE)'}

**เคล็ดลับ**: ควรนั่ง${dir} สวมเสื้อ${color}เสริมดวง

⚠️ *นี่คือโหมดทดสอบ - ผลลัพธ์สุ่มเพื่อทดสอบ UI*`;
      } else if (state.lang === 'en') {
        return `**Time**: ${targetTime}

**Luck Index**: ${luckIndex}%

**Prediction**: ${isOdd ? '🔴 ODD (RED)' : '🔵 EVEN (BLUE)'}

**Tip**: Face East, wear golden colors

⚠️ *Demo Mode - Random result for UI testing*`;
      } else {
        return `**下注時間**: ${targetTime}

**偏財指數**: ${luckIndex}%

**建議選擇**: ${isOdd ? '🔴 單 (RED)' : '🔵 雙 (BLUE)'}

**簡短建議**: 面向東方，穿戴金色

⚠️ *測試模式 - 隨機結果*`;
      }
    }

    // --- API Call ---
    async function startAnalysis(isNewRound = false) {
      const t = TRANSLATIONS[state.lang];
      const apiKey = $('apiKeyInput').value;
      const demoMode = $('demoModeToggle').checked;
      const name = $('nameInput').value;
      const birthDate = $('birthDateInput').value;
      const birthTime = $('birthTimeInput').value;
      const birthCity = $('birthCityInput').value;
      const targetDate = isNewRound ? $('nextDateInput').value : $('targetDateInput').value;
      const targetTime = isNewRound ? $('nextTimeInput').value : $('targetTimeInput').value;
      
      if (!demoMode && !apiKey) return alert(t.errorApiKey);
      if (!name || !birthDate) return alert(t.errorInfo);

      // Switch to chat view
      state.step = 'chatting';
      $('inputStep').classList.add('hidden');
      $('chatStep').classList.remove('hidden');
      $('resetBtn').classList.remove('hidden');
      $('bottomBar').classList.add('hidden');
      
      state.loading = true;
      $('loadingIndicator').classList.remove('hidden');
      $('loadingIndicator').classList.add('flex');

      // Add greeting or user message
      if (!isNewRound && state.chatHistory.length === 0) {
        state.chatHistory.push({
          role: 'assistant',
          content: t.initialGreeting(name)
        });
      } else {
        state.chatHistory.push({
          role: 'user',
          content: `${t.targetQuestionLabel}: ${targetTime}`
        });
      }
      renderChat();

      // Sync date inputs
      $('nextDateInput').value = targetDate;
      $('nextTimeInput').value = targetTime;

      const userPrompt = `
        [Target Request]
        Analyze luck for Shrimp Game using QiMen DunJia.
        Target Date: ${targetDate}
        Target Time: ${targetTime}

        [User Info]
        Name: ${name}
        Gender: ${state.gender}
        Birth: ${birthDate} ${birthTime} @ ${birthCity}
      `;

      const systemPrompt = $('systemPromptInput').value;

      // Demo Mode - use mock response
      if (demoMode) {
        await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate delay
        const demoResponse = generateDemoResponse(targetTime, name);
        state.chatHistory.push({ role: 'assistant', content: demoResponse });
        state.loading = false;
        $('loadingIndicator').classList.add('hidden');
        $('loadingIndicator').classList.remove('flex');
        $('bottomBar').classList.remove('hidden');
        renderChat();
        return;
      }

      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout

        // ✅ CHANGED TO OPENAI OFFICIAL ENDPOINT
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            model: "gpt-4o-mini", // ✅ Use a real, available OpenAI model
            messages: [
              { role: "system", content: systemPrompt },
              { role: "user", content: userPrompt }
            ],
            temperature: 1.3,
            stream: false
          }),
          signal: controller.signal
        });

        clearTimeout(timeoutId);

        if (!response.ok) {
          const errorData = await response.json().catch(() => ({}));
          throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        if (data.error) throw new Error(data.error.message);

        const aiResponse = data.choices[0].message.content;
        state.chatHistory.push({ role: 'assistant', content: aiResponse });

      } catch (error) {
        let errorMsg = error.message;
        if (error.name === 'AbortError') {
          errorMsg = state.lang === 'th' ? 'หมดเวลาเชื่อมต่อ กรุณาลองใหม่' : 'Connection timeout. Please try again.';
        } else if (error.message === 'Failed to fetch' || error.message.includes('load failed')) {
          errorMsg = state.lang === 'th' 
            ? '❌ ไม่สามารถเชื่อมต่อ OpenAI API ได้\n\nสาเหตุที่เป็นไปได้:\n1. API Key ไม่ถูกต้องหรือไม่มีสิทธิ์ใช้งาน gpt-4o-mini\n2. ปัญหาการเชื่อมต่ออินเทอร์เน็ต\n3. OpenAI API มีปัญหาชั่วคราว\n\n💡 โปรดตรวจสอบ API Key ที่ https://platform.openai.com หรือใช้โหมดทดสอบแทน'
            : '❌ Cannot connect to OpenAI API\n\nPossible causes:\n1. Invalid/insufficient-permission API Key\n2. Network issue\n3. OpenAI service down\n\n💡 Check your key at https://platform.openai.com หรือใช้โหมดทดสอบแทน';
        }
        state.chatHistory.push({ role: 'assistant', content: errorMsg });
      } finally {
        state.loading = false;
        $('loadingIndicator').classList.add('hidden');
        $('loadingIndicator').classList.remove('flex');
        $('bottomBar').classList.remove('hidden');
        renderChat();
      }
    }

    // --- Reset App ---
    function resetApp() {
      state.step = 'input';
      state.chatHistory = [];
      $('inputStep').classList.remove('hidden');
      $('chatStep').classList.add('hidden');
      $('resetBtn').classList.add('hidden');
      $('bottomBar').classList.add('hidden');
      $('chatMessages').innerHTML = '';
    }

    // --- Event Listeners ---
    $('langBtn').addEventListener('click', () => {
      const langs = ['th', 'en', 'zh-TW'];
      const idx = langs.indexOf(state.lang);
      state.lang = langs[(idx + 1) % langs.length];
      updateLanguage();
    });

    $('maleBtn').addEventListener('click', () => {
      state.gender = 'male';
      $('maleBtn').className = 'flex-1 rounded-md text-xs bg-blue-600 text-white transition-colors';
      $('femaleBtn').className = 'flex-1 rounded-md text-xs text-slate-500 transition-colors';
    });

    $('femaleBtn').addEventListener('click', () => {
      state.gender = 'female';
      $('femaleBtn').className = 'flex-1 rounded-md text-xs bg-pink-600 text-white transition-colors';
      $('maleBtn').className = 'flex-1 rounded-md text-xs text-slate-500 transition-colors';
    });

    $('advancedToggle').addEventListener('click', () => {
      const panel = $('advancedPanel');
      const chevron = $('advancedChevron');
      panel.classList.toggle('hidden');
      chevron.style.transform = panel.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
    });

    $('restoreDefaultBtn').addEventListener('click', () => {
      $('systemPromptInput').value = SYSTEM_PROMPTS[state.lang];
    });

    $('startBtn').addEventListener('click', () => startAnalysis(false));
    $('predictNextBtn').addEventListener('click', () => startAnalysis(true));
    $('resetBtn').addEventListener('click', resetApp);

    // Initialize
    updateLanguage();
  </script>
</body>
</html>