/* =========================================================================
   MIZUONE — APP ROUTER (state navigation, dark mode, saldo bersama)
   ========================================================================= */
/* hooks berasal dari aq-core.jsx (scope global) */
const W = window;
const _MZ_SB_URL  = 'https://vmdgameefagsofvwayfh.supabase.co';
const _MZ_SB_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZtZGdhbWVlZmFnc29mdndheWZoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzkwNzIxNDMsImV4cCI6MjA5NDY0ODE0M30.knlulx7Cl9ADUNc273hz3zb33cTt-iUSC47KNTQuFU0';

function DarkToggle({ dark, setDark }){
  return (
    <button onClick={()=>setDark(!dark)} aria-label="Ganti mode gelap/terang"
      className="fixed top-3 right-3 z-[60] w-11 h-11 grid place-items-center rounded-xl bg-white/90 dark:bg-slate-800 text-ink dark:text-slate-100 border border-slate-200/70 dark:border-slate-700 shadow-card backdrop-blur hover:scale-105 transition">
      {dark ? '☀️' : '🌙'}
    </button>
  );
}

function App(){
  const [screen, setScreen] = useState(()=> (W.AquAPI && W.AquAPI.hasToken()) ? 'digital-home' : 'landing');
  const [navSeq, setNavSeq] = useState(0);
  const [dark, setDark] = useState(false);
  const [mediaReady, setMediaReady] = useState(false);

  useEffect(()=>{
    try {
      const sb = window.supabase.createClient(_MZ_SB_URL, _MZ_SB_ANON);
      sb.from('media_config').select('key,url').then(({data})=>{
        if(data && data.length){ window.MZ_MEDIA = {}; data.forEach(r=>{ window.MZ_MEDIA[r.key]=r.url; }); }
        setMediaReady(true);
      }).catch(()=>setMediaReady(true));
    } catch(e){ setMediaReady(true); }
  },[]);

  const [digSaldo, setDigSaldo] = useState(0);
  const [kartuSaldo, setKartuSaldo] = useState(0);
  const [kartuCardNo, setKartuCardNo] = useState(null);
  const [lastBuy, setLastBuy] = useState({ liter:5, harga:5000 });
  const [lastTopupKartu, setLastTopupKartu] = useState(50000);
  const [lastDev, setLastDev] = useState('');
  const [toast, setToast] = useState('');
  const [user, setUser] = useState(null);
  const [struk, setStruk] = useState(null);
  const [subRet, setSubRet] = useState('digital-akun');
  const [subFlow, setSubFlow] = useState('digital');
  const cardNo = kartuCardNo;

  useEffect(()=>{ document.documentElement.classList.toggle('dark', dark); },[dark]);
  useEffect(()=>{ window.scrollTo({ top:0, behavior:'instant' in document.body.style ? 'instant':'auto' }); },[screen, navSeq]);

  const go = (s)=>{
    window.history.pushState({ screen: s }, '', '#' + s);
    setScreen(s);
    setNavSeq(n=>n+1);
  };

  useEffect(()=>{
    const onPop = (e)=>{
      const s = e.state?.screen || 'landing';
      setScreen(s);
      setNavSeq(n=>n+1);
    };
    window.addEventListener('popstate', onPop);
    // Seed initial state agar back pertama tidak tutup app
    window.history.replaceState({ screen }, '', window.location.href);
    return ()=> window.removeEventListener('popstate', onPop);
  }, []);
  const deviceNo = new URLSearchParams(window.location.search).get('device') || '';
  const refreshSaldo = (seed)=>{ if(seed){ setUser(seed.user); setDigSaldo(seed.wallet?.balance||0); return; } if(W.AquAPI && W.AquAPI.hasToken()){ W.AquAPI.me().then(m=>{ setUser(m.user); setDigSaldo(m.wallet?.balance||0); }).catch(()=>{}); } };
  useEffect(()=>{ refreshSaldo(); },[]);
  // Handle return dari halaman pembayaran Faspay
  useEffect(()=>{
    const p = new URLSearchParams(window.location.search);
    if(p.has('topup_error')){
      window.history.replaceState(null,'',window.location.pathname);
      notice('Gagal membuat pembayaran — coba lagi.');
      if(W.AquAPI && W.AquAPI.hasToken()) setScreen('digital-topup');
    }
    if(p.has('bill_no')||p.has('trx_id')||p.has('order_id')||p.has('payment_return')){
      window.history.replaceState(null,'',window.location.pathname);
      if(W.AquAPI && W.AquAPI.hasToken()){
        setTimeout(()=>{
          W.AquAPI.me().then(m=>{ setUser(m.user); setDigSaldo(m.wallet?.balance||0); setScreen('digital-home'); notice('Pembayaran diproses — saldo diperbarui!'); }).catch(()=>{});
        }, 600);
      }
    }
  },[]);
  const openStruk = (tx, ret)=>{ setStruk(tx); setSubRet(ret); go('struk'); };
  const openSub = (s, flow='digital', ret)=>{ setSubFlow(flow); setSubRet(ret || (flow==='kartu'?'kartu-akun':'digital-akun')); go(s); };
  let _tt;
  const notice = (m)=>{ setToast(m); clearTimeout(_tt); _tt = setTimeout(()=>setToast(''), 2400); };

  // member screens → bottom nav
  const navMap = {
    'digital-home':    { flow:'digital', active:'home' },
    'digital-beli':    { flow:'digital', active:'' },
    'digital-riwayat': { flow:'digital', active:'riwayat' },
    'digital-akun':    { flow:'digital', active:'akun' },
    'kartu-home':      { flow:'kartu',   active:'home' },
    'kartu-riwayat':   { flow:'kartu',   active:'riwayat' },
    'kartu-akun':      { flow:'kartu',   active:'akun' },
  };
  const nav = navMap[screen];

  const full = ['digital-sukses','kartu-sukses'].includes(screen);
  const showFooter = ['landing','digital-login','digital-daftar','kartu-login'].includes(screen);
  const memberArea = /^(digital|kartu)-(home|topup|beli|riwayat|akun)$/.test(screen);

  if(!mediaReady) return <div className="min-h-screen flex items-center justify-center bg-canvas"><img src="assets/logo-mizuone-color.png" className="h-16 w-auto opacity-60 animate-pulse"/></div>;

  return (
    <div className="min-h-screen flex flex-col">
      {!full && screen!=='landing' && <DarkToggle dark={dark} setDark={setDark}/>}
      {screen==='landing' && (
        <button onClick={()=>setDark(!dark)} aria-label="Ganti mode" className="fixed top-3 right-3 z-[60] w-11 h-11 grid place-items-center rounded-xl bg-white/15 text-white border border-white/30 backdrop-blur hover:bg-white/25 transition">{dark?'☀️':'🌙'}</button>
      )}

      <main className="flex-1 flex flex-col" key={navSeq}>
        {screen==='landing'        && <W.Landing go={go} openSub={openSub}/>}

        {screen==='digital-login'  && <W.DigitalLogin go={go} back={()=>go('landing')} onAuthed={(r)=>{ refreshSaldo(r); go('digital-home'); }}/>}
        {screen==='digital-daftar' && <W.DaftarDigital go={go} back={()=>go('landing')} onAuthed={(r)=>{ refreshSaldo(r); go('digital-home'); }}/>}
        {screen==='digital-home'   && <W.DigitalHome go={go} notice={notice} saldo={digSaldo} user={user} onOpen={(tx)=>openStruk(tx,'digital-home')} onRefresh={refreshSaldo} onGoKartu={(no,sal)=>{ setKartuCardNo(no); if(sal!=null) setKartuSaldo(sal); go('kartu-home'); }}/>}
        {screen==='digital-topup'  && <W.DigitalTopup go={go} back={()=>go('digital-home')} saldo={digSaldo} onTopup={()=>{ refreshSaldo(); go('digital-home'); }}/>}
        {screen==='digital-beli'   && <W.DigitalBeli go={go} back={()=>go('digital-home')} saldo={digSaldo} deviceNo={deviceNo || lastDev} onBeli={async (amount, dev)=>{ try{ const r=await W.AquAPI.beli(dev,amount); if(r.status==='success'){ setDigSaldo(r.balance); setLastBuy({amount}); setLastDev(dev); go('digital-sukses'); } else { notice(r.message||'Gagal beli'); refreshSaldo(); } }catch(e){ notice(e.message||'Gagal beli'); refreshSaldo(); } }}/>}
        {screen==='digital-sukses' && <W.DigitalSukses go={go} lastBuy={lastBuy} saldo={digSaldo}/>}
        {screen==='digital-riwayat'&& <W.Riwayat go={go} flow="digital" onOpen={(tx)=>openStruk(tx,'digital-riwayat')}/>}
        {screen==='digital-akun'   && <W.Akun go={go} notice={notice} flow="digital" saldo={digSaldo} user={user} openSub={openSub} onGoKartu={(no,sal)=>{ setKartuCardNo(no); if(sal!=null) setKartuSaldo(sal); go('kartu-home'); }}/>}

        {screen==='kartu-login'    && <W.KartuLogin go={go} back={()=>go(W.AquAPI?.hasToken() ? 'digital-home' : 'landing')} onCard={(no, saldo)=>{ setKartuCardNo(no); if(saldo!=null) setKartuSaldo(saldo); }}/>}
        {screen==='kartu-home'     && <W.KartuHome go={go} notice={notice} saldo={kartuSaldo} cardNo={cardNo}/>}
        {screen==='kartu-topup'    && <W.KartuTopup go={go} back={()=>go('kartu-home')} saldo={kartuSaldo} cardNo={cardNo} notice={notice} onTopup={(amt)=>{ setLastTopupKartu(amt); setKartuSaldo(s=>(s||0)+amt); }}/>}
        {screen==='kartu-sukses'   && <W.KartuSukses go={go} lastTopup={lastTopupKartu} saldo={kartuSaldo} cardNo={cardNo}/>}
        {screen==='kartu-riwayat'  && <W.Riwayat go={go} flow="kartu" onOpen={(tx)=>openStruk(tx,'kartu-riwayat')}/>}
        {screen==='kartu-akun'     && <W.Akun go={go} notice={notice} flow="kartu" saldo={kartuSaldo} cardNo={cardNo} openSub={openSub} user={user}/>}

        {screen==='struk'          && <W.Struk tx={struk} back={()=>go(subRet)} notice={notice}/>}
        {screen==='edit-profil'    && <W.EditProfil flow={subFlow} back={()=>go(subRet)} notice={notice} user={user} onSave={refreshSaldo}/>}
        {screen==='ubah-pin'       && <W.UbahPin back={()=>go(subRet)} notice={notice}/>}
        {screen==='metode-bayar'   && <W.MetodeBayar flow={subFlow} back={()=>go(subRet)}/>}
        {screen==='bantuan'        && <W.Bantuan back={()=>go(subRet)}/>}
      </main>

      {showFooter && <W.Footer onSK={()=>openSub('bantuan','digital','landing')}/>}
      {nav && <W.BottomNav active={nav.active} flow={nav.flow} go={go} notice={notice}/>}
      {memberArea && <W.ChatFab/>}

      {toast && (
        <div className="fixed bottom-24 left-1/2 -translate-x-1/2 z-[70] px-4 py-2.5 rounded-xl bg-ink text-white text-sm font-semibold shadow-soft fade-in whitespace-nowrap">{toast}</div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);