/* ============================================================
   Catered · Shopping list screen  (window.CATShopping)
   Aggregates across the selected week scope.
   ============================================================ */
const { useState: useSS } = React;

const SCOPES_S = [{ value: 1, label: '1 wk' }, { value: 2, label: '2 wks' }, { value: 4, label: '4 wks' }];

const CATShopping = ({ state, api }) => {
  const Ic = window.CATIcons;
  const { Btn, Segmented } = window.CATComp;
  const CAT = window.CAT;
  const D = window.CATDATA;

  const [label, setLabel] = useSS('');
  const [cat, setCat] = useSS('Produce');

  const weekStarts = api.weekStarts;
  const groups = CAT.aggregateShoppingListRange(state, weekStarts);
  const total = groups.reduce((n, g) => n + g.items.length, 0);
  const done = groups.reduce((n, g) => n + g.items.filter((it) => CAT.itemChecked(state, it)).length, 0);

  function addItem() {
    const l = label.trim(); if (!l) return;
    api.addManualItem(l, cat); setLabel('');
  }
  function copy() {
    CAT.copyText(CAT.shoppingAsTextRange(state, weekStarts)).then(
      () => api.toast('Shopping list copied.'),
      () => api.toast('Could not copy.')
    );
  }

  return (
    <div className="gg-container cat-page">
      <header className="cat-head cat-head-week">
        <div className="cat-head-text">
          <window.CATComp.Eyebrow>Shopping list</window.CATComp.Eyebrow>
          <h1 className="gg-display cat-title">One list, sorted by aisle.</h1>
          <p className="cat-sub">Everything from your planned meals, gathered and grouped{api.scope > 1 ? ` across ${weekStarts.length} weeks` : ''}. Tick things off as you go — it remembers.</p>
        </div>
        <div className="cat-shop-actions">
          <span className="cat-shop-range"><Ic.Calendar size={15} />{CAT.rangeLabel(weekStarts)}</span>
          <Segmented size="sm" value={api.scope} onChange={(v) => api.setScope(v)} options={SCOPES_S} />
          <Btn variant="secondary" sm leftIcon={<Ic.Copy size={16} />} onClick={copy} disabled={total === 0}>Copy</Btn>
          <Btn variant="secondary" sm leftIcon={<Ic.Printer size={16} />} onClick={() => window.print()} disabled={total === 0}>Print</Btn>
        </div>
      </header>

      {total === 0 ? (
        <div className="cat-empty">
          <div className="cat-empty-glyph"><Ic.Cart size={26} /></div>
          <div className="cat-empty-title">Nothing to buy yet</div>
          <div className="cat-empty-body">Plan a few meals on <button className="cat-inline-link" onClick={() => api.setTab('week')}>the week</button> and the list builds itself.</div>
        </div>
      ) : (
        <>
          <div className="cat-shop-progress">
            <div className="cat-shop-progress-bar"><span style={{ width: `${total ? (done / total) * 100 : 0}%` }} /></div>
            <span className="cat-shop-progress-label">{done} of {total} got</span>
          </div>

          <div className="cat-shop">
            {groups.map((g) => (
              <section className="cat-cat" key={g.category}>
                <div className="cat-cat-head">
                  <span className={`cat-cat-tint t-${D.CATEGORY_TINT[g.category] || 'milk'}`} />
                  <h2 className="cat-cat-name">{g.category}</h2>
                  <span className="cat-cat-count">{g.items.length}</span>
                </div>
                <div className="cat-cat-items">
                  {g.items.map((it) => {
                    const isChecked = CAT.itemChecked(state, it);
                    const srcs = it.sources.slice(0, 2).join(', ') + (it.sources.length > 2 ? ` +${it.sources.length - 2}` : '');
                    return (
                      <div className={`cat-item${isChecked ? ' checked' : ''}`} key={it.key} onClick={() => api.toggleItem(it)}>
                        <span className={`cat-check${isChecked ? ' on' : ''}`}>{isChecked && <Ic.Check size={13} />}</span>
                        <span className="cat-item-label">
                          {it.qty != null && <b>{CAT.formatQty(it.qty)}{it.unit ? ' ' + it.unit : ''} </b>}
                          {it.label}
                        </span>
                        <span className="cat-item-src" title={it.sources.join(', ')}>{srcs}</span>
                        {it.manualId && (
                          <button className="cat-item-del" aria-label="Remove" onClick={(e) => { e.stopPropagation(); api.removeManualItem(it.manualWeek, it.manualId); }}>
                            <Ic.X size={13} />
                          </button>
                        )}
                      </div>
                    );
                  })}
                </div>
              </section>
            ))}
          </div>

          <div className="cat-additem">
            <input value={label} placeholder="Add something else…" onChange={(e) => setLabel(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') addItem(); }} />
            <select value={cat} onChange={(e) => setCat(e.target.value)}>
              {D.CATEGORY_ORDER.map((c) => <option key={c} value={c}>{c}</option>)}
            </select>
            <Btn variant="dark" sm leftIcon={<Ic.Plus size={16} />} onClick={addItem} disabled={!label.trim()}>Add</Btn>
          </div>
        </>
      )}
    </div>
  );
};

window.CATShopping = { CATShopping };