// Frangos — Order flow: cart → details → payment → confirmation
function QtyStepper({ qty, onChange }) {
  return (
    <div className="qty">
      <button onClick={() => onChange(qty - 1)} aria-label="−">−</button>
      <span>{qty}</span>
      <button onClick={() => onChange(qty + 1)} aria-label="+">+</button>
    </div>
  );
}

function CartLine({ line }) {
  const { t, lang, setQty, removeLine } = useApp();
  const item = MENU.find((m) => m.id === line.id);
  if (!item) return null;
  return (
    <div className="cart-line">
      {item.img ? (
        <img className="cart-thumb" src={item.img} alt="" loading="lazy"></img>
      ) : (
        <div className="cart-thumb cart-thumb-ph"><Flame size={18} color="rgba(245,239,232,.3)"></Flame></div>
      )}
      <div className="cart-line-info">
        <div className="cart-line-top">
          <span className="cart-line-name">{item.name[lang]}</span>
          <span className="price">{dh(item.price * line.qty)}</span>
        </div>
        {line.heat != null ? (
          <span className="cart-heat">
            <HeatFlames level={line.heat} size={12}></HeatFlames>
            <span>{t.heat.levels[line.heat].name}</span>
          </span>
        ) : null}
        <div className="cart-line-bottom">
          <QtyStepper qty={line.qty} onChange={(q) => setQty(line.key, q)}></QtyStepper>
          <button className="link-btn" onClick={() => removeLine(line.key)}>{t.order.remove}</button>
        </div>
      </div>
    </div>
  );
}

function OrderPage() {
  const { t, cart, cartCount, clearCart } = useApp();
  const [step, setStep] = React.useState("cart"); // cart | details | done
  const [mode, setMode] = React.useState("delivery");
  const [pay, setPay] = React.useState("cash");
  const [form, setForm] = React.useState({ name: "", phone: "", address: "" });
  const [orderNo] = React.useState(() => "FR-" + Math.floor(1000 + Math.random() * 9000));

  const subtotal = cart.reduce((s, l) => {
    const item = MENU.find((m) => m.id === l.id);
    return s + (item ? item.price * l.qty : 0);
  }, 0);
  const fee = mode === "delivery" ? (subtotal >= 150 ? 0 : 15) : 0;
  const total = subtotal + fee;
  const detailsOk = form.name.trim() && form.phone.trim() && (mode === "pickup" || form.address.trim());

  if (step === "done") {
    return (
      <main className="page page-narrow" data-screen-label="Order / Confirmation">
        <div className="confirm-card">
          <div className="confirm-flame"><Flame size={40} color="#fff"></Flame></div>
          <h1 className="display confirm-title">{t.order.confirmTitle}</h1>
          <p className="confirm-no">{t.order.orderNo} <strong>{orderNo}</strong> · {mode === "delivery" ? t.order.deliveryTime : t.order.pickupTime}</p>
          <p className="section-sub">{t.order.confirmBody}</p>
          <a href="#/" className="btn btn-accent" onClick={() => clearCart()}>{t.order.backHome}</a>
        </div>
      </main>
    );
  }

  return (
    <main className="page" data-screen-label="Order">
      <header className="page-head">
        <div className="kicker"><Flame size={13} color="var(--accent)"></Flame><span>{t.nav.order}</span></div>
        <h1 className="display page-title">{t.order.title}</h1>
      </header>

      {cartCount === 0 ? (
        <div className="empty-cart">
          <Flame size={34} color="rgba(245,239,232,.25)"></Flame>
          <p>{t.order.empty}</p>
          <a href="#/menu" className="btn btn-accent">{t.order.emptyCta}</a>
        </div>
      ) : (
        <div className="order-grid">
          <section className="order-main">
            <div className="mode-switch" role="radiogroup">
              {[["delivery", t.order.delivery, t.order.deliveryTime], ["pickup", t.order.pickup, t.order.pickupTime]].map(([m, label, time]) => (
                <button key={m} role="radio" aria-checked={mode === m} className={"mode-btn" + (mode === m ? " on" : "")} onClick={() => setMode(m)}>
                  <span className="mode-label">{label}</span>
                  <span className="mode-time">{time}</span>
                </button>
              ))}
            </div>

            {step === "cart" ? (
              <div className="cart-lines">
                {cart.map((l) => (<CartLine key={l.key} line={l}></CartLine>))}
              </div>
            ) : (
              <div className="details-form">
                <h2 className="form-title">{t.order.detailsTitle}</h2>
                <label className="field"><span>{t.order.name}</span>
                  <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}></input>
                </label>
                <label className="field"><span>{t.order.phone}</span>
                  <input type="tel" dir="ltr" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}></input>
                </label>
                {mode === "delivery" ? (
                  <label className="field"><span>{t.order.address}</span>
                    <input placeholder={t.order.addressPh} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })}></input>
                  </label>
                ) : null}
                <h2 className="form-title">{t.order.payTitle}</h2>
                <div className="pay-options" role="radiogroup">
                  <button role="radio" aria-checked={pay === "cash"} className={"pay-btn" + (pay === "cash" ? " on" : "")} onClick={() => setPay("cash")}>
                    {mode === "delivery" ? t.order.payCash : t.order.payCashPickup}
                  </button>
                  <button role="radio" aria-checked={pay === "card"} className={"pay-btn" + (pay === "card" ? " on" : "")} onClick={() => setPay("card")}>
                    {t.order.payCard}
                  </button>
                </div>
              </div>
            )}
          </section>

          <aside className="order-summary">
            <div className="sum-row"><span>{t.order.subtotal}</span><span>{dh(subtotal)}</span></div>
            {mode === "delivery" ? (
              <div className="sum-row"><span>{t.order.deliveryFee}</span><span>{fee === 0 ? t.order.free : dh(fee)}</span></div>
            ) : null}
            <div className="sum-row sum-total"><span>{t.order.total}</span><span>{dh(total)}</span></div>
            {step === "cart" ? (
              <button className="btn btn-accent btn-block" onClick={() => setStep("details")}>{t.order.checkout}</button>
            ) : (
              <React.Fragment>
                <button className="btn btn-accent btn-block" disabled={!detailsOk} onClick={() => { setStep("done"); window.scrollTo(0, 0); }}>{t.order.place}</button>
                <button className="link-btn" onClick={() => setStep("cart")}>{t.order.back}</button>
              </React.Fragment>
            )}
          </aside>
        </div>
      )}
    </main>
  );
}

Object.assign(window, { OrderPage });