/* ============================================================
   booking.jsx — multi-step trial-class booking flow
   ============================================================ */

const SUBJECTS = [
  { id: "piano",  name: "เปียโน",   en: "Piano",  ic: "♪" },
  { id: "vocal",  name: "ร้องเพลง", en: "Vocal",  ic: "♫" },
  { id: "dance",  name: "เต้น",     en: "Dance",  ic: "✦" },
  { id: "drums",  name: "กลอง",     en: "Drums",  ic: "◉" },
  { id: "guitar", name: "กีตาร์",   en: "Guitar", ic: "♭" },
  { id: "acting", name: "การแสดง",  en: "Acting", ic: "✺" },
];

const AGES = [
  { id: "kid",   name: "เด็กเล็ก", desc: "อายุ 4 – 9 ปี" },
  { id: "teen",  name: "เด็กโต",   desc: "อายุ 10 – 17 ปี" },
  { id: "adult", name: "ผู้ใหญ่",  desc: "อายุ 18 ปีขึ้นไป" },
];

const SLOTS = [
  { id: "mon-pm",  day: "จันทร์",   time: "17:00 – 17:50" },
  { id: "tue-pm",  day: "อังคาร",   time: "16:00 – 16:50" },
  { id: "wed-pm",  day: "พุธ",      time: "18:00 – 18:50" },
  { id: "thu-pm",  day: "พฤหัส",    time: "17:00 – 17:50" },
  { id: "fri-pm",  day: "ศุกร์",    time: "19:00 – 19:50" },
  { id: "sat-am",  day: "เสาร์",    time: "10:00 – 10:50" },
  { id: "sat-pm",  day: "เสาร์",    time: "14:00 – 14:50" },
  { id: "sun-am",  day: "อาทิตย์",  time: "11:00 – 11:50" },
  { id: "sun-pm",  day: "อาทิตย์",  time: "15:00 – 15:50" },
];

function BookingFlow({ presetSubject, onClose }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    subject: presetSubject || "",
    age: "",
    slot: "",
    name: "",
    phone: "",
    email: "",
    note: "",
  });
  const [done, setDone] = React.useState(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const steps = [
    {
      title: "อยากเรียนวิชาอะไร?",
      sub: "เลือกวิชาที่สนใจ — เปลี่ยนทีหลังได้",
      content: (
        <div className="option-grid">
          {SUBJECTS.map(s => (
            <button key={s.id} className={`option-card ${data.subject === s.id ? "selected" : ""}`} onClick={() => update("subject", s.id)}>
              <div className="opt-ic">{s.ic}</div>
              <div className="opt-name">{s.name}</div>
              <div className="opt-desc">{s.en}</div>
            </button>
          ))}
        </div>
      ),
      canNext: !!data.subject,
    },
    {
      title: "ผู้เรียนเป็นใคร?",
      sub: "เพื่อให้ครูเตรียมเนื้อหาให้เหมาะกับวัย",
      content: (
        <div className="option-grid">
          {AGES.map(a => (
            <button key={a.id} className={`option-card ${data.age === a.id ? "selected" : ""}`} onClick={() => update("age", a.id)}>
              <div className="opt-name">{a.name}</div>
              <div className="opt-desc">{a.desc}</div>
            </button>
          ))}
        </div>
      ),
      canNext: !!data.age,
    },
    {
      title: "เลือกเวลาที่สะดวก",
      sub: "เลือกได้มากกว่าหนึ่งช่วงเวลา (เจ้าหน้าที่จะยืนยันทาง LINE)",
      content: (
        <div className="option-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
          {SLOTS.map(s => (
            <button key={s.id} className={`option-card ${data.slot === s.id ? "selected" : ""}`} onClick={() => update("slot", s.id)} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-thai-display)", fontSize: 18 }}>{s.day}</div>
              <div className="opt-desc">{s.time}</div>
            </button>
          ))}
        </div>
      ),
      canNext: !!data.slot,
    },
    {
      title: "ข้อมูลติดต่อ",
      sub: "เก็บไว้แค่เพื่อยืนยันการนัด — เราไม่ส่งโฆษณา",
      content: (
        <div>
          <div className="field-row">
            <div className="field">
              <label>ชื่อ-นามสกุล</label>
              <input value={data.name} onChange={e => update("name", e.target.value)} placeholder="เช่น คุณนิดา ใจดี" />
            </div>
            <div className="field">
              <label>เบอร์โทร</label>
              <input value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="08x-xxx-xxxx" />
            </div>
          </div>
          <div className="field">
            <label>อีเมล (ไม่บังคับ)</label>
            <input value={data.email} onChange={e => update("email", e.target.value)} placeholder="name@example.com" />
          </div>
          <div className="field">
            <label>หมายเหตุถึงครู (ไม่บังคับ)</label>
            <textarea value={data.note} onChange={e => update("note", e.target.value)} placeholder="เช่น ลูกเคยเรียนเปียโนมา 1 ปี, อยากเล่นเพลง..." style={{ minHeight: 100 }}></textarea>
          </div>
        </div>
      ),
      canNext: data.name.trim() && data.phone.trim().length >= 9,
    },
  ];

  const getCookie = (name) => {
    const match = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith(name + '='));
    return match ? match.split('=').slice(1).join('=') : '';
  };

  const submit = async () => {
    setDone(true);

    // Save locally
    try {
      const log = JSON.parse(localStorage.getItem("bm_bookings") || "[]");
      log.push({ ...data, ts: Date.now() });
      localStorage.setItem("bm_bookings", JSON.stringify(log));
    } catch (e) {}

    // Fire server-side CAPI Lead event (access token stays on server)
    try {
      await fetch('/api/track-conversion', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          eventName: 'Lead',
          eventSourceUrl: window.location.href,
          name: data.name,
          phone: data.phone,
          email: data.email,
          subject: data.subject,
          // Pass FB browser cookies for better match rate (hashed server-side)
          fbc: getCookie('_fbc'),
          fbp: getCookie('_fbp'),
        }),
      });
    } catch (e) {
      // Non-fatal — booking still completes even if CAPI fails
      console.warn('[Baanmari] CAPI event failed (non-fatal):', e);
    }
  };

  const subjectName = SUBJECTS.find(s => s.id === data.subject)?.name || "—";
  const ageName = AGES.find(a => a.id === data.age)?.name || "—";
  const slot = SLOTS.find(s => s.id === data.slot);

  if (done) {
    return (
      <div className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="booking-shell" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 64, color: "var(--accent)", lineHeight: 1 }}>✓</div>
          <h3 style={{ fontFamily: "var(--font-thai-display)", fontSize: 36, margin: "16px 0 8px", fontWeight: 500 }}>นัดทดลองเรียนเรียบร้อย</h3>
          <p style={{ color: "var(--ink-2)", margin: "0 0 28px" }}>
            ขอบคุณคุณ <strong>{data.name}</strong> เจ้าหน้าที่จะติดต่อกลับเพื่อยืนยันภายใน 24 ชม. ผ่านเบอร์ {data.phone}
          </p>
          <div className="booking-summary" style={{ textAlign: "left", marginBottom: 28 }}>
            <div className="summary-row"><span className="k">วิชา</span><span className="v">{subjectName}</span></div>
            <div className="summary-row"><span className="k">ผู้เรียน</span><span className="v">{ageName}</span></div>
            <div className="summary-row"><span className="k">เวลาที่ขอ</span><span className="v">{slot?.day} {slot?.time}</span></div>
          </div>
          <button className="btn btn-primary" onClick={onClose}>กลับสู่หน้าแรก</button>
        </div>
      </div>
    );
  }

  const current = steps[step];

  return (
    <div className="container" style={{ paddingTop: 64, paddingBottom: 80 }}>
      <button className="btn btn-ghost btn-sm" style={{ marginBottom: 24 }} onClick={onClose}>← กลับ</button>
      <div className="booking-shell">
        <div className="booking-progress">
          {steps.map((s, i) => (
            <div key={i} className={`progress-step ${i === step ? "active" : i < step ? "done" : ""}`}></div>
          ))}
        </div>
        <div className="step-meta">ขั้นตอน {step + 1} จาก {steps.length}</div>
        <div className="booking-step">
          <h3>{current.title}</h3>
          <p className="step-sub">{current.sub}</p>
          {current.content}
          <div className="booking-actions">
            {step > 0 ? (
              <button className="btn" onClick={() => setStep(step - 1)}>← ย้อนกลับ</button>
            ) : <span></span>}
            {step < steps.length - 1 ? (
              <button className="btn btn-primary" disabled={!current.canNext} onClick={() => current.canNext && setStep(step + 1)} style={{ opacity: current.canNext ? 1 : 0.5 }}>
                ต่อไป →
              </button>
            ) : (
              <button className="btn btn-accent" disabled={!current.canNext} onClick={() => current.canNext && submit()} style={{ opacity: current.canNext ? 1 : 0.5 }}>
                ยืนยันการนัด ✓
              </button>
            )}
          </div>
        </div>
        {step >= 2 && (
          <div style={{ marginTop: 28 }}>
            <div className="step-meta">สรุปการจอง</div>
            <div className="booking-summary">
              <div className="summary-row"><span className="k">วิชา</span><span className="v">{subjectName}</span></div>
              <div className="summary-row"><span className="k">ผู้เรียน</span><span className="v">{ageName}</span></div>
              {slot && <div className="summary-row"><span className="k">เวลาที่ขอ</span><span className="v">{slot.day} {slot.time}</span></div>}
              <div className="summary-row"><span className="k">ค่าทดลองเรียน</span><span className="v">ฟรี</span></div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BookingFlow });