/* Instellingen view — API connections, data source, thresholds. */

const CONNECTIONS = [
  { id: "stockitup", name: "Stockitup", desc: "Centrale databron: voorraad, verkopen, mutaties én prijzen per platform (bol, webshop, Praxis…)", status: "demo", primary: true },
  { id: "gsc", name: "Google Search Console", desc: "Rankings & zoekwoordposities", status: "off" },
  { id: "ga4", name: "Google Analytics 4", desc: "Bezoek en conversie per pagina", status: "off" },
];

function StatusTag({ status }) {
  if (status === "demo") return <span className="pill warn"><span className="pdot" />Demo-data actief</span>;
  if (status === "on") return <span className="pill ok"><span className="pdot" />Live gekoppeld</span>;
  return <span className="pill neutral"><span className="pdot" />Niet gekoppeld</span>;
}

function fmtTime(ts) { return ts ? new Date(ts).toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" }) : "—"; }

function LiveConnect({ db }) {
  const st = db.liveStatus();
  const [url, setUrl] = React.useState(st.url || "");
  const [iv, setIv] = React.useState(st.intervalMin || 10);

  return (
    <div style={{ marginTop: 14 }}>
      <div className="att-item" style={{ borderColor: "var(--accent-line)", background: "var(--accent-soft)", marginBottom: 14 }}>
        <span className="att-ico" style={{ background: "#fff", color: "var(--accent)" }}><Icon name="info" size={18} /></span>
        <div className="att-body">
          <div className="att-title">Vul hier het adres van je eigen datakraan in — niet van Stockitup</div>
          <div className="att-desc">Je <span className="mono">client_secret</span> hoort <b>alleen</b> in die datakraan (proxy), nooit in dit dashboard. Het dashboard leest enkel de klaargezette JSON en ververst vanzelf.</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 150px", gap: 12, alignItems: "end" }}>
        <div>
          <label className="lbl">Data-URL (jouw proxy-endpoint)</label>
          <input className="input mono" placeholder="https://data.jouwdomein.nl/stocers/voorraad.json"
            value={url} onChange={e => setUrl(e.target.value)} disabled={st.active} />
        </div>
        <div>
          <label className="lbl">Ververst elke</label>
          <select className="input" value={iv} onChange={e => setIv(+e.target.value)} disabled={st.active}>
            <option value={1}>1 minuut</option><option value={5}>5 minuten</option>
            <option value={10}>10 minuten</option><option value={15}>15 minuten</option>
            <option value={30}>30 minuten</option><option value={60}>1 uur</option>
          </select>
        </div>
      </div>

      <div style={{ display: "flex", gap: 8, marginTop: 14, alignItems: "center", flexWrap: "wrap" }}>
        {!st.active
          ? <button className="btn btn-primary" disabled={!url} onClick={() => db.startLive(url.trim(), iv)}><Icon name="plug" size={15} />Verbinden &amp; live gaan</button>
          : <>
              <button className="btn btn-primary" onClick={() => db.liveSync()} disabled={st.busy}><Icon name="refresh" size={15} />{st.busy ? "Bezig…" : "Nu verversen"}</button>
              <button className="btn" onClick={() => { db.stopLive(); db.resetDemo(); }}>Verbinding verbreken</button>
            </>}
      </div>

      {st.active && (
        <div style={{ marginTop: 14, display: "flex", gap: 18, flexWrap: "wrap", alignItems: "center", fontSize: 12.5 }}>
          {st.lastError
            ? <span className="pill danger"><Icon name="alert" size={13} />Fout: {st.lastError}</span>
            : <span className="pill ok"><span className="pdot" />Live · {st.count} producten</span>}
          <span className="muted">Laatst bijgewerkt: <b>{fmtTime(st.lastSync)}</b></span>
          <span className="muted">Ververst elke {st.intervalMin} min automatisch</span>
        </div>
      )}
      {st.active && st.lastError && (
        <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>
          Tip: dit lukt alleen wanneer je proxy bereikbaar is én CORS toestaat. In de preview hier kan het netwerk geblokkeerd zijn — test met het echte, gehoste dashboard.
        </div>
      )}
    </div>
  );
}

function CostWizard({ db }) {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(null);
  const [, force] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => {
    const h = () => force();
    window.addEventListener("stocers-store", h);
    return () => window.removeEventListener("stocers-store", h);
  }, []);

  const st = window.STORE.get();
  const prods = db.products;
  const suppliers = st.suppliers || [];
  const costFilled = prods.filter(p => db.effCost(p) != null).length;
  const costDone = prods.length > 0 && costFilled === prods.length;
  const supDone = suppliers.length > 0;
  const shipDone = db.shipping() > 0;

  const steps = [
    { id: "suppliers", n: 1, label: "Leveranciers toevoegen", icon: "truck", done: supDone,
      hint: supDone ? suppliers.length + " leverancier(s)" : "nog geen" },
    { id: "costs", n: 2, label: "Inkoopprijzen per product", icon: "euro", done: costDone,
      hint: prods.length ? costFilled + "/" + prods.length + " ingevuld" : "wacht op producten" },
    { id: "shipping", n: 3, label: "Verzendkosten & belasting", icon: "tag", done: shipDone,
      hint: shipDone ? "NL " + fmtEur(db.shipNL(), 2) + " · BE " + fmtEur(db.shipBE(), 2) : "verzendkosten nog €0" },
    { id: "bol", n: 4, label: "Bol-kosten controleren", icon: "tag", done: true,
      hint: "standaard " + String(window.STORE.bolPct()).replace(".", ",") + "% + " + fmtEur(window.STORE.bolFixed(), 2) },
    { id: "sync", n: 5, label: "Synchroniseren tussen apparaten", icon: "refresh", done: !!st.sync && st.syncOn, optional: true,
      hint: (window.STORE.sync.cfg().on) ? "actief" : "optioneel" },
    { id: "pin", n: 6, label: "Pincode-slot", icon: "settings", done: !!st.pin, optional: true,
      hint: st.pin ? "actief" : "optioneel" },
  ];
  const required = steps.filter(s => !s.optional);
  const reqDone = required.filter(s => s.done).length;
  const allReq = reqDone === required.length;
  const pct = Math.round(reqDone / required.length * 100);

  return (
    <div className="setup-hero" style={{ marginBottom: "var(--space)" }}>
      <div className="setup-top">
        <span className="setup-ico"><Icon name={allReq ? "check" : "sparkles"} size={24} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h3>{allReq ? "Je setup is compleet 🎉" : "Aan de slag — rond je setup af"}</h3>
          <div className="setup-sub">{allReq
            ? "Alles staat goed ingesteld. Je winst en marge kloppen overal."
            : "Stel in één keer alles in wat nog mist, zodat je Winst-pagina klopt."}</div>
          <div className="setup-bar"><span style={{ width: pct + "%" }} /></div>
          <div className="setup-count">{reqDone} van {required.length} verplichte onderdelen klaar</div>
        </div>
        <button className="setup-btn" onClick={() => { setOpen(!open); if (!open && !step) setStep((steps.find(s => !s.done) || steps[0]).id); }}>
          <Icon name={open ? "chevronDown" : "arrowRight"} size={17} />{open ? "Sluiten" : (reqDone === 0 ? "Beginnen" : "Verder")}
        </button>
      </div>

      {open && (
        <div className="setup-body">
          <div className="setup-steps">
            {steps.map(s => (
              <button key={s.id} className={"setup-step" + (step === s.id ? " active" : "")} onClick={() => setStep(step === s.id ? null : s.id)}>
                <span className={"setup-check" + (s.done ? " ok" : "")}>{s.done ? <Icon name="check" size={13} sw={3} /> : s.n}</span>
                <span style={{ flex: 1 }}>
                  <span className="setup-step-label">{s.label}{s.optional && <span className="muted" style={{ fontWeight: 400 }}> · optioneel</span>}</span>
                  <span className="setup-step-hint">{s.hint}</span>
                </span>
                <Icon name="chevronDown" size={16} style={{ color: "var(--text-3)", transform: step === s.id ? "rotate(180deg)" : "none", transition: ".18s" }} />
              </button>
            ))}
          </div>
          <div className="setup-panel">
            {step === "suppliers" && <StepSuppliers db={db} onNext={() => setStep("costs")} />}
            {step === "costs" && <StepCosts db={db} onNext={() => setStep("shipping")} />}
            {step === "shipping" && <StepShipping db={db} onNext={() => setStep("bol")} />}
            {step === "bol" && <StepBol db={db} onNext={() => setStep("sync")} />}
            {step === "sync" && <div><div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Zet sync aan om je instellingen op al je apparaten gelijk te houden (zelfde sleutel op iMac én telefoon).</div><SyncPanel /></div>}
            {step === "pin" && <StepPin />}
          </div>
        </div>
      )}
    </div>
  );
}

function ActiesManager({ db }) {
  const [, force] = React.useReducer(x => x + 1, 0);
  const [sku, setSku] = React.useState("");
  const [price, setPrice] = React.useState("");
  const [start, setStart] = React.useState("");
  const [end, setEnd] = React.useState("");
  const [note, setNote] = React.useState("");
  React.useEffect(() => { const h = () => force(); window.addEventListener("stocers-store", h); return () => window.removeEventListener("stocers-store", h); }, []);
  const actions = window.STORE.actions();
  const skus = (window.STORE.get().focus || []);
  const today = new Date().toISOString().slice(0, 10);
  const add = () => {
    if (!sku) return;
    window.STORE.addAction({ sku, promoPrice: price === "" ? "" : (parseFloat(String(price).replace(",", ".")) || 0), start, end, note });
    setSku(""); setPrice(""); setStart(""); setEnd(""); setNote("");
  };
  return (
    <Card style={{ marginBottom: "var(--space)" }}>
      <CardHead title="Lopende acties" icon="tag" sub="Promoties op bol/Maxeda — getoond op het Dashboard tijdens de looptijd" />
      <div className="card-pad">
        {actions.length === 0 && <div className="muted" style={{ fontSize: 12.5, marginBottom: 12 }}>Nog geen acties. Voeg er een toe om 'm op je Dashboard te zien tijdens de looptijd.</div>}
        {actions.length > 0 && (
          <div style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 14 }}>
            {actions.slice().sort((a, b) => (a.start || "").localeCompare(b.start || "")).map(a => {
              const live = (!a.start || today >= a.start) && (!a.end || today <= a.end);
              const past = a.end && today > a.end;
              return (
                <div key={a.id} className="lrow" style={{ padding: "7px 0", gap: 10 }}>
                  <span className={"pill " + (live ? "ok" : past ? "neutral" : "accent")} style={{ minWidth: 64, justifyContent: "center" }}>{live ? "Actief" : past ? "Afgelopen" : "Gepland"}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{a.sku}{a.note ? <span className="muted" style={{ fontWeight: 400 }}> · {a.note}</span> : ""}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{fmtDate(a.start)} – {fmtDate(a.end)}{a.promoPrice ? " · actieprijs " + fmtEur(a.promoPrice, 2) : ""}</div>
                  </div>
                  <button className="btn btn-sm btn-ghost" onClick={() => window.STORE.removeAction(a.id)}><Icon name="x" size={13} /></button>
                </div>
              );
            })}
          </div>
        )}
        <div className="sf-label" style={{ marginBottom: 8 }}>Nieuwe actie</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 8, marginBottom: 8 }}>
          <select className="input" value={sku} onChange={e => setSku(e.target.value)}>
            <option value="">Product (SKU)…</option>
            {skus.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <div style={{ position: "relative" }}><span style={{ position: "absolute", left: 10, top: 9, color: "var(--text-3)" }}>€</span><input className="input tnum" style={{ paddingLeft: 20 }} inputMode="decimal" placeholder="actieprijs" value={price} onChange={e => setPrice(e.target.value)} /></div>
          <input className="input" type="date" value={start} onChange={e => setStart(e.target.value)} />
          <input className="input" type="date" value={end} onChange={e => setEnd(e.target.value)} />
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <input className="input" placeholder="Notitie (bv. 'bol commissiekorting €0,97')" value={note} onChange={e => setNote(e.target.value)} />
          <button className="btn btn-primary" onClick={add}><Icon name="check" size={14} sw={2.4} />Toevoegen</button>
        </div>
        <div className="muted" style={{ fontSize: 11.5, marginTop: 10 }}>De bol-commissiekorting wordt automatisch in je winst verwerkt (via de echte kosten per verkoop). Deze lijst is voor overzicht en planning.</div>
      </div>
    </Card>
  );
}

function SaveButton({ label }) {
  const [s, setS] = React.useState(null); // null | "busy" | "ok"
  return (
    <button className="btn btn-primary" disabled={s === "busy"} onClick={async () => {
      setS("busy");
      const r = await window.STORE.flush();
      setS("ok"); setTimeout(() => setS(null), 2200);
    }}>
      <Icon name={s === "ok" ? "check" : "download"} size={14} sw={s === "ok" ? 2.6 : 2} />
      {s === "busy" ? "Opslaan…" : s === "ok" ? "Opgeslagen ✓" : (label || "Opslaan")}
    </button>
  );
}

function SupplierRow({ s }) {
  const [editing, setEditing] = React.useState(false);
  const [val, setVal] = React.useState(s.name);
  if (editing) {
    const commit = () => { if (val.trim()) window.STORE.renameSupplier(s.id, val.trim()); setEditing(false); };
    return (
      <div className="lrow" style={{ padding: "6px 0", gap: 6 }}>
        <Icon name="truck" size={15} style={{ color: "var(--text-3)" }} />
        <input className="input" autoFocus value={val} onChange={e => setVal(e.target.value)}
          onKeyDown={e => { if (e.key === "Enter") commit(); if (e.key === "Escape") { setVal(s.name); setEditing(false); } }}
          style={{ flex: 1, height: 32 }} />
        <button className="btn btn-sm btn-primary" onClick={commit}><Icon name="check" size={13} sw={2.6} /></button>
      </div>
    );
  }
  return (
    <div className="lrow" style={{ padding: "6px 0" }}>
      <Icon name="truck" size={15} style={{ color: "var(--text-3)" }} />
      <div style={{ flex: 1, fontWeight: 500 }}>{s.name}</div>
      <button className="btn btn-sm btn-ghost" title="Naam bewerken" onClick={() => { setVal(s.name); setEditing(true); }}><Icon name="edit" size={13} /></button>
      <button className="btn btn-sm btn-ghost" title="Verwijderen" onClick={() => window.STORE.removeSupplier(s.id)}><Icon name="x" size={13} /></button>
    </div>
  );
}

function StepSuppliers({ db, onNext }) {
  const [name, setName] = React.useState("");
  const suppliers = window.STORE.get().suppliers || [];
  const add = () => { if (name.trim()) { window.STORE.addSupplier(name.trim()); setName(""); } };
  return (
    <div>
      <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Van wie koop je in? Voeg je leverancier(s) toe — die koppel je daarna per product aan de inkoopprijs.</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 12 }}>
        {suppliers.length === 0 && <div className="muted" style={{ fontSize: 12.5 }}>Nog geen leveranciers.</div>}
        {suppliers.map(s => (
          <SupplierRow key={s.id} s={s} />
        ))}
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <input className="input" placeholder="Naam leverancier…" value={name} onChange={e => setName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") add(); }} />
        <button className="btn btn-primary" onClick={add}><Icon name="check" size={14} sw={2.4} />Toevoegen</button>
      </div>
      <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}><SaveButton /><button className="btn btn-brand" onClick={onNext}>Volgende<Icon name="arrowRight" size={14} /></button></div>
    </div>
  );
}

function StepCosts({ db, onNext }) {
  const [, force] = React.useReducer(x => x + 1, 0);
  const prods = db.products;
  const suppliers = window.STORE.get().suppliers || [];
  const filled = prods.filter(p => db.effCost(p) != null).length;
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <span className="muted" style={{ fontSize: 13 }}>Inkoopprijs <b>excl. btw</b> per stuk.</span>
        <div style={{ flex: 1 }} />
        <span className="pill accent">{filled}/{prods.length} ingevuld</span>
      </div>
      <div style={{ maxHeight: 380, overflowY: "auto", border: "1px solid var(--border)", borderRadius: 10 }}>
        <table className="tbl">
          <thead><tr><th>Product</th><th style={{ width: 130 }}>Inkoop</th><th style={{ width: 170 }}>Leverancier</th></tr></thead>
          <tbody>
            {prods.map(p => {
              const info = window.STORE.costInfo(p.sku) || {};
              return (
                <tr key={p.id}>
                  <td><div className="prod"><ProductThumb p={p} size={30} /><div><div style={{ fontWeight: 600, fontSize: 12.5 }}>{p.name}</div><div className="mono muted" style={{ fontSize: 11 }}>{p.sku}</div></div></div></td>
                  <td>
                    <div style={{ position: "relative" }}>
                      <span style={{ position: "absolute", left: 9, top: 8, color: "var(--text-3)" }}>€</span>
                      <input className="input tnum" style={{ paddingLeft: 20 }} inputMode="decimal" placeholder="0,00"
                        defaultValue={info.cost != null ? String(info.cost).replace(".", ",") : ""}
                        onBlur={e => { window.STORE.setCost(p.sku, e.target.value === "" ? null : e.target.value, undefined); force(); }} />
                    </div>
                  </td>
                  <td>
                    <select className="input" defaultValue={info.supplierId != null ? String(info.supplierId) : ""}
                      onChange={e => window.STORE.setCost(p.sku, info.cost != null ? String(info.cost) : "", e.target.value === "" ? null : +e.target.value)}>
                      <option value="">—</option>
                      {suppliers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
                    </select>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}><SaveButton label="Inkoopprijzen opslaan" /><button className="btn btn-brand" onClick={onNext}>Volgende<Icon name="arrowRight" size={14} /></button></div>
    </div>
  );
}

function StepShipping({ db, onNext }) {
  const st = window.STORE.get();
  const [shipNL, setShipNL] = React.useState(window.STORE.shipNL() || "");
  const [shipBE, setShipBE] = React.useState(window.STORE.shipBE() || "");
  const [vat, setVat] = React.useState(st.vat != null ? st.vat : 21);
  const [ptax, setPtax] = React.useState(st.profitTax != null ? st.profitTax : 0);
  return (
    <div>
      <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Deze gelden voor álle producten en bepalen je nettowinst. Verzendkosten <b>excl. btw</b> per pakket — BE wordt gebruikt voor verkopen via Bol.com BE.</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12 }}>
        <div>
          <label className="lbl">Verzending NL</label>
          <div style={{ position: "relative" }}><span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
            <input className="input tnum" style={{ paddingLeft: 22 }} inputMode="decimal" placeholder="5,56" value={shipNL} onChange={e => setShipNL(e.target.value)} onBlur={e => window.STORE.setShipNL(e.target.value)} /></div>
        </div>
        <div>
          <label className="lbl">Verzending BE</label>
          <div style={{ position: "relative" }}><span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
            <input className="input tnum" style={{ paddingLeft: 22 }} inputMode="decimal" placeholder="6,33" value={shipBE} onChange={e => setShipBE(e.target.value)} onBlur={e => window.STORE.setShipBE(e.target.value)} /></div>
        </div>
        <div>
          <label className="lbl">BTW</label>
          <div style={{ position: "relative" }}><input className="input tnum" style={{ paddingRight: 24 }} inputMode="decimal" placeholder="21" value={vat} onChange={e => setVat(e.target.value)} onBlur={e => window.STORE.setVat(e.target.value)} /><span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span></div>
        </div>
        <div>
          <label className="lbl">Winstbelasting</label>
          <div style={{ position: "relative" }}><input className="input tnum" style={{ paddingRight: 24 }} inputMode="decimal" placeholder="0" value={ptax} onChange={e => setPtax(e.target.value)} onBlur={e => window.STORE.setProfitTax(e.target.value)} /><span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span></div>
        </div>
      </div>
      <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}><SaveButton /><button className="btn btn-brand" onClick={onNext}>Volgende<Icon name="arrowRight" size={14} /></button></div>
    </div>
  );
}

function StepBol({ db, onNext }) {
  const st = window.STORE.get();
  const [bp, setBp] = React.useState(st.bolPct != null ? String(st.bolPct).replace(".", ",") : "12,4");
  const [bf, setBf] = React.useState(st.bolFixed != null ? String(st.bolFixed).replace(".", ",") : "0,85");
  return (
    <div>
      <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Standaard bol-kosten voor <b>alle</b> producten op Bol NL + BE. Wijkt één product af? Dat stel je per product in op de productpagina.</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, maxWidth: 320 }}>
        <div>
          <label className="lbl">Variabel (% v/d prijs)</label>
          <div style={{ position: "relative" }}><input className="input tnum" style={{ paddingRight: 24 }} inputMode="decimal" placeholder="12,4" value={bp} onChange={e => setBp(e.target.value)} onBlur={e => window.STORE.setBolPct(e.target.value)} /><span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span></div>
        </div>
        <div>
          <label className="lbl">Vast bedrag</label>
          <div style={{ position: "relative" }}><span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span><input className="input tnum" style={{ paddingLeft: 22 }} inputMode="decimal" placeholder="0,85" value={bf} onChange={e => setBf(e.target.value)} onBlur={e => window.STORE.setBolFixed(e.target.value)} /></div>
        </div>
      </div>
      <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}><SaveButton /><button className="btn btn-brand" onClick={onNext}>Volgende<Icon name="arrowRight" size={14} /></button></div>
    </div>
  );
}

function StepPin() {
  const st = window.STORE.get();
  const [pin, setPin] = React.useState(st.pin || "");
  return (
    <div>
      <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Optioneel slot: iedereen die de app opent moet eerst de code invoeren. Leeg = geen slot.</div>
      <div style={{ display: "flex", gap: 8 }}>
        <input className="input tnum" style={{ flex: "0 0 140px", letterSpacing: 4 }} inputMode="numeric" type="password" placeholder="bijv. 1234" value={pin} onChange={e => setPin(e.target.value)} />
        <button className="btn btn-primary" onClick={() => window.STORE.setPin(pin)}><Icon name="check" size={14} sw={2.4} />Opslaan</button>
        {st.pin && <button className="btn" onClick={() => { setPin(""); window.STORE.setPin(""); }}>Slot uit</button>}
      </div>
    </div>
  );
}

function CostSettings({ db }) {
  const st = window.STORE.get();
  const [shipNL, setShipNL] = React.useState(window.STORE.shipNL() || "");
  const [shipBE, setShipBE] = React.useState(window.STORE.shipBE() || "");
  const [vat, setVat] = React.useState(st.vat != null ? st.vat : 21);
  const [ptax, setPtax] = React.useState(st.profitTax != null ? st.profitTax : 0);
  const [bp, setBp] = React.useState(st.bolPct != null ? String(st.bolPct).replace(".", ",") : "12,4");
  const [bf, setBf] = React.useState(st.bolFixed != null ? String(st.bolFixed).replace(".", ",") : "0,85");
  const [newSup, setNewSup] = React.useState("");
  const [newSku, setNewSku] = React.useState("");
  const [pin, setPin] = React.useState(st.pin || "");
  const focus = st.focus || [];
  const suppliers = st.suppliers || [];
  const addSup = () => { if (newSup.trim()) { window.STORE.addSupplier(newSup.trim()); setNewSup(""); } };
  const refocus = () => { if (db.reapplyFocus) db.reapplyFocus(); };
  return (
    <div className="grid cols-2" style={{ marginBottom: "var(--space)" }}>
      <Card>
        <CardHead title="Kosten & verzending" icon="euro" sub="Voor winstberekening — wordt automatisch bewaard" />
        <div className="card-pad">
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px", paddingTop: 0 }}>
            <div><div className="sf-label">Verzendkosten NL</div><div className="sf-help">Vast bedrag per Nederlands pakket (excl. btw), van elke NL-verkoop afgetrokken</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="5,56"
                value={shipNL} onChange={e => setShipNL(e.target.value)} onBlur={e => window.STORE.setShipNL(String(e.target.value).replace(",", "."))} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Verzendkosten BE</div><div className="sf-help">Vast bedrag per Belgisch pakket (excl. btw) — gebruikt voor verkopen via Bol.com BE</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="6,33"
                value={shipBE} onChange={e => setShipBE(e.target.value)} onBlur={e => window.STORE.setShipBE(String(e.target.value).replace(",", "."))} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">BTW-percentage</div><div className="sf-help">Wordt van de verkoopprijs afgetrokken vóór winst (NL standaard 21%)</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 24, textAlign: "right" }} inputMode="decimal" placeholder="21"
                value={vat} onChange={e => setVat(e.target.value)} onBlur={e => window.STORE.setVat(String(e.target.value).replace(",", "."))} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span>
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Bol variabele kosten</div><div className="sf-help">Standaard voor alle producten op Bol NL + BE — % van de verkoopprijs incl. btw</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 24, textAlign: "right" }} inputMode="decimal" placeholder="12,4"
                value={bp} onChange={e => setBp(e.target.value)} onBlur={e => window.STORE.setBolPct(e.target.value)} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span>
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Bol vaste kosten</div><div className="sf-help">Vast bedrag per verkoop op bol (excl. btw)</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="0,85"
                value={bf} onChange={e => setBf(e.target.value)} onBlur={e => window.STORE.setBolFixed(e.target.value)} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Maxeda commissie</div><div className="sf-help">Categorie-commissie op Praxis + Brico (Maxeda) — % van de verkoopprijs. Voor bol gebruikt de app de echte store_costs.</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 24, textAlign: "right" }} inputMode="decimal" placeholder="8,3"
                defaultValue={String(window.STORE.maxedaPct()).replace(".", ",")} onBlur={e => window.STORE.setMaxedaPct(e.target.value)} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span>
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Maxeda maandbijdrage</div><div className="sf-help">Vast bedrag per maand voor je Maxeda-account (excl. btw). Wordt period-geschaald van de totale winst afgetrokken op de Winst-pagina.</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="38"
                defaultValue={String(window.STORE.maxedaMonthly()).replace(".", ",")} onBlur={e => window.STORE.setMaxedaMonthly(e.target.value)} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Fulfilment per bestelling</div><div className="sf-help">Handelingskosten van je fulfilment-partner per bestelling (labels plakken + klaarzetten, excl. btw). Wordt van de winst vóór belasting afgetrokken. Verzendkosten reken je apart.</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="1,00"
                defaultValue={String(window.STORE.fulfilmentPerOrder()).replace(".", ",")} onBlur={e => window.STORE.setFulfilmentPerOrder(e.target.value)} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Ophaalservice Ampere per dag</div><div className="sf-help">Ampere haalt dagelijks de pakketten op — vaste kosten per dag (excl. btw).</div></div>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 11, top: 9, color: "var(--text-3)" }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 22, textAlign: "right" }} inputMode="decimal" placeholder="16,00"
                defaultValue={String(window.STORE.amperePerDay()).replace(".", ",")} onBlur={e => window.STORE.setAmperePerDay(e.target.value)} />
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Winstbelasting</div><div className="sf-help">Percentage dat aan het eind van de winst afgaat (0% = uit)</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 24, textAlign: "right" }} inputMode="decimal" placeholder="0"
                value={ptax} onChange={e => setPtax(e.target.value)} onBlur={e => window.STORE.setProfitTax(String(e.target.value).replace(",", "."))} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>%</span>
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Levertijd inkoop</div><div className="sf-help">Hoe lang een nieuwe inkooporder onderweg is. De app waarschuwt zó op tijd dat je voorraad de levertijd overbrugt (per product aanpasbaar op de productpagina).</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 38, textAlign: "right" }} inputMode="numeric" placeholder="45"
                defaultValue={window.STORE.defaultLead()} onBlur={e => window.STORE.setDefaultLead(e.target.value)} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>dgn</span>
            </div>
          </div>
          <div className="set-field" style={{ gridTemplateColumns: "1fr 150px" }}>
            <div><div className="sf-label">Inkoop dekt</div><div className="sf-help">Hoeveel dagen verkoop één inkooporder moet meegaan (bovenop de levertijd). Bepaalt het geadviseerde bestelaantal.</div></div>
            <div style={{ position: "relative" }}>
              <input className="input tnum" style={{ paddingRight: 38, textAlign: "right" }} inputMode="numeric" placeholder="60"
                defaultValue={window.STORE.orderCoverDays()} onBlur={e => window.STORE.setOrderCoverDays(e.target.value)} />
              <span style={{ position: "absolute", right: 11, top: 9, color: "var(--text-3)" }}>dgn</span>
            </div>
          </div>
          <div style={{ paddingTop: 16 }}>
            <div className="sf-label" style={{ marginBottom: 8 }}>Leveranciers</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 10 }}>
              {suppliers.length === 0 && <div className="muted" style={{ fontSize: 12.5 }}>Nog geen leveranciers. Voeg er een toe en koppel 'm per product.</div>}
              {suppliers.map(s => (
                <SupplierRow key={s.id} s={s} />
              ))}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <input className="input" placeholder="Naam leverancier…" value={newSup} onChange={e => setNewSup(e.target.value)}
                onKeyDown={e => { if (e.key === "Enter") addSup(); }} />
              <button className="btn btn-primary" onClick={addSup}><Icon name="check" size={14} sw={2.4} />Toevoegen</button>
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>Inkoopprijs per product stel je in op de productpagina (Producten → klik een product).</div>
            <div style={{ marginTop: 12 }}><SaveButton label="Leveranciers & kosten opslaan" /></div>
          </div>

          <div style={{ paddingTop: 16, borderTop: "1px solid var(--border)", marginTop: 16 }}>
            <div className="sf-label" style={{ marginBottom: 4, display: "flex", alignItems: "center", gap: 6 }}><Icon name="settings" size={14} />Pincode (toegangsslot)</div>
            <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>Met een pincode moet iedereen die de app opent eerst de code invoeren. Leeg laten = geen slot.</div>
            <div style={{ display: "flex", gap: 8 }}>
              <input className="input tnum" style={{ flex: "0 0 130px", letterSpacing: 4 }} inputMode="numeric" type="password" placeholder="bijv. 1234" value={pin} onChange={e => setPin(e.target.value)} />
              <button className="btn btn-primary" onClick={() => window.STORE.setPin(pin)}><Icon name="check" size={14} sw={2.4} />Pincode opslaan</button>
              {st.pin && <button className="btn" onClick={() => { setPin(""); window.STORE.setPin(""); }}>Slot uit</button>}
            </div>
            {st.pin && <div className="muted" style={{ fontSize: 12, marginTop: 8, color: "var(--ok)" }}><Icon name="check" size={12} /> Pincode actief — vraagt bij elke keer openen.</div>}
          </div>

          <div style={{ paddingTop: 16, borderTop: "1px solid var(--border)", marginTop: 16 }}>
            <div className="sf-label" style={{ marginBottom: 4, display: "flex", alignItems: "center", gap: 6 }}><Icon name="refresh" size={14} />Synchroniseren tussen apparaten</div>
            <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>Pas je iets aan op desktop (inkoopprijzen, bol-kosten…), dan komt het automatisch ook op je telefoon. Kies één sync-sleutel en vul die op beide apparaten in.</div>
            <SyncPanel />
            <BackupLine />
            <div className="muted" style={{ fontSize: 12, margin: "14px 0 8px" }}>Liever handmatig? Exporteer en importeer een bestandje:</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <button className="btn btn-sm" onClick={() => {
                const data = localStorage.getItem("stocers_store_v1") || "{}";
                const blob = new Blob([data], { type: "application/json" });
                const a = document.createElement("a");
                a.href = URL.createObjectURL(blob); a.download = "stocers-instellingen.json";
                document.body.appendChild(a); a.click(); a.remove();
              }}><Icon name="download" size={14} />Exporteren</button>
              <label className="btn btn-sm" style={{ cursor: "pointer" }}>
                <Icon name="arrowUp" size={14} />Importeren
                <input type="file" accept=".json,application/json" style={{ display: "none" }} onChange={e => {
                  const f = e.target.files[0]; if (!f) return;
                  const r = new FileReader();
                  r.onload = (ev) => {
                    try {
                      const parsed = JSON.parse(ev.target.result);
                      if (typeof parsed !== "object" || !parsed) throw new Error("ongeldig");
                      localStorage.setItem("stocers_store_v1", JSON.stringify(parsed));
                      alert("Instellingen geïmporteerd. De app wordt opnieuw geladen.");
                      location.reload();
                    } catch (x) { alert("Kon dit bestand niet lezen — is het een stocers-instellingen.json?"); }
                  };
                  r.readAsText(f);
                }} />
              </label>
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <CardHead title="Zichtbare producten" icon="tag" sub="Toon alleen je focus-SKU's"
          right={<label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, cursor: "pointer" }}>
            <input type="checkbox" checked={!!st.focusOn} onChange={e => { window.STORE.setFocusOn(e.target.checked); refocus(); }} />Filter aan</label>} />
        <div className="card-pad">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 12 }}>
            {focus.map(sku => (
              <span key={sku} className="chip mono" style={{ paddingRight: 6 }}>{sku}
                <button style={{ border: "none", background: "none", padding: 0, marginLeft: 2, cursor: "pointer", display: "inline-flex" }}
                  onClick={() => { window.STORE.setFocus(focus.filter(x => x !== sku)); refocus(); }}><Icon name="x" size={13} style={{ color: "var(--text-3)" }} /></button>
              </span>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <input className="input mono" placeholder="SKU toevoegen…" value={newSku} onChange={e => setNewSku(e.target.value)} />
            <button className="btn btn-primary" onClick={() => { const v = newSku.trim().toUpperCase(); if (v && !focus.includes(v)) { window.STORE.setFocus([...focus, v]); refocus(); } setNewSku(""); }}>Toevoegen</button>
          </div>
          <div className="hr" style={{ margin: "16px 0 12px" }} />
          <div className="sf-label" style={{ marginBottom: 4, display: "flex", alignItems: "center", gap: 6 }}><Icon name="star" size={14} />Bol.com review-links</div>
          <div className="muted" style={{ fontSize: 12, marginBottom: 10 }}>Per product, voor het wekelijks checken van reviews.</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, maxHeight: 230, overflowY: "auto" }}>
            {focus.map(sku => (
              <div key={sku}>
                <label className="lbl mono">{sku}</label>
                <input className="input mono" style={{ fontSize: 11.5 }} defaultValue={st.reviewLinks[sku] || ""}
                  placeholder="https://www.bol.com/…" onBlur={e => window.STORE.setReviewLink(sku, e.target.value)} />
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

function BackupLine() {
  const [, force] = React.useReducer(x => x + 1, 0);
  const b = window.STORE.backupInfo();
  if (!b) return null;
  const when = new Date(b.at).toLocaleString("nl-NL", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
  const canRestore = b.score > b.current;
  return (
    <div className="muted" style={{ fontSize: 12, marginTop: 8, display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
      <Icon name="check" size={13} style={{ color: "var(--ok)" }} sw={2.6} />
      Automatische reservekopie: <b>{when}</b>. Je gegevens gaan nooit verloren.
      {canRestore && <button className="btn btn-sm" onClick={() => { window.STORE.restoreBackup(); force(); }}><Icon name="refresh" size={13} />Herstel reservekopie</button>}
    </div>
  );
}

function SyncPanel() {
  const cfg = window.STORE.sync.cfg();
  const [key, setKey] = React.useState(cfg.key || "");
  const [on, setOn] = React.useState(!!cfg.on);
  const [msg, setMsg] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const apply = async (newOn, newKey) => {
    setBusy(true); setMsg("");
    const r = await window.STORE.sync.set(newOn, newKey);
    setBusy(false);
    if (!newOn) { setMsg("Synchronisatie uit."); return; }
    if (r.status === "bijgewerkt") setMsg("✓ Instellingen van je andere apparaat opgehaald.");
    else if (r.status === "actueel") setMsg("✓ Verbonden — dit apparaat is actueel (wijzigingen worden nu gedeeld).");
    else if (r.status === "geen-url") setMsg("⚠ Eerst de Live API-koppeling instellen (hierboven bij Databron).");
    else if (r.status === "fout") setMsg("⚠ Lukte niet: " + (r.msg || "") + " — heb je de KV-opslag aan de datakraan gekoppeld?");
  };
  return (
    <div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "flex-end" }}>
        <div style={{ flex: "0 0 200px" }}>
          <label className="lbl" style={{ marginBottom: 3 }}>Sync-sleutel (zelf verzinnen)</label>
          <input className="input mono" type="password" placeholder="bijv. stocers-2026-hout" value={key} onChange={e => setKey(e.target.value)} disabled={on} />
        </div>
        {!on
          ? <button className="btn btn-primary" disabled={busy || key.trim().length < 4} onClick={() => { setOn(true); apply(true, key); }}><Icon name="refresh" size={14} />{busy ? "Bezig…" : "Synchronisatie aan"}</button>
          : <React.Fragment>
              <button className="btn" disabled={busy} onClick={() => window.STORE.sync.pull().then(r => setMsg(r.status === "bijgewerkt" ? "✓ Bijgewerkt vanaf ander apparaat." : r.status === "actueel" ? "✓ Al actueel." : "⚠ " + (r.msg || r.status)))}><Icon name="refresh" size={14} />Nu synchroniseren</button>
              <button className="btn btn-ghost" disabled={busy} onClick={() => { setOn(false); apply(false, key); }}>Uitzetten</button>
            </React.Fragment>}
      </div>
      {on && !msg && <div className="pill ok" style={{ marginTop: 8 }}><span className="pdot" />Synchronisatie actief</div>}
      {msg && <div className="muted" style={{ fontSize: 12.5, marginTop: 8 }}>{msg}</div>}
    </div>
  );
}

function Instellingen({ db }) {
  const [open, setOpen] = React.useState(null);

  return (
    <div className="view">
      <div className="page-head">
        <h1>Instellingen</h1>
        <div className="ph-sub">Databron, kosten, leveranciers en koppelingen voor STOCERS · Doosjehout.nl.</div>
      </div>

      {/* data source — live koppeling */}
      <Card style={{ marginBottom: "var(--space)" }}>
        <CardHead title="Databron" icon="plug" sub="Live gekoppeld met Stockitup via je datakraan" />
        <div className="card-pad">
          <LiveConnect db={db} />
        </div>
      </Card>

      {/* databron-versheid */}
      <Card style={{ marginBottom: "var(--space)" }}>
        <CardHead title="Databronnen — hoe vers is alles?" icon="refresh" sub="sommige bronnen cachen bewust (scheelt API-limieten); dit is de laatste keer dat ze ververst zijn" />
        <div className="card-pad" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 8, paddingTop: 6 }}>
          {(() => {
            const ts = (v) => v ? new Date(v).toLocaleString("nl-NL", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }) : "nog niet opgehaald";
            const rows = [
              ["StockitUp (voorraad/verkoop)", db.liveStatus().lastSync, "elke " + (db.liveStatus().intervalMin || 10) + " min"],
              ["bol Ads (NL+BE)", db.adsSyncedAt && db.adsSyncedAt(), "±6 uur cache"],
              ["Google Ads", (db.gadsData && db.gadsData() || {}).at, "±6 uur cache"],
              ["Search Console", (db.gscData && db.gscData() || {}).at, "±12 uur cache"],
              ["Google Analytics", (db.ga4Data && db.ga4Data() || {}).at, "±6 uur cache"],
              ["SEO-paginascan", (db.seoAudit && db.seoAudit() || {}).at, "±24 uur cache"],
              ["Reviews (bol)", (db.bolReviews && db.bolReviews() || {}).at, "±6 uur cache"],
              ["Retouren (bol)", (db.bolReturns && db.bolReturns() || {}).at, "bij elke sync"],
              ["Promoties (bol)", (db.bolPromos && db.bolPromos() || {}).at, "±6 uur cache"],
            ];
            return rows.map(([l, v, c]) => (
              <div key={l} style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 9, padding: "8px 11px" }}>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{l}</div>
                <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{ts(v)} · {c}</div>
              </div>
            ));
          })()}
        </div>
      </Card>

      {/* connections */}
      <Card style={{ marginBottom: "var(--space)" }}>
        <CardHead title="API-koppelingen" icon="plug" sub="Stockitup, bol (NL+BE), Google Ads, Search Console en Analytics lopen via je datakraan." />
        <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {CONNECTIONS.map(c => (
            <div key={c.id} className="conn" style={{ flexDirection: "column", alignItems: "stretch", padding: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", cursor: "pointer" }} onClick={() => setOpen(open === c.id ? null : c.id)}>
                <span className="c-logo" style={c.primary ? { background: "var(--brand-soft)", color: "var(--brand)" } : {}}>{c.name.slice(0, 2).toUpperCase()}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontWeight: 600 }}>{c.name}</span>
                    {c.primary && <span className="pill accent" style={{ fontSize: 11 }}>Centrale bron</span>}
                  </div>
                  <div className="muted" style={{ fontSize: 12.5 }}>{c.desc}</div>
                </div>
                <StatusTag status={(c.id === "stockitup" && db.liveStatus().active) ? "on" : ((c.id === "gsc" && db.gscHasData && db.gscHasData()) || (c.id === "ga4" && db.ga4HasData && db.ga4HasData())) ? "on" : c.status} />
                <Icon name="chevronDown" size={18} style={{ color: "var(--text-3)", transform: open === c.id ? "rotate(180deg)" : "none", transition: ".18s" }} />
              </div>
              {open === c.id && (
                c.id === "stockitup" ? (
                  <div style={{ borderTop: "1px solid var(--border)", padding: 16, background: "var(--surface-2)" }}>
                    <div className="muted" style={{ fontSize: 12.5, display: "flex", gap: 8, alignItems: "flex-start" }}>
                      <Icon name="check" size={14} style={{ color: "var(--ok)", flex: "none", marginTop: 1 }} sw={2.6} />
                      <span>Voorraad, verkopen, omzet en prijzen komen live binnen via je datakraan. De koppeling beheer je bovenaan bij <b>Databron</b>.</span>
                    </div>
                  </div>
                ) : ((c.id === "gsc" && db.gscHasData && db.gscHasData()) || (c.id === "ga4" && db.ga4HasData && db.ga4HasData())) ? (
                  <div style={{ borderTop: "1px solid var(--border)", padding: 16, background: "var(--surface-2)" }}>
                    <div className="muted" style={{ fontSize: 12.5, display: "flex", gap: 8, alignItems: "flex-start" }}>
                      <Icon name="check" size={14} style={{ color: "var(--ok)", flex: "none", marginTop: 1 }} sw={2.6} />
                      <span>{c.id === "gsc" ? <span>Rankings en zoekwoorden komen live binnen via je datakraan. Bekijk ze op de <b>SEO</b>-pagina.</span> : <span>Bezoek en conversie komen live binnen via je datakraan. Bekijk ze op de <b>SEO</b>-pagina.</span>}</span>
                    </div>
                  </div>
                ) : (
                <div style={{ borderTop: "1px solid var(--border)", padding: 16, background: "var(--surface-2)", display: "grid", gap: 12 }}>
                  <div className="muted" style={{ fontSize: 12, display: "flex", gap: 8, alignItems: "flex-start" }}>
                    <Icon name="info" size={14} style={{ color: "var(--accent)", flex: "none", marginTop: 1 }} />
                    <span>Nog te koppelen — sleutels horen in je <b>datakraan (proxy)</b>, niet in de browser.</span>
                  </div>
                  <div>
                    <label className="lbl">API endpoint</label>
                    <input className="input mono" placeholder={"https://api." + c.id + ".com/v1"} />
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div><label className="lbl">API key</label><input className="input mono" placeholder="••••••••••••••••" type="password" /></div>
                    <div><label className="lbl">Authenticatie</label><input className="input mono" placeholder="client_secret / token" /></div>
                  </div>
                  <div style={{ display: "flex", gap: 8 }}>
                    <button className="btn btn-primary btn-sm"><Icon name="plug" size={14} />Verbinding testen</button>
                    <button className="btn btn-sm">Opslaan</button>
                  </div>
                </div>
                )
              )}
            </div>
          ))}
        </div>
      </Card>

      {/* inkoopprijzen-wizard */}
      <CostWizard db={db} />

      {/* costs, suppliers, focus SKUs, review links */}
      <CostSettings db={db} />

      <ActiesManager db={db} />

      {/* thresholds */}
      <div className="grid cols-2">
        <Card>
          <CardHead title="Drempelwaarden" icon="settings" sub="Wanneer wil je gewaarschuwd worden?" />
          <div className="card-pad">
            <div className="set-field" style={{ gridTemplateColumns: "1fr 120px" }}>
              <div><div className="sf-label">Voorraad-waarschuwing</div><div className="sf-help">Aantal dagen voorraad waaronder 'oranje' verschijnt</div></div>
              <input className="input tnum" defaultValue="12" style={{ textAlign: "right" }} />
            </div>
            <div className="set-field" style={{ gridTemplateColumns: "1fr 120px" }}>
              <div><div className="sf-label">Direct bestellen</div><div className="sf-help">Dagen voorraad waaronder 'rood' verschijnt</div></div>
              <input className="input tnum" defaultValue="4" style={{ textAlign: "right" }} />
            </div>
            <div className="set-field" style={{ gridTemplateColumns: "1fr 120px" }}>
              <div><div className="sf-label">Review-waarschuwing</div><div className="sf-help">Melding wanneer score onder deze waarde komt</div></div>
              <input className="input tnum" defaultValue="4.0" style={{ textAlign: "right" }} />
            </div>
            <div className="set-field" style={{ gridTemplateColumns: "1fr 120px", borderBottom: "none" }}>
              <div><div className="sf-label">Dekkingsperiode bestel­advies</div><div className="sf-help">Voor hoeveel dagen verkoop het advies inkoopt</div></div>
              <input className="input tnum" defaultValue="35" style={{ textAlign: "right" }} />
            </div>
          </div>
        </Card>

        <Card>
          <CardHead title="Te volgen zoekwoorden" icon="search2" sub="Voor het Ranking-dashboard" />
          <div className="card-pad">
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 14 }}>
              {db.keywords.map(k => (
                <span key={k.kw} className="chip" style={{ paddingRight: 8 }}>{k.kw}<Icon name="x" size={13} style={{ color: "var(--text-3)" }} /></span>
              ))}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <input className="input" placeholder="Nieuw zoekwoord toevoegen…" />
              <button className="btn btn-primary"><Icon name="check" size={14} sw={2.4} />Toevoegen</button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

window.Instellingen = Instellingen;