// Moderis — "Maaltijd loggen" sheet.
// Log (ook achteraf) wat je at: kies het moment, pak één van je recepten óf
// beschrijf het aan Moderis (AI-schatting), en pas de macro's aan vóór je logt.
// Optioneel een AI-omschrijving meteen als recept bewaren.

const LOG_MOMENTEN = [
  { key: 'ontbijt', label: 'Ontbijt' },
  { key: 'lunch', label: 'Lunch' },
  { key: 'avondeten', label: 'Avondeten' },
  { key: 'tussendoor', label: 'Tussendoortje' },
];

// Detail/bewerk-sheet voor een gegeten maaltijd: bekijk en corrigeer naam,
// macro's, tijd, moment en ingrediënten — of bewaar 'm als recept.
function LogDetailSheet({ log, onClose, onSave, onDelete, showToast }) {
  const { useState } = React;
  const num = (v) => Math.max(0, Math.round(Number(v) || 0));
  const [naam, setNaam] = useState(log.naam || '');
  const [moment, setMoment] = useState(
    (log.maaltijdmoment === 'snack' || log.maaltijdmoment === 'snack2') ? 'tussendoor' : (log.maaltijdmoment || 'tussendoor'));
  const [tijd, setTijd] = useState(
    log.gegeten_om && /^\d{2}:\d{2}/.test(String(log.gegeten_om)) ? String(log.gegeten_om).slice(0, 5) : '');
  const [vorm, setVorm] = useState({
    kcal: num(log.kcal), eiwitten: num(log.eiwitten), koolhydraten: num(log.koolhydraten), vetten: num(log.vetten),
  });
  // Ingrediënten: uit de log zelf, of anders wat er van de voorraad afging.
  const [ingredienten, setIngredienten] = useState(() => {
    const bron = (Array.isArray(log.ingredienten) && log.ingredienten.length)
      ? log.ingredienten
      : (Array.isArray(log.verbruikt) ? log.verbruikt.map((v) => ({ naam: v.naam, hoeveelheid_g: v.gram })) : []);
    return bron.map((i) => ({ naam: i.naam || '', hoeveelheid_g: i.hoeveelheid_g != null ? i.hoeveelheid_g : '',
      per100: (i.per100 && i.per100.kcal_100g != null) ? i.per100 : null }));
  });
  const [busy, setBusy] = useState(false);

  const setVeld = (k, v) => setVorm((f) => ({ ...f, [k]: v }));

  // Live meerekenen: zodra van álle ingrediënten de per-100g-macro's bekend
  // zijn, rekent elke gram-/ingrediëntwijziging het totaal (kcal/E/K/V)
  // direct opnieuw uit. De macro-velden blijven daarna gewoon handmatig
  // aanpasbaar — alleen een ingrediënt-wijziging zet ze opnieuw.
  const somNaarVorm = (arr) => {
    const met = arr.filter((r) => String(r.naam).trim());
    if (!met.length || !met.every((r) => r.per100)) return;   // nog niet alles bekend
    const som = met.reduce((s, r) => {
      const f = (Number(r.hoeveelheid_g) || 0) / 100;
      return {
        kcal: s.kcal + r.per100.kcal_100g * f, eiwitten: s.eiwitten + r.per100.eiwitten_100g * f,
        koolhydraten: s.koolhydraten + r.per100.koolhydraten_100g * f, vetten: s.vetten + r.per100.vetten_100g * f,
      };
    }, { kcal: 0, eiwitten: 0, koolhydraten: 0, vetten: 0 });
    setVorm({ kcal: Math.round(som.kcal), eiwitten: Math.round(som.eiwitten),
      koolhydraten: Math.round(som.koolhydraten), vetten: Math.round(som.vetten) });
  };

  // Bij openen de per-100g-macro's van de server halen (de pipeline is de
  // waarheid). De gelogde totalen blijven staan tot je zelf iets wijzigt.
  React.useEffect(() => {
    (async () => {
      const rijen = ingredienten.map((r, i) => ({ r, i })).filter((x) => String(x.r.naam).trim() && !x.r.per100);
      if (!rijen.length) return;
      try {
        const resp = await api.berekenMacros(rijen.map((x) => ({
          naam: String(x.r.naam).trim(), hoeveelheid_g: Number(x.r.hoeveelheid_g) || 0 })));
        const verr = resp.ingredienten || [];
        setIngredienten((arr) => {
          const next = [...arr];
          rijen.forEach((x, k) => { const v = verr[k]; if (v && next[x.i]) next[x.i] = { ...next[x.i], per100: v.per100 }; });
          return next;
        });
      } catch (_) { /* stil — dan blijven de velden handmatig */ }
    })();
    // eslint-disable-next-line
  }, []);

  // Hernoemd of nieuw ingrediënt → per-100g opzoeken zodra je het veld
  // verlaat, en het totaal meteen bijwerken.
  const herberekenRij = async (idx, naamOverride) => {
    const r = ingredienten[idx];
    const naamNu = String(naamOverride != null ? naamOverride : (r && r.naam) || '').trim();
    if (!naamNu) return;
    if (naamOverride == null && r && r.per100) return;
    try {
      const resp = await api.berekenMacros([{ naam: naamNu, hoeveelheid_g: Number(r && r.hoeveelheid_g) || 0 }]);
      const v = (resp.ingredienten || [])[0];
      if (v) setIngredienten((arr) => {
        const next = arr.map((it, i) => (i === idx ? { ...it, per100: v.per100 } : it));
        somNaarVorm(next);
        return next;
      });
    } catch (_) { /* stil */ }
  };

  const setIng = (idx, k, v) => {
    const next = ingredienten.map((it, i) => i === idx
      ? (k === 'naam' ? { ...it, naam: v, per100: null } : { ...it, [k]: v })
      : it);
    setIngredienten(next);
    if (k === 'hoeveelheid_g') somNaarVorm(next);
  };
  const addIng = () => setIngredienten((arr) => [...arr, { naam: '', hoeveelheid_g: '', per100: null }]);
  const removeIng = (idx) => {
    const next = ingredienten.filter((_, i) => i !== idx);
    setIngredienten(next);
    somNaarVorm(next);
  };
  const ingLijst = () => ingredienten
    .map((i) => ({ naam: String(i.naam || '').trim(), hoeveelheid_g: Number(i.hoeveelheid_g) || 0 }))
    .filter((i) => i.naam);

  const opslaan = async () => {
    if (busy) return;
    setBusy(true);
    try {
      await onSave({
        naam: naam.trim() || log.naam, maaltijdmoment: moment,
        kcal: num(vorm.kcal), eiwitten: num(vorm.eiwitten), koolhydraten: num(vorm.koolhydraten), vetten: num(vorm.vetten),
        gegeten_om: tijd || null, ingredienten: ingLijst(),
      });
    } finally { setBusy(false); }
  };

  const alsRecept = async () => {
    if (busy) return;
    setBusy(true);
    try {
      await api.addRecept({
        naam: naam.trim() || log.naam,
        momenten: [moment === 'tussendoor' ? 'snack' : moment],
        ingredienten: ingLijst(),
        kcal: num(vorm.kcal), eiwitten: num(vorm.eiwitten), koolhydraten: num(vorm.koolhydraten), vetten: num(vorm.vetten),
        bron: 'handmatig',
      });
      showToast(naam.trim() + ' → recepten 📖');
    } catch (err) { showToast('Opslaan mislukt: ' + err.message); }
    setBusy(false);
  };

  const inputStyle = {
    width: '100%', boxSizing: 'border-box', padding: '10px 12px', fontSize: 14,
    border: '1px solid var(--m-line-2)', borderRadius: 11, background: 'var(--m-card)', fontFamily: 'inherit',
  };
  const macroVeld = (label, k) => (
    <div style={{ flex: 1 }}>
      <label style={{ fontSize: 10.5, color: 'var(--ink-3)', display: 'block', marginBottom: 3 }}>{label}</label>
      <input type="number" min="0" value={vorm[k]} onChange={(e) => setVeld(k, e.target.value)}
        style={{ ...inputStyle, padding: '8px 9px', fontSize: 13 }} />
    </div>
  );

  return (
    <Sheet title="Gegeten — bekijk & pas aan" onClose={onClose}>
      <input value={naam} onChange={(e) => setNaam(e.target.value)}
        style={{ ...inputStyle, fontSize: 16, fontWeight: 700, marginBottom: 12 }} />

      {/* Moment + tijd */}
      <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 10 }}>
        {LOG_MOMENTEN.map((mo) => (
          <button key={mo.key} className={'m-chip' + (moment === mo.key ? ' is-active' : '')}
            onClick={() => setMoment(mo.key)} style={{ padding: '7px 13px' }}>
            {mo.label}
          </button>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>gegeten om</span>
        <input type="time" value={tijd} onChange={(e) => setTijd(e.target.value)}
          style={{ padding: '5px 9px', fontSize: 13, borderRadius: 9, border: '1px solid var(--m-line-2)',
            background: 'var(--m-card)', fontFamily: 'inherit', width: 'auto' }} />
      </div>

      {/* Macro's */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
        {macroVeld('kcal', 'kcal')}{macroVeld('E (g)', 'eiwitten')}{macroVeld('K (g)', 'koolhydraten')}{macroVeld('V (g)', 'vetten')}
      </div>

      {/* Ingrediënten */}
      <label className="m-eyebrow" style={{ display: 'block', marginBottom: 8 }}>
        Ingrediënten {ingredienten.length === 0 && <span style={{ fontWeight: 400, textTransform: 'none', letterSpacing: 0 }}>(geen vastgelegd — voeg toe indien gewenst)</span>}
      </label>
      <div style={{ marginBottom: 8 }}>
        {ingredienten.map((ing, idx) => (
          <div key={idx} style={{ display: 'flex', gap: 7, alignItems: 'center', marginBottom: 7 }}>
            <IngredientNaamInput value={ing.naam}
              onChange={(v) => setIng(idx, 'naam', v)}
              onPick={(r) => { setIng(idx, 'naam', r.naam); herberekenRij(idx, r.naam); }}
              onBlur={() => herberekenRij(idx)}
              style={{ ...inputStyle, flex: 1 }} />
            <input type="number" min="0" value={ing.hoeveelheid_g} onChange={(e) => setIng(idx, 'hoeveelheid_g', e.target.value)} placeholder="g"
              onBlur={() => herberekenRij(idx)}
              style={{ ...inputStyle, width: 74, flex: '0 0 auto', padding: '10px 9px' }} />
            <button className="tap" onClick={() => removeIng(idx)} title="Verwijder"
              style={{ width: 30, height: 30, padding: 0, borderRadius: 9, border: '1px solid var(--m-line)',
                background: 'transparent', cursor: 'pointer', flex: '0 0 auto' }}>
              <MIcon name="close" size={12} color="var(--ink-3)" />
            </button>
          </div>
        ))}
      </div>
      <button className="tap" onClick={addIng}
        style={{ background: 'none', border: 'none', color: 'var(--forest-700)', fontSize: 12.5, fontWeight: 600,
          cursor: 'pointer', padding: '2px 0', marginBottom: 16 }}>
        + ingrediënt toevoegen
      </button>

      {/* Acties */}
      <button className="m-btn m-btn-primary tap" onClick={opslaan} disabled={busy}
        style={{ width: '100%', fontSize: 14.5, padding: '13px', ...(busy ? { opacity: 0.6, cursor: 'wait' } : {}) }}>
        {busy ? <Spinner size={16} /> : <MIcon name="check" size={16} sw={2.2} color="var(--on-forest)" />} {busy ? 'Opslaan…' : 'Wijzigingen opslaan'}
      </button>
      <button className="m-btn m-btn-ghost tap" onClick={alsRecept} disabled={busy}
        style={{ width: '100%', fontSize: 13.5, padding: '11px', marginTop: 8 }}>
        {busy ? <Spinner size={15} /> : <MIcon name="book" size={15} color="var(--forest-600)" />} Bewaar als recept
      </button>
      <button className="m-btn m-btn-ghost tap" onClick={() => { if (!busy) onDelete(); }} disabled={busy}
        style={{ width: '100%', fontSize: 13, padding: '10px', marginTop: 8, color: 'var(--macro-fat)' }}>
        Verwijder uit je log
      </button>
    </Sheet>
  );
}

function LogSheet({ defaultMoment, defaultMode, onClose, onLogged, showToast, favorieten, onKiesProduct, onScanProduct }) {
  const { useState, useEffect } = React;
  const nuStr = (() => { const d = new Date(); const p2 = (x) => (x < 10 ? '0' : '') + x; return p2(d.getHours()) + ':' + p2(d.getMinutes()); })();
  const [moment, setMoment] = useState(defaultMoment || 'tussendoor');
  const [tijd, setTijd] = useState(nuStr);
  const [mode, setMode] = useState(defaultMode || 'recept');   // recept | beschrijf | foto
  const [recepten, setRecepten] = useState([]);
  const [tekst, setTekst] = useState('');
  const [busy, setBusy] = useState(false);
  const [vorm, setVorm] = useState(null);          // gekozen/ingevulde maaltijd
  const [ingredienten, setIngredienten] = useState([]); // {naam, hoeveelheid_g} — gaat van voorraad af
  const [bewaarRecept, setBewaarRecept] = useState(false);
  const [porties, setPorties] = useState(1);      // deel de schatting door porties → log 1 portie
  const schatBasis = React.useRef(null);          // ruwe schatting, om op porties te delen

  useEffect(() => { api.recepten().then((r) => setRecepten(r || [])).catch(() => {}); }, []);

  // ── Zoek/scan-modus: producten opzoeken (eigen db + basis + OFF) of scannen.
  // Kiezen delegeert naar de bewezen portie-sheet (via onKiesProduct).
  const [zoekQ, setZoekQ] = useState('');
  const [zoekRes, setZoekRes] = useState([]);
  const [zoekBusy, setZoekBusy] = useState(false);
  useEffect(() => {
    if (mode !== 'zoek') return;
    const q = zoekQ.trim();
    if (q.length < 2) { setZoekRes([]); return; }
    setZoekBusy(true);
    let cancelled = false;
    const t = setTimeout(async () => {
      try {
        const data = await api.zoekVoeding(q);
        if (cancelled) return;
        setZoekRes((data.resultaten || []).map((r, i) => adapt.foodFromVoeding(r, i)).filter((f) => f && f.name).slice(0, 20));
      } catch (_) { if (!cancelled) setZoekRes([]); }
      finally { if (!cancelled) setZoekBusy(false); }
    }, 400);
    return () => { cancelled = true; clearTimeout(t); };
  }, [zoekQ, mode]);

  // "Vaak gelogd": complete items die je ≥2× at → één tik logt de vaste portie.
  const vaakGelogd = React.useMemo(() => {
    const per = new Map();
    Object.values(favorieten || {}).forEach((lijst) => (lijst || []).forEach((f) => {
      const k = String(f.naam || '').trim();
      if (!k) return;
      const b = per.get(k);
      if (b) b.aantal += Number(f.aantal) || 0;
      else per.set(k, { ...f, naam: k, aantal: Number(f.aantal) || 0 });
    }));
    return [...per.values()]
      .filter((f) => f.aantal >= 2 && Number(f.gem_kcal) > 0)
      .sort((a, b) => b.aantal - a.aantal).slice(0, 6)
      .map((f) => ({
        id: 'fav-' + f.naam, name: f.naam, brand: f.aantal + '× gegeten', portion: '1 portie',
        kcal: Math.round(Number(f.gem_kcal) || 0), p: Math.round(Number(f.gem_eiwitten) || 0),
        c: Math.round(Number(f.gem_koolhydraten) || 0), f: Math.round(Number(f.gem_vetten) || 0),
        barcode: null, vastePortie: true,
      }));
  }, [favorieten]);

  const num = (v) => Math.max(0, Math.round(Number(v) || 0));
  const kiesRecept = (r) => {
    setVorm({
      naam: r.naam, kcal: num(r.kcal), eiwitten: num(r.eiwitten),
      koolhydraten: num(r.koolhydraten), vetten: num(r.vetten), recept_id: r.id,
    });
    setIngredienten((r.ingredienten || []).map((i) => ({
      naam: i.naam || '', hoeveelheid_g: i.hoeveelheid_g != null ? i.hoeveelheid_g : '',
    })));
  };
  const setVeld = (k, v) => setVorm((f) => ({ ...f, [k]: v }));
  const setIng = (idx, k, v) => setIngredienten((arr) => arr.map((it, i) => i === idx ? { ...it, [k]: v } : it));
  const addIng = () => setIngredienten((arr) => [...arr, { naam: '', hoeveelheid_g: '' }]);
  const removeIng = (idx) => setIngredienten((arr) => arr.filter((_, i) => i !== idx));

  const vulUitSchatting = (e) => {
    // Bewaar de ruwe schatting (het hele gerecht) zodat we 'm op porties kunnen delen.
    schatBasis.current = {
      kcal: Number(e.kcal) || 0, eiwitten: Number(e.eiwitten) || 0,
      koolhydraten: Number(e.koolhydraten) || 0, vetten: Number(e.vetten) || 0,
      ing: (e.ingredienten || []).map((i) => ({ naam: i.naam || '', hoeveelheid_g: Number(i.hoeveelheid_g) || 0 })),
    };
    setPorties(1);
    setVorm({ naam: e.naam, kcal: e.kcal, eiwitten: e.eiwitten, koolhydraten: e.koolhydraten, vetten: e.vetten, recept_id: null });
    // Ingrediënten komen uit de schatting → bewerkbaar + gaan van voorraad af.
    setIngredienten((e.ingredienten || []).map((i) => ({ naam: i.naam || '', hoeveelheid_g: i.hoeveelheid_g != null ? i.hoeveelheid_g : '' })));
  };

  // De schatting is voor het hele gerecht; deel door porties → je logt 1 portie.
  const zetPorties = (n) => {
    const p = Math.max(1, Math.floor(Number(n) || 1));
    setPorties(p);
    const b = schatBasis.current;
    if (!b) return;
    setVorm((v) => v && ({ ...v, kcal: num(b.kcal / p), eiwitten: num(b.eiwitten / p), koolhydraten: num(b.koolhydraten / p), vetten: num(b.vetten / p) }));
    setIngredienten(b.ing.map((i) => ({ naam: i.naam, hoeveelheid_g: i.hoeveelheid_g ? num(i.hoeveelheid_g / p) : '' })));
  };

  const schat = async () => {
    if (!tekst.trim() || busy) return;
    setBusy(true);
    try { vulUitSchatting(await api.schat(tekst.trim())); }
    catch (err) { showToast('Schatten mislukt: ' + err.message); }
    setBusy(false);
  };

  // Foto('s) van je bord/verpakking/receptkaart → Moderis schat de maaltijd.
  const fotoInput = React.useRef(null);
  const vanFotos = async (files) => {
    const lijst = Array.from(files || []).slice(0, 5);
    if (!lijst.length || busy) return;
    setBusy(true);
    try {
      const images = [];
      for (const f of lijst) images.push(await window.comprimeerAfbeelding(f));
      vulUitSchatting(await api.schatFoto({ images }));
    } catch (err) { showToast(err.message || 'Foto lezen mislukt'); }
    setBusy(false);
  };

  const loggen = async () => {
    if (!vorm || !String(vorm.naam || '').trim()) { showToast('Kies of beschrijf eerst iets'); return; }
    if (busy) return;
    setBusy(true);
    const ingLijst = ingredienten
      .map((i) => ({ naam: String(i.naam || '').trim(), hoeveelheid_g: Number(i.hoeveelheid_g) || 0 }))
      .filter((i) => i.naam);
    let recept_id = vorm.recept_id;
    // AI-omschrijving optioneel als recept bewaren — mét ingrediënten, zodat de
    // macro's ingrediënt-gebaseerd worden berekend.
    if (bewaarRecept && !recept_id) {
      try {
        const saved = await api.addRecept({
          naam: vorm.naam, momenten: [moment === 'tussendoor' ? 'snack' : moment],
          ingredienten: ingLijst,
          kcal: num(vorm.kcal), eiwitten: num(vorm.eiwitten), koolhydraten: num(vorm.koolhydraten), vetten: num(vorm.vetten),
          bron: 'ai_nieuw',
        });
        recept_id = saved.id;
      } catch (_) { /* niet fataal */ }
    }
    try {
      await onLogged({
        maaltijdmoment: moment, naam: String(vorm.naam).trim(),
        kcal: num(vorm.kcal), eiwitten: num(vorm.eiwitten), koolhydraten: num(vorm.koolhydraten), vetten: num(vorm.vetten),
        recept_id, ingredienten: ingLijst, gegeten_om: tijd || nuStr,
      });
    } finally { setBusy(false); }
  };

  // recepten die bij het gekozen moment passen eerst
  const receptenGesorteerd = [...recepten].sort((a, b) => {
    const am = (a.momenten || []).includes(moment) ? 1 : 0;
    const bm = (b.momenten || []).includes(moment) ? 1 : 0;
    return bm - am;
  });

  const inputStyle = {
    width: '100%', boxSizing: 'border-box', padding: '10px 12px', fontSize: 14,
    border: '1px solid var(--m-line-2)', borderRadius: 11, background: 'var(--m-card)', fontFamily: 'inherit',
  };
  const macroVeld = (label, k) => (
    <div style={{ flex: 1 }}>
      <label style={{ fontSize: 10.5, color: 'var(--ink-3)', display: 'block', marginBottom: 3 }}>{label}</label>
      <input type="number" min="0" value={vorm[k]} onChange={(e) => setVeld(k, e.target.value)}
        style={{ ...inputStyle, padding: '8px 9px', fontSize: 13 }} />
    </div>
  );

  return (
    <Sheet title="Maaltijd loggen" onClose={onClose}>
      {/* Moment + tijd — bij een product kies je die in de portie-sheet, dus daar verbergen we ze */}
      {mode !== 'zoek' && (
        <React.Fragment>
          <label className="m-eyebrow" style={{ display: 'block', marginBottom: 8 }}>Welk moment?</label>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 16 }}>
            {LOG_MOMENTEN.map((mo) => (
              <button key={mo.key} className={'m-chip' + (moment === mo.key ? ' is-active' : '')}
                onClick={() => setMoment(mo.key)} style={{ padding: '7px 13px' }}>
                {mo.label}
              </button>
            ))}
          </div>

          {/* Hoe laat at je dit? — anker voor het eetschema (standaard: nu) */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, marginTop: -6 }}>
            <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>gegeten om</span>
            <input type="time" value={tijd} onChange={(e) => setTijd(e.target.value)}
              style={{ padding: '5px 9px', fontSize: 13, borderRadius: 9, border: '1px solid var(--m-line-2)',
                background: 'var(--m-card)', fontFamily: 'inherit', width: 'auto' }} />
          </div>
        </React.Fragment>
      )}

      {/* Bron-keuze: uit je maaltijden, beschrijven, een foto, of een product zoeken/scannen */}
      <div style={{ display: 'flex', gap: 7, marginBottom: 14, flexWrap: 'wrap' }}>
        {[['recept', 'Maaltijd'], ['beschrijf', 'Beschrijf'], ['foto', 'Foto'], ['zoek', 'Product']].map(([k, label]) => (
          <button key={k} className="tap" onClick={() => { setMode(k); setVorm(null); setIngredienten([]); setPorties(1); schatBasis.current = null; }}
            style={{ flex: 1, fontSize: 12.5, fontWeight: 600, padding: '9px', borderRadius: 11, cursor: 'pointer',
              border: '1px solid ' + (mode === k ? 'var(--forest-300)' : 'var(--m-line)'),
              background: mode === k ? 'var(--forest-100)' : 'var(--m-card)',
              color: mode === k ? 'var(--forest-700)' : 'var(--ink-2)' }}>
            {label}
          </button>
        ))}
      </div>

      {/* Recept kiezen */}
      {mode === 'recept' && (
        <div style={{ marginBottom: 14, maxHeight: 240, overflowY: 'auto' }}>
          {receptenGesorteerd.length === 0 ? (
            <div style={{ fontSize: 13, color: 'var(--ink-3)', padding: '14px 0', textAlign: 'center' }}>
              Nog geen recepten — beschrijf het of maak er eerst een.
            </div>
          ) : receptenGesorteerd.map((r) => {
            const gekozen = vorm && vorm.recept_id === r.id;
            return (
              <button key={r.id} className="tap" onClick={() => kiesRecept(r)}
                style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left',
                  padding: '11px 12px', borderRadius: 12, marginBottom: 7, cursor: 'pointer',
                  border: '1px solid ' + (gekozen ? 'var(--forest-300)' : 'var(--m-line)'),
                  background: gekozen ? 'var(--forest-100)' : 'var(--m-card)' }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.naam}</div>
                  <div className="num" style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{Math.round(r.kcal || 0)} kcal · E {Math.round(r.eiwitten || 0)} K {Math.round(r.koolhydraten || 0)} V {Math.round(r.vetten || 0)}</div>
                </div>
                {gekozen && <MIcon name="check" size={17} sw={2.4} color="var(--forest-600)" />}
              </button>
            );
          })}
        </div>
      )}

      {/* Beschrijven */}
      {mode === 'beschrijf' && (
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <input value={tekst} onChange={(e) => setTekst(e.target.value)} placeholder="bv. twee boterhammen met kaas"
            onKeyDown={(e) => e.key === 'Enter' && schat()} style={{ ...inputStyle, flex: 1 }} />
          <button className="m-btn m-btn-primary tap" onClick={schat} disabled={busy || !tekst.trim()}
            style={{ fontSize: 13, padding: '0 15px', opacity: (busy || !tekst.trim()) ? 0.5 : 1, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            {busy ? <Spinner size={14} /> : null}{busy ? 'Bezig' : 'Schat'}
          </button>
        </div>
      )}

      {/* Foto van wat je at → schatting (bord, verpakking of receptkaart) */}
      {mode === 'foto' && (
        <div style={{ marginBottom: 14 }}>
          <input ref={fotoInput} type="file" accept="image/*,.heic,.heif" multiple style={{ display: 'none' }}
            onChange={(e) => { const fs = Array.from(e.target.files || []); e.target.value = ''; vanFotos(fs); }} />
          <button className="m-btn m-btn-primary tap" onClick={() => fotoInput.current && fotoInput.current.click()} disabled={busy}
            style={{ width: '100%', fontSize: 13.5, padding: '11px', opacity: busy ? 0.6 : 1 }}>
            {busy ? <Spinner size={15} /> : <MIcon name="scan" size={15} color="var(--on-forest)" />} {busy ? 'Foto lezen…' : 'Maak foto / kies uit galerij'}
          </button>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 7, lineHeight: 1.4, textAlign: 'center' }}>
            Foto van je bord, verpakking of receptkaart — Moderis schat de macro’s. Daarna kun je ’t als recept bewaren.
          </div>
        </div>
      )}

      {/* Product zoeken of scannen — kiezen gaat via de portie-sheet */}
      {mode === 'zoek' && (
        <div style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            <div className="m-zoek" style={{ flex: 1 }}>
              <MIcon name="search" size={16} color="var(--ink-3)" />
              <input value={zoekQ} onChange={(e) => setZoekQ(e.target.value)} placeholder="Zoek een product…" autoFocus />
              {zoekQ && (
                <button className="tap" onClick={() => setZoekQ('')}
                  style={{ width: 22, height: 22, 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>
            {onScanProduct && (
              <button className="m-btn tap" onClick={onScanProduct} title="Scan barcode"
                style={{ width: 46, height: 46, padding: 0, borderRadius: 14, background: 'var(--forest-700)', flex: '0 0 auto' }}>
                <MIcon name="barcode" size={20} color="var(--on-forest)" />
              </button>
            )}
          </div>

          {/* Vaak gelogd — één tik logt de vaste portie opnieuw */}
          {!zoekQ.trim() && vaakGelogd.length > 0 && (
            <div style={{ marginBottom: 4 }}>
              <span className="m-eyebrow" style={{ display: 'block', marginBottom: 8 }}>Vaak gelogd</span>
              {vaakGelogd.map((f) => (
                <button key={f.id} className="tap" onClick={() => onKiesProduct && onKiesProduct(f)}
                  style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 12, marginBottom: 7, cursor: 'pointer', border: '1px solid var(--m-line)', background: 'var(--m-card)' }}>
                  <MIcon name="apple" size={16} color="var(--forest-500)" />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{f.name}</div>
                    <div className="num" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{f.brand} · {f.kcal} kcal</div>
                  </div>
                  <MIcon name="plus" size={16} color="var(--forest-600)" />
                </button>
              ))}
            </div>
          )}

          {/* Zoekresultaten (kiezen → portie-sheet) */}
          {zoekBusy && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-3)', fontSize: 13, padding: '8px 2px' }}>
              <Spinner size={14} /> Zoeken…
            </div>
          )}
          {zoekRes.map((f) => (
            <button key={f.id} className="tap" onClick={() => onKiesProduct && onKiesProduct(f)}
              style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 12, marginBottom: 7, cursor: 'pointer', border: '1px solid var(--m-line)', background: 'var(--m-card)' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</div>
                <div className="num" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{f.brand} · {f.kcal} kcal / 100 g</div>
              </div>
              <MIcon name="chevron" size={16} color="var(--ink-3)" />
            </button>
          ))}
          {zoekQ.trim().length >= 2 && !zoekBusy && zoekRes.length === 0 && (
            <div style={{ fontSize: 13, color: 'var(--ink-3)', textAlign: 'center', padding: '14px 0' }}>Niets gevonden voor "{zoekQ.trim()}".</div>
          )}
        </div>
      )}

      {/* Aanpasbare maaltijd vóór loggen */}
      {vorm && (
        <div style={{ background: 'var(--m-card-2)', border: '1px solid var(--m-line)', borderRadius: 14, padding: '13px', marginBottom: 14 }}>
          <label style={{ fontSize: 10.5, color: 'var(--ink-3)', display: 'block', marginBottom: 3 }}>Naam</label>
          <input value={vorm.naam} onChange={(e) => setVeld('naam', e.target.value)} style={{ ...inputStyle, marginBottom: 10 }} />

          {/* Foto/beschrijving = het hele gerecht. Deel door porties → je logt 1
              portie (handig bij een gerecht voor 2). De macro's hieronder passen mee. */}
          {(mode === 'foto' || mode === 'beschrijf') && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>Gerecht voor hoeveel porties? Je logt <strong>1</strong>.</span>
              <div style={{ display: 'inline-flex', alignItems: 'center', border: '1px solid var(--m-line-2)', borderRadius: 10, overflow: 'hidden', background: 'var(--m-card)' }}>
                <button type="button" className="tap" onClick={() => zetPorties(porties - 1)} disabled={porties <= 1}
                  style={{ width: 34, height: 34, border: 'none', background: 'transparent', cursor: porties <= 1 ? 'default' : 'pointer', fontSize: 18, lineHeight: 1, color: 'var(--forest-700)', opacity: porties <= 1 ? 0.4 : 1 }}>−</button>
                <span className="num" style={{ minWidth: 26, textAlign: 'center', fontSize: 14, fontWeight: 700 }}>{porties}</span>
                <button type="button" className="tap" onClick={() => zetPorties(porties + 1)}
                  style={{ width: 34, height: 34, border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, lineHeight: 1, color: 'var(--forest-700)' }}>＋</button>
              </div>
            </div>
          )}

          <div style={{ display: 'flex', gap: 8 }}>
            {macroVeld('kcal', 'kcal')}
            {macroVeld('eiwit (g)', 'eiwitten')}
            {macroVeld('kh (g)', 'koolhydraten')}
            {macroVeld('vet (g)', 'vetten')}
          </div>

          {/* Ingrediënten — pas grammen aan; deze gaan van je voorraad af */}
          <div style={{ marginTop: 14 }}>
            <label style={{ fontSize: 10.5, color: 'var(--ink-3)', display: 'block', marginBottom: 6 }}>
              Ingrediënten — gaan van je voorraad af
            </label>
            {ingredienten.map((ing, idx) => (
              <div key={idx} style={{ display: 'flex', gap: 7, alignItems: 'center', marginBottom: 7 }}>
                <IngredientNaamInput value={ing.naam}
                  onChange={(v) => setIng(idx, 'naam', v)}
                  onPick={(r) => setIng(idx, 'naam', r.naam)}
                  style={{ ...inputStyle, flex: 1, padding: '8px 10px', fontSize: 13 }} />
                <input type="number" min="0" value={ing.hoeveelheid_g} onChange={(e) => setIng(idx, 'hoeveelheid_g', e.target.value)} placeholder="g"
                  style={{ ...inputStyle, width: 64, padding: '8px 9px', fontSize: 13 }} />
                <button className="tap" onClick={() => removeIng(idx)} title="Verwijder"
                  style={{ width: 30, height: 30, flex: '0 0 auto', padding: 0, borderRadius: 9, border: '1px solid var(--m-line)',
                    background: 'var(--m-card)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <MIcon name="minus" size={14} color="var(--ink-2)" />
                </button>
              </div>
            ))}
            <button className="tap" onClick={addIng}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'none', border: 'none',
                color: 'var(--forest-600)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', padding: '2px 0' }}>
              <MIcon name="plus" size={14} color="var(--forest-600)" /> Ingrediënt toevoegen
            </button>
          </div>

          {(mode === 'beschrijf' || mode === 'foto') && !vorm.recept_id && (
            <label className="tap" style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, cursor: 'pointer', fontSize: 12.5, color: 'var(--ink-2)' }}>
              <input type="checkbox" checked={bewaarRecept} onChange={(e) => setBewaarRecept(e.target.checked)} />
              Ook bewaren als recept
            </label>
          )}
        </div>
      )}

      {mode !== 'zoek' && (
        <button className="m-btn m-btn-primary tap" onClick={loggen} disabled={busy || !vorm}
          style={{ width: '100%', fontSize: 14.5, padding: '13px', opacity: (busy || !vorm) ? 0.5 : 1 }}>
          {busy ? <Spinner size={16} /> : <MIcon name="check" size={16} sw={2.2} color="var(--on-forest)" />}
          {busy ? 'Bezig…' : 'Loggen'}
        </button>
      )}
    </Sheet>
  );
}

Object.assign(window, { LogSheet, LogDetailSheet });