/* Bungkus Je Lah — Customer booking flow */
const { useState, useMemo, useRef, useEffect } = React;

/* ---------- inline icons ---------- */
const I = {
  bag: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 7h12l-1 13H7L6 7Z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>,
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>,
  back: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 5-7 7 7 7"/></svg>,
  plus: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>,
  minus: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 12h14"/></svg>,
  chevL: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="m14 6-6 6 6 6"/></svg>,
  chevR: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="m10 6 6 6-6 6"/></svg>,
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 13 4 4L19 7"/></svg>,
  wa: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.5A10 10 0 1 0 12 2Zm5.8 14.2c-.25.7-1.45 1.3-2 1.35-.5.05-.5.4-3.2-.66-2.7-1.07-4.4-3.8-4.5-4-.14-.16-1.1-1.44-1.1-2.75 0-1.3.7-1.94.94-2.2.24-.27.53-.34.7-.34l.5.01c.17.01.4-.06.6.47.26.6.86 2.1.93 2.25.07.16.12.34.02.55-.1.2-.15.33-.3.5-.14.18-.3.4-.43.53-.14.14-.3.3-.13.6.17.28.76 1.25 1.63 2.02 1.12 1 2.06 1.3 2.35 1.46.3.15.46.12.63-.07.17-.2.73-.85.93-1.14.2-.3.4-.24.66-.15.26.1 1.7.8 1.98.95.3.15.5.22.56.34.07.12.07.7-.18 1.4Z"/></svg>,
  copy: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>,
  pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>,
  clock: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
};

/* ---------- Brand logo ---------- */
function Logo() {
  return <span className="brandlogo">Bungkus <span className="je">Je</span> <span className="lah">Lah</span></span>;
}

function StatusBar() {
  return (
    <div className="statusbar">
      <span>9:41</span>
      <span className="dots"><span></span><span></span><span></span> bungkus.my</span>
      <span style={{display:"flex",alignItems:"center",gap:"6px"}}>100% <span className="bat"></span></span>
    </div>
  );
}

/* ============================================================
   MENU SCREEN
   ============================================================ */
function MenuScreen({ menu, cart, onOpen, onQty, cartCount, cartTotal, onCart }) {
  const [cat, setCat] = useState("all");
  const [q, setQ] = useState("");

  const list = useMemo(() => menu.filter(m => {
    const okCat = cat === "all" || m.cat === cat;
    const okQ = !q || m.name.toLowerCase().includes(q.toLowerCase());
    return okCat && okQ;
  }), [menu, cat, q]);

  return (
    <>
      <div className="screen">
        <div className="appbar">
          <div className="left"><Logo /></div>
          <button className="iconbtn" onClick={onCart} aria-label="Bakul">
            {I.bag}
            {cartCount > 0 && <span className="cartbadge">{cartCount}</span>}
          </button>
        </div>

        <div className="greet">
          <h1>Lapar? Jom bungkus.<br/>Tempah awal, senang hati. 🍱</h1>
          <p>Hantar ke KL, Selangor & Putrajaya. Order untuk esok atau majlis besar.</p>
        </div>

        <div className="search">
          {I.search}
          <input placeholder="Cari nasi lemak, katering, kuih…" value={q} onChange={e => setQ(e.target.value)} />
        </div>

        <div className="chips">
          {window.BJL.CATS.map(c => (
            <button key={c.id} className={"chip" + (cat === c.id ? " active" : "")} onClick={() => setCat(c.id)}>
              <span className="e">{c.e}</span>{c.name}
            </button>
          ))}
        </div>

        {cat === "all" && !q && (
          <div className="promo">
            <span className="pill-tag">Viral sekarang</span>
            <div className="ptext">
              <h3>Pakej Kenduri laku keras</h3>
              <p>Tempah 100 pax untuk Raya & majlis. Slot cepat penuh!</p>
            </div>
            <span className="pemoji">🎪</span>
          </div>
        )}

        <div className="sechead">
          <h2>{cat === "all" ? "Menu hari ni" : window.BJL.CATS.find(c=>c.id===cat).name}</h2>
          <span>{list.length} item</span>
        </div>

        <div className="menu-list">
          {list.map(item => {
            const qty = cart[item.id]?.qty || 0;
            return (
              <div key={item.id} className={"fooditem" + (item.available ? "" : " unavail")}>
                <button className="foodtile" style={{ background: item.tile }} onClick={() => item.available && onOpen(item)}>
                  {item.emoji}
                  {item.popular && <span className="pop">Popular</span>}
                </button>
                <div className="foodinfo" onClick={() => item.available && onOpen(item)} style={{cursor: item.available?"pointer":"default"}}>
                  <h3>{item.name}</h3>
                  <p>{item.desc}</p>
                  <div className="pricerow">
                    <span className="price">{window.BJL.fmt(item.price)} <small>/ {item.unit}</small></span>
                    {!item.available ? <span className="soldout-tag">Habis hari ni</span>
                      : qty === 0
                        ? <button className="addbtn" onClick={(e)=>{e.stopPropagation(); onOpen(item);}}>{I.plus}</button>
                        : <span className="qtymini">
                            <button onClick={(e)=>{e.stopPropagation(); onQty(item, qty-1);}}>{I.minus}</button>
                            <span>{qty}</span>
                            <button onClick={(e)=>{e.stopPropagation(); onQty(item, qty+1);}}>{I.plus}</button>
                          </span>}
                  </div>
                </div>
              </div>
            );
          })}
          {list.length === 0 && <div className="empty"><div className="big">🔍</div><h3>Tak jumpa</h3><p>Cuba kata kunci lain.</p></div>}
        </div>
        <div style={{height:"12px"}}></div>
      </div>

      {cartCount > 0 && (
        <div className="actionbar">
          <button className="btn btn-primary" onClick={onCart}>
            Lihat bakul <span className="price-pill">{cartCount} item · {window.BJL.fmt(cartTotal)}</span>
          </button>
        </div>
      )}
    </>
  );
}

/* ============================================================
   ITEM BOTTOM SHEET
   ============================================================ */
function ItemSheet({ item, initialQty, onClose, onConfirm }) {
  const isNasi = item.cat === "Nasi Lemak";
  const [qty, setQty] = useState(initialQty || 1);
  const [spice, setSpice] = useState("sederhana");
  const spices = [{id:"kurang",label:"Kurang pedas"},{id:"sederhana",label:"Sederhana"},{id:"extra",label:"Extra sambal"}];

  return (
    <div className="sheet-scrim" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()}>
        <div className="grab"></div>
        <div className="bigtile" style={{ background: item.tile }}>{item.emoji}</div>
        <h2>{item.name}</h2>
        <p className="desc">{item.desc}</p>
        <div className="price-big">{window.BJL.fmt(item.price)} <span style={{fontSize:"0.8rem",color:"var(--ink-soft)"}}>/ {item.unit}</span></div>

        {isNasi && (
          <div className="optgroup">
            <h4>Tahap pedas</h4>
            {spices.map(s => (
              <div key={s.id} className={"optrow" + (spice===s.id?" sel":"")} onClick={()=>setSpice(s.id)}>
                <span className="label">{s.label}</span>
                <span className="radio"></span>
              </div>
            ))}
          </div>
        )}

        <div className="qtybig">
          <button onClick={() => setQty(Math.max(1, qty-1))}>{I.minus}</button>
          <span className="n">{qty}</span>
          <button onClick={() => setQty(qty+1)}>{I.plus}</button>
        </div>

        <button className="btn btn-primary" onClick={() => onConfirm(item, qty, isNasi ? spice : null)}>
          Tambah ke bakul <span className="price-pill">{window.BJL.fmt(item.price * qty)}</span>
        </button>
      </div>
    </div>
  );
}

/* ============================================================
   CART SCREEN
   ============================================================ */
function CartScreen({ cart, menu, onBack, onQty, onNext, subtotal }) {
  const lines = Object.values(cart);
  const deposit = Math.round(subtotal * window.BJL.DEPOSIT_RATE);

  return (
    <>
      <div className="screen">
        <div className="backrow">
          <button className="backbtn" onClick={onBack}>{I.back}</button>
          <div><div className="steptitle">Bakul anda</div><div className="stepsub">Semak sebelum tempah</div></div>
        </div>

        {lines.length === 0 ? (
          <div className="empty"><div className="big">🛒</div><h3>Bakul kosong lagi</h3><p>Jom pilih menu sedap dulu.</p></div>
        ) : (
          <>
            <div className="cart-list">
              {lines.map(l => (
                <div key={l.id} className="cart-item">
                  <div className="ct" style={{ background: l.item.tile }}>{l.item.emoji}</div>
                  <div className="ci">
                    <h4>{l.item.name}</h4>
                    {l.opt && <div className="opt">Pedas: {l.opt}</div>}
                    <div className="pr">{window.BJL.fmt(l.item.price * l.qty)}</div>
                  </div>
                  <span className="qtymini">
                    <button onClick={() => onQty(l.item, l.qty-1)}>{I.minus}</button>
                    <span>{l.qty}</span>
                    <button onClick={() => onQty(l.item, l.qty+1)}>{I.plus}</button>
                  </span>
                </div>
              ))}
            </div>

            <div className="bill">
              <div className="row"><span className="k">Subtotal ({lines.reduce((a,l)=>a+l.qty,0)} item)</span><span className="v">{window.BJL.fmt(subtotal)}</span></div>
              <div className="row"><span className="k">Penghantaran</span><span className="v">Kira di langkah seterusnya</span></div>
              <div className="div"></div>
              <div className="row"><span className="k">Deposit (30%) untuk kunci slot</span><span className="v" style={{color:"var(--pandan-deep)",fontWeight:600}}>{window.BJL.fmt(deposit)}</span></div>
              <p className="deposit-note">Bayar deposit untuk sahkan tarikh. Baki dijelaskan masa hantar. Slot popular cepat penuh masa musim peak.</p>
            </div>
          </>
        )}
        <div style={{height:"12px"}}></div>
      </div>

      {lines.length > 0 && (
        <div className="actionbar">
          <button className="btn btn-primary" onClick={onNext}>
            Isi detail tempahan <span className="price-pill">{window.BJL.fmt(subtotal)}</span>
          </button>
        </div>
      )}
    </>
  );
}

/* ============================================================
   CALENDAR
   ============================================================ */
function Calendar({ value, onPick }) {
  const base = new Date(); base.setHours(0,0,0,0);
  const [view, setView] = useState(new Date(base.getFullYear(), base.getMonth(), 1));
  const busy = window.BJL.SEED.map(o => o.date);

  const y = view.getFullYear(), m = view.getMonth();
  const first = new Date(y, m, 1);
  const startDow = (first.getDay() + 6) % 7; // Mon=0
  const days = new Date(y, m+1, 0).getDate();
  const months = ["Januari","Februari","Mac","April","Mei","Jun","Julai","Ogos","September","Oktober","November","Disember"];
  const minDate = new Date(base); minDate.setDate(minDate.getDate()+1); // 1 day lead

  const cells = [];
  for (let i=0;i<startDow;i++) cells.push(null);
  for (let d=1; d<=days; d++) cells.push(new Date(y, m, d));

  const canPrev = (y > base.getFullYear()) || (m > base.getMonth());

  return (
    <div className="cal">
      <div className="cal-head">
        <button onClick={() => canPrev && setView(new Date(y, m-1, 1))} style={{opacity: canPrev?1:.3}}>{I.chevL}</button>
        <span className="m">{months[m]} {y}</span>
        <button onClick={() => setView(new Date(y, m+1, 1))}>{I.chevR}</button>
      </div>
      <div className="cal-grid">
        {["I","S","R","K","J","S","A"].map((d,i) => <div key={i} className="dow">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={i}></div>;
          const di = window.BJL.iso(d);
          const muted = d < minDate;
          const sel = value === di;
          const isBusy = busy.includes(di);
          return (
            <div key={i} className={"cal-day " + (muted ? "muted" : "avail") + (sel ? " sel" : "") + (isBusy && !sel ? " busy" : "")}
                 onClick={() => !muted && onPick(di)}>
              {d.getDate()}
            </div>
          );
        })}
      </div>
      <div className="cal-legend">
        <span><i style={{background:"var(--turmeric-deep)"}}></i>Hari sibuk</span>
        <span><i style={{background:"var(--chili)"}}></i>Tarikh dipilih</span>
      </div>
    </div>
  );
}

/* ============================================================
   DETAILS SCREEN
   ============================================================ */
function DetailsScreen({ onBack, details, setDetails, onNext, subtotal }) {
  const set = (k, v) => setDetails(d => ({ ...d, [k]: v }));
  const area = window.BJL.AREAS.find(a => a.id === details.area);
  const fee = area ? area.fee : 0;
  const total = subtotal + fee;
  const ready = details.name && details.phone && details.address && details.area && details.session && details.date;

  return (
    <>
      <div className="screen">
        <div className="backrow">
          <button className="backbtn" onClick={onBack}>{I.back}</button>
          <div><div className="steptitle">Detail tempahan</div><div className="stepsub">Bila & ke mana nak hantar</div></div>
        </div>

        <div className="formsec">
          <div className="field">
            <label>Pilih tarikh hantar</label>
            <Calendar value={details.date} onPick={(d) => set("date", d)} />
          </div>

          <div className="field">
            <label>Sesi penghantaran</label>
            <div className="seg">
              {window.BJL.SESSIONS.map(s => (
                <button key={s.id} className={details.session===s.id ? "sel" : ""} onClick={() => set("session", s.id)}>
                  <span className="e">{s.e}</span>{s.name}<span className="sub">{s.sub}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Kawasan hantar</label>
            <div className="seg">
              {window.BJL.AREAS.map(a => (
                <button key={a.id} className={details.area===a.id ? "sel" : ""} onClick={() => set("area", a.id)}>
                  <span className="e">{a.e}</span>{a.name}<span className="sub">{a.sub}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Nama anda</label>
            <input placeholder="cth: Puan Aishah" value={details.name} onChange={e => set("name", e.target.value)} />
          </div>
          <div className="field">
            <label>No. telefon (WhatsApp)</label>
            <input placeholder="cth: 012-345 6789" value={details.phone} onChange={e => set("phone", e.target.value)} />
          </div>
          <div className="field">
            <label>Alamat penuh</label>
            <textarea placeholder="Alamat lengkap + landmark untuk rider" value={details.address} onChange={e => set("address", e.target.value)} />
          </div>
          <div className="field">
            <label>Nota (optional)</label>
            <textarea placeholder="cth: majlis tahlil, tolong sampai awal sikit" value={details.notes} onChange={e => set("notes", e.target.value)} />
          </div>
        </div>
        <div style={{height:"8px"}}></div>
      </div>

      <div className="actionbar">
        <div className="summ">
          <span className="lab">Total {fee>0 ? `(+ ${window.BJL.fmt(fee)} hantar)` : "(hantar percuma)"}</span>
          <span className="val">{window.BJL.fmt(total)}</span>
        </div>
        <button className="btn btn-primary" disabled={!ready} onClick={() => onNext(total, fee)}>
          {ready ? "Ke pembayaran deposit" : "Lengkapkan detail dulu"}
        </button>
      </div>
    </>
  );
}

/* ============================================================
   PAYMENT SCREEN
   ============================================================ */
function PayScreen({ onBack, total, fee, subtotal, onPaid, processing }) {
  const deposit = Math.round(total * window.BJL.DEPOSIT_RATE);
  const balance = total - deposit;
  const [method, setMethod] = useState("fpx");
  const banks = [{id:"fpx",logo:"FPX",nm:"FPX Online Banking",sub:"Maybank, CIMB, RHB…"},{id:"tng",logo:"TNG",nm:"Touch 'n Go eWallet",sub:"Scan & bayar"},{id:"card",logo:"💳",nm:"Kad kredit / debit",sub:"Visa, Mastercard"}];

  if (processing) {
    return <div className="screen"><div className="processing"><div className="spinner"></div><h3 className="display" style={{fontWeight:800,fontSize:"1.3rem"}}>Memproses deposit…</h3><p style={{color:"var(--ink-soft)",marginTop:"6px"}}>Jangan tutup skrin ya</p></div></div>;
  }

  return (
    <>
      <div className="screen">
        <div className="backrow">
          <button className="backbtn" onClick={onBack}>{I.back}</button>
          <div><div className="steptitle">Bayar deposit</div><div className="stepsub">Kunci slot tarikh anda</div></div>
        </div>

        <div className="paycard">
          <div className="amt">
            <div className="lab">Deposit untuk bayar sekarang</div>
            <div className="big">{window.BJL.fmt(deposit)}</div>
            <div className="of">30% daripada {window.BJL.fmt(total)} · baki {window.BJL.fmt(balance)} masa hantar</div>
          </div>
          <div className="paymethods">
            {banks.map(b => (
              <div key={b.id} className={"paymethod" + (method===b.id?" sel":"")} onClick={() => setMethod(b.id)}>
                <span className="logo">{b.logo}</span>
                <div className="nm">{b.nm}<div style={{fontSize:"0.74rem",color:"var(--ink-soft)",fontWeight:500}}>{b.sub}</div></div>
                <span className="radio"></span>
              </div>
            ))}
          </div>
        </div>

        <div className="bill">
          <div className="row"><span className="k">Subtotal</span><span className="v">{window.BJL.fmt(subtotal)}</span></div>
          <div className="row"><span className="k">Penghantaran</span><span className="v">{fee>0 ? window.BJL.fmt(fee) : "Percuma"}</span></div>
          <div className="div"></div>
          <div className="row total"><span className="k">Jumlah penuh</span><span className="v">{window.BJL.fmt(total)}</span></div>
          <div className="row"><span className="k" style={{fontWeight:700,color:"var(--pandan-deep)"}}>Deposit sekarang</span><span className="v" style={{fontWeight:700,color:"var(--pandan-deep)"}}>{window.BJL.fmt(deposit)}</span></div>
        </div>
        <div style={{height:"8px"}}></div>
      </div>

      <div className="actionbar">
        <button className="btn btn-pandan" onClick={() => onPaid(deposit)}>
          🔒 Bayar {window.BJL.fmt(deposit)} deposit
        </button>
      </div>
    </>
  );
}

/* ============================================================
   CONFIRMATION
   ============================================================ */
function Confirmation({ order, onWa, onDone }) {
  return (
    <>
      <div className="screen">
        <div className="confirm">
          <div className="checkpop">{I.check}</div>
          <h1>Tempahan disahkan! 🎉</h1>
          <p>Terima kasih {order.name.split(" ")[0]}! Deposit dah masuk, slot anda dikunci. Kami akan WhatsApp anda sekejap lagi.</p>
          <div className="ordercode">{order.id}</div>
        </div>

        <div className="bill" style={{marginTop:"4px"}}>
          <div className="row"><span className="k">Tarikh hantar</span><span className="v">{fmtDate(order.date)}</span></div>
          <div className="row"><span className="k">Sesi</span><span className="v">{window.BJL.SESSIONS.find(s=>s.id===order.session).name}</span></div>
          <div className="row"><span className="k">Kawasan</span><span className="v">{window.BJL.AREAS.find(a=>a.id===order.area).name}</span></div>
          <div className="div"></div>
          <div className="row"><span className="k">Deposit dibayar</span><span className="v" style={{color:"var(--pandan-deep)",fontWeight:700}}>{window.BJL.fmt(order.deposit)}</span></div>
          <div className="row"><span className="k">Baki masa hantar</span><span className="v">{window.BJL.fmt(order.total - order.deposit)}</span></div>
        </div>
        <div style={{height:"8px"}}></div>
      </div>

      <div className="actionbar">
        <button className="btn btn-pandan" onClick={onWa} style={{marginBottom:"9px"}}>
          {I.wa} Lihat confirmation WhatsApp
        </button>
        <button className="btn btn-ghost" onClick={onDone}>Tempah lagi</button>
      </div>
    </>
  );
}

/* ============================================================
   WHATSAPP CONFIRMATION SCREEN
   ============================================================ */
function WhatsAppScreen({ order, onBack }) {
  const items = order.items.map(it => {
    const m = window.BJL.MENU.find(x => x.id === it.id);
    return `• ${it.qty}× ${m.name}`;
  }).join("\n");

  return (
    <div className="screen">
      <div className="wa-screen">
        <div className="wa-top">
          <button className="backbtn" onClick={onBack} style={{background:"rgba(255,255,255,.2)"}}>
            <span style={{color:"#fff",display:"grid",placeItems:"center"}}>{I.back}</span>
          </button>
          <div className="av">🍱</div>
          <div><div className="nm">Bungkus Je Lah</div><div className="st">online · auto-reply aktif</div></div>
        </div>
        <div className="wa-body">
          <div className="bubble them">
            <span className="biz-tag">Bungkus Je Lah · Bot</span>
            Hai {order.name.split(" ")[0]}! 👋 Tempahan anda <strong>{order.id}</strong> dah kami terima.
            <span className="t">9:41 PG</span>
          </div>
          <div className="bubble them">
            <strong>Ringkasan tempahan</strong><br/>
            {items.split("\n").map((l,i)=><span key={i}>{l}<br/></span>)}
            <br/>📅 {fmtDate(order.date)} · {window.BJL.SESSIONS.find(s=>s.id===order.session).name}<br/>
            📍 {window.BJL.AREAS.find(a=>a.id===order.area).name}
            <span className="t">9:41 PG</span>
          </div>
          <div className="bubble them">
            ✅ Deposit <strong>{window.BJL.fmt(order.deposit)}</strong> dah masuk. Baki <strong>{window.BJL.fmt(order.total - order.deposit)}</strong> masa hantar.
            <br/><br/>Kalau nak ubah apa-apa, reply je kat sini. Kami akan confirm balik H-1. Terima kasih! 🙏
            <span className="t">9:41 PG</span>
          </div>
          <div className="bubble me">
            Ok terima kasih! Tolong sampai awal sikit boleh? 😊
            <span className="t">9:42 PG ✓✓</span>
          </div>
          <div className="bubble them">
            Boleh InsyaAllah 👍 Kami WhatsApp masa rider gerak nanti.
            <span className="t">9:42 PG</span>
          </div>
        </div>
        <div style={{padding:"14px 16px"}}>
          <button className="btn btn-ghost" onClick={onBack}>Kembali ke tempahan</button>
        </div>
      </div>
    </div>
  );
}

function fmtDate(iso) {
  const d = new Date(iso + "T00:00:00");
  const days = ["Ahad","Isnin","Selasa","Rabu","Khamis","Jumaat","Sabtu"];
  const months = ["Jan","Feb","Mac","Apr","Mei","Jun","Jul","Ogos","Sep","Okt","Nov","Dis"];
  return `${days[d.getDay()]}, ${d.getDate()} ${months[d.getMonth()]}`;
}

/* ============================================================
   ROOT CUSTOMER APP
   ============================================================ */
function CustomerApp({ store }) {
  const [step, setStep] = useState("menu"); // menu, cart, details, pay, done, whatsapp
  const [cart, setCart] = useState({});
  const [sheet, setSheet] = useState(null);
  const [processing, setProcessing] = useState(false);
  const [order, setOrder] = useState(null);
  const [pay, setPay] = useState({ total: 0, fee: 0 });
  const [details, setDetails] = useState({ name: "", phone: "", address: "", notes: "", area: "kl", session: "", date: "" });
  const screenRef = useRef(null);

  const menu = store.menu;
  useEffect(() => { if (screenRef.current) screenRef.current.scrollTop = 0; }, [step]);

  const subtotal = useMemo(() => Object.values(cart).reduce((a, l) => a + l.item.price * l.qty, 0), [cart]);
  const cartCount = Object.values(cart).reduce((a, l) => a + l.qty, 0);

  function setQty(item, qty) {
    setCart(c => {
      const n = { ...c };
      if (qty <= 0) delete n[item.id];
      else n[item.id] = { id: item.id, item, qty, opt: n[item.id]?.opt || null };
      return n;
    });
  }
  function addFromSheet(item, qty, opt) {
    setCart(c => ({ ...c, [item.id]: { id: item.id, item, qty, opt } }));
    setSheet(null);
  }

  function goPay(total, fee) { setPay({ total, fee }); setStep("pay"); }

  function handlePaid(deposit) {
    setProcessing(true);
    setTimeout(() => {
      const o = store.addOrder({
        name: details.name, phone: details.phone, address: details.address, notes: details.notes,
        area: details.area, session: details.session, date: details.date,
        items: Object.values(cart).map(l => ({ id: l.id, qty: l.qty, opt: l.opt })),
        subtotal, total: pay.total, deposit, depositPaid: true, channel: "App",
      });
      setOrder(o);
      setProcessing(false);
      setStep("done");
    }, 1700);
  }

  function reset() {
    setCart({}); setOrder(null);
    setDetails({ name: "", phone: "", address: "", notes: "", area: "kl", session: "", date: "" });
    setStep("menu");
  }

  return (
    <div className="phone">
      <StatusBar />
      <div ref={screenRef} style={{display:"contents"}}></div>
      {step === "menu" && <MenuScreen menu={menu} cart={cart} onOpen={setSheet} onQty={setQty} cartCount={cartCount} cartTotal={subtotal} onCart={() => setStep("cart")} />}
      {step === "cart" && <CartScreen cart={cart} menu={menu} onBack={() => setStep("menu")} onQty={setQty} onNext={() => setStep("details")} subtotal={subtotal} />}
      {step === "details" && <DetailsScreen onBack={() => setStep("cart")} details={details} setDetails={setDetails} onNext={goPay} subtotal={subtotal} />}
      {step === "pay" && <PayScreen onBack={() => setStep("details")} total={pay.total} fee={pay.fee} subtotal={subtotal} onPaid={handlePaid} processing={processing} />}
      {step === "done" && order && <Confirmation order={order} onWa={() => setStep("whatsapp")} onDone={reset} />}
      {step === "whatsapp" && order && <WhatsAppScreen order={order} onBack={() => setStep("done")} />}

      {sheet && <ItemSheet item={sheet} initialQty={cart[sheet.id]?.qty} onClose={() => setSheet(null)} onConfirm={addFromSheet} />}
    </div>
  );
}

window.CustomerApp = CustomerApp;
window.fmtDate = fmtDate;