/* Core views: Dashboard, Voorraad, Producten. Exported to window. */

const SEV = {
  danger: { color: "var(--danger)", bg: "var(--danger-soft)", line: "var(--danger-line)" },
  warn:   { color: "var(--warn)",   bg: "var(--warn-soft)",   line: "var(--warn-line)" },
  ok:     { color: "var(--ok)",     bg: "var(--ok-soft)",     line: "var(--ok-line)" },
  info:   { color: "var(--accent)", bg: "var(--accent-soft)", line: "var(--accent-line)" },
};
const TYPE_ICON = { voorraad: "boxes", review: "star", ranking: "trending", concurrent: "eye", seo: "search2", verkoop: "chart", retour: "truck" };

function PromoCard({ db }) {
  const promos = (db.bolPromos && db.bolPromos()) || null;
  const _rawPromos = (promos && promos.promotions) || [];
  const _seenP = {}; const promoList = [];
  for (const _p of _rawPromos) { if (_seenP[_p.id]) continue; _seenP[_p.id] = 1; promoList.push(_p); }
  const commKeys = promos && promos.commissions ? Object.keys(promos.commissions).filter(k => promos.commissions[k].reduction) : [];
  if (!promoList.length && !commKeys.length) return null;
  const nowIso = new Date().toISOString();
  const fmtD = (s) => s ? String(s).slice(0, 10) : "";
  return (
    <div style={{ marginBottom: "var(--space)" }}>
      <Card>
        <CardHead title="Bol-promoties & commissiekorting" icon="tag" />
        <div className="card-pad" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
          {promoList.map(p => {
            const liveNow = p.start <= nowIso && nowIso <= p.end;
            return (
              <div key={p.id} style={{ border: "1px solid var(--border)", borderRadius: 10, padding: "11px 13px" }}>
                <div style={{ fontWeight: 600, fontSize: 13, display: "flex", alignItems: "center", gap: 8 }}>{p.title} {liveNow ? <span className="pill ok" style={{ fontSize: 10.5 }}>loopt nu</span> : <span className="pill neutral" style={{ fontSize: 10.5 }}>gepland</span>}</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>{fmtD(p.start)} t/m {fmtD(p.end)} · {(p.countries || []).join(", ")}{p.products && p.products.length ? " · " + p.products.length + " producten" : ""}</div>
              </div>
            );
          })}
        </div>
        {commKeys.length > 0 && (
          <div className="card-pad" style={{ paddingTop: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 12.5, margin: "2px 0 6px" }}>Actieve commissiekorting</div>
            {commKeys.map(k => {
              const c = promos.commissions[k];
              const p = db.products.find(x => (x.sku || "").toUpperCase() === k.toUpperCase());
              return (
                <div key={k} style={{ fontSize: 12.5, display: "flex", justifyContent: "space-between", gap: 8, padding: "2px 0" }}>
                  <span className="muted">{p ? p.name : k}</span>
                  <b style={{ color: "var(--ok)", whiteSpace: "nowrap" }}>−{fmtEur(c.reduction.costReduction)} commissie t/m {fmtD(c.reduction.endDate)}</b>
                </div>
              );
            })}
            <div className="muted" style={{ fontSize: 11.5, marginTop: 6 }}>Commissiekorting zit automatisch in je winst (we rekenen met de échte ingehouden bol-kosten).</div>
          </div>
        )}
      </Card>
    </div>
  );
}

function AttentionItem({ a, onNav, onDismiss }) {
  const v = SEV[a.sev] || SEV.info;
  return (
    <div className="att-item">
      <span className="att-ico" style={{ background: v.bg, color: v.color }}>
        <Icon name={TYPE_ICON[a.type] || "alert"} size={18} />
      </span>
      <div className="att-body">
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="att-title">{a.title}</span>
          <span className="pill neutral" style={{ fontSize: 11, padding: "1px 7px" }}>{a.date}</span>
          {a.key && onDismiss && (
            <button className="att-done" title="Afvinken — melding sluiten" onClick={() => onDismiss(a.key)}>
              <Icon name="check" size={14} sw={2.6} />Afvinken
            </button>
          )}
        </div>
        <div className="att-desc">{a.desc}</div>
        {a.action && (
          <div className="att-action">
            <button className="btn btn-sm" onClick={() => onNav(a.to, a.prod)}>
              {a.action}<Icon name="arrowRight" size={14} />
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function ReviewRow({ r, db }) {
  const p = db.byId(r.prod);
  const sentColor = r.sent === "pos" ? "var(--ok)" : r.sent === "neg" ? "var(--danger)" : "var(--warn)";
  return (
    <div className="review">
      <div className="rv-top">
        <Stars value={r.stars} />
        <span style={{ width: 7, height: 7, borderRadius: 9, background: sentColor }} />
        <span className="rv-prod">{p ? p.name : ""}</span>
      </div>
      <div className="rv-text">"{r.text}"</div>
      <div className="rv-meta">
        <span style={{ fontWeight: 600, color: "var(--text-2)" }}>{r.name}</span>
        <span>· {r.source}</span>
        <span>· {r.date}</span>
      </div>
    </div>
  );
}

function Dashboard({ db, onNav, showTip = true }) {
  const k = db.kpis;
  const [actiesOpen, setActiesOpen] = React.useState(false);
  const period = db.period();
  const infos = db.products.map(p => db.periodOf(p, period));
  const available = !infos.some(i => i == null) && (period !== "yesterday" || db.products.some(p => p.periods && p.periods.yesterday));
  const liveOmzet = available ? infos.reduce((s, i) => s + i.rev, 0) : 0;
  const verkocht = available ? infos.reduce((s, i) => s + i.q, 0) : 0;
  const omzetReal = db.products.reduce((s, p) => s + db.omzet30(p), 0) > 0;
  const perLabel = (db.PERIODS.find(x => x.id === period) || {}).label || "30 dagen";
  const attention = db.openAlerts().filter(a => a.sev !== "ok").slice(0, 5);
  const acties = db.activeActions();
  const detected = db.detectedActions ? db.detectedActions().filter(d => !acties.some(a => (a.sku || "").toLowerCase() === (d.sku || "").toLowerCase())) : [];
  const reorder = db.products.filter(p => p.status !== "ok").sort((a, b) => a.daysLeft - b.daysLeft);
  const counts = { ok: 0, warn: 0, danger: 0 };
  db.products.forEach(p => counts[p.status]++);
  // Rankings-bewegingen: LIVE uit Search Console (30 dgn vs periode ervoor)
  const gscD = (db.gscData && db.gscData()) || null;
  const gscMovers = React.useMemo(() => {
    if (!gscD || !gscD.queries) return null;
    const prev = {}; (gscD.prevQueries || []).forEach(q => { prev[q.query] = q; });
    return gscD.queries.filter(q => q.clicks > 0 || q.impressions >= 100).map(q => {
      const p2 = prev[q.query];
      return p2 ? { kw: q.query, cur: q.position, prev: p2.position, d: +(p2.position - q.position).toFixed(1) } : null;
    }).filter(x => x && Math.abs(x.d) >= 0.5).sort((a, b) => Math.abs(b.d) - Math.abs(a.d));
  }, [gscD]);
  const topUp = gscMovers ? gscMovers.filter(m => m.d > 0).slice(0, 3) : [];
  const topDown = gscMovers ? gscMovers.filter(m => m.d < 0).slice(0, 2) : [];

  return (
    <div className="view">
      <div className="page-head">
        <div className="ph-row">
          <div>
            <h1>{(() => { const h = new Date().getHours(); return h < 6 ? "Goedenacht" : h < 12 ? "Goedemorgen" : h < 18 ? "Goedemiddag" : "Goedenavond"; })()} 👋</h1>
            <div className="ph-sub">STOCERS · Doosjehout.nl</div>
          </div>
          <div className="seg" style={{ flexWrap: "wrap" }}>
            {db.PERIODS.map(per => (
              <button key={per.id} className={period === per.id ? "on" : ""}
                onClick={() => window.STORE.setPeriod(per.id)}>{per.label}</button>
            ))}
          </div>
        </div>
      </div>

      {/* AdPilot dagrapport — regelgebaseerd, altijd actueel */}
      {(() => {
        const yI = db.products.map(p => db.periodOf(p, "yesterday")).filter(Boolean);
        if (!yI.length) return null;
        const yOmzet = yI.reduce((s, i) => s + (i.rev || 0), 0), yQ = yI.reduce((s, i) => s + (i.q || 0), 0);
        const adsY = ((db.adsTotal && db.adsTotal("yesterday")) || 0) + ((db.gadsTotal && db.gadsTotal("yesterday")) || 0);
        const top = attention[0];
        return (
          <div style={{ display: "flex", gap: 10, alignItems: "flex-start", background: "linear-gradient(135deg, var(--brand-soft), var(--accent-soft))", border: "1px solid var(--border)", borderRadius: 12, padding: "11px 14px", marginBottom: "var(--space)", fontSize: 13, lineHeight: 1.5 }}>
            <span className="adp-bot" style={{ width: 28, height: 28, borderRadius: 99, background: "var(--brand)", color: "#fff", display: "grid", placeContent: "center", flex: "none", marginTop: 1 }}><Icon name="sparkles" size={14} /></span>
            <span><b>AdPilot · dagrapport:</b> gisteren {fmtEur(Math.round(yOmzet))} omzet ({yQ} stuks){adsY > 0 ? " · " + fmtEur(Math.round(adsY)) + " advertentiekosten" : ""}. {top ? <span>Belangrijkste actie: <b>{top.title}</b> — <a style={{ cursor: "pointer", textDecoration: "underline" }} onClick={() => onNav(top.to || "meldingen")}>bekijk</a>.</span> : "Geen openstaande acties — lekker bezig. 👍"}</span>
          </div>
        );
      })()}

      {/* KPI row */}
      <div className="grid cols-4" style={{ marginBottom: "var(--space)" }}>
        <KPI icon="euro" iconBg="var(--accent-soft)" iconColor="var(--accent)" label={"Omzet · " + perLabel.toLowerCase()}
          value={available && omzetReal ? fmtEur(Math.round(liveOmzet)) : "—"}
          onClick={() => onNav("winst")} foot={<span>{available && omzetReal ? "bekijk winst →" : "data niet beschikbaar — check de koppeling"}</span>} />
        <KPI icon="chart" iconBg="var(--ok-soft)" iconColor="var(--ok)" label={"Verkocht · " + perLabel.toLowerCase()}
          value={available ? fmtNum(verkocht) : "—"} foot={<span>stuks</span>} />
        <KPI icon={attention.length > 0 ? "alert" : "check"}
          iconBg={attention.length > 0 ? "var(--danger-soft)" : "var(--ok-soft)"}
          iconColor={attention.length > 0 ? "var(--danger)" : "var(--ok)"}
          label="Heeft aandacht nodig"
          value={attention.length}
          valColor={attention.length > 0 ? "var(--danger)" : "var(--ok)"}
          onClick={attention.length > 0 ? () => onNav("meldingen") : undefined}
          foot={<span>{attention.length > 0 ? "klik om op te volgen →" : "niets te doen ✓"}</span>} />
        <KPI icon={counts.danger + counts.warn > 0 ? "boxes" : "check"}
          iconBg={counts.danger + counts.warn > 0 ? "var(--danger-soft)" : "var(--ok-soft)"}
          iconColor={counts.danger + counts.warn > 0 ? "var(--danger)" : "var(--ok)"}
          label="Op / bijna op"
          value={counts.danger + counts.warn}
          valColor={counts.danger + counts.warn > 0 ? "var(--danger)" : "var(--ok)"}
          onClick={counts.danger + counts.warn > 0 ? () => onNav("voorraad") : undefined}
          foot={<span>{counts.danger + counts.warn > 0 ? counts.danger + " rood · " + counts.warn + " oranje — klik →" : "voorraad op orde ✓"}</span>} />
      </div>

      {/* lopende acties */}
      {(acties.length > 0 || detected.length > 0) && (
        <Card style={{ marginBottom: "var(--space)" }}>
          <button className="card-toggle" onClick={() => setActiesOpen(o => !o)}>
            <span className="ch-ico" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name="tag" size={17} /></span>
            <span style={{ flex: 1, textAlign: "left" }}>
              <span className="ch-title">Lopende acties</span>
              <span className="ch-sub">{(acties.length + detected.length)} actief{detected.length > 0 ? " · " + detected.length + " automatisch herkend" : ""}</span>
            </span>
            <Icon name="chevronDown" size={18} style={{ color: "var(--text-3)", transform: actiesOpen ? "rotate(180deg)" : "none", transition: ".18s" }} />
          </button>
          {actiesOpen && (
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 8, borderTop: "1px solid var(--border)" }}>
            {detected.map(d => (
              <div key={d.id} className="lrow" style={{ padding: "7px 0", gap: 11 }}>
                <span className="pill accent" style={{ minWidth: 92, justifyContent: "center" }}>Gedetecteerd</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{d.name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{d.channel} · verkocht voor ø {fmtEur(d.avgSold, 2)} i.p.v. {fmtEur(d.list, 2)} ({d.units} st, 7 dgn)</div>
                </div>
                <span className="pill ok" style={{ fontWeight: 700 }}>−{d.off}%</span>
              </div>
            ))}
            {acties.map(a => (
              <div key={a.id} className="lrow" style={{ padding: "7px 0", gap: 11 }}>
                <span className={"pill " + (a.live ? "ok" : "neutral")} style={{ minWidth: 64, justifyContent: "center" }}>{a.live ? "Actief" : "Gepland"}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{a.name}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{a.sku}{a.note ? " · " + a.note : ""}</div>
                </div>
                {a.promoPrice && <div className="tnum" style={{ fontWeight: 700 }}>{fmtEur(a.promoPrice, 2)}<span className="muted" style={{ fontWeight: 400, fontSize: 11.5 }}> actieprijs</span></div>}
                <div className="muted tnum" style={{ fontSize: 12, minWidth: 116, textAlign: "right" }}>{fmtDate(a.start)} – {fmtDate(a.end)}</div>
              </div>
            ))}
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>"Gedetecteerd" = automatisch herkend uit je werkelijke verkoopprijzen (≥5% onder de normale prijs). De commissiekorting van bol zit al in je winst verwerkt.</div>
          </div>
          )}
        </Card>
      )}

      {/* attention + reviews */}
      <div className="grid col-7-5" style={{ marginBottom: "var(--space)" }}>
        <Card>
          <CardHead title="Heeft je aandacht nodig"
            icon="alert" right={<button className="btn btn-sm btn-ghost" onClick={() => onNav("meldingen")}>Alle meldingen<Icon name="arrowRight" size={14} /></button>} />
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {attention.length === 0 && <div className="muted" style={{ fontSize: 13, padding: "4px 2px" }}>Niets dringends — alles op orde. ✅</div>}
            {attention.map(a => <AttentionItem key={a.id} a={a} onNav={onNav} onDismiss={db.dismissAlert} />)}
          </div>
        </Card>

        <Card>
          <CardHead title="Reviews" icon="star"
            right={<button className="btn btn-sm btn-ghost" onClick={() => onNav("reviews")}>Alle<Icon name="arrowRight" size={14} /></button>} />
          <div className="card-pad" style={{ paddingTop: 6, paddingBottom: 6 }}>
            {(() => {
              const list = db.products.map(p => ({ p, r: db.reviewFor(p.sku) })).filter(x => x.r)
                .sort((a, b) => (db.reviewIsNew(b.r) - db.reviewIsNew(a.r)) || (b.r.since || "").localeCompare(a.r.since || "") || (b.r.count || 0) - (a.r.count || 0)).slice(0, 6);
              if (!list.length) return <div className="muted" style={{ fontSize: 13, padding: "6px 2px" }}>Nog geen bol-reviews opgehaald. Open de Reviews-pagina en klik "Nu ophalen".</div>;
              return list.map(({ p, r }) => {
                const isNew = db.reviewIsNew(r);
                return (
                <div key={p.id} className="lrow row-click" style={{ padding: "8px 0", gap: 10 }} onClick={() => onNav("producten", p.id)}>
                  <ProductThumb p={p} size={30} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{r.count} reviews{isNew ? " · +" + r["new"] + " " + fmtDate(r.since) : ""}</div>
                  </div>
                  {isNew && <NieuwBadge sku={p.sku} style={{ fontSize: 10.5, padding: "1px 7px" }} />}
                  <Stars value={r.rating} size={13} />
                  <b style={{ fontSize: 13, minWidth: 26, textAlign: "right" }}>{(r.rating || 0).toFixed(1)}</b>
                  <span className="pill neutral" style={{ fontSize: 10, padding: "0 6px" }}>Bol</span>
                </div>
              );});
            })()}
          </div>
        </Card>
      </div>

      <PromoCard db={db} />

      {/* voorraad snapshot + rankings movers */}
      <div className="grid col-7-5">
        <Card>
          <CardHead title="Voorraad — bestel binnenkort" icon="boxes"
            right={<button className="btn btn-sm btn-ghost" onClick={() => onNav("voorraad")}>Voorraad<Icon name="arrowRight" size={14} /></button>} />
          <div style={{ overflowX: "auto" }}>
          <table className="tbl">
            <thead><tr><th>Product</th><th className="num">Voorraad</th><th className="num">Verkoop/dag</th><th className="num">Voorraadduur</th><th>Status</th></tr></thead>
            <tbody>
              {reorder.slice(0, 5).map(p => (
                <tr key={p.id} className="row-click" onClick={() => onNav("producten", p.id)}>
                  <td><div className="prod"><ProductThumb p={p} size={34} /><div><div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div><div className="mono" style={{ fontSize: 11 }}>{p.sku}</div></div></div></td>
                  <td className="num tnum" style={{ fontWeight: 600 }}>{p.stock}</td>
                  <td className="num tnum muted">{p.avgPerDay}</td>
                  <td className="num tnum">{p.daysLeft > 200 ? "—" : p.daysLeft + " dgn"}</td>
                  <td><StatusPill status={p.status} /></td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </Card>

        <Card>
          <CardHead title="Rankings — opvallende bewegingen" icon="trending" sub={gscMovers ? "live uit Search Console · 30 dgn vs periode ervoor" : "wachten op Search Console-data…"}
            right={<button className="btn btn-sm btn-ghost" onClick={() => onNav("rankings")}>Rankings<Icon name="arrowRight" size={14} /></button>} />
          <div className="card-pad">
            {gscMovers && !gscMovers.length && <div className="muted" style={{ fontSize: 13 }}>Geen grote verschuivingen — je posities zijn stabiel. 👍</div>}
            {topUp.length > 0 && <div className="sec-title" style={{ marginBottom: 8, color: "var(--ok)" }}>Stijgers</div>}
            {topUp.map(m => (
              <div className="lrow" key={m.kw}>
                <Icon name="arrowUp" size={16} style={{ color: "var(--ok)" }} />
                <div style={{ flex: 1, minWidth: 0 }}><span style={{ fontWeight: 600 }}>{m.kw}</span></div>
                <span className="mono muted" style={{ fontSize: 12 }}>#{m.prev.toFixed(1)}→</span>
                <span className="pill ok" style={{ minWidth: 34, justifyContent: "center" }}>#{m.cur.toFixed(1)}</span>
              </div>
            ))}
            {topDown.length > 0 && <div className="sec-title" style={{ margin: "14px 0 8px", color: "var(--danger)" }}>Dalers</div>}
            {topDown.map(m => (
              <div className="lrow" key={m.kw}>
                <Icon name="arrowDown" size={16} style={{ color: "var(--danger)" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ fontWeight: 600 }}>{m.kw}</span>
                </div>
                <span className="mono muted" style={{ fontSize: 12 }}>#{m.prev.toFixed(1)}→</span>
                <span className="pill danger" style={{ minWidth: 34, justifyContent: "center" }}>#{m.cur.toFixed(1)}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ============================ VOORRAAD ============================ */
function Voorraad({ db, onNav }) {
  const [tab, setTab] = React.useState("alle");
  const [q, setQ] = React.useState("");
  let list = db.products;
  if (tab === "bestel") list = list.filter(p => p.status !== "ok");
  if (tab === "ok") list = list.filter(p => p.status === "ok");
  if (q) list = list.filter(p => (p.name + p.sku).toLowerCase().includes(q.toLowerCase()));
  list = [...list].sort((a, b) => a.daysLeft - b.daysLeft);

  const counts = { ok: 0, warn: 0, danger: 0 };
  db.products.forEach(p => counts[p.status]++);
  const hasAnyCost = db.products.some(p => db.effCost(p) != null && db.effCost(p) > 0);
  const totalValue = db.products.reduce((s, p) => { const c = db.effCost(p); return s + p.stock * (c != null ? c : 0); }, 0);

  return (
    <div className="view">
      <div className="page-head">
        <h1>Voorraad</h1>
        <div className="ph-sub">Live voorraad, verkoopsnelheid en automatisch besteladvies. Databron: <b>Stockitup</b> {db.liveStatus && db.liveStatus().active
          ? <span className="pill ok" style={{ marginLeft: 6 }}><span className="pdot" />Live gekoppeld</span>
          : db.isImported() ? <span className="pill accent" style={{ marginLeft: 6 }}><span className="pdot" />CSV-import</span>
          : <span className="pill warn" style={{ marginLeft: 6 }}><span className="pdot" />Demo · nog niet gekoppeld</span>}</div>
      </div>

      <div className="grid cols-4" style={{ marginBottom: "var(--space)" }}>
        <KPI icon="boxes" iconBg="var(--surface-3)" iconColor="var(--text-2)" label="Producten" value={db.products.length} foot="actieve SKU's" />
        <KPI icon={counts.danger > 0 ? "alert" : "check"} iconBg={counts.danger > 0 ? "var(--danger-soft)" : "var(--ok-soft)"} iconColor={counts.danger > 0 ? "var(--danger)" : "var(--ok)"} label="Direct bestellen" value={counts.danger} valColor={counts.danger > 0 ? "var(--danger)" : "var(--ok)"} foot={counts.danger > 0 ? "rode status" : "niets dringend ✓"} />
        <KPI icon={counts.warn > 0 ? "clock" : "check"} iconBg={counts.warn > 0 ? "var(--warn-soft)" : "var(--ok-soft)"} iconColor={counts.warn > 0 ? "var(--warn)" : "var(--ok)"} label="Raakt op" value={counts.warn} valColor={counts.warn > 0 ? "var(--warn)" : "var(--ok)"} foot={counts.warn > 0 ? "oranje status" : "ruim voorraad ✓"} />
        <KPI icon="euro" iconBg="var(--accent-soft)" iconColor="var(--accent)" label="Voorraadwaarde" value={hasAnyCost ? fmtEur(totalValue) : "—"} foot={hasAnyCost ? "tegen inkoopprijs" : "inkoopprijs nog niet gekoppeld"} />
      </div>

      <Card style={{ marginBottom: "var(--space)" }}>
        <div className="card-head">
          <div className="seg">
            <button className={tab === "alle" ? "on" : ""} onClick={() => setTab("alle")}>Alle producten</button>
            <button className={tab === "bestel" ? "on" : ""} onClick={() => setTab("bestel")}>Bestellen ({counts.danger + counts.warn})</button>
            <button className={tab === "ok" ? "on" : ""} onClick={() => setTab("ok")}>Op voorraad ({counts.ok})</button>
          </div>
          <div className="ch-right" style={{ flex: "1 1 200px", justifyContent: "flex-end" }}>
            <label className="tb-search list-search">
              <Icon name="search2" size={15} />
              <input placeholder="Zoeken…" value={q} onChange={e => setQ(e.target.value)} />
            </label>
            <button className="btn btn-sm"><Icon name="download" size={14} />CSV</button>
          </div>
        </div>
        <div style={{ overflowX: "auto" }} className="desk-only">
          <table className="tbl">
            <thead><tr>
              <th>Product</th><th className="num">Voorraad</th><th className="num">Bestelpunt</th>
              <th className="num">7 dgn</th><th className="num">30 dgn</th><th className="num">Gem./dag</th>
              <th className="num">Voorraadduur</th><th>Status</th><th>Besteladvies</th>
            </tr></thead>
            <tbody>
              {list.map(p => (
                <tr key={p.id} className="row-click" onClick={() => onNav("producten", p.id)}>
                  <td><div className="prod"><ProductThumb p={p} /><div><div style={{ fontWeight: 600 }}>{p.name}</div><div className="mono" style={{ fontSize: 11 }}>{p.sku} · {p.group}</div></div></div></td>
                  <td className="num tnum" style={{ fontWeight: 700 }}>{p.stock}</td>
                  <td className="num tnum muted">{p.reorderPoint}</td>
                  <td className="num tnum">{p.sales7}</td>
                  <td className="num tnum">{p.sales30}</td>
                  <td className="num tnum">{p.avgPerDay}</td>
                  <td className="num tnum">{p.daysLeft > 200 ? <span className="muted">200+</span> : <b>{p.daysLeft} dgn</b>}</td>
                  <td><StatusPill status={p.status} /></td>
                  <td>{p.advise > 0
                    ? <span className={"pill " + (p.adviseUrgent ? "danger" : "accent")}><Icon name="truck" size={13} />{p.advise} st</span>
                    : <span className="muted" style={{ fontSize: 12 }}>—</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="m-cards">
          {list.map(p => (
            <button key={p.id} className="m-card" onClick={() => onNav("producten", p.id)}>
              <div className="m-card-top">
                <ProductThumb p={p} size={40} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="m-card-name">{p.name}</div>
                  <div className="mono muted" style={{ fontSize: 11 }}>{p.sku}</div>
                </div>
                <StatusPill status={p.status} />
              </div>
              <div className="m-card-stats">
                <span><b className="tnum">{p.stock}</b> voorraad</span>
                <span><b className="tnum">{p.daysLeft > 200 ? "200+" : p.daysLeft}</b> dgn</span>
                <span><b className="tnum">{p.sales30}</b> verkocht 30d</span>
                {p.advise > 0 && <span className={"pill " + (p.adviseUrgent ? "danger" : "accent")} style={{ fontSize: 11 }}><Icon name="truck" size={12} />{p.advise} st</span>}
              </div>
            </button>
          ))}
        </div>
      </Card>

      {/* besteladvies + dead stock */}
      <div className="grid col-7-5">
        <Card>
          <CardHead title="Slim besteladvies" icon="truck" sub="Automatisch berekend uit verkoopsnelheid en levertijd" />
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {db.products.filter(p => p.advise > 0).sort((a, b) => a.daysLeft - b.daysLeft).slice(0, 4).map(p => (
              <div key={p.id} style={{ border: "1px solid var(--border)", borderRadius: 11, padding: 14, display: "flex", gap: 13, alignItems: "center" }}>
                <ProductThumb p={p} size={42} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600 }}>{p.name}</div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>
                    {p.stock} op voorraad · {p.avgPerDay}/dag · nog <b style={{ color: p.adviseUrgent ? "var(--danger)" : "var(--text)" }}>{p.daysLeft} dagen</b> · levertijd {p.leadDays} dgn
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className={"pill " + (p.adviseUrgent ? "danger" : "accent")} style={{ marginBottom: 6 }}>
                    {p.adviseUrgent ? "Bestel binnen " + Math.max(0, p.daysLeft - p.leadDays) + " dgn" : "Inplannen"}
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{p.advise} st</div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <CardHead title="Dead stock" icon="clock" sub="Nauwelijks verkocht — actie aanbevolen" />
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {(() => {
              const slow = db.products.filter(p => p.stock > 0 && p.sales30 <= 5).sort((a, b) => a.sales30 - b.sales30).slice(0, 6);
              if (!slow.length) return <Placeholder label="Geen dead stock" note="alle producten met voorraad verkopen voldoende" height={120} />;
              return slow.map(p => {
                const days = p.sales30 === 0 ? 90 : p.sales30 <= 2 ? 60 : 30;
                const advice = p.sales30 === 0 ? "Adverteren of bundelen — al 30+ dagen geen verkoop" : "Prijsactie of SEO-optimalisatie overwegen";
                return (
                  <div key={p.id} style={{ border: "1px solid var(--border)", borderRadius: 11, padding: 14 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <ProductThumb p={p} size={34} />
                      <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div></div>
                      <span className={"pill " + (days >= 90 ? "danger" : days >= 60 ? "warn" : "neutral")}>{days} dgn traag</span>
                    </div>
                    <div className="muted" style={{ fontSize: 12.5, margin: "8px 0 6px" }}>{p.stock} op voorraad · {p.sales30} verkocht in 30 dagen</div>
                    <div className="ai-tag"><Icon name="sparkles" size={13} />Advies: {advice}</div>
                  </div>
                );
              });
            })()}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ============================ PRODUCTEN ============================ */
function Producten({ db, onNav, productId }) {
  const [sel, setSel] = React.useState(productId || null);
  React.useEffect(() => { if (productId) setSel(productId); }, [productId]);
  const selProduct = sel ? db.byId(sel) : null;
  if (selProduct) return <ProductDetail db={db} p={selProduct} onBack={() => setSel(null)} onNav={onNav} />;

  return (
    <div className="view">
      <div className="page-head">
        <h1>Producten</h1>
        <div className="ph-sub">Eén totaaloverzicht per product: voorraad, verkoop, reviews, ranking, omzet en winst.</div>
      </div>
      <Card>
        <div style={{ overflowX: "auto" }} className="desk-only">
          <table className="tbl">
            <thead><tr>
              <th>Product</th><th className="num">Voorraad</th><th className="num">Verkocht 30d</th><th className="num">Omzet 30d</th>
              <th className="num">Winst 30d</th><th className="num">Adv. 30d</th><th className="num">Marge</th><th>Reviews</th>
              <th>Ranking</th><th></th>
            </tr></thead>
            <tbody>
              {db.products.map(p => {
                const omzet = db.omzet30(p);
                const cost = db.effCost(p);
                const w30 = db.winst30(p);
                const winst = w30 ? Math.round(db.profitTax() > 0 ? w30.na : w30.voor) : null;
                const marge = (winst != null && omzet > 0) ? Math.round(winst / omzet * 100) : null;
                const kw = db.keywords.find(k => k.prod === p.id);
                const rv = db.reviewFor(p.sku);
                const rScore = rv && rv.rating != null ? rv.rating : p.rev.avg;
                const rCnt = rv && rv.count != null ? rv.count : p.rev.count;
                return (
                  <tr key={p.id} className="row-click" onClick={() => onNav("producten", p.id)}>
                    <td><div className="prod"><ProductThumb p={p} /><div><div style={{ fontWeight: 600 }}>{p.name}</div><div className="mono" style={{ fontSize: 11 }}>{p.sku}</div></div></div></td>
                    <td className="num"><StatusPill status={p.status} label={p.stock + ""} /></td>
                    <td className="num tnum" style={{ fontWeight: 600 }}>{p.sales30}</td>
                    <td className="num tnum" style={{ fontWeight: 600 }}>{omzet > 0 ? fmtEur(omzet) : "—"}</td>
                    <td className="num tnum">{winst != null ? fmtEur(winst) : "—"}</td>
                    <td className="num tnum">{(() => { const a = db.adsFor && db.adsFor(p.sku, "d30"); return a && a.cost > 0 ? <span style={{ color: "var(--accent)" }} title={a.clicks + " clicks · " + fmtEur(a.sales) + " ad-omzet"}>−{fmtEur(a.cost)}</span> : <span className="muted">—</span>; })()}</td>
                    <td className="num tnum">{marge != null ? marge + "%" : "—"}</td>
                    <td><div style={{ display: "flex", alignItems: "center", gap: 6 }}><Stars value={rScore} size={13} /><span className="muted" style={{ fontSize: 12 }}>{rScore.toFixed(1)} ({rCnt})</span>{rv && rv.isNew && <span className="pill ok" style={{ fontSize: 10, padding: "0 6px" }}>Nieuw</span>}</div></td>
                    <td>{kw ? <span className="pill neutral">{kw.kw} · #{kw.cur}</span> : <span className="muted">—</span>}</td>
                    <td><Icon name="chevron" size={16} style={{ color: "var(--text-3)" }} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="m-cards">
          {db.products.map(p => {
            const omzet = db.omzet30(p);
            const w30 = db.winst30(p);
            const winst = w30 ? Math.round(db.profitTax() > 0 ? w30.na : w30.voor) : null;
            return (
              <button key={p.id} className="m-card" onClick={() => onNav("producten", p.id)}>
                <div className="m-card-top">
                  <ProductThumb p={p} size={40} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="m-card-name">{p.name}</div>
                    <div className="mono muted" style={{ fontSize: 11 }}>{p.sku}</div>
                  </div>
                  <StatusPill status={p.status} label={p.stock + ""} />
                </div>
                <div className="m-card-stats">
                  <span><b className="tnum">{p.sales30}</b> verkocht</span>
                  <span>omzet <b className="tnum">{omzet > 0 ? fmtEur(omzet) : "—"}</b></span>
                  <span>winst <b className="tnum" style={{ color: winst != null ? (winst >= 0 ? "var(--ok)" : "var(--danger)") : undefined }}>{winst != null ? fmtEur(winst) : "—"}</b></span>
                </div>
              </button>
            );
          })}
        </div>
      </Card>
    </div>
  );
}

window.ProductDetail = function ProductDetail({ db, p, onBack, onNav }) {
  if (!p) return null;
  const hasPrice = p.prices.web > 0;
  const cost = db.effCost(p);
  const hasCost = cost != null && cost > 0;
  const shipping = db.shipping();
  const omzet = db.omzet30(p);
  const w30 = db.winst30(p);
  const winst = w30 ? Math.round(db.profitTax() > 0 ? w30.na : w30.voor) : null;
  const marge = (winst != null && omzet > 0) ? Math.round(winst / omzet * 100) : null;
  const kw = db.keywords.find(k => k.prod === p.id);
  const seo = db.seoPages.find(s => s.id === p.id);
  const prodReviews = db.reviews.filter(r => r.prod === p.id);

  return (
    <div className="view">
      <button className="btn btn-sm btn-ghost" onClick={onBack} style={{ marginBottom: 14 }}><Icon name="arrowRight" size={14} style={{ transform: "rotate(180deg)" }} />Terug naar producten</button>
      <div className="page-head">
        <div className="ph-row">
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <ProductThumb p={p} size={52} />
            <div>
              <h1 style={{ fontSize: 22 }}>{p.name}</h1>
              <div className="ph-sub mono">{p.sku} · {p.group}</div>
            </div>
          </div>
          <StatusPill status={p.status} />
        </div>
      </div>

      <div className="grid cols-4" style={{ marginBottom: "var(--space)" }}>
        <KPI icon="boxes" iconBg="var(--surface-3)" iconColor="var(--text-2)" label="Voorraad" value={p.stock} foot={<span>{p.daysLeft > 200 ? "200+" : p.daysLeft} dagen · bestelpunt {p.reorderPoint}</span>} />
        <KPI icon="chart" iconBg="var(--accent-soft)" iconColor="var(--accent)" label="Verkoop 30 dgn" value={p.sales30} delta={<Delta value={Math.round((p.sales7 - p.sales7prev) / p.sales7prev * 100)} />} foot="vs. vorige week" />
        <KPI icon="euro" iconBg="var(--ok-soft)" iconColor="var(--ok)" label="Omzet 30 dgn" value={omzet > 0 ? fmtEur(omzet) : "—"} foot={<span>{winst != null ? "winst ≈ " + fmtEur(winst) : (hasPrice ? "inkoop nog niet gekoppeld" : "prijs nog niet gekoppeld")}</span>} />
        <KPI icon="star" iconBg="var(--warn-soft)" iconColor="var(--warn)" label="Reviewscore" value={p.rev.avg.toFixed(1)} delta={<Delta value={+(p.rev.avg - p.rev.prev).toFixed(1)} suffix="" />} foot={<span>{p.rev.count} reviews</span>} />
      </div>

      <div className="grid col-7-5" style={{ marginBottom: "var(--space)" }}>
        <Card>
          <CardHead title="Verkoop per periode" icon="chart"
            right={<span className="muted" style={{ fontSize: 12.5 }}>{p.avgPerDay}/dag gemiddeld</span>} />
          <div className="card-pad">
            {(() => {
              const rows = db.PERIODS.map(per => ({ label: per.label, q: (db.periodOf(p, per.id) || { q: 0 }).q || 0 }));
              const max = Math.max(1, ...rows.map(r => r.q));
              if (!rows.some(r => r.q > 0)) return <div className="muted" style={{ fontSize: 13, padding: "20px 0", textAlign: "center" }}>Nog geen verkoopdata voor dit product in deze periodes.</div>;
              return (
                <React.Fragment>
                  <div style={{ display: "flex", alignItems: "flex-end", gap: 10, height: 130 }}>
                    {rows.map(r => (
                      <div key={r.label} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 6, height: "100%" }}>
                        <div className="tnum" style={{ fontSize: 12.5, fontWeight: 700 }}>{r.q}</div>
                        <div style={{ width: "100%", maxWidth: 44, height: Math.max(3, Math.round(r.q / max * 88)), background: "var(--accent)", borderRadius: "5px 5px 0 0" }} />
                        <div className="muted" style={{ fontSize: 11 }}>{r.label}</div>
                      </div>
                    ))}
                  </div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>Elk balkje = totaal verkocht in die periode (t/m vandaag).</div>
                </React.Fragment>
              );
            })()}
            {p.salesByChannel && Object.keys(p.salesByChannel).length > 0 && (
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
                <div className="sec-title" style={{ marginBottom: 8 }}>Verkocht per platform (30d)</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {Object.entries(p.salesByChannel).sort((a, b) => b[1] - a[1]).map(([name, qty]) => (
                    <span key={name} className="pill neutral">{name}<b style={{ marginLeft: 5 }}>{qty}</b></span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </Card>
        <Card>
          <CardHead title="Prijs & winst per platform" icon="tag"
            right={<span className="muted" style={{ fontSize: 12 }}>verzending {db.shipping() > 0 ? fmtEur(db.shipping(), 2) : "—"}</span>} />
          <div className="card-pad" style={{ paddingTop: 6 }}>
            {(() => {
              const raw = (p.channels && p.channels.length) ? p.channels : db.PLATFORMS.map(pf => ({ name: pf.name, price: p.prices[pf.id] }));
              const byName = {};
              for (const c of raw) {
                if (c.price == null) { if (!byName[c.name]) byName[c.name] = { name: c.name, price: null, stock: 0 }; continue; }
                const cur = byName[c.name];
                const stock = c.stock != null ? c.stock : 0;
                // kies per kanaal de actief-bevoorraade aanbieding; bij gelijke voorraad de hoogste prijs (hoofdlisting)
                if (!cur || cur.price == null || stock > (cur.stock || 0) || (stock === (cur.stock || 0) && c.price > cur.price)) {
                  byName[c.name] = { name: c.name, price: c.price, stock };
                }
              }
              return Object.values(byName);
            })().map((r, i) => {
              const w0 = db.winstPer(p, r.price, r.name);
              const w = w0 != null ? db.naBelasting(w0) : null;
              const isBol = /bol/i.test(r.name);
              return (
                <div className="lrow" key={i}>
                  <div style={{ flex: 1, fontWeight: 500 }}>{r.name}{isBol && db.effCost(p) != null && <span className="muted" style={{ fontSize: 11, marginLeft: 6 }}>incl. bol-kosten</span>}</div>
                  {w != null && <span className={"pill " + (w > 0 ? "ok" : "danger")} style={{ marginRight: 10 }}>{fmtEur(w, 2)} winst</span>}
                  <div className="tnum" style={{ fontWeight: 700, minWidth: 64, textAlign: "right" }}>{r.price > 0 ? fmtEur(r.price, 2) : <span className="muted">—</span>}</div>
                </div>
              );
            })}
            <div className="muted" style={{ fontSize: 11.5, marginTop: 8 }}>
              Winst = prijs −{db.vat()}% BTW − inkoop − verzending − platform-kosten{db.profitTax() > 0 ? " − " + db.profitTax() + "% winstbelasting (netto)" : ""}.
            </div>
            <CostEditor db={db} p={p} marge={marge} />
          </div>
        </Card>
      </div>

      <div className="grid col-7-5">
        <Card>
          <CardHead title="Reviews" icon="star" right={<button className="btn btn-sm btn-ghost" onClick={() => onNav("reviews")}>Alle reviews<Icon name="arrowRight" size={14} /></button>} />
          <div className="card-pad" style={{ paddingTop: 2, paddingBottom: 2 }}>
            {prodReviews.length ? prodReviews.map(r => <ReviewRow key={r.id} r={r} db={db} />)
              : <Placeholder label="Nog geen losse reviews in demo" note="Productlinks koppel je in Instellingen" height={120} />}
          </div>
        </Card>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space)" }}>
          <Card>
            <CardHead title="Ranking" icon="trending" />
            <div className="card-pad">
              {kw ? <>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                  <span style={{ fontWeight: 600 }}>{kw.kw}</span>
                  <span className={"pill " + (kw.cur <= kw.prev ? "ok" : "danger")} style={{ marginLeft: "auto" }}>#{kw.cur}</span>
                </div>
                <RankChart data={kw.hist} w={400} h={90} color="var(--accent)" />
              </> : <span className="muted">Geen zoekwoord gekoppeld</span>}
            </div>
          </Card>
          <Card>
            <CardHead title="SEO" icon="search2" />
            <div className="card-pad">
              {seo ? <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <ScoreRing score={seo.score} />
                <div>
                  <div className="mono" style={{ fontSize: 12.5 }}>{seo.url}</div>
                  <button className="btn btn-sm" style={{ marginTop: 8 }} onClick={() => onNav("seo")}>Audit openen<Icon name="arrowRight" size={14} /></button>
                </div>
              </div> : <span className="muted">Geen SEO-pagina gekoppeld</span>}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

/* score ring used in product + seo */
window.ScoreRing = function ScoreRing({ score, size = 64 }) {
  const r = (size - 8) / 2, c = 2 * Math.PI * r;
  const col = score >= 80 ? "var(--ok)" : score >= 65 ? "var(--warn)" : "var(--danger)";
  return (
    <div style={{ position: "relative", width: size, height: size, flex: "none" }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth="6" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={col} strokeWidth="6" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={c * (1 - score / 100)} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeContent: "center", fontWeight: 700, fontSize: size * 0.28 }}>{score}</div>
    </div>
  );
};

window.CostEditor = function CostEditor({ db, p }) {
  const info = (window.STORE.costInfo(p.sku)) || {};
  const [cost, setCost] = React.useState(info.cost != null ? String(info.cost).replace(".", ",") : "");
  const [sup, setSup] = React.useState(info.supplierId != null ? String(info.supplierId) : "");
  const comm0 = window.STORE.commissionRaw(p.sku);
  const [cpct, setCpct] = React.useState(comm0.pct != null ? String(comm0.pct).replace(".", ",") : "");
  const [cfix, setCfix] = React.useState(comm0.fixed != null ? String(comm0.fixed).replace(".", ",") : "");
  const cfg0 = window.STORE.stockCfg(p.sku);
  const [minV, setMinV] = React.useState(cfg0.min != null ? String(cfg0.min) : "");
  const [leadV, setLeadV] = React.useState(cfg0.lead != null ? String(cfg0.lead) : "");
  const suppliers = window.STORE.get().suppliers;
  const save = (c, s) => window.STORE.setCost(p.sku, c === "" ? null : c.replace(",", "."), s === "" ? null : +s);
  return (
    <div style={{ borderTop: "1px solid var(--border)", marginTop: 8, paddingTop: 12 }}>
      <div className="sf-label" style={{ marginBottom: 8, display: "flex", alignItems: "center", gap: 6 }}><Icon name="euro" size={14} />Inkoopprijs (zelf invullen, wordt bewaard)</div>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div style={{ position: "relative", flex: "0 0 130px" }}>
          <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
          <input className="input tnum" style={{ paddingLeft: 22 }} inputMode="decimal" placeholder="0,00"
            value={cost} onChange={e => setCost(e.target.value)} onBlur={e => save(e.target.value, sup)} />
        </div>
        <select className="input" style={{ flex: 1 }} value={sup} onChange={e => { setSup(e.target.value); save(cost, e.target.value); }}>
          <option value="">Leverancier… (optioneel)</option>
          {suppliers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
        </select>
      </div>

      {(() => {
        const real = db.realChannelCosts(p);
        if (real.length) {
          return (
            <div style={{ margin: "14px 0 4px", padding: "12px 14px", border: "1px solid var(--ok-line)", background: "var(--ok-soft)", borderRadius: 10 }}>
              <div className="sf-label" style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
                <Icon name="check" size={14} style={{ color: "var(--ok)" }} sw={2.6} />Platform-kosten per verkoop
              </div>
              {real.map(r => (
                <div key={r.name} className="lrow" style={{ padding: "5px 0", borderColor: "var(--ok-line)" }}>
                  <div style={{ flex: 1, fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                  <span className="pill neutral" style={{ fontSize: 11 }}>{r.exact ? "echt" : r.basis}</span>
                  <div className="tnum" style={{ fontWeight: 700, minWidth: 64, textAlign: "right" }}>{fmtEur(r.perUnit, 2)}<span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>/st</span></div>
                </div>
              ))}
              <div className="muted" style={{ fontSize: 11.5, marginTop: 6 }}>Bol = werkelijk ingehouden (store_costs uit Stockitup). Maxeda (Praxis/Brico) = {String(window.STORE.maxedaPct()).replace(".", ",")}% categorie-commissie. Niet aanpasbaar per product.</div>
            </div>
          );
        }
        return (
          <div style={{ margin: "14px 0 4px", padding: "12px 14px", border: "1px solid var(--border)", background: "var(--surface-2)", borderRadius: 10 }}>
            <div className="sf-label" style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}><Icon name="tag" size={14} />Platform-kosten <span className="pill neutral" style={{ fontSize: 11 }}>nog geen data</span></div>
            <div style={{ fontSize: 13 }}><span className="muted">Zodra dit product op bol of Maxeda verkoopt, rekent de app de kosten mee. Bol: {String(window.STORE.bolPct()).replace(".", ",")}% + {fmtEur(window.STORE.bolFixed(), 2)} (of de echte store_costs). Maxeda: {String(window.STORE.maxedaPct()).replace(".", ",")}%.</span></div>
          </div>
        );
      })()}

      <div className="sf-label" style={{ margin: "14px 0 8px", display: "flex", alignItems: "center", gap: 6 }}><Icon name="boxes" size={14} />Voorraad &amp; inkoop</div>
      <div style={{ display: "flex", gap: 8, alignItems: "flex-end", flexWrap: "wrap" }}>
        <div style={{ flex: "0 0 130px" }}>
          <label className="lbl" style={{ marginBottom: 3 }}>Levertijd (dagen)</label>
          <input className="input tnum" inputMode="numeric" placeholder={String(p.leadDays)}
            value={leadV} onChange={e => setLeadV(e.target.value)}
            onBlur={e => { window.STORE.setStockCfg(p.sku, undefined, e.target.value); db.reapplyFocus(); }} />
        </div>
        <div style={{ flex: "0 0 130px" }}>
          <label className="lbl" style={{ marginBottom: 3 }}>Min. voorraad <span className="muted" style={{ fontWeight: 400 }}>(optie)</span></label>
          <input className="input tnum" inputMode="numeric" placeholder="auto"
            value={minV} onChange={e => setMinV(e.target.value)}
            onBlur={e => { window.STORE.setStockCfg(p.sku, e.target.value, undefined); db.reapplyFocus(); }} />
        </div>
        <div style={{ flex: 1, minWidth: 160, paddingBottom: 2 }}>
          <div style={{ fontSize: 13 }}>Bestelpunt: <b>{p.reorderPoint} st</b></div>
          <div className="muted" style={{ fontSize: 11.5 }}>≈ {p.avgPerDay}/dag × ({p.leadDays} dgn levertijd + {p.safetyDays} buffer). Onder dit punt → bestel-alert.</div>
        </div>
      </div>

      <div className="muted" style={{ fontSize: 12, marginTop: 10 }}>
        BTW ({db.vat()}%) en winstbelasting ({db.profitTax()}%) stel je in bij <b>Instellingen → Kosten &amp; verzending</b>.
      </div>
      <div style={{ marginTop: 14 }}>{typeof SaveButton !== "undefined" ? <SaveButton label="Opslaan" /> : null}</div>
    </div>
  );
};

Object.assign(window, { Dashboard, Voorraad, Producten, AttentionItem, ReviewRow, SEV, TYPE_ICON, PromoCard });