/* Bungkus Je Lah — root: shared store + mode switch */
const { useState: useS, useEffect: useE, useCallback } = React;

const PhoneIcon = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="ic"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2" strokeLinecap="round"/></svg>;
const DeskIcon = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="ic"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4" strokeLinecap="round"/></svg>;

function useStore() {
  const LS = "bjl_store_v1";
  const load = () => {
    try { const r = localStorage.getItem(LS); if (r) return JSON.parse(r); } catch (e) {}
    return null;
  };
  const saved = load();

  // menu: merge data defaults with saved overrides (price/available)
  const baseMenu = window.BJL.MENU.map(m => ({ ...m }));
  const [menu, setMenu] = useS(() => {
    if (saved?.menu) return baseMenu.map(m => {
      const o = saved.menu.find(x => x.id === m.id);
      return o ? { ...m, price: o.price, available: o.available } : m;
    });
    return baseMenu;
  });
  const [orders, setOrders] = useS(() => saved?.orders || window.BJL.SEED.map(o => ({ ...o })));
  const [counter, setCounter] = useS(() => saved?.counter || 1043);

  useE(() => {
    try {
      localStorage.setItem(LS, JSON.stringify({
        menu: menu.map(m => ({ id: m.id, price: m.price, available: m.available })),
        orders, counter,
      }));
    } catch (e) {}
  }, [menu, orders, counter]);

  const addOrder = useCallback((o) => {
    const id = "BJL-" + counter;
    const order = { ...o, id, status: "baru", placedAgo: "baru ni" };
    setOrders(prev => [order, ...prev]);
    setCounter(c => c + 1);
    return order;
  }, [counter]);

  const setStatus = useCallback((id, status) => {
    setOrders(prev => prev.map(o => o.id === id ? { ...o, status, depositPaid: status === "baru" ? o.depositPaid : true } : o));
  }, []);
  const toggleAvail = useCallback((id) => setMenu(prev => prev.map(m => m.id === id ? { ...m, available: !m.available } : m)), []);
  const setPrice = useCallback((id, price) => setMenu(prev => prev.map(m => m.id === id ? { ...m, price } : m)), []);

  const reset = useCallback(() => { try { localStorage.removeItem(LS); } catch(e){} location.reload(); }, []);

  return { menu, orders, addOrder, setStatus, toggleAvail, setPrice, reset };
}

function App() {
  // a showcase frame can pin the starting surface with ?mode=admin / ?mode=customer.
  // when pinned we don't persist it, so an admin frame and a customer frame opened
  // side by side stay independent instead of clobbering each other via localStorage.
  const forcedMode = (() => {
    try {
      const m = new URLSearchParams(location.search).get("mode");
      return m === "admin" || m === "customer" ? m : null;
    } catch (e) { return null; }
  })();

  const [mode, setMode] = useS(() => {
    if (forcedMode) return forcedMode;
    try { return localStorage.getItem("bjl_mode") || "customer"; } catch (e) { return "customer"; }
  });
  const [toastMsg, setToastMsg] = useS(null);
  const store = useStore();

  useE(() => {
    if (forcedMode) return;
    try { localStorage.setItem("bjl_mode", mode); } catch (e) {}
  }, [mode, forcedMode]);

  const toast = useCallback((m) => {
    setToastMsg(m);
    clearTimeout(window.__bjlT);
    window.__bjlT = setTimeout(() => setToastMsg(null), 2200);
  }, []);

  // toast when a new order arrives while viewing admin handled inline; also wrap addOrder
  const store2 = {
    ...store,
    addOrder: (o) => {
      const r = store.addOrder(o);
      return r;
    },
  };

  const CustomerApp = window.CustomerApp;
  const AdminApp = window.AdminApp;

  return (
    <div className="stage">
      <div className="modebar">
        <button className={mode==="customer"?"active":""} onClick={() => setMode("customer")}>{PhoneIcon} Customer app</button>
        <button className={mode==="admin"?"active":""} onClick={() => setMode("admin")}>{DeskIcon} Admin dashboard</button>
      </div>

      {mode === "customer"
        ? <CustomerApp store={store2} />
        : <AdminApp store={store2} toast={toast} />}

      {toastMsg && <div className="toast"><span className="d"></span>{toastMsg}</div>}
    </div>
  );
}

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