// Moderis App — Voorraad (in huis).

// Voorraad = simpele "heb ik in huis"-lijst met een op-schakelaar: is iets op,
// dan blijft het staan (greyed) en weet de coach dat het niet bruikbaar is —
// tot je het met één tik weer op voorraad zet. Verwijderen = echt weggooien.
function PantryItem({ item, onRemove, onToggleOp }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '12px 0', opacity: item.op ? 0.55 : 1, transition: 'opacity .15s' }}>
      <div style={{ width: 42, height: 42, flex: '0 0 auto', borderRadius: 13, background: 'var(--m-card-2)',
        border: '1px solid var(--m-line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest-600)' }}>
        <MIcon name="utensils" size={17} color="var(--forest-600)" />
      </div>
      <div className="tap" onClick={() => onToggleOp(item)} role="button"
        style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}
        title={item.op ? 'Tik: weer op voorraad' : 'Tik: markeer als op'}>
        <div style={{ fontSize: 14.5, fontWeight: 600, textDecoration: item.op ? 'line-through' : 'none' }}>{item.name}</div>
        <div style={{ fontSize: 12, color: item.op ? 'var(--forest-600)' : 'var(--ink-3)', marginTop: 2 }}>{item.qty}</div>
      </div>
      <button className={`m-btn tap ${item.op ? 'm-btn-primary' : ''}`} onClick={() => onToggleOp(item)}
        title={item.op ? 'Weer op voorraad' : 'Markeer als op'}
        style={{ height: 32, padding: '0 12px', borderRadius: 10, fontSize: 12, fontWeight: 600, flex: '0 0 auto',
          ...(item.op ? {} : { background: 'var(--m-card-2)', border: '1px solid var(--m-line)', color: 'var(--ink-2)' }) }}>
        {item.op ? 'weer in huis' : 'is op'}
      </button>
      <button className="m-btn tap" onClick={() => onRemove(item.id)} title="Verwijderen uit je lijst"
        style={{ width: 32, height: 32, padding: 0, borderRadius: 10, background: 'var(--m-card-2)', border: '1px solid var(--m-line)', flex: '0 0 auto' }}>
        <MIcon name="trash" size={14} color="var(--ink-3)" />
      </button>
    </div>
  );
}

// Boodschappenhulp: "ik ga naar de super voor X dagen — wat moet ik halen?"
function BoodschappenSectie({ showToast }) {
  const { useState, useEffect } = React;
  const [dagen, setDagen] = useState(3);
  const [lijst, setLijst] = useState(null);   // null = nog niet gegenereerd
  const [busy, setBusy] = useState(false);
  const [nietKopen, setNietKopen] = useState([]);
  const [toonNiet, setToonNiet] = useState(false);

  useEffect(() => { window.api.nietKopen().then((l) => setNietKopen(l || [])).catch(() => {}); }, []);

  const genereer = async () => {
    if (busy) return;
    setBusy(true);
    try { const r = await window.api.boodschappen(dagen); setLijst(r.items || []); }
    catch (e) { showToast('Mislukt: ' + e.message); }
    setBusy(false);
  };
  const nietKopenToe = async (naam) => {
    setLijst((L) => (L || []).filter((i) => i.naam !== naam));
    try {
      const n = await window.api.addNietKopen(naam);
      if (n && n.id) setNietKopen((L) => L.find((x) => x.id === n.id) ? L : [n, ...L]);
      showToast(naam + ' → niet kopen');
    } catch (e) { showToast('Mislukt: ' + e.message); }
  };
  const nietKopenWeg = async (item) => {
    setNietKopen((L) => L.filter((x) => x.id !== item.id));
    try { await window.api.removeNietKopen(item.id); } catch (e) { showToast('Mislukt: ' + e.message); }
  };

  return (
    <div style={{ background: 'var(--forest-100)', border: '1px solid var(--forest-200)', borderRadius: 18, padding: '15px 16px', marginBottom: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
        <MIcon name="box" size={16} color="var(--forest-600)" />
        <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--forest-900)' }}>Boodschappen doen</span>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginBottom: lijst ? 12 : 0 }}>
        <span style={{ fontSize: 13, color: 'var(--forest-900)' }}>Voor de komende</span>
        <input type="number" min="1" max="14" value={dagen} onChange={(e) => setDagen(e.target.value)}
          style={{ width: 52, padding: '8px 9px', fontSize: 13.5, borderRadius: 10, border: '1px solid var(--forest-200)', background: 'var(--m-card)', fontFamily: 'inherit' }} />
        <span style={{ fontSize: 13, color: 'var(--forest-900)' }}>dagen</span>
        <button className="m-btn m-btn-primary tap" onClick={genereer} disabled={busy}
          style={{ fontSize: 13, padding: '9px 14px', marginLeft: 'auto', opacity: busy ? 0.6 : 1 }}>
          {busy ? <Spinner size={14} /> : <MIcon name="spark" size={14} color="var(--on-forest)" />} {busy ? 'Bezig…' : 'Wat moet ik halen?'}
        </button>
      </div>

      {lijst && lijst.length > 0 && (
        <div style={{ background: 'var(--m-card)', borderRadius: 13, border: '1px solid var(--forest-200)', overflow: 'hidden' }}>
          {lijst.map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderBottom: i < lijst.length - 1 ? '1px solid var(--m-line)' : 'none' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={{ fontSize: 13.5, fontWeight: 600 }}>{it.naam}</span>
                <span className="num" style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 8 }}>{it.hoeveelheid} {it.eenheid}</span>
              </div>
              <button className="tap" onClick={() => nietKopenToe(it.naam)} title="Dit wil ik niet kopen"
                style={{ fontSize: 11.5, color: 'var(--macro-fat)', background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', whiteSpace: 'nowrap' }}>
                niet kopen
              </button>
            </div>
          ))}
        </div>
      )}
      {lijst && lijst.length === 0 && (
        <div style={{ fontSize: 13, color: 'var(--forest-700)', padding: '4px 0' }}>Je hebt genoeg in huis — niks nodig! 🎉</div>
      )}

      {/* Niet-kopen-lijst */}
      <button className="tap" onClick={() => setToonNiet((v) => !v)}
        style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'none', border: 'none',
          color: 'var(--forest-700)', fontSize: 12, fontWeight: 600, cursor: 'pointer', padding: '10px 0 0' }}>
        Niet-kopen-lijst ({nietKopen.length})
        <MIcon name="chevron" size={13} color="var(--forest-600)" style={{ transform: toonNiet ? 'rotate(90deg)' : 'none', transition: 'transform .15s' }} />
      </button>
      {toonNiet && (
        <div style={{ marginTop: 6 }}>
          {nietKopen.length === 0 ? (
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>Nog niks. Tik "niet kopen" bij een boodschap om toe te voegen.</div>
          ) : (
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {nietKopen.map((n) => (
                <span key={n.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12,
                  background: 'var(--m-card)', border: '1px solid var(--forest-200)', borderRadius: 999, padding: '4px 6px 4px 11px' }}>
                  {n.naam}
                  <button className="tap" onClick={() => nietKopenWeg(n)} title="Weer toestaan"
                    style={{ width: 18, height: 18, padding: 0, borderRadius: 999, border: 'none', background: 'var(--m-card-2)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <MIcon name="close" size={11} color="var(--ink-2)" />
                  </button>
                </span>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function PantryScreen({ pantry, onRemove, onAdd, onToggleOp, restjes, onEetRestje, onRemoveRestje, showToast }) {
  const { useState } = React;
  const [zoek, setZoek] = useState('');
  const total = pantry.reduce((n, g) => n + g.items.length, 0);

  // Zoeken op naam — substring óf tolerante woord-match (zelfde semantiek als
  // het kies-scherm: "tomaat" vindt ook "tomaten", "wrap" vindt "wraps").
  const zoekW = zoek.trim().toLowerCase();
  const zoekWoorden = zoekW ? window.pool.woorden(zoekW) : [];
  const itemMatch = (item) => {
    if (!zoekW) return true;
    const naam = String(item.name || '');
    if (naam.toLowerCase().includes(zoekW)) return true;
    const doelW = window.pool.woorden(naam);
    return zoekWoorden.every((qw) => doelW.some((dw) => window.pool.woordMatch(qw, dw)));
  };
  // Gefilterde groepen; onthoud het aantal treffers voor de lege staat.
  const gefilterd = pantry.map((g) => ({ ...g, items: g.items.filter(itemMatch) }));
  const treffers = gefilterd.reduce((n, g) => n + g.items.length, 0);

  return (
    <div className="screen screen-pantry">
      {showToast && <BoodschappenSectie showToast={showToast} />}
      {(restjes || []).length > 0 && (
        <div style={{ marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <MIcon name="box" size={15} color="var(--forest-500)" />
            <span className="m-eyebrow">Bereide gerechten</span>
          </div>
          {restjes.map((g) => (
            <div key={g.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: '1px solid var(--m-line)' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{g.naam}</div>
                <div className="num" style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
                  {(+g.porties_over % 1 ? (+g.porties_over).toFixed(1) : +g.porties_over)} {Number(g.porties_over) === 1 ? 'portie' : 'porties'} · {Math.round(g.kcal || 0)} kcal p/portie
                </div>
              </div>
              <button className="m-btn m-btn-ghost tap" onClick={() => onEetRestje(g)} style={{ fontSize: 12.5, padding: '7px 11px' }}>
                <MIcon name="plus" size={14} color="var(--forest-600)" /> Eet
              </button>
              <button className="m-btn tap" onClick={() => onRemoveRestje(g)} title="Verwijderen"
                style={{ width: 32, height: 32, padding: 0, borderRadius: 10, background: 'var(--m-card-2)', border: '1px solid var(--m-line)' }}>
                <MIcon name="trash" size={14} color="var(--ink-2)" />
              </button>
            </div>
          ))}
        </div>
      )}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
        <div>
          <span className="m-eyebrow">In huis</span>
          <h1 style={{ margin: '4px 0 0', fontFamily: 'var(--m-serif)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.015em', color: 'var(--forest-950)' }}>Voorraad</h1>
        </div>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}><span className="num">{total}</span> producten</span>
      </div>

      <button className="m-btn m-btn-primary tap" onClick={onAdd}
        style={{ width: '100%', padding: '13px', fontSize: 14, marginBottom: 8 }}>
        <MIcon name="plus" size={16} sw={2.2} color="var(--on-forest)" /> Product toevoegen
      </button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, color: 'var(--ink-3)', fontSize: 12, justifyContent: 'center' }}>
        <MIcon name="barcode" size={14} color="var(--ink-3)" /> Zoek of scan — zelfde flow als voeding
      </div>

      {/* Zoeken in je voorraad — snel iets op op / weer in huis zetten */}
      {total > 0 && (
        <div className="m-zoek" style={{ marginBottom: 16 }}>
          <MIcon name="search" size={16} color="var(--ink-3)" />
          <input value={zoek} onChange={(e) => setZoek(e.target.value)} placeholder="Zoek in je voorraad…" />
          {zoek && (
            <button className="tap" onClick={() => setZoek('')} title="Wissen"
              style={{ width: 24, height: 24, padding: 0, borderRadius: 999, border: 'none',
                background: 'var(--m-card-3)', cursor: 'pointer', flex: '0 0 auto',
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MIcon name="close" size={12} color="var(--ink-2)" />
            </button>
          )}
        </div>
      )}

      {zoekW && treffers === 0 ? (
        <div style={{ textAlign: 'center', padding: '28px 20px', color: 'var(--ink-3)', fontSize: 13 }}>
          Niets gevonden voor "{zoek.trim()}".
        </div>
      ) : gefilterd.map((g) => (
        <div key={g.group} style={{ marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
            <MIcon name={g.group === 'Koelkast' ? 'fridge' : 'box'} size={15} color="var(--forest-500)" />
            <span className="m-eyebrow">{g.group}</span>
            <span style={{ flex: 1 }}></span>
            <span className="num" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{g.items.length}</span>
          </div>
          {g.items.length === 0 ? (
            <div style={{ fontSize: 13, color: 'var(--ink-3)', padding: '14px 0' }}>Niets in {g.group.toLowerCase()}.</div>
          ) : (
            g.items.map((item, i) => (
              <React.Fragment key={item.id}>
                {i > 0 && <hr className="m-hr" />}
                <PantryItem item={item} onRemove={onRemove} onToggleOp={onToggleOp} />
              </React.Fragment>
            ))
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PantryScreen });