/* global React, useApp, Photo, Icon, ADDONS, REMOVABLE, BREADS, SIDES, DRINKS */
const { useState: useStateB } = React;

// ---------- Dish card ----------
function DishCard({ dish, onOpen }) {
  return (
    <article className="dish">
      <div className="dish-photo">
        <Photo tone={dish.tone} icon="sun" showSun src={dish.image} alt="" />
        {dish.tag && <span className="dish-flag">{dish.tag}</span>}
        {dish.veg && <span className="dish-veg" title="Vegetariano"><Icon name="leaf" size={17} style={{ color: "var(--ok)" }} /></span>}
      </div>
      <div className="dish-body">
        <h3>{dish.name}</h3>
        <p className="dish-desc">{dish.short}</p>
        <div className="dish-foot">
          <span className="price">R$ {dish.price}</span>
          <button className="btn btn-pine btn-sm" onClick={() => onOpen(dish)}>
            <Icon name="plus" size={16} /> Montar
          </button>
        </div>
      </div>
    </article>
  );
}

// ---------- Customization modal ----------
function DishModal({ dish, onClose }) {
  const { addItem } = useApp();
  const [qty, setQty] = useStateB(1);
  const [bread, setBread] = useStateB(BREADS[0].id);
  const [addons, setAddons] = useStateB([]);
  const [removed, setRemoved] = useStateB([]);
  const [side, setSide] = useStateB(null);
  const [drink, setDrink] = useStateB(null);

  const toggle = (arr, set, id) => set(arr.includes(id) ? arr.filter((x) => x !== id) : [...arr, id]);

  const breadObj = BREADS.find((b) => b.id === bread);
  const addonsSum = addons.reduce((s, id) => s + ADDONS.find((a) => a.id === id).price, 0);
  const sideObj = side ? SIDES.find((s) => s.id === side) : null;
  const drinkObj = drink ? DRINKS.find((d) => d.id === drink) : null;
  const unit = dish.price + breadObj.price + addonsSum + (sideObj?.price || 0) + (drinkObj?.price || 0);

  const noteParts = [];
  if (breadObj.id !== BREADS[0].id) noteParts.push(breadObj.name);
  addons.forEach((id) => noteParts.push("+ " + ADDONS.find((a) => a.id === id).name));
  removed.forEach((r) => noteParts.push("sem " + r.toLowerCase()));
  if (sideObj) noteParts.push("c/ " + sideObj.name);
  if (drinkObj) noteParts.push("c/ " + drinkObj.name);

  const add = () => {
    addItem({ name: dish.name, tone: dish.tone, image: dish.image, unit, qty, note: noteParts.join(" · ") || "Tradicional" });
    onClose();
  };

  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-photo">
          <Photo tone={dish.tone} icon="sun" showSun src={dish.image} alt="" />
          {dish.veg && <span className="dish-veg" style={{ top: 14, left: 14 }}><Icon name="leaf" size={17} style={{ color: "var(--ok)" }} /></span>}
          <button className="modal-x" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 }}>
            <div>
              <h2 style={{ fontSize: 27 }}>{dish.name}</h2>
              <p className="muted" style={{ marginTop: 8, fontSize: 14.5 }}>{dish.desc}</p>
            </div>
            <span className="price" style={{ whiteSpace: "nowrap" }}>R$ {dish.price}</span>
          </div>

          <div className="opt-group">
            <h4>Escolha o pão</h4>
            {BREADS.map((b) => (
              <div key={b.id} className={"opt" + (bread === b.id ? " sel" : "")} onClick={() => setBread(b.id)}>
                <div className="opt-l">
                  <span className="opt-check">{bread === b.id && <Icon name="check" size={14} />}</span>{b.name}
                </div>
                <span className="opt-price">{b.price ? `+ R$ ${b.price}` : "incluso"}</span>
              </div>
            ))}
          </div>

          <div className="opt-group">
            <h4>Turbine seu sanduíche</h4>
            {ADDONS.map((a) => (
              <div key={a.id} className={"opt" + (addons.includes(a.id) ? " sel" : "")} onClick={() => toggle(addons, setAddons, a.id)}>
                <div className="opt-l">
                  <span className="opt-check">{addons.includes(a.id) && <Icon name="check" size={14} />}</span>{a.name}
                </div>
                <span className="opt-price">+ R$ {a.price}</span>
              </div>
            ))}
          </div>

          <div className="opt-group">
            <h4>Remover algo? (opcional)</h4>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {REMOVABLE.map((r) => (
                <button key={r} className={"chip" + (removed.includes(r) ? " active" : "")} onClick={() => toggle(removed, setRemoved, r)}>
                  {removed.includes(r) && <Icon name="x" size={13} />}{r}
                </button>
              ))}
            </div>
          </div>

          <div className="opt-group">
            <h4>Adicionar acompanhamento</h4>
            {SIDES.map((s) => (
              <div key={s.id} className={"opt" + (side === s.id ? " sel" : "")} onClick={() => setSide(side === s.id ? null : s.id)}>
                <div className="opt-l"><span className="opt-check" style={{ borderRadius: "50%" }}>{side === s.id && <Icon name="check" size={14} />}</span>{s.name}</div>
                <span className="opt-price">+ R$ {s.price}</span>
              </div>
            ))}
          </div>

          <div className="opt-group">
            <h4>Bebida</h4>
            {DRINKS.map((d) => (
              <div key={d.id} className={"opt" + (drink === d.id ? " sel" : "")} onClick={() => setDrink(drink === d.id ? null : d.id)}>
                <div className="opt-l"><span className="opt-check" style={{ borderRadius: "50%" }}>{drink === d.id && <Icon name="check" size={14} />}</span>{d.name}</div>
                <span className="opt-price">+ R$ {d.price}</span>
              </div>
            ))}
          </div>

          <div className="divider" />
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
            <div className="stepper">
              <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={16} /></button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={16} /></button>
            </div>
            <button className="btn btn-amber btn-lg" style={{ flex: 1, minWidth: 200 }} onClick={add}>
              Adicionar · R$ {(unit * qty).toFixed(0)}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DishCard, DishModal });