// Main app — orchestrates screens + cart state + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "typeface": "classic",
  "cardStyle": "editorial"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState({ name: "landing", arg: null });
  const [cart, setCart] = React.useState([
    { id: "choc-0018", qty: 1 },
  ]);
  const [order, setOrder] = React.useState(null);

  const go = (name, arg = null) => {
    setScreen({ name, arg });
    // scroll-to-top
    setTimeout(() => {
      const sc = document.querySelector(".screen");
      if (sc) sc.scrollTop = 0;
    }, 0);
  };

  const addToCart = (id, qty) => {
    setCart((prev) => {
      const ex = prev.find((x) => x.id === id);
      if (ex) return prev.map((x) => x.id === id ? { ...x, qty: x.qty + qty } : x);
      return [...prev, { id, qty }];
    });
  };
  const updateQty = (id, qty) => {
    if (qty <= 0) return removeItem(id);
    setCart((prev) => prev.map((x) => x.id === id ? { ...x, qty } : x));
  };
  const removeItem = (id) => setCart((prev) => prev.filter((x) => x.id !== id));

  const cartCount = cart.reduce((s, x) => s + x.qty, 0);

  const onSubmit = (form, total) => {
    const id = "BB" + Math.floor(100000 + Math.random() * 900000);
    setOrder({ id, form, total, items: cart });
    go("confirmation");
  };

  const reset = () => { setCart([]); setOrder(null); };

  return (
    <div className="app" data-palette={t.palette} data-typeface={t.typeface}>
      {screen.name === "landing" && <Landing go={go} cartCount={cartCount} />}
      {screen.name === "catalog" && (
        <Catalog go={go} cartCount={cartCount} addToCart={addToCart} cardStyle={t.cardStyle} />
      )}
      {screen.name === "product" && (
        <ProductDetail go={go} productId={screen.arg} addToCart={addToCart} cartCount={cartCount} />
      )}
      {screen.name === "cart" && (
        <Cart go={go} items={cart} updateQty={updateQty} removeItem={removeItem} />
      )}
      {screen.name === "checkout" && (
        <Checkout go={go} items={cart} onSubmit={onSubmit} />
      )}
      {screen.name === "confirmation" && order && (
        <Confirmation go={go} orderId={order.id} form={order.form}
          total={order.total} items={order.items} onReset={reset} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio value={t.palette} onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "warm", label: "Warm" },
              { value: "tropical", label: "Tropical" },
              { value: "mono", label: "Mono" },
            ]} />
        </TweakSection>
        <TweakSection title="Typeface">
          <TweakRadio value={t.typeface} onChange={(v) => setTweak("typeface", v)}
            options={[
              { value: "classic", label: "Classic" },
              { value: "editorial", label: "Editorial" },
              { value: "modern", label: "Modern" },
            ]} />
        </TweakSection>
        <TweakSection title="Product card style">
          <TweakRadio value={t.cardStyle} onChange={(v) => setTweak("cardStyle", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "classic", label: "Classic" },
              { value: "overlay", label: "Overlay" },
            ]} />
        </TweakSection>
        <div style={{ fontSize: 11, color: "#888", marginTop: 12, lineHeight: 1.5 }}>
          Try Catalog screen to compare card styles.
        </div>
      </TweaksPanel>
    </div>
  );
}

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