/* CartPanel — cart always visible.
   Desktop: a sticky sidebar next to the catalog.
   Mobile:  a fixed bottom bar that expands into a sheet (same contents). */

function money(n) { return window.eoMoney(n); }

function computeTotals(list) {
  const subtotal = list.reduce((s, l) => s + l.product.price * l.qty, 0);
  const hasCombo = list.some((l) => l.product.combo);
  const delivery = hasCombo || subtotal === 0 ? 0 : 8000;
  return { subtotal, delivery, total: subtotal + delivery, hasCombo };
}

function CartLine({ l, onInc, onDec }) {
  const p = l.product;
  return (
    <div className="line">
      <div className="line-thumb" style={{ background: p.img ? 'var(--eo-white)' : `color-mix(in srgb, ${p.color} 18%, white)` }}>
        {p.img ? <img src={p.img} alt="" /> : <span className="line-dot" style={{ background: p.color }}></span>}
      </div>
      <div className="line-info">
        <div className="line-name">{p.name}</div>
        <div className="line-price">{money(p.price)} {l.qty > 1 && <span className="line-sub">· {money(p.price * l.qty)}</span>}</div>
      </div>
      <div className="stepper sm">
        <button onClick={() => onDec(p)} aria-label="Quitar">
          <Icon name={l.qty === 1 ? 'Trash' : 'Minus'} size={l.qty === 1 ? 13 : 14}/>
        </button>
        <span>{l.qty}</span>
        <button onClick={() => onInc(p)} aria-label="Agregar"><Icon name="Plus" size={14}/></button>
      </div>
    </div>
  );
}

function slotParts(combo, slotId, config) {
  const sel = (config && config[slotId]) || {};
  return Object.entries(sel).map(([id, q]) => `${q}× ${(window.EO_DATA.BY_ID[id] || {}).name || id}`);
}

function ComboCartLine({ l, onEdit, onRemove }) {
  const c = l.product;
  return (
    <div className="cline">
      <div className="cline-top">
        <div className="line-thumb" style={{ background: c.img ? 'var(--eo-white)' : `color-mix(in srgb, ${c.color} 22%, white)` }}>
          {c.img ? <img src={c.img} alt="" /> : <span className="line-dot" style={{ background: c.color }}></span>}
        </div>
        <div className="line-info">
          <div className="line-name">{c.name} <span className="cline-tag">Combo</span></div>
          <div className="line-price">{money(c.price)}</div>
        </div>
        <div className="cline-acts">
          <button className="cline-edit" onClick={() => onEdit(c)}><Icon name="Edit" size={13}/> Editar</button>
          <button className="cline-rm" onClick={() => onRemove(c)} aria-label="Quitar combo"><Icon name="Trash" size={14}/></button>
        </div>
      </div>
      <div className="cline-body">
        {c.slots.map((s) => {
          const parts = slotParts(c, s.id, l.config);
          return (
            <div className="cline-slot" key={s.id}>
              <span className="cline-slot-label">{s.qty} {s.unit}</span>
              <span className="cline-slot-items">{parts.length ? parts.join(', ') : 'Sin elegir'}</span>
            </div>
          );
        })}
        {c.includes.length > 0 && <div className="cline-inc"><Icon name="Check" size={12}/> + {c.includes.length} productos incluidos</div>}
      </div>
    </div>
  );
}

// Shared body: list, totals, CTA. `compact` hides the title (sheet shows its own).
function CartBody({ items, city, onInc, onDec, onClear, onCheckout, onEditCombo, ctaLabel }) {
  const list = Object.values(items);
  const { subtotal, delivery, total } = computeTotals(list);
  const count = list.reduce((s, l) => s + l.qty, 0);

  if (list.length === 0) {
    return (
      <div className="cart-empty">
        <div className="cart-empty-art"><Icon name="ShoppingBag" size={34} /></div>
        <p className="cart-empty-t">Tu canasta está vacía</p>
        <p className="cart-empty-s">Elige un combo o arma tu mercado a tu gusto. Lo verás aparecer aquí 🧺</p>
      </div>
    );
  }

  return (
    <React.Fragment>
      <div className="cart-note">
        {delivery === 0
          ? <span className="cart-note-ok"><Icon name="Truck" size={15}/> ¡Domicilio incluido en {city}!</span>
          : <span><Icon name="Truck" size={15}/> Suma un combo y el domicilio va <b>incluido</b></span>}
      </div>

      <div className="cart-list">
        {list.map((l) => l.product.combo
          ? <ComboCartLine key={l.product.id} l={l} onEdit={onEditCombo} onRemove={onDec} />
          : <CartLine key={l.product.id} l={l} onInc={onInc} onDec={onDec} />)}
      </div>

      <div className="cart-foot">
        <div className="trow"><span>Subtotal · {count} {count === 1 ? 'producto' : 'productos'}</span><span>{money(subtotal)}</span></div>
        <div className="trow"><span>Domicilio · {city}</span><span className={delivery === 0 ? 'free' : ''}>{delivery === 0 ? 'Incluido' : money(delivery)}</span></div>
        <div className="trow total"><span>Total</span><span>{money(total)}</span></div>
        <button className="btn btn-primary btn-block" onClick={onCheckout}>
          {ctaLabel || 'Continuar'} <Icon name="ArrowRight" size={18}/>
        </button>
        <button className="link-btn" onClick={onClear}>Vaciar canasta</button>
      </div>
    </React.Fragment>
  );
}

// Desktop sticky sidebar
function CartPanel(props) {
  const count = Object.values(props.items).reduce((s, l) => s + l.qty, 0);
  return (
    <aside className="cart-panel">
      <div className="cart-panel-head">
        <h3><Icon name="ShoppingBag" size={20}/> Mi pedido</h3>
        {count > 0 && <span className="cart-panel-count">{count}</span>}
      </div>
      <CartBody {...props} />
    </aside>
  );
}

// Mobile bottom bar + expandable sheet
function MobileCart(props) {
  const [open, setOpen] = React.useState(false);
  const list = Object.values(props.items);
  const { total } = computeTotals(list);
  const count = list.reduce((s, l) => s + l.qty, 0);

  React.useEffect(() => {
    if (props.forceOpen) setOpen(true);
  }, [props.forceOpen]);

  return (
    <React.Fragment>
      <div className="mcart-bar">
        <button className="mcart-bar-main" onClick={() => setOpen(true)}>
          <span className="mcart-bar-ic">
            <Icon name="ShoppingBag" size={20}/>
            {count > 0 && <span className="cart-count">{count}</span>}
          </span>
          <span className="mcart-bar-txt">
            <span className="mcart-bar-label">{count === 0 ? 'Tu canasta está vacía' : `${count} ${count === 1 ? 'producto' : 'productos'}`}</span>
            <span className="mcart-bar-total">{money(total)}</span>
          </span>
          <span className="mcart-bar-cta">Ver pedido <Icon name="ChevronRight" size={16}/></span>
        </button>
      </div>

      <div className={'sheet-scrim' + (open ? ' on' : '')} onClick={() => setOpen(false)}></div>
      <div className={'sheet' + (open ? ' on' : '')}>
        <div className="sheet-grab"></div>
        <div className="sheet-head">
          <h3><Icon name="ShoppingBag" size={20}/> Mi pedido {count > 0 && <span className="cart-panel-count">{count}</span>}</h3>
          <button className="icon-btn" onClick={() => setOpen(false)} aria-label="Cerrar"><Icon name="X" size={20}/></button>
        </div>
        <div className="sheet-body">
          <CartBody {...props} onCheckout={() => { setOpen(false); props.onCheckout(); }} />
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { CartPanel, MobileCart, computeTotals, CartLine, ComboCartLine });