/* Tenant overview page: KPIs, machines grid/list, alarms */

const Overview = ({ lang, onOpenMachine, tenant, dataVersion }) => {
  const t = I18N[lang];
  // Bruk filtrert liste (basert på valgt tenant), faller tilbake til alle.
  // Filtrer eksplisitt fra prop for å unngå å lese mutert DATA.machinesView
  // som ikke trigger re-render ved tenant-bytte.
  const activeTenant = tenant || DATA.activeTenant || { id: '__all__' };
  const machines = React.useMemo(() => {
    const all = DATA.machines || [];
    if (!activeTenant || activeTenant.id === '__all__') return all;
    return all.filter(m => m.tenantId === activeTenant.id);
  }, [activeTenant.id, dataVersion]);
  // Varsler KUN for valgt tenants automater (2026-09-04: før lekket varsler
  // fra alle tenants inn i oversikten og telleren når superadmin så som
  // tenant / brukeren var medlem av flere tenants).
  const ALARMS = React.useMemo(() => {
    const ids = new Set(machines.map(m => m.id));
    return (DATA.ALARMS || []).filter(a => ids.has(a.machineId));
  }, [machines]);
  const [view, setView] = React.useState('grid');
  const [filter, setFilter] = React.useState('all');
  // Område-filter + multi-select for bulk-redigering
  const [areaFilter, setAreaFilter] = React.useState('');
  const [selectedIds, setSelectedIds] = React.useState(() => new Set());
  const [bulkOpen, setBulkOpen] = React.useState(false);
  const areas = React.useMemo(() => {
    const all = DATA.AREAS || [];
    if (!activeTenant || activeTenant.id === '__all__') return all;
    return all.filter(a => a.tenant_id === activeTenant.id);
  }, [activeTenant.id, dataVersion]);
  const toggleSelect = (id) => setSelectedIds(prev => {
    const next = new Set(prev);
    if (next.has(id)) next.delete(id); else next.add(id);
    return next;
  });

  // Beregn KPIer for FILTRERT sett (per tenant)
  const k = React.useMemo(() => {
    const empty = machines.reduce((s, m) => s + (m.emptyCount || 0), 0);
    const vacant = machines.reduce((s, m) => s + (m.vacantCount || 0), 0);
    const todayRev = machines.reduce((s, m) => s + (m.todayRev || 0), 0);
    const monthRev = machines.reduce((s, m) => s + (m.monthRev || 0), 0);
    const fullTotal = machines.reduce((s, m) => s + (m.fullTotal || 0), 0);
    const byMaterial = {};
    machines.forEach(m => Object.entries(m.fullByMaterial || {}).forEach(([mat, n]) => {
      byMaterial[mat] = (byMaterial[mat] || 0) + n;
    }));
    // Ekte 14-dagers omsetningskurve: sum av automatenes spark (kr/dag).
    // (Før: hardkodede tall — falsk graf.)
    const spark = Array.from({ length: 14 }, (_, i) =>
      machines.reduce((s, m) => s + (((m.spark || [])[i]) || 0), 0));
    const hasSpark = spark.some(v => v > 0);
    return { empty, vacant, todayRev, monthRev, fullTotal, byMaterial, spark: hasSpark ? spark : null };
  }, [machines]);

  const filtered = React.useMemo(() => {
    let list = machines;
    if (areaFilter === '__none__') list = list.filter(m => !m.areaId);
    else if (areaFilter) list = list.filter(m => m.areaId === areaFilter);
    if (filter === 'all') return list;
    if (filter === 'legacy') return list.filter(m => m.kind === 'legacy');
    if (filter === 'v2') return list.filter(m => m.kind === 'v2');
    return list.filter(m => m.status === filter);
  }, [filter, areaFilter, machines]);

  // Sorter materialer etter antall (synker), dropp nuller
  const matLabels = window.bottleHelpers.materialLabels;
  const materialKpis = Object.entries(k.byMaterial)
    .filter(([_, n]) => n > 0)
    .sort((a, b) => b[1] - a[1]);

  const kpis = [
    { label: t.kpi_today_rev, value: fmtKr(k.todayRev, lang), dir: 'neutral' },
    { label: t.kpi_month_rev, value: fmtKr(k.monthRev, lang), dir: 'neutral', spark: k.spark || undefined },
    { label: lang === 'no' ? 'Fulle totalt' : 'Full total',
      value: fmtNum(k.fullTotal, lang), unit: lang === 'no' ? 'stk' : 'pcs', dir: 'neutral' },
    ...materialKpis.slice(0, 2).map(([mat, n]) => ({
      label: (lang === 'no' ? 'Fulle ' : 'Full ') + (matLabels[mat]?.plural || mat).toLowerCase(),
      value: fmtNum(n, lang), unit: lang === 'no' ? 'stk' : 'pcs', dir: 'neutral',
    })),
    { label: t.kpi_empty,      value: fmtNum(k.empty, lang), unit: lang === 'no' ? 'stk' : 'pcs', dir: 'neutral' },
    { label: t.kpi_vacant,     value: fmtNum(k.vacant, lang), unit: lang === 'no' ? 'hyller' : 'shelves', dir: 'neutral' },
  ];

  // (Onboarding-progress brukes ikke her — vises på Plattform-siden i stedet)

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.overview_title}</h1>
          <div className="page-sub">{t.overview_sub} · <span className="live">{t.live}</span></div>
        </div>
        <div className="row">
          {/* Export laster ned ordre-CSV for valgt tenant. «Legg til automat»
              er fjernet her — tenant_admin kan ikke opprette automater, og
              superadmin gjør det via Innstillinger (unngår en død CTA). */}
          <button className="btn" onClick={async () => {
            try {
              const tp = (activeTenant && activeTenant.id !== '__all__') ? { tenant_id: activeTenant.id } : {};
              await window.api.downloadWithAuth(window.api.exportOrdersUrl({ days: 30, ...tp }), 'orders.csv');
            } catch (err) { alert(err.message); }
          }}><Icon name="download" size={14} />{t.export}</button>
        </div>
      </div>

      {/* Empty state hvis ingen automater */}
      {machines.length === 0 && (
        <div className="panel" style={{ padding: 40, textAlign: 'center', marginBottom: 20 }}>
          <Icon name="machine" size={48} style={{ color: 'var(--text-faint)' }} />
          <h2 style={{ margin: '12px 0 4px', fontSize: 18 }}>
            {lang === 'no' ? 'Ingen automater ennå' : 'No automats yet'}
          </h2>
          <p className="muted" style={{ maxWidth: 400, margin: '0 auto 16px' }}>
            {lang === 'no'
              ? 'Denne tenanten har ingen automater tildelt. Be superadmin om å tildele eller opprette en.'
              : 'This tenant has no automats. Ask superadmin to assign or create one.'}
          </p>
        </div>
      )}

      {machines.length > 0 && (
      <div className="kpi-grid">
        {kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value">{k.value}{k.unit && <span className="unit"> {k.unit}</span>}</div>
            {/* «vs forrige» vises kun når en delta faktisk er beregnet
                (2026-09-05) — før sto teksten alltid der med tomt tall. */}
            {k.delta !== undefined && (
              <div className={`kpi-delta ${k.dir}`}>
                {k.dir === 'up' && <Icon name="arrowup" size={11} />}
                {k.dir === 'down' && <Icon name="arrowdown" size={11} />}
                {k.delta}
                <span style={{ color: 'var(--text-faint)', marginLeft: 4 }}>{lang === 'no' ? 'vs forrige' : 'vs prev'}</span>
              </div>
            )}
            {k.spark && <div className="kpi-spark"><Sparkline data={k.spark} width={70} height={26} /></div>}
          </div>
        ))}
      </div>

      )}
      {machines.length > 0 && (
      <div className="split-7-5">
        {/* Machines panel */}
        <div className="panel">
          <div className="toolbar">
            <div className="row">
              <span className="section-title">{t.all_machines}</span>
              <span className="muted mono" style={{ fontSize: 12 }}>{filtered.length} / {machines.length}</span>
            </div>
            <div className="grow" />
            {/* Område-filter (sortér automatene i områder for enklere kontroll) */}
            {areas.length > 0 && (
              <select className="input" style={{ width: 'auto', minWidth: 140 }}
                      value={areaFilter} onChange={e => setAreaFilter(e.target.value)}>
                <option value="">{lang === 'no' ? 'Alle områder' : 'All areas'}</option>
                {areas.map(a => (
                  <option key={a.id} value={a.id}>{a.name} ({a.automat_count})</option>
                ))}
                <option value="__none__">{lang === 'no' ? 'Uten område' : 'No area'}</option>
              </select>
            )}
            <div className="minitab">
              <button className={filter === 'all' ? 'on' : ''} onClick={() => setFilter('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
              <button className={filter === 'v2' ? 'on' : ''} onClick={() => setFilter('v2')}>Ny type</button>
              <button className={filter === 'legacy' ? 'on' : ''} onClick={() => setFilter('legacy')}>v1 (gammel)</button>
              <button className={filter === 'online' ? 'on' : ''} onClick={() => setFilter('online')}>{t.online}</button>
              <button className={filter === 'offline' ? 'on' : ''} onClick={() => setFilter('offline')}>{t.offline}</button>
            </div>
            <div className="minitab">
              <button className={view === 'grid' ? 'on' : ''} onClick={() => setView('grid')}><Icon name="grid" size={12} /></button>
              <button className={view === 'list' ? 'on' : ''} onClick={() => setView('list')}><Icon name="list" size={12} /></button>
            </div>
          </div>

          {/* Bulk-verktøylinje: vises når automater er valgt (liste-visning) */}
          {selectedIds.size > 0 && (
            <div className="toolbar" style={{ borderTop: '1px solid var(--border)', background: 'var(--surface-2)' }}>
              <span className="section-title">{selectedIds.size} {lang === 'no' ? 'valgt' : 'selected'}</span>
              <button className="btn primary" onClick={() => setBulkOpen(true)}>
                <Icon name="edit" size={13} />{lang === 'no' ? 'Rediger valgte' : 'Edit selected'}
              </button>
              <button className="btn" onClick={() => setSelectedIds(new Set())}>
                {lang === 'no' ? 'Fjern valg' : 'Clear'}
              </button>
            </div>
          )}

          {view === 'grid' ? (
            <div className="panel-body">
              <div className="machine-grid">
                {filtered.map(m => (
                  <MachineCard key={m.id} m={m} lang={lang} onOpen={() => onOpenMachine(m.id)} />
                ))}
              </div>
            </div>
          ) : (
            <MachineTable machines={filtered} lang={lang} onOpen={onOpenMachine}
                          selectedIds={selectedIds} onToggleSelect={toggleSelect} />
          )}
        </div>

        {bulkOpen && (
          <BulkEditModal lang={lang}
            machines={machines.filter(m => selectedIds.has(m.id))}
            areas={areas}
            onClose={() => setBulkOpen(false)}
            onDone={() => {
              // Bulk endrer priser/områder som er cachet ved innlasting —
              // full reload er enklest og trygt for en sjelden operasjon
              // (samme mønster som flaskekatalog-endringer).
              location.reload();
            }} />
        )}

        {/* Alarms */}
        <div className="panel">
          <div className="panel-head">
            <h3>{t.alarms}</h3>
            <div className="actions">
              <span className="pill danger">{ALARMS.filter(a => a.sev === 'danger').length} {t.sev_danger.toLowerCase()}</span>
              <span className="pill warn">{ALARMS.filter(a => a.sev === 'warn').length}</span>
            </div>
          </div>
          <div className="panel-body no-pad">
            {ALARMS.map(a => (
              <div key={a.id}
                onClick={() => onOpenMachine(a.machineId)}
                style={{
                  padding: '11px 16px',
                  borderBottom: '1px solid var(--border)',
                  display: 'flex', gap: 10, alignItems: 'flex-start',
                  cursor: 'pointer'
                }}>
                <div style={{ marginTop: 2 }}>
                  {a.sev === 'danger' && <span className="pill danger" style={{ padding: '1px 6px' }}><Icon name="warning" size={10} /></span>}
                  {a.sev === 'warn' && <span className="pill warn" style={{ padding: '1px 6px' }}><Icon name="warning" size={10} /></span>}
                  {a.sev === 'info' && <span className="pill info" style={{ padding: '1px 6px' }}><Icon name="info" size={10} /></span>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{lang === 'no' ? a.msg_no : a.msg_en}</div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>
                    {a.machineName} · <span className="mono">{a.id}</span>
                  </div>
                </div>
                <div className="muted mono" style={{ fontSize: 11 }}>{a.mins} {lang === 'no' ? 'min' : 'min'}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      )}
    </div>
  );
};

const MachineCard = ({ m, lang, onOpen }) => {
  const t = I18N[lang];
  return (
    <div className="machine-card" onClick={onOpen} data-screen-label="machine-card">
      <div className="mc-head">
        <div>
          <div className="mc-name">
            {m.name}
            {m.kind === 'legacy' && (
              <span className="pill warn" style={{ marginLeft: 6, fontSize: 10 }}>v1 GAMMEL</span>
            )}
          </div>
          <div className="mc-loc">{m.location} · <span className="mc-id">{m.id}</span></div>
        </div>
        <div className="col" style={{ alignItems: 'flex-end', gap: 4 }}>
          <StatusDot status={m.status} />
          <span className="muted" style={{ fontSize: 11 }}>{m.lastSeen}</span>
        </div>
      </div>

      <div className="mc-inv-row">
        {Object.entries(m.fullByMaterial || {})
          .filter(([_, n]) => n > 0)
          .sort((a, b) => b[1] - a[1])
          .slice(0, 2)
          .map(([mat, n]) => (
            <div key={mat} className="mc-inv-cell">
              <span className="lbl">{window.bottleHelpers.materialLabels[mat]?.plural || mat}</span>
              <span className="val" style={{ color: n < 2 ? 'var(--warn)' : 'inherit' }}>{n}</span>
            </div>
          ))}
        {Object.keys(m.fullByMaterial || {}).length === 0 && (
          <div className="mc-inv-cell">
            <span className="lbl">{t.full}</span>
            <span className="val muted">0</span>
          </div>
        )}
        <div className="mc-inv-cell">
          <span className="lbl">{t.empty}/{t.vacant}</span>
          <span className="val"><span style={{ color: 'var(--warn)' }}>{m.emptyCount}</span><span className="muted">/</span><span className="muted">{m.vacantCount}</span></span>
        </div>
      </div>

      <ShelfMini shelves={m.shelves} />

      <div className="mc-rev-row">
        <div className="mc-rev-cell">
          <span className="lbl">{t.today}</span>
          <span className="val">{fmtKr(m.todayRev, lang)}</span>
        </div>
        <div className="mc-rev-cell">
          <span className="lbl">{t.month}</span>
          <span className="val">{fmtKr(m.monthRev, lang)}</span>
        </div>
        <div style={{ marginLeft: 'auto' }}>
          <Sparkline data={m.spark} width={70} height={26} />
        </div>
      </div>
    </div>
  );
};

/* Tiny shelf preview: 6×4 dots (compressed view of 24 shelves) */
const ShelfMini = ({ shelves }) => {
  const list = Array.isArray(shelves) ? shelves : [];
  if (list.length === 0) return null;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 3, padding: '4px 0' }}>
      {list.map((s, i) => {
        let bg = 'var(--surface-3)';
        if (s.state === 'full') bg = 'var(--success)';
        else if (s.state === 'empty') bg = 'var(--warn)';
        else if (s.state === 'error') bg = 'var(--danger)';
        else if (s.state === 'disabled') bg = 'var(--text-disabled)';
        return (
          <div key={i} title={`${s.id} · ${s.state}`}
            style={{ height: 10, borderRadius: 2, background: bg, opacity: s.state === 'disabled' ? 0.4 : 1 }} />
        );
      })}
    </div>
  );
};

const MachineTable = ({ machines, lang, onOpen, selectedIds, onToggleSelect }) => {
  const t = I18N[lang];
  // Bestem materialer å vise — union av alle materialer som finnes
  const materials = React.useMemo(() => {
    const set = new Set();
    machines.forEach(m => Object.keys(m.fullByMaterial || {}).forEach(k => set.add(k)));
    // Sorter etter total mengde synkende
    const totals = {};
    machines.forEach(m => Object.entries(m.fullByMaterial || {}).forEach(([k, n]) => {
      totals[k] = (totals[k] || 0) + n;
    }));
    return [...set].sort((a, b) => (totals[b] || 0) - (totals[a] || 0));
  }, [machines]);
  const matLabels = window.bottleHelpers.materialLabels;
  const selectable = !!onToggleSelect;
  return (
    <div style={{ overflow: 'auto' }}>
      <table className="tbl">
        <thead>
          <tr>
            {selectable && <th style={{ width: 30 }}></th>}
            <th>{lang === 'no' ? 'Automat' : 'Machine'}</th>
            <th>{lang === 'no' ? 'Status' : 'Status'}</th>
            <th>{lang === 'no' ? 'Område' : 'Area'}</th>
            {materials.map(mat => (
              <th key={mat} className="num">{matLabels[mat]?.plural || mat}</th>
            ))}
            <th className="num">{t.empty}</th>
            <th className="num">{t.vacant}</th>
            <th className="num">{t.today}</th>
            <th className="num">{t.month}</th>
            <th>{lang === 'no' ? '14 d' : '14d'}</th>
          </tr>
        </thead>
        <tbody>
          {machines.map(m => (
            <tr key={m.id} onClick={() => onOpen(m.id)} style={{ cursor: 'pointer' }}>
              {selectable && (
                <td onClick={e => e.stopPropagation()} style={{ cursor: 'default' }}>
                  <input type="checkbox" checked={selectedIds && selectedIds.has(m.id)}
                         onChange={() => onToggleSelect(m.id)} />
                </td>
              )}
              <td>
                <div style={{ fontWeight: 500 }}>{m.name}</div>
                <div className="muted mono" style={{ fontSize: 11 }}>{m.id} · {m.location}</div>
              </td>
              <td><StatusDot status={m.status} /></td>
              <td>{m.areaName
                ? <span className="pill info" style={{ fontSize: 10.5 }}>{m.areaName}</span>
                : <span className="muted" style={{ fontSize: 11 }}>—</span>}</td>
              {materials.map(mat => (
                <td key={mat} className="num">{(m.fullByMaterial || {})[mat] || 0}</td>
              ))}
              <td className="num" style={{ color: m.emptyCount > 0 ? 'var(--danger)' : 'inherit' }}>{m.emptyCount}</td>
              <td className="num">{m.vacantCount}</td>
              <td className="num">{fmtKr(m.todayRev, lang)}</td>
              <td className="num">{fmtKr(m.monthRev, lang)}</td>
              <td><Sparkline data={m.spark} width={70} height={22} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

/* Bulk-redigering av valgte automater: område, alarm-mobiler, vedlikehold,
   priser (per-automat prisoverstyring). Ett kall → backend bulk-edit. */
const BulkEditModal = ({ lang, machines, areas, onClose, onDone }) => {
  const no = lang === 'no';
  const bottles = DATA.BOTTLE_TYPES || [];
  const [areaId, setAreaId] = React.useState('__keep__');
  const [mobiles, setMobiles] = React.useState('');
  const [setMob, setSetMob] = React.useState(false);
  const [maint, setMaint] = React.useState('__keep__');
  const [prices, setPrices] = React.useState({});   // bottle_id -> {base, min}
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const setPrice = (bid, key, val) => setPrices(p => ({
    ...p, [bid]: { ...(p[bid] || {}), [key]: val },
  }));

  const submit = async () => {
    setBusy(true); setErr(null);
    try {
      const body = { automat_ids: machines.map(m => m.id) };
      if (areaId === '__clear__') body.clear_area = true;
      else if (areaId !== '__keep__') body.area_id = areaId;
      if (maint !== '__keep__') body.maintenance_mode = maint === 'on';
      if (setMob) body.admin_mobiles = mobiles.split(',').map(s => s.trim()).filter(Boolean);
      const po = Object.entries(prices)
        .map(([bid, v]) => ({
          bottle_id: Number(bid),
          base_price: v.base ? Math.round(parseFloat(v.base) * 100) : null,
          minimum_price: v.min ? Math.round(parseFloat(v.min) * 100) : null,
        }))
        .filter(x => x.base_price != null || x.minimum_price != null);
      if (po.length) body.price_overrides = po;
      const r = await window.api.bulkEditAutomats(body);
      if (!r || !r.ok) throw new Error('uventet svar');
      onDone();
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
      <div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
                    zIndex: 101, width: 'min(560px,95vw)', maxHeight: '90vh', overflow: 'auto',
                    padding: 20, background: 'var(--surface)', border: '1px solid var(--border)',
                    borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }}>
        <h3 style={{ marginBottom: 4 }}>{no ? 'Bulk-rediger' : 'Bulk edit'} {machines.length} {no ? 'automater' : 'machines'}</h3>
        <div className="muted" style={{ fontSize: 11.5, marginBottom: 14 }}>
          {machines.slice(0, 6).map(m => m.location).join(', ')}{machines.length > 6 ? ` +${machines.length - 6}` : ''}
        </div>

        <div className="section-title" style={{ marginBottom: 6 }}>{no ? 'Område' : 'Area'}</div>
        <select className="input" value={areaId} onChange={e => setAreaId(e.target.value)} style={{ marginBottom: 14 }}>
          <option value="__keep__">{no ? '(uendret)' : '(unchanged)'}</option>
          {areas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
          <option value="__clear__">{no ? 'Fjern område' : 'Clear area'}</option>
        </select>

        <div className="section-title" style={{ marginBottom: 6 }}>{no ? 'Alarm-mobiler (SMS)' : 'Alarm mobiles (SMS)'}</div>
        <label className="row" style={{ gap: 8, marginBottom: 6, fontSize: 12.5 }}>
          <input type="checkbox" checked={setMob} onChange={e => setSetMob(e.target.checked)} />
          {no ? 'Sett alarm-numre på alle valgte' : 'Set alarm numbers on all selected'}
        </label>
        {setMob && (
          <input className="input" placeholder="+47 900 00 001, +47 900 00 002"
                 value={mobiles} onChange={e => setMobiles(e.target.value)}
                 style={{ marginBottom: 14 }} />
        )}

        <div className="section-title" style={{ marginBottom: 6 }}>{no ? 'Vedlikeholdsmodus' : 'Maintenance'}</div>
        <select className="input" value={maint} onChange={e => setMaint(e.target.value)} style={{ marginBottom: 14 }}>
          <option value="__keep__">{no ? '(uendret)' : '(unchanged)'}</option>
          <option value="on">{no ? 'PÅ — stengt for kunder' : 'ON — closed'}</option>
          <option value="off">{no ? 'AV — åpen' : 'OFF — open'}</option>
        </select>

        <div className="section-title" style={{ marginBottom: 6 }}>
          {no ? 'Priser (overstyring per automat, kr)' : 'Prices (per-machine override, kr)'}
        </div>
        <div className="muted" style={{ fontSize: 11, marginBottom: 8 }}>
          {no ? 'Fyll kun inn for typene som skal endres — tomme felt røres ikke.'
              : 'Fill only the types to change — blanks are untouched.'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(64px, 90px) minmax(64px, 90px)', gap: 6, marginBottom: 16 }}>
          <div className="muted" style={{ fontSize: 11 }}>{no ? 'Type' : 'Type'}</div>
          <div className="muted" style={{ fontSize: 11 }}>{no ? 'Pris' : 'Price'}</div>
          <div className="muted" style={{ fontSize: 11 }}>{no ? 'Min.pris' : 'Min price'}</div>
          {bottles.map(b => {
            const bid = b._raw ? b._raw.id : b.id;   // numerisk bottle_id
            return (
              <React.Fragment key={bid}>
                <div style={{ fontSize: 12.5, alignSelf: 'center' }}>{b.name}</div>
                <input className="input" inputMode="decimal" placeholder={String(b.priceNew || '')}
                       value={(prices[bid] || {}).base || ''}
                       onChange={e => setPrice(bid, 'base', e.target.value)} />
                <input className="input" inputMode="decimal" placeholder=""
                       value={(prices[bid] || {}).min || ''}
                       onChange={e => setPrice(bid, 'min', e.target.value)} />
              </React.Fragment>
            );
          })}
        </div>

        {err && <div style={{ color: 'var(--danger)', fontSize: 12.5, marginBottom: 10 }}>❌ {err}</div>}
        <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={busy}>{no ? 'Avbryt' : 'Cancel'}</button>
          <button className="btn primary" onClick={submit} disabled={busy}>
            {busy ? '⏳' : ''} {no ? 'Lagre for alle valgte' : 'Save for all selected'}
          </button>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Overview, BulkEditModal });