/* Dump — groceries.jsx: the shopping list section (checklist grouped by aisle) */

function GroceriesSection() {
  const state = useDumpStore();
  const items = state.groceries || [];
  const [text, setText] = useState('');
  const inputRef = useRef(null);

  const open = items.filter((g) => !g.done);
  const done = items.filter((g) => g.done);

  const add = () => {
    const t = text.trim();
    if (!t) return;
    // Allow a quick multi-add: "milk, eggs, bread"
    const parts = t.split(/,|\n/).map((s) => s.trim()).filter(Boolean);
    parts.forEach((p) => DumpAPI.addGroceryItem(p));
    setText('');
    if (inputRef.current) inputRef.current.focus();
  };

  // Group open items by aisle, in canonical order.
  const cats = DumpAPI.GROCERY_CATS || [];
  const grouped = cats
    .map((cat) => ({ cat, list: open.filter((g) => g.cat === cat) }))
    .filter((g) => g.list.length);

  return (
    <div className="section groceries" data-screen-label="Groceries">
      <div className="section-head">
        <h1 className="section-title">Groceries</h1>
        {open.length ? <span className="groceries-count">{open.length} to get</span> : null}
      </div>
      <p className="section-sub">One errand, not a dozen tasks. Tick things off as you shop.</p>

      <div className="grocery-add">
        <input
          ref={inputRef}
          className="grocery-add-input"
          placeholder="Add an item — or a few, comma-separated"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); add(); } }}
        />
        <button className="btn btn-primary grocery-add-btn" onClick={add} disabled={!text.trim()}>Add</button>
      </div>

      {items.length === 0 ? (
        <div className="grocery-empty">
          {Icons.cart(30)}
          <p className="grocery-empty-title">Your list is clear.</p>
          <p className="grocery-empty-sub">Offload a few groceries on the Capture screen and Enstow will offer to keep them here as one list.</p>
        </div>
      ) : (
        <div className="grocery-body">
          {grouped.map((g) => (
            <div className="grocery-group" key={g.cat}>
              <div className="grocery-group-head">{g.cat} <span className="grocery-group-n">{g.list.length}</span></div>
              <ul className="grocery-list">
                {g.list.map((it) => (
                  <li className="grocery-item" key={it.id}>
                    <button className="grocery-check" onClick={() => DumpAPI.toggleGrocery(it.id)} aria-label={'Got ' + it.text}>
                      <span className="grocery-ring"></span>
                    </button>
                    <span className="grocery-text">{it.text}</span>
                    <button className="grocery-remove" onClick={() => DumpAPI.removeGrocery(it.id)} aria-label={'Remove ' + it.text}>×</button>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          {open.length === 0 ? (
            <div className="grocery-alldone">
              {Icons.check(22)}
              <span>Everything's ticked off — nice one.</span>
            </div>
          ) : null}

          {done.length ? (
            <div className="grocery-group grocery-done-group">
              <div className="grocery-group-head">
                In the basket <span className="grocery-group-n">{done.length}</span>
                <button className="grocery-clear" onClick={() => DumpAPI.clearCheckedGroceries()}>Clear</button>
              </div>
              <ul className="grocery-list">
                {done.map((it) => (
                  <li className="grocery-item done" key={it.id}>
                    <button className="grocery-check on" onClick={() => DumpAPI.toggleGrocery(it.id)} aria-label={'Un-tick ' + it.text}>
                      <span className="grocery-ring">{Icons.check(13)}</span>
                    </button>
                    <span className="grocery-text">{it.text}</span>
                    <button className="grocery-remove" onClick={() => DumpAPI.removeGrocery(it.id)} aria-label={'Remove ' + it.text}>×</button>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}
        </div>
      )}
    </div>
  );
}

window.GroceriesSection = GroceriesSection;