/* Bungkus Je Lah — Admin orders dashboard */
const { useState } = React;
const AI = {
  board: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>,
  menu: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h10"/></svg>,
  cal: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" strokeLinecap="round"/></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>,
  x: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>,
  pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><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="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
};

function StatusPill({ id }) {
  const s = window.BJL.STATUSES.find(x => x.id === id);
  const bg = { baru: "#FDE7E0", sah: "#FFF1D6", bayar: "#E6F6EC", siap: "#EFE9E1" }[id];
  return <span className="pill-status" style={{ background: bg, color: s.color }}>{s.name}</span>;
}

function orderTotals(o) {
  const sub = o.items.reduce((a, it) => {
    const m = window.BJL.MENU.find(x => x.id === it.id);
    return a + (m ? m.price * it.qty : 0);
  }, 0);
  const fee = window.BJL.AREAS.find(a => a.id === o.area)?.fee || 0;
  const total = o.total != null ? o.total : sub + fee;
  const deposit = o.deposit != null ? o.deposit : Math.round(total * window.BJL.DEPOSIT_RATE);
  return { sub, fee, total, deposit };
}

/* ---------- Order card ---------- */
function OrderCard({ o, onOpen }) {
  const { total } = orderTotals(o);
  const s = window.BJL.STATUSES.find(x => x.id === o.status);
  const area = window.BJL.AREAS.find(a => a.id === o.area);
  return (
    <div className="ocard" style={{ borderLeftColor: s.color }} onClick={() => onOpen(o)}>
      <div className="top">
        <span className="code">{o.id}</span>
        <span className="amt">{window.BJL.fmtShort(total)}</span>
      </div>
      <div className="cust">{o.name}</div>
      <div className="meta">
        <span className="when">{AI.cal}{window.fmtDate(o.date)}</span>
        <span className="tag">{AI.pin}{area.name}</span>
      </div>
      <div className={"dephint " + (o.depositPaid ? "dep-paid" : "dep-wait")}>
        {o.depositPaid ? "● Deposit masuk" : "○ Tunggu deposit"}
      </div>
    </div>
  );
}

/* ---------- Order drawer ---------- */
function Drawer({ o, onClose, onStatus }) {
  const { sub, fee, total, deposit } = orderTotals(o);
  const area = window.BJL.AREAS.find(a => a.id === o.area);
  const sess = window.BJL.SESSIONS.find(s => s.id === o.session);
  const stIdx = window.BJL.STATUSES.findIndex(s => s.id === o.status);

  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <h2>{o.name}</h2>
            <div className="code">{o.id} · masuk {o.placedAgo || "baru ni"} · via {o.channel || "App"}</div>
          </div>
          <button className="x" onClick={onClose}>{AI.x}</button>
        </div>
        <div className="drawer-body">
          <div className="dgroup">
            <div className="glab">Status tempahan</div>
            <div className="statusflow">
              {window.BJL.STATUSES.map((s, i) => (
                <button key={s.id}
                  className={(i <= stIdx ? "done " : "") + (i === stIdx ? "cur" : "")}
                  style={i <= stIdx ? { background: s.color, color: s.id==="sah" ? "var(--ink)" : "#fff" } : {}}
                  onClick={() => onStatus(o.id, s.id)}>{s.name}</button>
              ))}
            </div>
            <p style={{fontSize:"0.76rem",color:"var(--ink-soft)",marginTop:"8px"}}>{window.BJL.STATUSES[stIdx].sub}. Tap untuk tukar.</p>
          </div>

          <div className="dgroup">
            <div className="glab">Penghantaran</div>
            <div className="dline"><span className="k">{AI.cal} Tarikh</span><span>{window.fmtDate(o.date)}</span></div>
            <div className="dline"><span className="k">{AI.clock} Sesi</span><span>{sess.name} ({sess.sub})</span></div>
            <div className="dline"><span className="k">{AI.pin} Kawasan</span><span>{area.name}</span></div>
            <div className="dline"><span className="k">Alamat</span><span style={{textAlign:"right",maxWidth:"60%"}}>{o.address}</span></div>
            <div className="dline"><span className="k">Telefon</span><span>{o.phone}</span></div>
          </div>

          {o.notes && (
            <div className="dgroup">
              <div className="glab">Nota pelanggan</div>
              <div style={{background:"#FFF7E6",border:"1px solid var(--line-strong)",borderRadius:"10px",padding:"11px 13px",fontSize:"0.88rem"}}>“{o.notes}”</div>
            </div>
          )}

          <div className="dgroup">
            <div className="glab">Pesanan</div>
            {o.items.map((it, i) => {
              const m = window.BJL.MENU.find(x => x.id === it.id);
              return (
                <div key={i} className="ditem">
                  <span><span className="q">{it.qty}× </span>{m.name}{it.opt ? ` · ${it.opt}` : ""}</span>
                  <span className="mono">{window.BJL.fmt(m.price * it.qty)}</span>
                </div>
              );
            })}
          </div>

          <div className="dgroup">
            <div className="glab">Bayaran</div>
            <div className="dline"><span className="k">Subtotal</span><span className="mono">{window.BJL.fmt(sub)}</span></div>
            <div className="dline"><span className="k">Penghantaran</span><span className="mono">{fee>0?window.BJL.fmt(fee):"Percuma"}</span></div>
            <div className="dline" style={{fontWeight:700,borderTop:"1px dashed var(--line-strong)",marginTop:"4px",paddingTop:"8px"}}><span>Jumlah</span><span className="mono">{window.BJL.fmt(total)}</span></div>
            <div className="dline"><span className="k">Deposit ({o.depositPaid ? "dibayar" : "belum"})</span><span className="mono" style={{color:o.depositPaid?"var(--pandan-deep)":"var(--turmeric-deep)",fontWeight:700}}>{window.BJL.fmt(deposit)}</span></div>
            <div className="dline"><span className="k">Baki masa hantar</span><span className="mono">{window.BJL.fmt(total - deposit)}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Orders board ---------- */
function OrdersView({ store, onOpen }) {
  const orders = store.orders;
  const today = window.BJL.todayISO;
  const todayCount = orders.filter(o => o.date === today).length;
  const pendingDep = orders.filter(o => !o.depositPaid).length;
  const upcoming = orders.filter(o => o.date >= today && o.status !== "siap").length;
  const revenue = orders.reduce((a, o) => a + orderTotals(o).deposit, 0);

  const stats = [
    { lab: "Order hari ni", dot: "var(--chili)", num: todayCount, sub: "perlu hantar" },
    { lab: "Tunggu deposit", dot: "var(--turmeric)", num: pendingDep, sub: "belum dikunci" },
    { lab: "Majlis akan datang", dot: "var(--pandan)", num: upcoming, sub: "dalam pipeline" },
    { lab: "Deposit terkumpul", dot: "var(--ink)", num: window.BJL.fmtShort(revenue), sub: "cash flow masuk" },
  ];

  return (
    <>
      <div className="stats">
        {stats.map((s, i) => (
          <div key={i} className="stat">
            <div className="lab"><span className="dot" style={{background:s.dot}}></span>{s.lab}</div>
            <div className="num">{s.num}</div>
            <div className="sub">{s.sub}</div>
          </div>
        ))}
      </div>

      <div className="board">
        {window.BJL.STATUSES.map(col => {
          const list = orders.filter(o => o.status === col.id).sort((a,b) => a.date.localeCompare(b.date));
          return (
            <div key={col.id} className="col">
              <div className="col-head">
                <span className="nm"><span className="dot" style={{background:col.color}}></span>{col.name}</span>
                <span className="ct">{list.length}</span>
              </div>
              {list.map(o => <OrderCard key={o.id} o={o} onOpen={onOpen} />)}
              {list.length === 0 && <div style={{padding:"14px 8px",fontSize:"0.78rem",color:"var(--ink-faint)",textAlign:"center"}}>Tiada order</div>}
            </div>
          );
        })}
      </div>
    </>
  );
}

/* ---------- Menu editor ---------- */
function MenuEditor({ store, toast }) {
  const menu = store.menu;
  return (
    <div className="editor">
      <div className="editor-head">
        <div>
          <div className="colhint" style={{marginBottom:"0"}}>
            <span></span><span>Item</span><span>Harga (RM)</span><span>Status</span><span>Ada?</span>
          </div>
        </div>
      </div>
      {menu.map(m => (
        <div key={m.id} className={"edit-row" + (m.available ? "" : " unavail")}>
          <div className="et" style={{background:m.tile}}>{m.emoji}</div>
          <div><div className="enm">{m.name}</div><div className="ecat">{m.cat} · per {m.unit}</div></div>
          <div className="eprice">
            <span style={{color:"var(--ink-soft)",fontSize:"0.85rem"}}>RM</span>
            <input type="number" value={m.price} step="0.5"
              onChange={e => store.setPrice(m.id, parseFloat(e.target.value) || 0)} />
          </div>
          <div className={"edit-stat " + (m.available ? "on" : "off")}>{m.available ? "Tersedia" : "Habis"}</div>
          <div className={"toggle" + (m.available ? " on" : "")}
            onClick={() => { store.toggleAvail(m.id); toast(m.available ? `${m.name} ditandakan habis` : `${m.name} kembali tersedia`); }}></div>
        </div>
      ))}
      <p style={{fontSize:"0.78rem",color:"var(--ink-soft)",marginTop:"14px"}}>Tukar harga atau tandakan habis — terus update kat app pelanggan, real-time. Cuba toggle, lepas tu tengok menu kat Customer app.</p>
    </div>
  );
}

/* ---------- Admin root ---------- */
function AdminApp({ store, toast }) {
  const [tab, setTab] = useState("orders");
  const [active, setActive] = useState(null);
  const today = window.BJL.todayISO;

  return (
    <div className="admin">
      <div className="adside">
        <div className="logo">Bungkus <span className="je">Je</span> <span className="lah">Lah</span></div>
        <div className={"adnav" + (tab==="orders"?" active":"")} onClick={() => setTab("orders")}>{AI.board} Tempahan</div>
        <div className={"adnav" + (tab==="menu"?" active":"")} onClick={() => setTab("menu")}>{AI.menu} Menu</div>
        <div className="spacer"></div>
        <div className="me">
          <div className="av">BJ</div>
          <div><div className="nm">Kak Bungkus</div><div className="rl">Owner · admin</div></div>
        </div>
      </div>

      <div className="admain">
        <div className="adhead">
          <div>
            <h1>{tab === "orders" ? "Tempahan" : "Urus menu"}</h1>
            <p>{tab === "orders" ? `${window.fmtDate(today)} · ${store.orders.length} order keseluruhan` : "Edit harga & ketersediaan sendiri"}</p>
          </div>
          <div className="tools">
            <div className="adsearch">{AI.search}<input placeholder="Cari order / nama…" /></div>
          </div>
        </div>

        {tab === "orders" ? <OrdersView store={store} onOpen={setActive} /> : <MenuEditor store={store} toast={toast} />}
      </div>

      {active && <Drawer o={store.orders.find(x => x.id === active.id) || active} onClose={() => setActive(null)} onStatus={(id, st) => { store.setStatus(id, st); }} />}
    </div>
  );
}

window.AdminApp = AdminApp;