/* ============================================================
   Screens — Home, Menu, Product, Cart, Checkout
   ============================================================ */

const euro = (n) => n.toFixed(2).replace(".", ",") + " €";

/* ---------- HOME ---------- */
function HomeScreen({ mode, setMode, go, addItem }) {
  const D = window.PHData;
  const best = D.PIZZAS.slice(0, 3);
  return (
    <div className="screen">
      {/* HERO */}
      <section className="hero">
        <div className="container hero-inner">
          <div className="hero-copy fade-in">
            <p className="eyebrow">Pepsi & Pizza Hut · todos los días de partido</p>
            <h1 className="display">El trío<br />perfecto.</h1>
            <p>Pizza recién hecha, tu bebida favorita y postre. Pídelo a domicilio o recógelo en tu Plaza Mayor más cercana.</p>
            <div className="hero-cta-row">
              <button className="btn btn-primary btn-lg" onClick={() => go("menu")}>Ver todas las pizzas</button>
              <button className="btn btn-outline btn-lg" onClick={() => go("menu")}>Ver ofertas</button>
            </div>
          </div>
          <div className="hero-art">
            <div className="order-card fade-in">
              <div className="order-tabs">
                <button className={"order-tab" + (mode === "delivery" ? " active" : "")} onClick={() => setMode("delivery")}>
                  <Icon name="moped" size={20} /> A domicilio
                </button>
                <button className={"order-tab" + (mode === "pickup" ? " active" : "")} onClick={() => setMode("pickup")}>
                  <Icon name="store" size={20} /> A recoger
                </button>
              </div>
              <div className="order-row">
                <span className="or-ico"><Icon name="pin" size={19} /></span>
                <div className="or-main">
                  <div className="or-label">{mode === "delivery" ? "Entregar en" : "Recoger en"}</div>
                  <div className="or-value">Plaza Mayor · Calle Gerona 3</div>
                </div>
                <Icon name="chevron" size={18} style={{ color: "var(--ink-3)" }} />
              </div>
              <div className="order-row">
                <span className="or-ico"><Icon name="clock" size={19} /></span>
                <div className="or-main">
                  <div className="or-label">Hora</div>
                  <div className="or-value">Lo antes posible · 23:45</div>
                </div>
                <Icon name="chevron" size={18} style={{ color: "var(--ink-3)" }} />
              </div>
              <button className="btn btn-cta btn-block btn-lg" onClick={() => go("menu")}>Empezar pedido</button>
            </div>
          </div>
        </div>
      </section>

      <div className="container">
        {/* BESTSELLERS */}
        <section className="section">
          <div className="section-head">
            <div>
              <p className="eyebrow">Pídelas ya</p>
              <h2 className="display">Las más vendidas</h2>
            </div>
            <a className="link-more" role="button" onClick={() => go("menu")}>Todas <Icon name="chevron" size={15} /></a>
          </div>
          <div className="grid grid-3 bs-grid">
            {best.map(p => <BestsellerCard key={p.id} item={p} onAdd={addItem} onOpen={(it) => go("product", it)} />)}
          </div>
        </section>

        {/* OFFERS */}
        <section className="section">
          <div className="section-head">
            <h2 className="display">Ofertas</h2>
            <a className="link-more" role="button">Todas <Icon name="chevron" size={15} /></a>
          </div>
          <div className="grid grid-2">
            {D.OFFERS.slice(0, 2).map(o => <OfferCard key={o.id} offer={o} onAdd={addItem} />)}
          </div>
        </section>

        {/* PROMO */}
        <section className="section">
          <div className="promo">
            <div>
              <p className="eyebrow" style={{ color: "inherit", opacity: .8 }}>También en la Rolling</p>
              <div className="promo-big">50% online<br />en todas las pizzas</div>
              <p>Pide a domicilio desde la web y llévate la mitad. Aplica también a la masa Rolling con borde de queso.</p>
            </div>
            <button className="btn btn-cta btn-lg" onClick={() => go("menu")}>Aprovechar</button>
          </div>
        </section>

        {/* MENU PREVIEW */}
        <section className="section">
          <div className="section-head">
            <h2 className="display">Nuestras pizzas</h2>
            <a className="link-more" role="button" onClick={() => go("menu")}>Ver carta <Icon name="chevron" size={15} /></a>
          </div>
          <div className="grid grid-3">
            {D.PIZZAS.slice(1, 4).map(p => <ProductCard key={p.id} item={p} onOpen={(it) => go("product", it)} onAdd={addItem} />)}
          </div>
        </section>
      </div>
    </div>
  );
}

/* ---------- MENU (pizza listing) ---------- */
function MenuScreen({ go, addItem }) {
  const D = window.PHData;
  const [filter, setFilter] = useState("all");
  const filters = [
    { id: "all", name: "Todas", n: D.PIZZAS.length },
    { id: "glutenfree", name: "Sin gluten", n: D.PIZZAS.filter(p => p.filter.includes("glutenfree")).length },
    { id: "greatest", name: "Greatest Hits", n: D.PIZZAS.filter(p => p.filter.includes("greatest")).length },
    { id: "premium", name: "Premium", n: D.PIZZAS.filter(p => p.filter.includes("premium")).length },
  ];
  const list = filter === "all" ? D.PIZZAS : D.PIZZAS.filter(p => p.filter.includes(filter));
  return (
    <div className="screen">
      <div className="container" style={{ paddingTop: 28 }}>
        <div className="section-head" style={{ marginBottom: 18 }}>
          <div>
            <p className="eyebrow">Carta</p>
            <h2 className="display" style={{ fontSize: "clamp(30px,4vw,46px)" }}>Pizzas</h2>
          </div>
        </div>
        <div className="filters">
          {filters.map(f => (
            <button key={f.id} className={"fpill" + (filter === f.id ? " active" : "")} onClick={() => setFilter(f.id)}>
              {f.name} ({f.n})
            </button>
          ))}
        </div>

        {/* promo banner */}
        <div className="promo" style={{ marginBottom: 28 }}>
          <div>
            <p className="eyebrow" style={{ color: "inherit", opacity: .8 }}>En todas las pizzas</p>
            <div className="promo-big">50% online a domicilio</div>
          </div>
          <button className="btn btn-cta" onClick={() => go("menu")}>También en la Rolling</button>
        </div>

        <div className="grid grid-3">
          {list.map(p => <ProductCard key={p.id} item={p} onOpen={(it) => go("product", it)} onAdd={addItem} />)}
        </div>
      </div>
    </div>
  );
}

/* ---------- PRODUCT DETAIL ---------- */
function ProductScreen({ item, go, addItem }) {
  const D = window.PHData;
  const data = item || D.PIZZAS[2];
  const [size, setSize] = useState("med");
  const [dough, setDough] = useState("trad");
  const [qty, setQty] = useState(1);
  const baseIng = ["pep", "bacon", "cebolla"];
  const [ings, setIngs] = useState(baseIng);
  const MAX = 6, FREE = 5;

  const sizeObj = D.SIZES.find(s => s.id === size);
  const doughObj = D.DOUGHS.find(d => d.id === dough);
  const extraIng = Math.max(0, ings.length - FREE) * 1.0;
  const unit = data.price + sizeObj.delta + doughObj.delta + extraIng;
  const total = unit * qty;

  const toggleIng = (id) => setIngs(prev =>
    prev.includes(id) ? prev.filter(x => x !== id) : (prev.length >= MAX ? prev : [...prev, id]));

  return (
    <div className="screen">
      <div className="container" style={{ paddingTop: 24 }}>
        <a className="back-link" role="button" onClick={() => go("menu")}><Icon name="back" size={18} /> Volver a la carta</a>
        <div className="pdp">
          {/* MEDIA */}
          <div>
            <div className="pdp-media">
              <Media item={data} label={"foto · " + data.name.toLowerCase()} />
            </div>
          </div>

          {/* INFO */}
          <div>
            {data.tags && data.tags[0] && <span className="tag" style={{ position: "static", display: "inline-block", marginBottom: 14 }}>{data.tags[0]}</span>}
            <h1 className="display">{data.name}</h1>
            <div className="pdp-meta">{sizeObj.name} · {doughObj.name} · {sizeObj.diam}</div>
            <p className="pdp-desc">{data.desc}</p>

            {/* SIZE */}
            <div className="opt-block">
              <div className="opt-head"><h3>Tamaño</h3></div>
              <div className="size-row">
                {D.SIZES.map(s => (
                  <button key={s.id} className={"size-opt" + (size === s.id ? " active" : "")} onClick={() => setSize(s.id)}>
                    <div className="so-disc"><Pizza kind={data.toppings} size={s.id === "ind" ? "60%" : s.id === "med" ? "78%" : "94%"} /></div>
                    <div className="so-name">{s.name}</div>
                    <div className="so-price">{s.diam}{s.delta ? (s.delta > 0 ? ` · +${euro(s.delta)}` : ` · ${euro(s.delta)}`) : ""}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* DOUGH */}
            <div className="opt-block">
              <div className="opt-head"><h3>Tipo de masa</h3><span className="helper">Elige la base</span></div>
              <div className="dough-grid">
                {D.DOUGHS.map(d => (
                  <button key={d.id} className={"dough-opt" + (dough === d.id ? " active" : "")} onClick={() => setDough(d.id)}>
                    <div>
                      <div className="do-name">{d.name}</div>
                      <div className="do-tag">{d.tag}</div>
                    </div>
                    <span className="do-price">{d.delta ? "+" + euro(d.delta) : "Gratis"}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* INGREDIENTS */}
            <div className="opt-block">
              <div className="opt-head"><h3>Tus ingredientes</h3><span className="helper">Hasta {MAX} · gratis los {FREE} primeros</span></div>
              <div className="ing-bar">
                <span>{ings.length} de {MAX} elegidos</span>
                <div className="ing-progress"><span style={{ width: (ings.length / MAX * 100) + "%" }} /></div>
                <span>{extraIng > 0 ? "+" + euro(extraIng) : "Sin extra"}</span>
              </div>
              <div className="ing-wrap">
                {D.INGREDIENTS.map(ing => {
                  const on = ings.includes(ing.id);
                  return (
                    <button key={ing.id} className={"ing" + (on ? " active" : "")} onClick={() => toggleIng(ing.id)}>
                      <span className="ing-check"><Icon name="check" size={13} /></span>
                      <div className="ing-disc"><IngIcon id={ing.id} size={28} /></div>
                      <div className="ing-name">{ing.name}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* ADD BAR */}
            <div className="add-bar">
              <Stepper value={qty} onChange={setQty} />
              <button className="btn btn-cta btn-block btn-lg" onClick={() => addItem({ ...data, _size: sizeObj.name, _dough: doughObj.name, price: unit, qty })}>
                Añadir · {euro(total)}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- CART ---------- */
function CartScreen({ cart, setCart, go, mode }) {
  const D = window.PHData;
  const subtotal = cart.reduce((s, c) => s + c.price * c.qty, 0);
  const fee = mode === "delivery" && subtotal > 0 ? 2.5 : 0;
  const total = subtotal + fee;
  const [upIdx, setUpIdx] = useState(0);
  const ups = D.SIDES;

  const setQty = (i, q) => setCart(cart.map((c, idx) => idx === i ? { ...c, qty: q } : c));
  const remove = (i) => setCart(cart.filter((_, idx) => idx !== i));
  const addUp = (s) => setCart([...cart, { ...s, qty: 1 }]);

  if (cart.length === 0) {
    return (
      <div className="screen"><div className="container" style={{ paddingTop: 24 }}>
        <a className="back-link" role="button" onClick={() => go("home")}><Icon name="back" size={18} /> Seguir comprando</a>
        <h1 className="display" style={{ fontSize: "clamp(32px,4.4vw,48px)", margin: "6px 0 26px" }}>Tu pedido</h1>
        <div className="empty-cart">
          <div className="ec-disc"><Icon name="bag" size={32} /></div>
          <h3 style={{ margin: "0 0 8px", fontSize: 20 }}>Aún no has añadido nada</h3>
          <p className="muted" style={{ margin: "0 0 22px" }}>Empieza por una de nuestras pizzas más vendidas.</p>
          <button className="btn btn-primary btn-lg" onClick={() => go("menu")}>Ver la carta</button>
        </div>
      </div></div>
    );
  }

  return (
    <div className="screen"><div className="container" style={{ paddingTop: 24 }}>
      <a className="back-link" role="button" onClick={() => go("menu")}><Icon name="back" size={18} /> Seguir comprando</a>
      <h1 className="display" style={{ fontSize: "clamp(32px,4.4vw,48px)", margin: "6px 0 26px" }}>Tu pedido</h1>
      <div className="cart-grid">
        <div>
          {cart.map((c, i) => (
            <div className="cart-line" key={i}>
              <div className="cl-media"><FoodPhoto item={c} size="80%" /></div>
              <div className="cl-main">
                <div className="cl-title">{c.name}</div>
                <div className="cl-sub">{c._size ? `${c._size} · ${c._dough}` : (c.sub || "Mediana · Masa Tradicional")}</div>
                {c.toppings && <a className="cl-edit" role="button" onClick={() => go("product", c)}><Icon name="edit" size={13} /> Editar</a>}
              </div>
              <div className="cl-right">
                <span className="price">{euro(c.price * c.qty)}</span>
                <Stepper value={c.qty} onChange={(q) => setQty(i, q)} />
                <button className="cart-remove" onClick={() => remove(i)}>Quitar</button>
              </div>
            </div>
          ))}

          {/* upsell */}
          <div className="upsell">
            <div className="up-media">{<div className="foodph"><div className="fp-disc" /></div>}</div>
            <div className="up-main">
              <div className="up-q">¿Quieres añadir algo más?</div>
              <div className="up-title">{ups[upIdx].name} · {euro(ups[upIdx].price)}</div>
            </div>
            <button className="iconbtn" onClick={() => setUpIdx((upIdx - 1 + ups.length) % ups.length)}><Icon name="back" size={18} /></button>
            <button className="btn btn-outline" onClick={() => addUp(ups[upIdx])}>Añadir</button>
            <button className="iconbtn" onClick={() => setUpIdx((upIdx + 1) % ups.length)}><Icon name="chevron" size={18} /></button>
          </div>
        </div>

        {/* summary */}
        <aside className="summary">
          <div className="pickup-pill">
            <span className="pp-ico"><Icon name={mode === "delivery" ? "moped" : "store"} size={18} /></span>
            <div style={{ fontSize: 13 }}>
              <strong>{mode === "delivery" ? "A domicilio" : "A recoger"} · Plaza Mayor</strong><br />
              <span className="muted">Abierto hasta las 00:00</span>
            </div>
          </div>
          <h3>Resumen</h3>
          <div className="sum-row"><span>Subtotal</span><span>{euro(subtotal)}</span></div>
          {fee > 0 && <div className="sum-row"><span>Gastos de envío</span><span>{euro(fee)}</span></div>}
          <div className="sum-row"><span>Descuento online</span><span style={{ color: "var(--ok)", fontWeight: 700 }}>−{euro(0)}</span></div>
          <div className="sum-row total"><span>Total</span><span>{euro(total)}</span></div>
          <button className="btn btn-cta btn-block btn-lg" style={{ marginTop: 16 }} onClick={() => go("checkout")}>Ir a pagar</button>
          <p className="muted" style={{ fontSize: 12, textAlign: "center", marginTop: 12 }}>Pago seguro · Recíbelo en ~30 min</p>
        </aside>
      </div>
    </div></div>
  );
}

/* ---------- CHECKOUT ---------- */
function CheckoutScreen({ cart, go, mode, onPlace }) {
  const subtotal = cart.reduce((s, c) => s + c.price * c.qty, 0);
  const fee = mode === "delivery" && subtotal > 0 ? 2.5 : 0;
  const total = subtotal + fee;
  const [pay, setPay] = useState("card");
  const [deliver, setDeliver] = useState(mode);

  return (
    <div className="screen"><div className="container" style={{ paddingTop: 24 }}>
      <a className="back-link" role="button" onClick={() => go("cart")}><Icon name="back" size={18} /> Volver al pedido</a>
      <h1 className="display" style={{ fontSize: "clamp(32px,4.4vw,48px)", margin: "6px 0 26px" }}>Finalizar pedido</h1>
      <div className="checkout-grid">
        <div>
          {/* mode */}
          <div className="co-card">
            <h3><span className="co-step-no">1</span> ¿Cómo lo quieres?</h3>
            <p className="co-hint">Elige entre recoger en tienda o recibirlo en tu puerta.</p>
            <div className="size-row" style={{ marginLeft: 0 }}>
              <button className={"size-opt" + (deliver === "delivery" ? " active" : "")} onClick={() => setDeliver("delivery")}>
                <div className="so-disc"><Icon name="moped" size={20} /></div>
                <div className="so-name">A domicilio</div>
                <div className="so-price">~30 min · {euro(2.5)}</div>
              </button>
              <button className={"size-opt" + (deliver === "pickup" ? " active" : "")} onClick={() => setDeliver("pickup")}>
                <div className="so-disc"><Icon name="store" size={20} /></div>
                <div className="so-name">A recoger</div>
                <div className="so-price">Listo en ~20 min · gratis</div>
              </button>
            </div>
          </div>

          {/* contact */}
          <div className="co-card">
            <h3><span className="co-step-no">2</span> Tus datos</h3>
            <p className="co-hint">Para avisarte cuando esté en camino.</p>
            <div className="field-row">
              <div className="field"><label>Nombre</label><input placeholder="Tu nombre" defaultValue="" /></div>
              <div className="field"><label>Teléfono</label><input placeholder="600 000 000" /></div>
            </div>
            <div className="field"><label>Email</label><input placeholder="tucorreo@email.com" /></div>
            {deliver === "delivery" && (
              <>
                <div className="field"><label>Dirección</label><input placeholder="Calle, número" /></div>
                <div className="field-row-3">
                  <div className="field"><label>Piso / puerta</label><input placeholder="3ºB" /></div>
                  <div className="field"><label>C.P.</label><input placeholder="28013" /></div>
                  <div className="field"><label>Ciudad</label><input placeholder="Madrid" /></div>
                </div>
              </>
            )}
            {deliver === "pickup" && (
              <div className="pickup-pill" style={{ marginBottom: 0 }}>
                <span className="pp-ico"><Icon name="pin" size={18} /></span>
                <div style={{ fontSize: 13 }}><strong>Plaza Mayor · Calle Gerona 3</strong><br /><span className="muted">A 8 min andando · abierto hasta 00:00</span></div>
              </div>
            )}
          </div>

          {/* payment */}
          <div className="co-card">
            <h3><span className="co-step-no">3</span> Pago</h3>
            <p className="co-hint">Selecciona tu método preferido.</p>
            {[
              { id: "card", ico: "card", name: "Tarjeta de crédito", sub: "Visa, Mastercard, Amex" },
              { id: "apple", ico: "spark", name: "Apple Pay / Google Pay", sub: "Pago en un toque" },
              { id: "cash", ico: "cash", name: "Efectivo", sub: "Paga en la entrega" },
            ].map(o => (
              <div key={o.id} className={"pay-opt" + (pay === o.id ? " active" : "")} onClick={() => setPay(o.id)}>
                <span className="pay-radio" />
                <span className="pay-ico"><Icon name={o.ico} size={19} /></span>
                <div><div className="pay-name">{o.name}</div><div className="pay-sub">{o.sub}</div></div>
              </div>
            ))}
            {pay === "card" && (
              <div style={{ marginTop: 14 }}>
                <div className="field"><label>Número de tarjeta</label><input placeholder="1234 5678 9012 3456" /></div>
                <div className="field-row">
                  <div className="field"><label>Caducidad</label><input placeholder="MM/AA" /></div>
                  <div className="field"><label>CVV</label><input placeholder="123" /></div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* order summary */}
        <aside className="summary">
          <h3>Tu pedido</h3>
          {cart.map((c, i) => (
            <div className="co-line" key={i}>
              <div className="col-media"><FoodPhoto item={c} size="80%" /></div>
              <div className="col-main">
                <div className="col-title">{c.name}</div>
                <div className="col-sub">{c._size ? `${c._size} · ${c._dough}` : (c.sub || "")}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="col-qty">×{c.qty}</div>
                <div className="price" style={{ fontSize: 14 }}>{euro(c.price * c.qty)}</div>
              </div>
            </div>
          ))}
          <div className="promo-input">
            <input placeholder="Código promocional" />
            <button className="btn btn-ghost" style={{ padding: "12px 16px" }}>Aplicar</button>
          </div>
          <div className="sum-row"><span>Subtotal</span><span>{euro(subtotal)}</span></div>
          {deliver === "delivery" && <div className="sum-row"><span>Envío</span><span>{euro(2.5)}</span></div>}
          <div className="sum-row total"><span>Total</span><span>{euro(deliver === "delivery" ? subtotal + 2.5 : subtotal)}</span></div>
          <button className="btn btn-cta btn-block btn-lg" style={{ marginTop: 16 }} onClick={onPlace}>Confirmar y pagar</button>
          <p className="muted" style={{ fontSize: 12, textAlign: "center", marginTop: 12 }}>Al confirmar aceptas las condiciones de uso.</p>
        </aside>
      </div>
    </div></div>
  );
}

Object.assign(window, { HomeScreen, MenuScreen, ProductScreen, CartScreen, CheckoutScreen, euro });