<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Smart Study Planner</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .cell-free {
      background-color: #2563eb !important;
      color: white !important;
      font-weight: bold;
    }
  </style>
</head>
<body class="bg-slate-100 text-slate-800 min-h-screen p-3 max-w-md mx-auto select-none flex flex-col justify-between">

  <!-- Header -->
  <header class="text-center py-1 mb-2">
    <div class="flex items-center justify-between">
      <span class="text-xs font-bold px-2 py-0.5 rounded bg-blue-100 text-blue-700" id="stateBadge">SETUP WIZARD</span>
      <h1 class="text-base font-bold text-slate-800">Adaptive Study Planner</h1>
      <span class="text-[10px] text-slate-400">ESP-12S Ready</span>
    </div>
  </header>

  <!-- ================= WIZARD CONTAINER ================= -->
  <main id="wizardContainer" class="space-y-3">

    <!-- STEP 1: ปฏิทินเวลาว่าง -->
    <div id="step1" class="step-card bg-white p-3.5 rounded-2xl shadow-sm border border-slate-200">
      <div class="flex justify-between items-center mb-2">
        <div>
          <span class="text-[10px] font-bold text-blue-600 uppercase tracking-wider">ขั้นตอนที่ 1 จาก 3</span>
          <h2 class="text-sm font-bold text-slate-800">กำหนดเวลาว่างต่อสัปดาห์</h2>
        </div>
        <span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-bold">
          ว่าง <span id="totalWeeklyHoursLabel">0</span> ชม./สัปดาห์
        </span>
      </div>
      <p class="text-[11px] text-slate-400 mb-2">แตะช่องตารางเพื่อเลือก/ยกเลิกเวลาว่าง (05:00 - 23:00 น.)</p>

      <div class="border border-slate-200 rounded-lg overflow-hidden bg-slate-50">
        <div class="grid grid-cols-8 bg-slate-100 border-b border-slate-200 text-center font-bold text-[10px] text-slate-600 py-1.5">
          <div class="text-slate-400">เวลา</div>
          <div class="text-rose-600">อา</div>
          <div>จ</div>
          <div>อ</div>
          <div>พ</div>
          <div>พฤ</div>
          <div>ศ</div>
          <div class="text-blue-600">ส</div>
        </div>
        <div id="timetableBody" class="divide-y divide-slate-100 bg-white text-[9px]"></div>
      </div>
    </div>

    <!-- STEP 2: รายวิชา -->
    <div id="step2" class="step-card hidden bg-white p-4 rounded-2xl shadow-sm border border-slate-200">
      <span class="text-[10px] font-bold text-blue-600 uppercase tracking-wider">ขั้นตอนที่ 2 จาก 3</span>
      <h2 class="text-sm font-bold text-slate-800 mb-2">เพิ่มรายวิชาและเป้าหมาย</h2>
      
      <div class="space-y-2 mb-3">
        <input type="text" id="subjectName" placeholder="ชื่อวิชา (เช่น Math, Physics)" class="w-full p-2 border rounded-lg text-xs bg-slate-50 outline-none focus:ring-1 focus:ring-blue-500">
        <div class="grid grid-cols-2 gap-2">
          <input type="number" id="targetHours" placeholder="เป้าหมาย (ชม.)" class="p-2 border rounded-lg text-xs bg-slate-50 outline-none focus:ring-1 focus:ring-blue-500">
          <select id="subjectType" class="p-2 border rounded-lg text-xs bg-slate-50 outline-none">
            <option value="PRACTICE">วิชาคำนวณ (Practice)</option>
            <option value="MEMORY">วิชาท่องจำ (Memory)</option>
          </select>
        </div>
        <button onclick="addSubject()" class="w-full bg-blue-600 text-white py-2 rounded-lg text-xs font-bold hover:bg-blue-700 transition">เพิ่มวิชา</button>
      </div>

      <div id="subjectList" class="space-y-1.5"></div>
    </div>

    <!-- STEP 3: ตรวจสอบแผน & ผลสรุปตารางสี -->
    <div id="step3" class="step-card hidden bg-white p-4 rounded-2xl shadow-sm border border-slate-200 space-y-3">
      <div>
        <span class="text-[10px] font-bold text-blue-600 uppercase tracking-wider">ขั้นตอนที่ 3 จาก 3</span>
        <h2 class="text-sm font-bold text-slate-800">กำหนดวันสอบ & ตรวจสอบแผน</h2>
      </div>
      
      <div class="space-y-2">
        <div>
          <label class="text-[11px] text-slate-500 font-medium">วันเริ่มสอบ Final:</label>
          <input type="date" id="examDate" value="2026-12-20" onchange="calculateStep3()" class="w-full p-2 border rounded-lg text-xs mt-1 bg-slate-50 outline-none">
        </div>
        <div>
          <label class="text-[11px] text-slate-500 font-medium">Google Apps Script Web App URL:</label>
          <input type="url" id="gasUrlInput" value="https://script.google.com/macros/s/AKfycbwuWYx8x-x2SzQOmzrr7DV48QbbLD3zvCFjTLQKiuWb9-BpEC2fZSWVU57Z9McuohfF/exec" class="w-full p-2 border rounded-lg text-xs mt-1 bg-slate-50 outline-none focus:ring-1 focus:ring-blue-500">
        </div>
      </div>

      <!-- กล่องสรุปผลเขียว/แดง -->
      <div id="calculationResult" class="text-xs"></div>

      <!-- ตารางสีสรุปผล -->
      <div id="calculatedGridContainer" class="border border-slate-200 rounded-lg overflow-hidden bg-slate-50">
        <div class="grid grid-cols-8 bg-slate-100 border-b border-slate-200 text-center font-bold text-[10px] text-slate-600 py-1.5">
          <div class="text-slate-400">เวลา</div>
          <div class="text-rose-600">อา</div>
          <div>จ</div>
          <div>อ</div>
          <div>พ</div>
          <div>พฤ</div>
          <div>ศ</div>
          <div class="text-blue-600">ส</div>
        </div>
        <div id="assignedTimetableBody" class="divide-y divide-slate-100 bg-white text-[8px]"></div>
      </div>
    </div>

    <!-- ปุ่มควบคุม 3 หน้า -->
    <div class="flex gap-2 pt-2 sticky bottom-2 bg-slate-100/90 backdrop-blur-sm py-2">
      <button id="prevBtn" onclick="stepBack()" class="w-1/3 bg-slate-200 text-slate-700 py-2.5 rounded-xl text-xs font-bold hidden">ย้อนกลับ</button>
      <button id="nextBtn" onclick="stepNext()" class="w-full bg-blue-600 text-white py-2.5 rounded-xl text-xs font-bold hover:bg-blue-700 shadow-sm transition">ถัดไป</button>
      <button id="activateBtn" onclick="activatePlan()" class="w-full bg-emerald-600 text-white py-2.5 rounded-xl text-xs font-bold hover:bg-emerald-700 shadow-sm transition hidden">บันทึกลง Calendar & เริ่มใช้งาน</button>
    </div>
  </main>

  <!-- ================= DASHBOARD CONTAINER ================= -->
  <main id="dashboardContainer" class="hidden space-y-3 my-auto">
    <div id="recoveryWarning" class="hidden bg-rose-50 border border-rose-200 p-3 rounded-2xl text-xs text-rose-800">
      <div class="flex items-center gap-2 font-bold mb-1">
        <span>⚠️ ตรวจพบชั่วโมงค้าง (Study Debt)</span>
      </div>
      <p class="text-[11px] text-rose-600 leading-tight mb-2">คุณอ่านไม่ครบตามแผนสะสม <b id="debtHoursLabel">0</b> ชม. ต้องการให้ระบบปรับแผนใหม่หรือไม่?</p>
      <button onclick="triggerAutoRecovery()" class="w-full bg-rose-600 text-white py-1.5 rounded-lg text-xs font-bold hover:bg-rose-700">คำนวณเกลี่ยชั่วโมงใหม่ (Auto Re-schedule)</button>
    </div>

    <div class="bg-gradient-to-br from-blue-600 to-indigo-700 text-white p-4 rounded-2xl shadow-sm">
      <div class="flex justify-between items-start mb-2">
        <span class="text-[10px] uppercase font-bold tracking-widest bg-white/20 px-2 py-0.5 rounded">ESP-12S Status</span>
        <span class="text-xs flex items-center gap-1 font-semibold text-emerald-300">● Wi-Fi Connected</span>
      </div>
      <div class="text-xs text-blue-100">คาบถัดไปที่ต้องอ่าน:</div>
      <div class="text-xl font-black mt-0.5" id="nextSessionTitle">Math (คำนวณ)</div>
      <div class="text-xs text-blue-200 mt-1">เวลา 18:00 - 19:00 น. | กดปุ่มบน ESP-12S เพื่อเริ่ม</div>
    </div>

    <div class="bg-white p-3.5 rounded-2xl shadow-sm border border-slate-200">
      <h3 class="text-xs font-bold text-slate-700 mb-2">ความคืบหน้าสะสมรายวิชา</h3>
      <div id="subjectProgressList" class="space-y-2"></div>
    </div>

    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-[10px] space-y-1.5 text-slate-500">
      <div class="font-bold text-slate-600">เครื่องมือจำลองสถานะ (สำหรับพรีเซนต์):</div>
      <div class="grid grid-cols-2 gap-1.5">
        <button onclick="simulateESP32Complete()" class="bg-emerald-100 text-emerald-700 p-1.5 rounded font-bold hover:bg-emerald-200">จำลอง: ESP-12S อ่านครบ 1 ชม.</button>
        <button onclick="simulateMissedSession()" class="bg-rose-100 text-rose-700 p-1.5 rounded font-bold hover:bg-rose-200">จำลอง: พลาดอ่าน (เกิด Debt)</button>
      </div>
      <button onclick="resetToWizard()" class="w-full bg-slate-200 text-slate-600 py-1 rounded font-medium hover:bg-slate-300">แก้ไขแผนการอ่านใหม่ (Reset)</button>
    </div>
  </main>

  <footer class="text-center text-[10px] text-slate-400 py-1">
    Adaptive Study Planner • Hardware-First Focus System
  </footer>

  <script src="app.js"></script>
</body>
</html>