/**
 * RizQi Stamp — AI Chat Widget (versi pusat)
 * Host fail ni di SATU tempat sahaja (cth: https://rizqi.com.my/widget.js)
 * Semua website lain cuma perlu 1 baris untuk panggil fail ni:
 *
 *   <script src="https://rizqi.com.my/widget.js"></script>
 *
 * Letak baris tu sebelum </body> di setiap website.
 * Bila-bila anda nak update widget (design, teks, dll), edit SATU fail ni sahaja
 * — semua website yang panggil fail ni akan terus dapat versi terkini automatik.
 */
(function () {
  const WORKER_URL = 'https://chat-bot.rizqistamp.workers.dev'; // <-- Tukar jika Worker URL berubah

  // ---- Bina HTML widget ----
  const wrapper = document.createElement('div');
  wrapper.innerHTML = `
    <div id="rq-chat-bubble" style="position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;z-index:9999;cursor:pointer;">
      <span id="rq-chat-label" style="background:#B3382C;color:#fff;font-family:sans-serif;font-size:13px;font-weight:600;padding:9px 14px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,0.2);white-space:nowrap;">Chat dengan kami</span>
      <div style="width:58px;height:58px;border-radius:50%;background:#1E293B;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.25);flex-shrink:0;">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H8l-4.7 3.76A.5.5 0 0 1 2.5 20.5V6a2 2 0 0 1 2-2z" stroke="#FFFFFF" stroke-width="1.8" stroke-linejoin="round" fill="none"/>
        </svg>
      </div>
    </div>

    <div id="rq-chat-window" style="display:none;position:fixed;bottom:90px;right:20px;width:320px;max-width:90vw;height:440px;background:#FAF6EC;border:1px solid #DCD3BC;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,0.2);z-index:9999;flex-direction:column;overflow:hidden;font-family:sans-serif;">
      <div style="background:#1E293B;color:#fff;padding:12px 14px;font-weight:600;font-size:14px;">RizQi Stamp — Bantuan Pantas</div>

      <div id="rq-prechat" style="flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;">
        <p style="font-size:13px;color:#3D4A61;margin:0 0 4px;">Sila isi maklumat ringkas sebelum mula chat:</p>
        <input id="rq-name" type="text" placeholder="Nama anda" style="padding:9px 10px;border:1px solid #DCD3BC;border-radius:7px;font-size:13.5px;">
        <input id="rq-phone" type="tel" placeholder="No. WhatsApp (cth: 0139876543)" style="padding:9px 10px;border:1px solid #DCD3BC;border-radius:7px;font-size:13.5px;">
        <div id="rq-prechat-error" style="color:#B3382C;font-size:12px;display:none;">Sila isi nama dan no. WhatsApp yang sah.</div>
        <button id="rq-prechat-start" style="margin-top:6px;border:none;background:#B3382C;color:#fff;padding:10px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13.5px;">Mula Chat</button>
      </div>

      <div id="rq-chat-body" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
        <div id="rq-messages" style="flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;"></div>
        <div style="display:flex;border-top:1px solid #DCD3BC;">
          <input id="rq-input" type="text" placeholder="Taip mesej..." style="flex:1;border:none;padding:10px;font-size:13.5px;background:#fff;">
          <button id="rq-send" style="border:none;background:#B3382C;color:#fff;padding:0 16px;cursor:pointer;font-weight:600;">Hantar</button>
        </div>
      </div>
    </div>
  `;
  document.body.appendChild(wrapper);

  // ---- Logic (sama seperti sebelum ini) ----
  const sessionId = localStorage.getItem('rq-session') || 'sess-' + Math.random().toString(36).slice(2);
  localStorage.setItem('rq-session', sessionId);

  const bubble = document.getElementById('rq-chat-bubble');
  const win = document.getElementById('rq-chat-window');
  const preChat = document.getElementById('rq-prechat');
  const chatBody = document.getElementById('rq-chat-body');
  const nameInput = document.getElementById('rq-name');
  const phoneInput = document.getElementById('rq-phone');
  const prechatError = document.getElementById('rq-prechat-error');
  const startBtn = document.getElementById('rq-prechat-start');
  const msgBox = document.getElementById('rq-messages');
  const input = document.getElementById('rq-input');
  const sendBtn = document.getElementById('rq-send');

  bubble.onclick = () => { win.style.display = win.style.display === 'flex' ? 'none' : 'flex'; };

  function addMsg(text, who) {
    const div = document.createElement('div');
    div.textContent = text;
    div.style.cssText = who === 'user'
      ? 'align-self:flex-end;background:#1E293B;color:#fff;padding:8px 10px;border-radius:10px 10px 2px 10px;max-width:80%;'
      : 'align-self:flex-start;background:#fff;border:1px solid #DCD3BC;padding:8px 10px;border-radius:10px 10px 10px 2px;max-width:80%;';
    msgBox.appendChild(div);
    msgBox.scrollTop = msgBox.scrollHeight;
  }

  function isValidPhone(v) {
    const digits = v.replace(/[^0-9]/g, '');
    return digits.length >= 9 && digits.length <= 13;
  }

  function startChat(customerName, customerPhone) {
    localStorage.setItem('rq-name', customerName);
    localStorage.setItem('rq-phone', customerPhone);
    preChat.style.display = 'none';
    chatBody.style.display = 'flex';
    addMsg('Hai ' + customerName + '! Saya AI RizQi Stamp. Ada apa yang boleh saya bantu?', 'bot');
  }

  startBtn.onclick = () => {
    const nm = nameInput.value.trim();
    const ph = phoneInput.value.trim();
    if (!nm || !isValidPhone(ph)) {
      prechatError.style.display = 'block';
      return;
    }
    prechatError.style.display = 'none';
    startChat(nm, ph);
  };

  async function send() {
    const text = input.value.trim();
    if (!text) return;
    addMsg(text, 'user');
    input.value = '';
    try {
      const res = await fetch(WORKER_URL + '/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId,
          message: text,
          customerName: localStorage.getItem('rq-name') || '',
          customerPhone: localStorage.getItem('rq-phone') || ''
        })
      });
      const data = await res.json();
      if (data.reply) addMsg(data.reply, 'bot');
      if (data.handedOff) addMsg('Baik, saya sambungkan anda dengan staff kami sebentar ya.', 'bot');
    } catch (e) {
      addMsg('Maaf, ralat sambungan. Sila cuba lagi.', 'bot');
    }
  }

  sendBtn.onclick = send;
  input.addEventListener('keydown', e => { if (e.key === 'Enter') send(); });

  setInterval(async () => {
    try {
      const res = await fetch(WORKER_URL + '/api/poll?session=' + sessionId);
      const data = await res.json();
      (data.replies || []).forEach(r => addMsg(r, 'bot'));
    } catch (e) {}
  }, 4000);

  const savedName = localStorage.getItem('rq-name');
  const savedPhone = localStorage.getItem('rq-phone');
  if (savedName && savedPhone) {
    nameInput.value = savedName;
    phoneInput.value = savedPhone;
    startChat(savedName, savedPhone);
  }
})();