/* global React */
// =============== Auto-update + reconnect — แอปอัปเดตตัวเองโดยไม่ต้อง refresh มือ ===============
const { useState: useVS, useEffect: useEVS } = React;

// ดึงเวอร์ชันล่าสุดที่ deploy (version.json → fallback อ่าน APP_BUILD จาก index.html)
async function vsFetchLatest() {
  try {
    const r = await fetch('version.json?t=' + Date.now(), { cache: 'no-store' });
    if (r.ok) {
      const j = await r.json();
      if (j && j.build) return String(j.build);
    }
  } catch {}
  try {
    const r = await fetch('index.html?t=' + Date.now(), { cache: 'no-store' });
    const t = await r.text();
    const m = t.match(/APP_BUILD\s*=\s*"([^"]+)"/);
    if (m) return m[1];
  } catch {}
  return null;
}

// hard reload จริง — flush ข้อมูลค้าง + ล้าง cache + โหลด HTML ใหม่ (เลี่ยง cache)
async function vsHardReload() {
  try { if (window.SSSSync && window.SSSSync.save) await window.SSSSync.save(); } catch {}
  try { if (window.caches) { const ks = await caches.keys(); await Promise.all(ks.map(k => caches.delete(k))); } } catch {}
  try {
    const u = new URL(location.href);
    u.searchParams.set('_r', Date.now().toString());
    location.replace(u.toString());
  } catch {
    location.reload();
  }
}

function UpdateBanner() {
  const [update, setUpdate] = useVS(false);
  const [count, setCount] = useVS(20);
  const [held, setHeld] = useVS(false);  // ค้างรอเพราะมีข้อมูลยังไม่บันทึก
  const [offline, setOffline] = useVS(false);

  // ── ตรวจเวอร์ชันใหม่ทุก 60 วิ + ตอนกลับมาที่แท็บ ──
  useEVS(() => {
    let alive = true;
    const check = async () => {
      const latest = await vsFetchLatest();
      if (!alive || !latest) return;
      if (window.APP_BUILD && latest !== window.APP_BUILD) setUpdate(true);
    };
    check();
    const iv = setInterval(check, 60000);
    const onVis = () => {
      if (document.visibilityState !== 'visible') return;
      check();
      // ผู้ใช้กลับมา → ดึงข้อมูลล่าสุดให้อัตโนมัติ (ไม่ต้อง refresh เอง)
      if (window.SSSSync && window.SSSSync.load) window.SSSSync.load();
    };
    document.addEventListener('visibilitychange', onVis);
    window.addEventListener('focus', onVis);
    return () => { alive = false; clearInterval(iv); document.removeEventListener('visibilitychange', onVis); window.removeEventListener('focus', onVis); };
  }, []);

  // ── ตรวจการเชื่อมต่อหลุด (ค้างเกิน 8 วิ) ──
  useEVS(() => {
    if (!window.SSSDBStatus) return;
    let t = null;
    const off = window.SSSDBStatus.on(s => {
      if (s.state === 'offline' || s.state === 'error') {
        if (!t) t = setTimeout(() => setOffline(true), 8000);
      } else {
        if (t) { clearTimeout(t); t = null; }
        setOffline(false);
      }
    });
    return () => { if (t) clearTimeout(t); off(); };
  }, []);

  // ── นับถอยหลัง auto-reload (หยุดรอถ้ายังมีข้อมูลค้างบันทึก) ──
  useEVS(() => {
    if (!update) return;
    const iv = setInterval(() => {
      const dirty = window.SSSSync && window.SSSSync.pending ? window.SSSSync.pending() : 0;
      if (dirty > 0) { setHeld(true); return; }   // ยังบันทึกไม่เสร็จ — รอ
      setHeld(false);
      setCount(c => {
        if (c <= 1) { clearInterval(iv); vsHardReload(); return 0; }
        return c - 1;
      });
    }, 1000);
    return () => clearInterval(iv);
  }, [update]);

  const bar = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, flexWrap: 'wrap',
    padding: '9px 16px', color: '#fff', fontSize: 13, fontWeight: 600,
    fontFamily: 'var(--font, sans-serif)', boxShadow: '0 2px 10px rgba(0,0,0,0.18)',
  };
  const btn = {
    background: 'rgba(255,255,255,0.95)', color: '#1a1430', border: 'none', borderRadius: 7,
    padding: '5px 14px', fontSize: 12.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
  };

  if (update) {
    return (
      <div style={{ ...bar, background: '#7c3aed' }}>
        <span>🚀 มีเวอร์ชันใหม่ของระบบ — {held ? 'กำลังบันทึกข้อมูลที่ค้างไว้ก่อนอัปเดต…' : `อัปเดตอัตโนมัติใน ${count} วินาที`}</span>
        <button style={btn} onClick={vsHardReload}>อัปเดตทันที</button>
      </div>
    );
  }
  if (offline) {
    return (
      <div style={{ ...bar, background: '#ef4444' }}>
        <span>⚠️ การเชื่อมต่อฐานข้อมูลหลุด — ข้อมูลอาจไม่ตรงกับเครื่องอื่น</span>
        <button style={btn} onClick={() => window.SSSSync && window.SSSSync.reconnect && window.SSSSync.reconnect()}>เชื่อมต่อใหม่</button>
        <button style={{ ...btn, background: 'rgba(0,0,0,0.25)', color: '#fff' }} onClick={vsHardReload}>รีเฟรชแอป</button>
      </div>
    );
  }
  return null;
}

window.UpdateBanner = UpdateBanner;