/* ============================================================
   ProductBuilder — pantalla estrella (constructor de pizza viva)
   ============================================================ */

/* animated count-up for the price total */
function useCountUp(value, motion) {
  const [disp, setDisp] = useState(value);
  const ref = useRef({ from: value, to: value, start: 0, raf: 0 });
  useEffect(() => {
    const o = ref.current;
    o.from = disp; o.to = value; o.start = performance.now();
    const dur = 420 * Math.min(1.2, Math.max(0.25, motion || 1));
    cancelAnimationFrame(o.raf);
    const tick = (now) => {
      const p = Math.min(1, (now - o.start) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      setDisp(o.from + (o.to - o.from) * e);
      if (p < 1) o.raf = requestAnimationFrame(tick);
    };
    o.raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(o.raf);
  }, [value]);
  return disp;
}

function ProductBuilder({ item, go, addItem, motion, onFly }) {
  const D = window.PHData;
  const data = item || D.PIZZAS[1];
  const startHalf = data.id === "mitad";

  const [mode, setMode] = useState(startHalf ? "half" : "one");
  const [size, setSize] = useState("med");
  const [dough, setDough] = useState("trad");
  const [qty, setQty] = useState(1);

  /* one-pizza recipe: start with no extra ingredients selected */
  const defaultIngs = [];
  const [ings, setIngs] = useState(defaultIngs);
  const [pulseId, setPulseId] = useState(null);

  /* half & half selection */
  const halfPizzas = D.PIZZAS.filter(p => p.id !== "mitad");
  const [leftKind, setLeftKind] = useState(halfPizzas[0]);
  const [rightKind, setRightKind] = useState(halfPizzas[3] || halfPizzas[1]);
  const [sweepKey, setSweepKey] = useState(0);

  const MAX = 7, FREE = 5;
  const sizeObj = D.SIZES.find(s => s.id === size);
  const doughObj = D.DOUGHS.find(d => d.id === dough);

  const extraIng = mode === "one" ? Math.max(0, ings.length - FREE) * 1.2 : 0;
  const basePrice = mode === "half"
    ? Math.max(leftKind.price, rightKind.price) + 1.0
    : data.price;
  const unit = basePrice + sizeObj.delta + doughObj.delta + extraIng;
  const total = unit * qty;
  const dispTotal = useCountUp(total, motion);

  const toggleIng = (id) => {
    setIngs(prev => prev.includes(id) ? prev.filter(x => x !== id) : (prev.length >= MAX ? prev : [...prev, id]));
    setPulseId(id); setTimeout(() => setPulseId(null), 520);
  };

  const switchMode = (m) => {
    if (m === mode) return;
    setMode(m);
    if (m === "half") setSweepKey(k => k + 1);
  };

  const pickHalf = (side, pizza) => {
    if (side === "l") setLeftKind(pizza); else setRightKind(pizza);
    setSweepKey(k => k + 1);
  };

  const addBtnRef = useRef(null);
  const [added, setAdded] = useState(false);
  const handleAdd = () => {
    const name = mode === "half" ? `Mitad ${leftKind.name} y ${rightKind.name}` : data.name;
    const toppings = mode === "half" ? leftKind.toppings : (data.toppings || "supreme");
    addItem({
      ...data, id: data.id + "-" + Date.now(), name,
      toppings, _size: sizeObj.name, _dough: doughObj.name, price: unit, qty,
    });
    if (onFly && addBtnRef.current) onFly();
    setAdded(true); setTimeout(() => setAdded(false), 1100);
  };

  const curLeft = leftKind, curRight = rightKind;

  return (
    <div className="screen">
      <div className="container" style={{ paddingTop: 22 }}>
        <a className="back-link" role="button" onClick={() => go("menu")}><Icon name="back" size={18} /> Volver a la carta</a>

        <div className="builder">
          {/* ---------- LEFT: live stage ---------- */}
          <div className="stage-col rise">
            <LivePizza
              mode={mode}
              sizeId={size}
              motion={motion}
              photo={platePhoto(data)}
              leftPhoto={platePhoto(curLeft)}
              rightPhoto={platePhoto(curRight)}
              activeIngs={ings}
            />
            <div className="size-chips">
              {D.SIZES.map(s => {
                const px = s.id === "ind" ? 30 : s.id === "med" ? 40 : 50;
                return (
                  <button key={s.id} className={"size-chip" + (size === s.id ? " active" : "")} onClick={() => setSize(s.id)}>
                    <span className="sc-disc" style={{ width: px, height: px }}>
                      <svg className="sc-hut" viewBox="0 0 402 98" aria-hidden="true">
                        <path transform="translate(-230.906899,-71.742566)" d="M377.511,71.82C390.256,71.692 396.094,71.771 457.501,71.751C525.471,71.729 525.814,71.616 528.428,73.594C536.093,79.392 537.698,112.425 540.821,119.348C540.959,119.654 540.284,121.162 596.688,144.022C627.693,156.588 633.294,156.56 632.644,163.514C631.96,170.833 623.011,169.519 622.5,169.518C592.896,169.439 238.802,169.534 238.5,169.531C228.132,169.441 230.839,161.277 232.539,159.537C234.565,157.463 313.915,132.079 340.302,121.061C343.389,119.772 346.769,112.221 348.984,108.809C369.736,76.83 367.665,73.254 377.511,71.82Z" fill="#fff" />
                      </svg>
                    </span>
                    <span className="sc-name">{s.name}</span>
                    <span className="sc-diam">{s.diam}</span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* ---------- RIGHT: controls ---------- */}
          <div className="build-info">
            <div className="bld-head rise" style={{ animationDelay: ".05s" }}>
              {data.tags && data.tags[0] && <span className="tag" style={{ position: "static", display: "inline-block" }}>{data.tags[0]}</span>}
              <h1 className="display">{mode === "half" ? "Mitad y mitad" : data.name}</h1>
              <div className="bld-meta">
                <span>{sizeObj.name}</span><span className="dot-sep" />
                <span>{doughObj.name}</span><span className="dot-sep" />
                <span>{sizeObj.diam}</span>
              </div>
              <p className="bld-desc">{mode === "half"
                ? "Combina dos pizzas en una sola. Elige cada mitad y míralas unirse al instante."
                : data.desc}</p>
            </div>

            {/* mode toggle */}
            <div className="mode-seg" data-mode={mode} role="tablist">
              <span className="seg-thumb" />
              <button className={mode === "one" ? "active" : ""} onClick={() => switchMode("one")}>
                <Icon name="pizza" size={18} /> Una pizza
              </button>
              <button className={mode === "half" ? "active" : ""} onClick={() => switchMode("half")}>
                <Icon name="spark" size={18} /> Mitad y mitad
              </button>
            </div>

            {/* mode A — live ingredients */}
            {mode === "one" && (
              <div className="opt-block">
                <div className="opt-head">
                  <h3>Tus ingredientes</h3>
                  <span className="helper">{ings.length}/{MAX} · {FREE} primeros gratis</span>
                </div>
                <div className="ing-bar">
                  <span>{extraIng > 0 ? "Extras" : "Incluidos"}</span>
                  <div className="ing-progress"><span style={{ width: (ings.length / MAX * 100) + "%" }} /></div>
                  <span>{extraIng > 0 ? "+" + euro(extraIng) : "Sin coste"}</span>
                </div>
                <div className="ing-grid">
                  {D.INGREDIENTS.map(ing => {
                    const on = ings.includes(ing.id);
                    return (
                      <button key={ing.id}
                        className={"ing-cell" + (on ? " active" : "") + (pulseId === ing.id ? " pulse" : "")}
                        onClick={() => toggleIng(ing.id)}>
                        <span className="ic-ripple" />
                        <span className="ic-check"><Icon name="check" size={13} /></span>
                        <span className="ic-disc"><IngIcon id={ing.id} size={30} /></span>
                        <span className="ic-name">{ing.name}</span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* mode B — half pickers */}
            {mode === "half" && (
              <div className="opt-block">
                <div className="half-pick">
                  {[["l", curLeft, "Izquierda"], ["r", curRight, "Derecha"]].map(([side, cur, label]) => (
                    <div className="half-card" key={side}>
                      <div className="hc-label"><span className={"hc-side " + side} /> {label}</div>
                      <div className="half-current">
                        <span className="hcur-disc"><img src={window.__asset(platePhoto(cur))} alt="" /></span>
                        <div>
                          <div className="hcur-name">{cur.name}</div>
                          <div className="hcur-sub">{euro(cur.price)}</div>
                        </div>
                      </div>
                      <div className="half-scroll">
                        {halfPizzas.map(p => (
                          <button key={p.id} className={"half-opt" + (cur.id === p.id ? " active" : "")} onClick={() => pickHalf(side, p)}>
                            <span className="ho-disc"><img src={window.__asset(platePhoto(p))} alt="" /></span>
                            <span className="ho-name">{p.name}</span>
                            <span className="ho-price">{euro(p.price)}</span>
                          </button>
                        ))}
                      </div>
                    </div>
                  ))}
                </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-row">
                {D.DOUGHS.map(d => (
                  <button key={d.id} className={"dough-pill" + (dough === d.id ? " active" : "")} onClick={() => setDough(d.id)}>
                    <span className="dp-name">{d.name}</span>
                    <span className="dp-tag">{d.tag}{d.delta ? " · +" + euro(d.delta) : ""}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* add bar */}
            <div className="bld-addbar">
              <Stepper value={qty} onChange={setQty} />
              <button ref={addBtnRef} className={"btn btn-cta btn-block btn-lg" + (added ? " added" : "")} onClick={handleAdd}>
                {added ? (<><Icon name="check" size={18} /> ¡Añadido!</>) : (<>Añadir · <span className="ab-total">{euro(dispTotal)}</span></>)}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductBuilder, useCountUp });