/* Transactions, Events, Machine settings, Bottles, Users */

/* Henter ekte transaksjoner fra backend; støtter dato-range + filter. */
const Transactions = ({ machine, lang }) => {
  const t = I18N[lang];
  const [period, setPeriod] = React.useState('10');  // '10' | '7' | '30' | '90' | 'custom' — default siste 10
  const [from, setFrom] = React.useState(() => isoDate(daysAgo(30)));
  const [to, setTo] = React.useState(() => isoDate(new Date()));
  const [filter, setFilter] = React.useState('all');
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [openTx, setOpenTx] = React.useState(null);   // valgt transaksjon for detalj-drawer

  const load = React.useCallback(async () => {
    setLoading(true); setError(null);
    try {
      const params = { automat_id: machine.id, limit: 500 };
      if (period === '10') { params.limit = 10; params.days = 365; }
      else if (period === '7')  params.days = 7;
      else if (period === '30') params.days = 30;
      else if (period === '90') params.days = 90;
      else if (period === 'custom') { params.date_from = from; params.date_to = to; }
      const r = await window.api.listOrders(params);
      setRows(r || []);
    } catch (e) { setError(e.message); }
    setLoading(false);
  }, [machine.id, period, from, to]);

  React.useEffect(() => { load(); }, [load]);

  const filtered = rows.filter(x => filter === 'all' || x.kind === filter);
  // Sum: KUN fullførte ordrer med positiv beløp (ekskluderer feilet)
  const successful = filtered.filter(x => x.session_state === 'complete' && (x.price_ore || 0) > 0);
  const sum = successful.reduce((s, x) => s + (x.price_ore || 0), 0);
  const failedCount = filtered.filter(x => orderStatusKey(x) === 'feil').length;
  const swapCount = rows.filter(x => x.kind === 'exchange' && x.session_state === 'complete').length;
  const swapShare = rows.length ? Math.round(swapCount / rows.filter(x => x.session_state === 'complete').length * 100) || 0 : 0;

  const exportCsv = () => {
    const lines = [
      ['Tid','Type','Flaske inn','Flaske ut','Beløp (kr)','Status','Mobil','Feil'].join(';'),
      ...filtered.map(o => [
        o.created_at?.slice(0, 19) || '',
        o.kind, o.bottle_in || '', o.bottle_out || '',
        ((o.price_ore || 0) / 100).toFixed(2),
        orderStatusKey(o), o.mobile || '', o.error || '',
      ].map(v => `"${String(v).replace(/"/g, '""')}"`).join(';')),
    ].join('\n');
    const blob = new Blob([lines], { type: 'text/csv;charset=utf-8' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `transaksjoner-${machine.id}-${period}.csv`;
    a.click();
  };

  return (
    <div className="panel">
      <div className="toolbar" style={{ flexWrap: 'wrap', gap: 10 }}>
        <div className="section-title">{t.tab_transactions}</div>
        <span className="muted mono" style={{ fontSize: 11.5 }}>{filtered.length}/{rows.length}</span>
        <div className="grow" />
        <div className="stat-row" style={{ gap: 18 }}>
          <div className="stat">
            <div className="lbl">{lang === 'no' ? 'Sum (fullført)' : 'Sum (success)'}</div>
            <div className="val" style={{ fontSize: 14 }}>{fmtKr(sum / 100, lang)}</div>
          </div>
          <div className="stat">
            <div className="lbl">{lang === 'no' ? 'Vellykket' : 'OK'}</div>
            <div className="val" style={{ fontSize: 14 }}>{successful.length}/{filtered.length}</div>
          </div>
          {failedCount > 0 && (
            <div className="stat">
              <div className="lbl" style={{ color: 'var(--danger)' }}>{lang === 'no' ? 'Feilet' : 'Failed'}</div>
              <div className="val" style={{ fontSize: 14, color: 'var(--danger)' }}>{failedCount}</div>
            </div>
          )}
          <div className="stat">
            <div className="lbl">{lang === 'no' ? 'Bytte-andel' : 'Swap %'}</div>
            <div className="val" style={{ fontSize: 14 }}>{swapShare}%</div>
          </div>
        </div>
      </div>

      {/* periode + filter */}
      <div className="toolbar" style={{ flexWrap: 'wrap', gap: 8, paddingTop: 0 }}>
        <div className="minitab">
          <button className={period === '10'  ? 'on' : ''} onClick={() => setPeriod('10')}>Siste 10</button>
          <button className={period === '7'   ? 'on' : ''} onClick={() => setPeriod('7')}>7 d</button>
          <button className={period === '30'  ? 'on' : ''} onClick={() => setPeriod('30')}>30 d</button>
          <button className={period === '90'  ? 'on' : ''} onClick={() => setPeriod('90')}>90 d</button>
          <button className={period === 'custom' ? 'on' : ''} onClick={() => setPeriod('custom')}>Egendefinert</button>
        </div>
        {period === 'custom' && (
          <>
            <input type="date" className="input" style={{ width: 145, height: 26 }}
                   value={from} onChange={e => setFrom(e.target.value)} />
            <span className="muted" style={{ fontSize: 11 }}>til</span>
            <input type="date" className="input" style={{ width: 145, height: 26 }}
                   value={to} onChange={e => setTo(e.target.value)} />
          </>
        )}
        <div className="grow" />
        <div className="minitab">
          <button className={filter === 'all'      ? 'on' : ''} onClick={() => setFilter('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
          <button className={filter === 'exchange' ? 'on' : ''} onClick={() => setFilter('exchange')}>{t.swap}</button>
          <button className={filter === 'buy'      ? 'on' : ''} onClick={() => setFilter('buy')}>{t.buy}</button>
        </div>
        <button className="btn sm" onClick={load} disabled={loading}>
          <Icon name="refresh" size={12} />{loading ? 'Laster…' : 'Oppdater'}
        </button>
        <button className="btn sm" onClick={exportCsv}>
          <Icon name="download" size={12} />CSV
        </button>
      </div>

      {error && (
        <div style={{ padding: '10px 16px', color: 'var(--danger)', fontSize: 12 }}>
          ❌ {error}
        </div>
      )}

      <div style={{ overflow: 'auto', maxHeight: 'max(240px, calc(100dvh - 320px))' }}>
        {loading && rows.length === 0 ? (
          <div className="empty">⏳ Laster transaksjoner…</div>
        ) : filtered.length === 0 ? (
          <div className="empty">Ingen transaksjoner i valgt periode</div>
        ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 60 }}></th>
                <th>{t.tx_time}</th>
                <th>{t.tx_type}</th>
                <th>{lang === 'no' ? 'Inn (tom)' : 'In (empty)'}</th>
                <th>{lang === 'no' ? 'Ut (full)' : 'Out (full)'}</th>
                <th>Status</th>
                <th>{lang === 'no' ? 'Mobil' : 'Mobile'}</th>
                <th className="num">{t.tx_amount}</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(o => (
                <tr key={o.order_id} onClick={() => setOpenTx(o)} style={{ cursor: 'pointer' }}>
                  <td>
                    <TxThumb machineId={machine.id} order={o} />
                  </td>
                  <td className="mono" style={{ fontSize: 12 }}>
                    {formatTs(o.created_at)}
                  </td>
                  <td>
                    {o.kind === 'exchange'
                      ? <Pill tone="accent" dot>{t.swap}</Pill>
                      : <Pill tone="info" dot>{t.buy}</Pill>}
                  </td>
                  <td>{o.bottle_in || <span className="muted">—</span>}</td>
                  <td><strong>{o.bottle_out}</strong></td>
                  <td>{stateBadge(o)}</td>
                  <td className="muted" style={{ fontSize: 11.5 }}>{o.mobile || '—'}</td>
                  <td className="num" style={{ fontWeight: 600 }}>
                    {(o.price_ore || 0) > 0
                      ? fmtKr((o.price_ore || 0) / 100, lang)
                      : <span className="muted">—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {openTx && <TransactionDetail order={openTx} machine={machine} lang={lang} onClose={() => setOpenTx(null)} />}
    </div>
  );
};

/* Liten thumbnail i tabellrad — lazy-loadet via IntersectionObserver,
 * bruker backend thumbnail-endepunkt (~5-15 KB i stedet for 500 KB).
 * v2-ordrer: bilde via /api/admin/orders/{id}/image/*; legacy: Firestore-logg. */
const TxThumb = ({ machineId, order }) => {
  const legacyFname = order.out_image || order.in_image;
  const v2Url = order.out_image_url || order.in_image_url;
  const thumbUrl = v2Url
    ? `${v2Url}?size=96`
    : (legacyFname ? window.api.legacyLogImageThumbUrl(machineId, legacyFname, 96) : null);
  const [src, setSrc] = React.useState(null);
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  // Vis først når raden er innenfor viewport
  React.useEffect(() => {
    if (!ref.current || !thumbUrl) return;
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      });
    }, { rootMargin: '200px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [thumbUrl]);

  React.useEffect(() => {
    if (!visible || !thumbUrl) return;
    let cancelled = false;
    window.authedImageUrl(thumbUrl)
      .then(url => { if (!cancelled) setSrc(url); })
      .catch(() => { if (!cancelled) setSrc(null); });
    return () => { cancelled = true; };
  }, [thumbUrl, visible]);

  if (!thumbUrl) {
    return <div ref={ref} style={{ width: 48, height: 36, background: 'var(--surface-3)', borderRadius: 4 }} />;
  }
  return (
    <div ref={ref} style={{ width: 48, height: 36, borderRadius: 4, overflow: 'hidden', background: '#07070a' }}>
      {src && <img src={src} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
    </div>
  );
};

/* Full transaksjons-detalj med begge bilder + alle felter + tidslinje */
const TransactionDetail = ({ order, machine, lang, onClose, onRefunded }) => {
  const t = I18N[lang];
  const [refunds, setRefunds] = React.useState([]);
  const [showRefund, setShowRefund] = React.useState(false);
  const [refundBusy, setRefundBusy] = React.useState(false);
  const [refundError, setRefundError] = React.useState(null);
  const [timeline, setTimeline] = React.useState(null);
  const isLegacy = machine.kind === 'legacy';
  // Sjåfør/operatør (tenant_worker/operator) skal ikke se «Refunder» — backend
  // krever tenant_admin uansett (2026-09-05). Tenant utledes fra ordren,
  // automaten eller DATA.machines (tenant-transaksjonslista har bare id/navn).
  const tenantIdForOrder = order.tenant_id || machine.tenantId
    || (((window.DATA && DATA.machines) || []).find(m => m.id === (order.automat_id || machine.id)) || {}).tenantId;
  const roleHere = window.roleForTenant ? window.roleForTenant(tenantIdForOrder) : null;
  const isWorker = roleHere === 'worker';

  React.useEffect(() => {
    if (!order.order_id) return;
    window.api.listRefunds(order.order_id).then(setRefunds).catch(() => setRefunds([]));
    // Full tidslinje (kun v2-ordrer i vår DB) — alle steg kunden gikk gjennom
    if (!isLegacy) {
      window.api.orderTimeline(order.order_id)
        .then(setTimeline).catch(() => setTimeline(null));
    }
  }, [order.order_id]);

  const totalPriceOre = order.price_ore || 0;
  const alreadyRefundedOre = order.refunded_amount_ore
    || refunds.reduce((s, r) => s + (r.amount_ore || 0), 0);
  const remainingOre = totalPriceOre - alreadyRefundedOre;
  const canRefund = order.payment_method === 'stripe'
    && order.stripe_payment_intent_id
    && order.captured_at
    && remainingOre > 0
    && !isWorker;

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer drawer-wide">
        <div className="drawer-head">
          <div>
            <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
              {lang === 'no' ? 'Transaksjon' : 'Transaction'}
            </h3>
            <div className="muted mono" style={{ fontSize: 11, marginTop: 2 }}>{order.order_id || '—'}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
        </div>
        <div className="drawer-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Status-banner — skiller fullført / kreditert / avbrutt / feil */}
          {(() => {
            const key = orderStatusKey(order);
            const tone = key === 'fullført' ? 'var(--success)'
              : (key === 'kreditert' || key === 'delvis-kreditert') ? 'var(--warn)'
              : key === 'avbrutt' ? 'var(--text-dim)'
              : 'var(--danger)';
            const bg = key === 'fullført' ? 'var(--success-soft)'
              : (key === 'kreditert' || key === 'delvis-kreditert') ? 'var(--warn-soft)'
              : key === 'avbrutt' ? 'var(--surface-2)'
              : 'var(--danger-soft)';
            const kindTxt = order.kind === 'exchange'
              ? (lang === 'no' ? 'bytte' : 'swap') : (lang === 'no' ? 'kjøp' : 'buy');
            return (
              <div style={{
                padding: '10px 12px', borderRadius: 'var(--radius)',
                borderLeft: '3px solid ' + tone, background: bg, color: tone,
                fontSize: 12.5, fontWeight: 500,
              }}>
                {key === 'fullført' && <>✓ <strong>Fullført</strong> {kindTxt}</>}
                {key === 'kreditert' && <>↩ <strong>Kreditert</strong> — {kindTxt}, beløpet er refundert kunden</>}
                {key === 'delvis-kreditert' && <>↩ <strong>Delvis kreditert</strong> — {fmtKr((order.refunded_amount_ore || 0) / 100, lang)} refundert</>}
                {key === 'avbrutt' && <>⊘ <strong>Avbrutt</strong> — {order.error || (lang === 'no' ? 'handelen ble avbrutt' : 'trade cancelled')}</>}
                {key !== 'fullført' && key !== 'kreditert' && key !== 'delvis-kreditert' && key !== 'avbrutt' && (
                  <>❌ <strong>Feilet:</strong> {order.error || order.session_state}</>
                )}
              </div>
            );
          })()}

          {/* Bilder side-om-side: flaske levert INN og flaske levert UT
              (auto-fit: stables til 1 kolonne på smal skjerm) */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
            <TxImage label={lang === 'no' ? 'Inn (tom flaske)' : 'In (empty bottle)'}
                     machineId={machine.id} filename={order.in_image}
                     url={order.in_image_url}
                     bottleName={order.bottle_in} score={order.in_score} />
            <TxImage label={lang === 'no' ? 'Ut (full flaske)' : 'Out (full bottle)'}
                     machineId={machine.id} filename={order.out_image}
                     url={order.out_image_url}
                     bottleName={order.bottle_out} score={order.out_score} />
          </div>

          {/* Beskrivelse */}
          {order.description && (
            <div>
              <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 4 }}>
                {lang === 'no' ? 'Beskrivelse fra v1' : 'Description from v1'}
              </div>
              <div style={{
                padding: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius)',
                border: '1px solid var(--border)', fontSize: 12.5, whiteSpace: 'pre-wrap',
                fontFamily: 'var(--font-mono)',
              }}>{order.description}</div>
            </div>
          )}

          {/* Kvittering-handlinger (kun v2-ordrer fra DB). PDF-en krever
              auth-header — vanlig <a href> ga 401/blank side, derfor hentes
              den som blob og åpnes i ny fane (fikset 2026-09-04). */}
          {order.session_state === 'complete' && order.payment_method && (
            <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
              <button className="btn sm" onClick={async () => {
                try { await window.api.openReceiptPdf(order.order_id); }
                catch (e) { alert((lang === 'no' ? 'Kvittering: ' : 'Receipt: ') + e.message); }
              }}>
                <Icon name="download" size={12} />{lang === 'no' ? 'Vis kvittering (PDF)' : 'Open receipt (PDF)'}
              </button>
              <button className="btn sm" onClick={async () => {
                try { await window.api.regenerateReceipt(order.order_id);
                  alert(lang === 'no' ? 'Regenerert' : 'Regenerated'); }
                catch (e) { alert(e.message); }
              }}>
                <Icon name="refresh" size={12} />{lang === 'no' ? 'Regenerer' : 'Regenerate'}
              </button>
              {order.receipt_number && (
                <span className="muted mono" style={{ fontSize: 11, alignSelf: 'center' }}>
                  {lang === 'no' ? 'Kvittering-nr' : 'Receipt no'}: {order.receipt_number}
                </span>
              )}
            </div>
          )}

          {/* Metadata-grid (mobil: .kvp-grid -> 1 kolonne via styles.css) */}
          <div className="kvp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            <KVP label={lang === 'no' ? 'Tid' : 'Time'} value={formatTs(order.created_at)} />
            <KVP label={lang === 'no' ? 'Type' : 'Type'}
                 value={order.kind === 'exchange' ? (lang === 'no' ? 'Bytte' : 'Swap') : (lang === 'no' ? 'Kjøp' : 'Buy')} />
            <KVP label={lang === 'no' ? 'Beløp' : 'Amount'}
                 value={(order.price_ore || 0) > 0 ? fmtKr((order.price_ore || 0) / 100, lang) : '—'} />
            <KVP label={lang === 'no' ? 'Mobil' : 'Mobile'} value={order.mobile || '—'} />
            <KVP label={lang === 'no' ? 'Betaling' : 'Payment'}
                 value={order.payment_method === 'stripe' ? `Stripe (${order.stripe_status || '—'})`
                       : order.payment_method === 'vipps' ? `Vipps (${order.vipps_status || '—'})`
                       : order.vipps_status ? `Vipps (${order.vipps_status})`
                       : (order.payment_method || '—')} />
            <KVP label="Automat" value={order.automat_location || machine.location} />
            {order.stripe_payment_intent_id && (
              <KVP label="Stripe ID" value={order.stripe_payment_intent_id} colspan={2} />
            )}
            {order.authorized_at && (
              <KVP label={lang === 'no' ? 'Autorisert' : 'Authorized'} value={formatTs(order.authorized_at)} />
            )}
            {order.captured_at && (
              <KVP label={lang === 'no' ? 'Trukket' : 'Captured'} value={formatTs(order.captured_at)} />
            )}
            {(order.door_in ?? order.in_index) != null && <KVP label={lang === 'no' ? 'Dør inn' : 'Door in'} value={`#${order.door_in ?? order.in_index}`} />}
            {(order.door_out ?? order.out_index) != null && <KVP label={lang === 'no' ? 'Dør ut' : 'Door out'} value={`#${order.door_out ?? order.out_index}`} />}
            {(order.deposit_ore || 0) > 0 && <KVP label={lang === 'no' ? 'Pant' : 'Deposit'} value={fmtKr(order.deposit_ore / 100, lang)} />}
            {order.canceled_at && <KVP label={lang === 'no' ? 'Kansellert' : 'Cancelled'} value={formatTs(order.canceled_at)} />}
          </div>

          {/* Refund-seksjon — kun for Stripe-betalte ordrer */}
          {(order.payment_method === 'stripe' || refunds.length > 0 || alreadyRefundedOre > 0) && (
            <div style={{
              padding: 12, background: 'var(--surface-2)', borderRadius: 'var(--radius)',
              border: '1px solid var(--border)',
            }}>
              <div className="row between" style={{ marginBottom: 8 }}>
                <div>
                  <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase' }}>
                    {lang === 'no' ? 'Refusjon' : 'Refund'}
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>
                    {alreadyRefundedOre > 0
                      ? `${fmtKr(alreadyRefundedOre / 100, lang)} ${lang === 'no' ? 'refundert' : 'refunded'}`
                      : (lang === 'no' ? 'Ingen refusjon' : 'No refund')}
                    {(order.credit_note_numbers || []).length > 0 && (
                      <span className="muted mono" style={{ fontSize: 11, marginLeft: 8 }}>
                        {lang === 'no' ? 'Kreditnota' : 'Credit note'}: {order.credit_note_numbers.join(', ')}
                      </span>
                    )}
                    {remainingOre > 0 && totalPriceOre > 0 && (
                      <span className="muted" style={{ fontSize: 11, marginLeft: 8 }}>
                        ({fmtKr(remainingOre / 100, lang)} {lang === 'no' ? 'gjenstår' : 'remaining'})
                      </span>
                    )}
                  </div>
                </div>
                {canRefund && (
                  <button className="btn sm danger" onClick={() => setShowRefund(true)}>
                    <Icon name="refresh" size={12} />{lang === 'no' ? 'Refunder' : 'Refund'}
                  </button>
                )}
              </div>
              {refunds.length > 0 && (
                <div style={{ marginTop: 6, fontSize: 11.5 }}>
                  {refunds.map(r => (
                    <div key={r.id} className="row between" style={{ padding: '4px 0', borderTop: '1px solid var(--border)' }}>
                      <span>
                        {fmtKr((r.amount_ore || 0) / 100, lang)}
                        {r.reason && <span className="muted" style={{ marginLeft: 6 }}>· {r.reason}</span>}
                        {/* Kreditnota (2026-09-05): nummer + PDF via blob med auth-header */}
                        {r.credit_note_number && (
                          <a className="mono" href="#"
                             style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', cursor: 'pointer' }}
                             title={lang === 'no' ? 'Åpne kreditnota (PDF)' : 'Open credit note (PDF)'}
                             onClick={async (e) => {
                               e.preventDefault();
                               try { await window.api.openCreditNotePdf(r.id); }
                               catch (err) { alert((lang === 'no' ? 'Kreditnota: ' : 'Credit note: ') + err.message); }
                             }}>
                            {r.credit_note_number} ↗
                          </a>
                        )}
                      </span>
                      <span>
                        <span className={'pill ' + (r.stripe_status === 'succeeded' ? 'ok' : 'warn')}
                              style={{ fontSize: 10 }}>{r.stripe_status || '—'}</span>
                        <span className="muted mono" style={{ marginLeft: 6, fontSize: 10 }}>{formatTs(r.created_at)}</span>
                      </span>
                    </div>
                  ))}
                </div>
              )}
              {refundError && (
                <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--danger)' }}>❌ {refundError}</div>
              )}
            </div>
          )}

          {/* Tidslinje: alle steg i handelen (system + kundens app-hendelser
              + penge-milepæler), tidsstemplet og sortert */}
          {timeline && timeline.items && timeline.items.length > 0 && (
            <div>
              <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 6 }}>
                {lang === 'no' ? 'Tidslinje' : 'Timeline'}
              </div>
              <div style={{
                background: 'var(--surface-2)', border: '1px solid var(--border)',
                borderRadius: 'var(--radius)', padding: '4px 12px',
                maxHeight: 320, overflow: 'auto',
              }}>
                {timeline.items.map((ev, i) => (
                  <div key={i} className="row" style={{
                    gap: 10, padding: '6px 0', alignItems: 'flex-start',
                    flexWrap: 'wrap',
                    borderTop: i > 0 ? '1px solid var(--border)' : 'none',
                  }}>
                    <span className="mono muted" style={{ fontSize: 11, minWidth: 96, whiteSpace: 'nowrap' }}>
                      {formatTs(ev.ts)}
                    </span>
                    <span style={{
                      fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase',
                      letterSpacing: '0.05em', minWidth: 58, marginTop: 1,
                      color: ev.source === 'kunde' ? 'var(--info)'
                           : ev.source === 'betaling' ? 'var(--accent)'
                           : 'var(--text-faint)',
                    }}>{ev.source}</span>
                    <span style={{ fontSize: 12.5, flex: 1 }}>
                      {ev.label}
                      {ev.detail && (
                        <span className="muted" style={{ fontSize: 11, display: 'block' }}>{ev.detail}</span>
                      )}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {showRefund && (
          <RefundModal order={order} remainingOre={remainingOre} lang={lang}
            onClose={() => setShowRefund(false)}
            busy={refundBusy} setBusy={setRefundBusy}
            onDone={async (result) => {
              setShowRefund(false);
              setRefundError(null);
              // Refresh refunds-listen
              const fresh = await window.api.listRefunds(order.order_id).catch(() => []);
              setRefunds(fresh);
              if (onRefunded) onRefunded(result);
            }}
            onError={(e) => setRefundError(e)} />
        )}
      </div>
    </>
  );
};

/* Refund-modal: full eller partiell */
const RefundModal = ({ order, remainingOre, lang, onClose, busy, setBusy, onDone, onError }) => {
  const [amountKr, setAmountKr] = React.useState((remainingOre / 100).toFixed(2));
  const [reason, setReason] = React.useState('requested_by_customer');
  const [customReason, setCustomReason] = React.useState('');

  const submit = async () => {
    setBusy(true);
    try {
      const amount_ore = Math.round(parseFloat(amountKr) * 100);
      if (!(amount_ore > 0) || amount_ore > remainingOre) {
        onError(`Beløp må være mellom 1 øre og ${remainingOre} øre`);
        setBusy(false);
        return;
      }
      const finalReason = reason === 'custom' ? customReason : reason;
      const result = await window.api.refundOrder(order.order_id, {
        amount_ore, reason: finalReason || null,
      });
      onDone(result);
    } catch (e) {
      onError(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(440px, 95vw)', padding: 20,
        maxHeight: '85dvh', overflowY: 'auto',
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)',
      }}>
        <h3 style={{ margin: '0 0 12px', fontSize: 15 }}>
          {lang === 'no' ? 'Refunder betaling' : 'Refund payment'}
        </h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div>
            <label className="muted" style={{ fontSize: 11, display: 'block', marginBottom: 4 }}>
              {lang === 'no' ? 'Beløp (kr)' : 'Amount (NOK)'}
            </label>
            <input type="number" step="0.01" min="0.01" max={(remainingOre / 100).toFixed(2)}
                   value={amountKr} onChange={e => setAmountKr(e.target.value)}
                   className="input" style={{ width: '100%' }} />
            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
              {lang === 'no' ? `Maks: ${(remainingOre / 100).toFixed(2)} kr` : `Max: ${(remainingOre / 100).toFixed(2)}`}
            </div>
          </div>
          <div>
            <label className="muted" style={{ fontSize: 11, display: 'block', marginBottom: 4 }}>
              {lang === 'no' ? 'Årsak' : 'Reason'}
            </label>
            <select value={reason} onChange={e => setReason(e.target.value)}
                    className="select" style={{ width: '100%' }}>
              <option value="requested_by_customer">{lang === 'no' ? 'Kunde har bedt om det' : 'Requested by customer'}</option>
              <option value="duplicate">{lang === 'no' ? 'Dobbel-betaling' : 'Duplicate'}</option>
              <option value="fraudulent">{lang === 'no' ? 'Svindel' : 'Fraudulent'}</option>
              <option value="custom">{lang === 'no' ? 'Annet…' : 'Other…'}</option>
            </select>
            {reason === 'custom' && (
              <input value={customReason} onChange={e => setCustomReason(e.target.value)}
                     placeholder={lang === 'no' ? 'Fri tekst' : 'Free text'}
                     className="input" style={{ width: '100%', marginTop: 6 }} />
            )}
          </div>
        </div>
        <div className="row" style={{ marginTop: 16, justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={busy}>
            {lang === 'no' ? 'Avbryt' : 'Cancel'}
          </button>
          <button className="btn danger" onClick={submit} disabled={busy}>
            {busy ? '⏳…' : (lang === 'no' ? 'Bekreft refusjon' : 'Confirm refund')}
          </button>
        </div>
      </div>
    </>
  );
};

/* Bilde med label + ML-score. `url` (v2-ordrebilde) vinner over legacy
   `filename` (Firestore-logg). */
const TxImage = ({ label, machineId, filename, url, bottleName, score }) => {
  const [src, setSrc] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const fetchUrl = url || (filename ? window.api.legacyLogImageUrl(machineId, filename) : null);
  React.useEffect(() => {
    if (!fetchUrl) { setSrc(null); return; }
    let cancelled = false;
    window.authedImageUrl(fetchUrl)
      .then(u => { if (!cancelled) setSrc(u); })
      .catch(e => { if (!cancelled) setErr(e.message); });
    return () => { cancelled = true; };
  }, [fetchUrl]);
  return (
    <div>
      <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '4/3',
        background: '#07070a', borderRadius: 'var(--radius)', overflow: 'hidden',
        border: '1px solid var(--border)',
      }}>
        {src ? (
          <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
        ) : err ? (
          <div className="empty" style={{ fontSize: 11 }}>❌ {err}</div>
        ) : fetchUrl ? (
          <div className="empty" style={{ fontSize: 11, color: 'var(--text-faint)' }}>⏳ Laster…</div>
        ) : (
          <div className="empty" style={{ fontSize: 11, color: 'var(--text-faint)' }}>
            Ingen bilde registrert
          </div>
        )}
      </div>
      <div style={{ marginTop: 6, fontSize: 12 }}>
        <span style={{ fontWeight: 500 }}>{bottleName || '—'}</span>
        {/* ML-konfidens er plattforminfo — kun superadmin-visning */}
        {score != null && score > 0 && window.isSuperView && window.isSuperView() && (
          <span className="muted" style={{ marginLeft: 6 }}>
            ML: {Math.round(score * 100)}%
          </span>
        )}
      </div>
    </div>
  );
};

function isoDate(d) {
  return d.toISOString().slice(0, 10);
}
function daysAgo(n) {
  const d = new Date();
  d.setDate(d.getDate() - n);
  return d;
}
function formatTs(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'short' });
}
/* Status for en ordre — tar hensyn til kreditering (refusjon), avbrudd og
   feil, ikke bare session_state. «kreditert» vinner over «fullført». */
function orderStatusKey(o) {
  const total = (o.captured_amount_ore != null ? o.captured_amount_ore : o.price_ore) || 0;
  const refunded = o.refunded_amount_ore || 0;
  if (refunded > 0) return refunded >= total ? 'kreditert' : 'delvis-kreditert';
  const err = (o.error || '').toLowerCase();
  const cancelled = err.includes('cancel') || err.includes('abort')
    || err.includes('avbrutt') || err.includes('avbrot');
  if (o.session_state === 'complete') return 'fullført';
  if (cancelled) return 'avbrutt';
  if (o.session_state === 'error' || o.error) return 'feil';
  if (o.session_state === 'refunded') return 'kreditert';
  return o.session_state || '—';
}

function stateBadge(o) {
  const key = orderStatusKey(o);
  if (key === 'kreditert')        return <Pill tone="warn" dot>kreditert</Pill>;
  if (key === 'delvis-kreditert') return <Pill tone="warn" dot>delvis kreditert</Pill>;
  if (key === 'fullført')         return <Pill tone="ok" dot>fullført</Pill>;
  if (key === 'avbrutt')          return <Pill tone="empty" dot>avbrutt</Pill>;
  if (key === 'feil')             return <Pill tone="danger" dot>feil</Pill>;
  return <Pill tone="empty">{key}</Pill>;
}

/* Hendelser for ÉN automat — EKTE varsler/hendelser fra backend (2026-09-04;
   før: buildEvents() → tom liste, så fanen var alltid tom og eier så aldri
   avbrutte handler, betalingsfeil osv.). */
const EVENT_KIND_LABELS = {
  handel_avbrutt: 'Handel avbrutt', betaling_ikke_aktivert: 'Betaling ikke aktivert',
  automat_opptatt: 'Automat opptatt', bytte_avvist: 'Bytte avvist',
  valg_avvist: 'Flaskevalg avvist', open_door: 'Dør åpen', gas: 'Gassalarm',
  low_stock: 'Lavt lager', no_stock: 'Tomt for type', cam_capture_feil: 'Kamerafeil',
  retur_flaske_igjen: 'Returflaske gjenglemt', service_due: 'Service forfaller',
};
const Events = ({ machine, lang }) => {
  const t = I18N[lang];
  const [rows, setRows] = React.useState(null);
  const [feil, setFeil] = React.useState(null);
  const last = React.useCallback(() => {
    window.api.recentAlarms(machine.id, 200)
      .then(r => setRows(r || [])).catch(e => setFeil(e.message));
  }, [machine.id]);
  React.useEffect(() => { last(); }, [last]);
  const evs = (rows || []).map(r => ({
    id: 'EV-' + r.id,
    ts: { text: new Date(r.sent_at).toLocaleTimeString('no-NO', { timeStyle: 'short' }),
          date: new Date(r.sent_at).toLocaleDateString('no-NO') },
    sev: (r.severity === 'critical' || r.severity === 'high') ? 'danger'
       : r.severity === 'medium' ? 'warn' : 'info',
    kind: EVENT_KIND_LABELS[r.kind] || r.kind,
    msg_no: r.message, msg_en: r.message,
    shelf: (r.message || '').match(/d[øo]r (\d+)/i)?.[1] || null,
    camera: (r.message || '').match(/Kamera (\d+)/i)?.[1] || null,
    recipient: r.recipient,
  }));
  const [sev, setSev] = React.useState('all');
  const filtered = evs.filter(e => sev === 'all' || e.sev === sev);

  return (
    <div className="panel">
      <div className="toolbar">
        <div className="section-title">{t.tab_events}</div>
        <span className="muted mono" style={{ fontSize: 11.5 }}>{filtered.length}/{evs.length}</span>
        <div className="grow" />
        <div className="minitab">
          <button className={sev === 'all' ? 'on' : ''} onClick={() => setSev('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
          <button className={sev === 'danger' ? 'on' : ''} onClick={() => setSev('danger')}>{t.sev_danger}</button>
          <button className={sev === 'warn' ? 'on' : ''} onClick={() => setSev('warn')}>{t.sev_warn}</button>
          <button className={sev === 'info' ? 'on' : ''} onClick={() => setSev('info')}>{t.sev_info}</button>
        </div>
        <button className="btn sm" onClick={last}><Icon name="refresh" size={12} />{lang === 'no' ? 'Oppdater' : 'Refresh'}</button>
      </div>
      {feil && <div style={{ padding: '10px 16px', color: 'var(--danger)', fontSize: 12 }}>❌ {feil}</div>}
      {rows === null && !feil && <div className="empty">⏳ …</div>}
      {rows !== null && filtered.length === 0 && (
        <div className="empty">{lang === 'no' ? 'Ingen hendelser registrert på denne automaten' : 'No events for this automat'}</div>
      )}
      <div style={{ overflow: 'auto', maxHeight: 'max(240px, calc(100dvh - 280px))' }}>
        {filtered.length > 0 && (
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 30 }}></th>
              <th>{t.ev_time}</th>
              <th>{t.ev_sev}</th>
              <th>{lang === 'no' ? 'Type' : 'Kind'}</th>
              <th>{t.ev_msg}</th>
              <th>{t.ev_shelf}</th>
              <th>{t.ev_camera}</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(e => (
              <tr key={e.id}>
                <td>
                  {e.sev === 'danger' && <span style={{ color: 'var(--danger)' }}><Icon name="warning" size={14} /></span>}
                  {e.sev === 'warn' && <span style={{ color: 'var(--warn)' }}><Icon name="warning" size={14} /></span>}
                  {e.sev === 'info' && <span style={{ color: 'var(--info)' }}><Icon name="info" size={14} /></span>}
                </td>
                <td className="mono" style={{ fontSize: 12 }}>{e.ts.text}<span className="muted" style={{ marginLeft: 6, fontSize: 11 }}>{e.ts.date}</span></td>
                <td>
                  {e.sev === 'danger' && <Pill tone="danger">{t.sev_danger}</Pill>}
                  {e.sev === 'warn' && <Pill tone="warn">{t.sev_warn}</Pill>}
                  {e.sev === 'info' && <Pill tone="info">{t.sev_info}</Pill>}
                </td>
                <td style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>{e.kind}</td>
                <td>{lang === 'no' ? e.msg_no : e.msg_en}</td>
                <td className="mono">{e.shelf || <span className="muted">—</span>}</td>
                <td className="mono">{e.camera ? `CAM-${e.camera}` : <span className="muted">—</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
        )}
      </div>
    </div>
  );
};

const MachineSettings = ({ machine, lang }) => {
  // EKTE innstillinger (mock-revisjon 2026-09-04): togglene leser/skriver
  // automatens config via settings-API-et; vedlikehold viser reell service-
  // historikk. 2026-09-04 (runde 2): flasketype-sortiment, betalings-
  // løsninger, tekniker-register + «Planlegg besøk» — alt ekte data.
  const t = I18N[lang];
  const no = lang === 'no';
  const isSuper = !!(window.isSuperView && window.isSuperView());
  const [cfg, setCfg] = React.useState(null);
  const [service, setService] = React.useState(null);
  const [feil, setFeil] = React.useState(null);
  // Redigerbart navn/plassering (ID kan IKKE endres — kameraer, MQTT-emner og
  // firmware er bundet til den; se forklaring i UI-et)
  const [navn, setNavn] = React.useState(machine.location || '');
  const [navnBusy, setNavnBusy] = React.useState(false);
  const lagreNavn = async () => {
    const ny = navn.trim();
    if (!ny || ny === machine.location) return;
    setNavnBusy(true);
    try {
      await window.api.updateAutomat(machine.id, { location: ny });
      if (machine._onReload) await machine._onReload();
    } catch (e) { alert((no ? 'Lagring feilet: ' : 'Save failed: ') + e.message); }
    setNavnBusy(false);
  };
  const lastAll = React.useCallback(() => {
    window.api.getSettings(machine.id).then(setCfg)
      .catch(e => setFeil(e.message));
    window.api.serviceHistory(machine.id).then(setService).catch(() => {});
  }, [machine.id]);
  React.useEffect(() => { lastAll(); }, [lastAll]);

  const lagre = async (key, value) => {
    try {
      const ny = await window.api.saveSettings(machine.id, { [key]: value });
      setCfg(ny);
    } catch (e) { alert('Lagring feilet: ' + e.message); lastAll(); }
  };
  const sisteService = service?.entries?.[0];

  return (
    <div className="split-2">
      <div className="col" style={{ gap: 16 }}>
        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Generelt' : 'General'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div>
              <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 4 }}>
                {no ? 'Navn / plassering' : 'Name / location'}
              </div>
              <div className="row" style={{ gap: 6 }}>
                <input className="input" value={navn} onChange={e => setNavn(e.target.value)}
                       style={{ flex: 1 }} maxLength={80} />
                <button className="btn sm primary" onClick={lagreNavn}
                        disabled={navnBusy || !navn.trim() || navn.trim() === machine.location}>
                  {navnBusy ? '⏳' : (no ? 'Lagre' : 'Save')}
                </button>
              </div>
            </div>
            <div className="kvp-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <KVP label="Identifikator (fast)" value={machine.id} />
              <KVP label={no ? 'Antall hyller' : 'Shelf count'} value={String((machine.shelves || []).length || '—')} />
              <KVP label={no ? 'Type' : 'Kind'} value={machine.kind} />
            </div>
            <div className="muted" style={{ fontSize: 11 }}>
              {no ? 'Identifikatoren kan ikke endres: kameraene, MQTT-emnene og firmwaren på automaten er bundet til den. Navnet kan du endre fritt.'
                  : 'The identifier is fixed (cameras, MQTT topics and firmware are bound to it); the name can be changed freely.'}
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Drift' : 'Operations'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {feil && <div className="muted" style={{ color: 'var(--danger)' }}>{feil}</div>}
            {!cfg && !feil && <div className="muted">{no ? 'Laster…' : 'Loading…'}</div>}
            {cfg && (<>
              <Toggle label={no ? 'Gassalarm aktivert' : 'Gas alarm enabled'}
                      on={!!cfg.gas_alarm_enabled}
                      onChange={v => lagre('gas_alarm_enabled', v)} />
              <Toggle label={no ? 'Sjekk åpne dører' : 'Check open doors'}
                      on={!!cfg.check_open_doors}
                      onChange={v => lagre('check_open_doors', v)} />
              <Toggle label={no ? 'SMS ved lavt lager' : 'Low-stock SMS'}
                      on={!!cfg.low_stock_sms_enabled}
                      onChange={v => lagre('low_stock_sms_enabled', v)} />
              {/* 2026-09-05: bryterne over konsumeres nå av backend (gass-SMS,
                  dør-åpen-alarm, lav-lager-SMS). Feltene under er redigerbare —
                  før var terskel og admin-mobiler kun visning. */}
              <Toggle label={no ? 'Slå av kameraer etter salg' : 'Power off cameras after sale'}
                      sub={no ? 'Sparer strøm — kameraene vekkes ved neste handel' : 'Saves power — cameras wake on next trade'}
                      on={cfg.cameras_power_off_after_sale !== false}
                      onChange={v => lagre('cameras_power_off_after_sale', v)} />
              <NumberSetting lang={lang}
                             label={no ? 'Deteksjons-terskel (%)' : 'Detection threshold (%)'}
                             sub={no ? 'Minste sikkerhet for automatisk godkjenning (Gemini/lokal)'
                                     : 'Minimum confidence for automatic approval (Gemini/local)'}
                             value={cfg.effective_predict_accept_limit || cfg.predict_accept_limit || 65}
                             min={30} max={99}
                             onSave={v => lagre('predict_accept_limit', v)} />
              <NumberSetting lang={lang}
                             label={no ? 'Dør-åpen-alarm (minutter)' : 'Door-open alarm (minutes)'}
                             sub={no ? 'Varsle når en dør har stått åpen så lenge' : 'Alert when a door has been open this long'}
                             value={cfg.door_open_alarm_min || 10}
                             min={1} max={120}
                             onSave={v => lagre('door_open_alarm_min', v)} />
              <ListSetting lang={lang}
                           label={no ? 'Admin-mobiler' : 'Admin mobiles'}
                           sub={no ? 'Mottar SMS-varsler (alarmer, lavt lager, gass). Kommaseparert, f.eks. +4790000000, +4791111111'
                                   : 'Receive SMS alerts (alarms, low stock, gas). Comma-separated.'}
                           value={cfg.admin_mobiles || []}
                           onSave={v => lagre('admin_mobiles', v)} />
            </>)}
          </div>
        </div>

        <SalesLinkPanel machine={machine} lang={lang} />
        <AssortmentPanel machine={machine} lang={lang} />
        <PaymentMethodsPanel machine={machine} lang={lang} cfg={cfg}
                             onSave={lagre} isSuper={isSuper} />
      </div>

      <div className="col" style={{ gap: 16 }}>
        <MaintenancePanel machine={machine} lang={lang} cfg={cfg}
                          service={service} sisteService={sisteService}
                          onSaveCfg={lagre} />

        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Farlig sone' : 'Danger zone'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button className={'btn ' + (machine.maintenanceMode ? 'primary' : 'danger')} onClick={async () => {
              // Leser EKTE tilstand (maintenanceMode fra backend) — før leste
              // knappen machine._maint som aldri ble initialisert, så den kunne
              // bare slå PÅ (2026-09-05).
              const paa = !machine.maintenanceMode;
              if (!confirm(no
                  ? `${paa ? 'Sette' : 'Ta'} automaten ${paa ? 'i' : 'ut av'} vedlikeholdsmodus? Kunder ${paa ? 'blokkeres' : 'slippes til igjen'}.`
                  : 'Toggle maintenance mode?')) return;
              try {
                await window.api.updateAutomat(machine.id, { maintenance_mode: paa });
                if (machine._onReload) await machine._onReload();
                else alert(no ? (paa ? 'Vedlikeholdsmodus PÅ' : 'Vedlikeholdsmodus AV') : 'OK');
              } catch (e) { alert(e.message); }
            }}>
              <Icon name={machine.maintenanceMode ? 'play' : 'pause'} size={14} />
              {machine.maintenanceMode
                ? (no ? 'Avslutt vedlikeholdsmodus' : 'End maintenance mode')
                : (no ? 'Sett i vedlikeholdsmodus' : 'Enter maintenance mode')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Salgslenke + QR-kode for automaten: tenanten kan kopiere lenka eller
   skrive ut en A4-plakat med QR som tar kunden rett til salgssiden
   (/app/?a=<automat-id>). QR genereres lokalt (qrcode-generator, lastet i
   index.html) — faller pent tilbake til bare lenke om biblioteket mangler. */
const SalesLinkPanel = ({ machine, lang }) => {
  const no = lang === 'no';
  const url = `${location.origin}/app/?a=${encodeURIComponent(machine.id)}`;
  const qrRef = React.useRef(null);
  const [qrSvg, setQrSvg] = React.useState(null);
  const [kopiert, setKopiert] = React.useState(false);

  React.useEffect(() => {
    if (typeof window.qrcode !== 'function') { setQrSvg(null); return; }
    try {
      const qr = window.qrcode(0, 'M');   // 0 = auto-versjon, M = feilkorreksjon
      qr.addData(url);
      qr.make();
      setQrSvg(qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true }));
    } catch (e) { setQrSvg(null); }
  }, [url]);

  const kopier = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setKopiert(true);
      setTimeout(() => setKopiert(false), 2000);
    } catch (e) {
      // Clipboard-API krever https/fokus — fall tilbake til prompt
      window.prompt(no ? 'Kopier lenka:' : 'Copy the link:', url);
    }
  };

  // HTML-escape (H17, 2026-09-05): automatnavnet er tenant-styrt tekst og gikk
  // rett inn i document.write → lagret XSS med admin-origin (token-tyveri).
  const escHtmlForPrint = (s) => String(s ?? '').replace(/[&<>"']/g,
    c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));

  const skrivUt = () => {
    const tittel = escHtmlForPrint(machine.location || machine.name || machine.id);
    const html = `<!doctype html>
<html lang="no"><head><meta charset="utf-8"><title>QR · ${tittel}</title>
<style>
  @page { size: A4 portrait; margin: 20mm; }
  body { font-family: system-ui, sans-serif; text-align: center; color: #111;
         display: flex; flex-direction: column; align-items: center;
         justify-content: center; min-height: 90vh; margin: 0; }
  h1 { font-size: 30px; margin: 0 0 4px; }
  .sub { font-size: 17px; color: #444; margin: 0 0 26px; }
  .qr { width: 105mm; height: 105mm; }
  .qr svg { width: 100%; height: 100%; }
  .url { font-family: monospace; font-size: 14px; color: #333; margin-top: 22px;
         word-break: break-all; }
  .hint { font-size: 15px; color: #555; margin-top: 10px; }
</style></head>
<body>
  <h1>${tittel}</h1>
  <p class="sub">${no ? 'Kjøp og bytt gassflasker her — hele døgnet' : 'Buy and swap gas bottles here — 24/7'}</p>
  <div class="qr">${qrSvg || ''}</div>
  <div class="url">${escHtmlForPrint(url)}</div>
  <p class="hint">${no ? 'Skann QR-koden med mobilkameraet for å starte' : 'Scan the QR code with your phone camera'}</p>
  <script>window.onload = function () { window.print(); };<\/script>
</body></html>`;
    // Dokumentet leveres som Blob-URL og åpnes med noopener — ikke lenger
    // document.write i et about:blank som arver admin-vinduet. (qrSvg er
    // generert lokalt fra en encodeURIComponent-URL og er trygg.)
    const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
    const blobUrl = URL.createObjectURL(blob);
    window.open(blobUrl, '_blank', 'noopener');
    // Med noopener returnerer window.open alltid null, så popup-blokkering kan
    // ikke oppdages her; blob-URL-en ryddes etter ett minutt.
    setTimeout(() => URL.revokeObjectURL(blobUrl), 60000);
  };

  return (
    <div className="panel">
      <div className="panel-head"><h3>{no ? 'Salgsside & QR-kode' : 'Sales page & QR code'}</h3></div>
      <div className="panel-body" style={{ display: 'flex', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {qrSvg ? (
          <div ref={qrRef}
               style={{ width: 132, height: 132, flexShrink: 0, background: '#fff',
                        padding: 6, borderRadius: 6, border: '1px solid var(--border)' }}
               dangerouslySetInnerHTML={{ __html: qrSvg }} />
        ) : (
          <div style={{ width: 132, height: 132, flexShrink: 0, display: 'grid', placeItems: 'center',
                        background: 'var(--surface-2)', borderRadius: 6,
                        border: '1px dashed var(--border)', fontSize: 11, color: 'var(--text-faint)',
                        textAlign: 'center', padding: 8 }}>
            {no ? 'QR utilgjengelig (bibliotek ikke lastet)' : 'QR unavailable'}
          </div>
        )}
        <div style={{ flex: 1, minWidth: 200, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div className="muted" style={{ fontSize: 11.5 }}>
            {no ? 'Kunder kommer rett til denne automatens salgsside via lenka eller QR-koden. Skriv ut og heng den på automaten.'
                : 'Customers reach this automat’s sales page via the link or QR code. Print it and put it on the automat.'}
          </div>
          <div className="mono" style={{
            fontSize: 12, padding: '8px 10px', background: 'var(--surface-2)',
            border: '1px solid var(--border)', borderRadius: 'var(--radius)',
            wordBreak: 'break-all', userSelect: 'all',
          }}>{url}</div>
          <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>
            <button className="btn sm" onClick={kopier}>
              {kopiert ? '✓ ' + (no ? 'Kopiert' : 'Copied') : (no ? 'Kopier lenke' : 'Copy link')}
            </button>
            <button className="btn sm primary" onClick={skrivUt} disabled={!qrSvg}>
              <Icon name="download" size={12} />{no ? 'Skriv ut QR-plakat (A4)' : 'Print QR poster (A4)'}
            </button>
            <a className="btn sm" href={url} target="_blank" rel="noopener">
              {no ? 'Åpne salgssiden' : 'Open sales page'}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Flasketyper på automaten: superadmin bestemmer hva plattformen støtter
   (aktive flasker i katalogen); tenant-admin velger her hvilke av dem denne
   automaten skal tilby. Lagres som automat-spesifikt sortiment. */
const AssortmentPanel = ({ machine, lang }) => {
  const no = lang === 'no';
  const [rows, setRows] = React.useState(null);
  const [feil, setFeil] = React.useState(null);
  const [busy, setBusy] = React.useState(null);

  const last = React.useCallback(() => {
    if (!machine.tenantId) { setFeil(no ? 'Automaten mangler tenant' : 'No tenant'); return; }
    window.api.listPriceOverrides(machine.tenantId, machine.id)
      .then(setRows).catch(e => setFeil(e.message));
  }, [machine.id]);
  React.useEffect(() => { last(); }, [last]);

  const toggle = async (r, on) => {
    setBusy(r.bottle_id);
    try {
      await window.api.setAssortment({
        tenant_id: machine.tenantId, bottle_id: r.bottle_id,
        automat_id: machine.id, enabled: on,
      });
      last();
    } catch (e) { alert(e.message); }
    setBusy(null);
  };

  return (
    <div className="panel">
      <div className="panel-head"><h3>{no ? 'Flasketyper på automaten' : 'Bottle types on this automat'}</h3></div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="muted" style={{ fontSize: 11.5 }}>
          {no ? 'Hvilke typer plattformen støtter settes av superadmin (flaskekatalogen). Her velger du hvilke DENNE automaten skal tilby kundene.'
              : 'Platform-supported types are set by superadmin; choose which THIS automat offers.'}
        </div>
        {feil && <div style={{ color: 'var(--danger)', fontSize: 12 }}>{feil}</div>}
        {!rows && !feil && <div className="muted">{no ? 'Laster…' : 'Loading…'}</div>}
        {rows && rows.map(r => {
          const bt = (window.DATA?.BOTTLE_TYPES || []).find(b => b.id === r.code);
          return (
            <div key={r.bottle_id} className="row between" style={{ padding: '2px 0' }}>
              <span className="row" style={{ gap: 8, alignItems: 'center' }}>
                {bt?.image && (
                  <img src={`/app/img/bottles/${bt.image}`} alt=""
                       style={{ width: 18, height: 24, objectFit: 'contain' }}
                       onError={e => { e.target.style.display = 'none'; }} />
                )}
                <span style={{ fontSize: 12.5 }}>{r.display_name}</span>
                {r.offered_scope === 'tenant' && r.offered === false && (
                  <span className="muted" style={{ fontSize: 10 }}>({no ? 'av for hele tenanten' : 'off tenant-wide'})</span>
                )}
              </span>
              <Toggle label="" on={!!r.offered}
                      onChange={v => busy ? null : toggle(r, v)} />
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* Betalingsløsninger: superadmin styrer plattform-lista; tenant-admin velger
   subsett per automat. */
const PaymentMethodsPanel = ({ machine, lang, cfg, onSave, isSuper }) => {
  const no = lang === 'no';
  const METHOD_LABELS = {
    vipps: 'Vipps', stripe: no ? 'Kort (Stripe)' : 'Card (Stripe)',
    invoice: no ? 'Faktura-konto' : 'Invoice account',
  };
  const [platform, setPlatform] = React.useState(null);
  React.useEffect(() => {
    window.api.platformPaymentMethods().then(setPlatform).catch(() => {});
  }, []);

  if (!cfg) return null;
  const allowed = cfg.platform_payment_methods || ['vipps', 'stripe'];
  const active = cfg.payment_methods || allowed;

  const toggleAutomat = (m, on) => {
    const ny = on ? [...new Set([...active, m])] : active.filter(x => x !== m);
    onSave('payment_methods', ny);
  };
  const togglePlatform = async (m, on) => {
    const cur = platform?.methods || allowed;
    const ny = on ? [...new Set([...cur, m])] : cur.filter(x => x !== m);
    try {
      const r = await window.api.setPlatformPaymentMethods(ny);
      setPlatform(r);
    } catch (e) { alert(e.message); }
  };

  return (
    <div className="panel">
      <div className="panel-head"><h3>{no ? 'Betalingsløsninger' : 'Payment methods'}</h3></div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="muted" style={{ fontSize: 11.5 }}>
          {no ? 'Plattformen (superadmin) bestemmer hvilke løsninger som finnes; her velger du hvilke DENNE automaten tilbyr.'
              : 'Superadmin sets platform-wide methods; pick which THIS automat offers.'}
        </div>
        {allowed.map(m => (
          <div key={m} className="row between" style={{ padding: '2px 0' }}>
            <span style={{ fontSize: 12.5 }}>{METHOD_LABELS[m] || m}</span>
            <Toggle label="" on={active.includes(m)}
                    onChange={v => toggleAutomat(m, v)} />
          </div>
        ))}
        {active.length === 0 && (
          <div style={{ color: 'var(--danger)', fontSize: 12 }}>
            ⚠ {no ? 'Ingen betalingsløsning aktiv — kunder får ikke betalt!' : 'No payment method active!'}
          </div>
        )}
        {isSuper && platform && (
          <div style={{ borderTop: '1px solid var(--border)', paddingTop: 8, marginTop: 4 }}>
            <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 6 }}>
              Plattform-nivå (superadmin)
            </div>
            {(platform.known || []).map(m => (
              <div key={m} className="row between" style={{ padding: '2px 0' }}>
                <span style={{ fontSize: 12.5 }}>{METHOD_LABELS[m] || m}</span>
                <Toggle label="" on={(platform.methods || []).includes(m)}
                        onChange={v => togglePlatform(m, v)} />
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

/* Vedlikehold: siste service, gassensor-frist, ANSVARLIG TEKNIKER (fra
   tenantens eget register — kan opprettes her) + «Planlegg besøk» som
   faktisk lagrer og lister kommende besøk. */
const MaintenancePanel = ({ machine, lang, cfg, service, sisteService, onSaveCfg }) => {
  const no = lang === 'no';
  const t = I18N[lang];
  const [techs, setTechs] = React.useState(null);
  const [visits, setVisits] = React.useState(null);
  const [nyTech, setNyTech] = React.useState(false);
  const [techName, setTechName] = React.useState('');
  const [techPhone, setTechPhone] = React.useState('');
  const [planOpen, setPlanOpen] = React.useState(false);
  const [planDate, setPlanDate] = React.useState('');
  const [planTech, setPlanTech] = React.useState('');
  const [planNotes, setPlanNotes] = React.useState('');

  const lastTechs = React.useCallback(() => {
    if (!machine.tenantId) return;
    window.api.techniciansList(machine.tenantId).then(setTechs).catch(() => setTechs([]));
  }, [machine.id]);
  const lastVisits = React.useCallback(() => {
    window.api.visitsList(machine.id).then(setVisits).catch(() => setVisits([]));
  }, [machine.id]);
  React.useEffect(() => { lastTechs(); lastVisits(); }, [lastTechs, lastVisits]);

  const aktiveTechs = (techs || []).filter(x => x.active);
  const ansvarligId = cfg?.responsible_technician_id;
  const ansvarlig = aktiveTechs.find(x => x.id === ansvarligId);

  const leggTilTech = async () => {
    if (techName.trim().length < 2) { alert(no ? 'Navn mangler' : 'Name required'); return; }
    try {
      await window.api.technicianCreate(machine.tenantId,
        { name: techName.trim(), phone: techPhone.trim() || null });
      setTechName(''); setTechPhone(''); setNyTech(false);
      lastTechs();
    } catch (e) { alert(e.message); }
  };

  const planleggBesok = async () => {
    if (!planDate) { alert(no ? 'Velg dato' : 'Pick a date'); return; }
    try {
      await window.api.visitCreate(machine.id, {
        planned_date: new Date(planDate + 'T09:00:00').toISOString(),
        technician_id: planTech ? parseInt(planTech, 10) : null,
        notes: planNotes.trim() || null,
      });
      setPlanOpen(false); setPlanDate(''); setPlanTech(''); setPlanNotes('');
      lastVisits();
    } catch (e) { alert(e.message); }
  };

  const kommende = (visits || []).filter(v => v.status === 'planlagt');

  return (
    <div className="panel">
      <div className="panel-head"><h3>{no ? 'Vedlikehold' : 'Maintenance'}</h3></div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <KVP label={t.last_service}
             value={sisteService
               ? `${(sisteService.performed_at || '').slice(0, 10)} · ${sisteService.kind} (${sisteService.performed_by || '—'})`
               : (no ? 'Ingen registrert' : 'None registered')} />
        <KVP label={no ? 'Gassensor-frist' : 'Gas sensor due'}
             value={service?.gas_sensor_next_service
               ? `${service.gas_sensor_next_service.slice(0, 10)} (${service.gas_sensor_days_left} d)`
               : '—'} />

        {/* Ansvarlig tekniker — fra tenantens eget register */}
        <div>
          <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 4 }}>
            {no ? 'Ansvarlig tekniker' : 'Responsible technician'}
          </div>
          <div className="row" style={{ gap: 8 }}>
            <select value={ansvarligId || ''} className="select"
                    style={{ flex: 1 }}
                    onChange={e => onSaveCfg('responsible_technician_id',
                      e.target.value ? parseInt(e.target.value, 10) : 0)}>
              <option value="">{no ? '— ingen valgt —' : '— none —'}</option>
              {aktiveTechs.map(x => (
                <option key={x.id} value={x.id}>{x.name}{x.phone ? ` (${x.phone})` : ''}</option>
              ))}
            </select>
            <button className="btn sm" onClick={() => setNyTech(o => !o)}>
              + {no ? 'Ny tekniker' : 'New'}
            </button>
          </div>
          {ansvarlig?.phone && (
            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
              ☎ {ansvarlig.phone}
            </div>
          )}
          {nyTech && (
            <div className="row" style={{ gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
              <input className="input" placeholder={no ? 'Navn' : 'Name'}
                     value={techName} onChange={e => setTechName(e.target.value)}
                     style={{ flex: 2, minWidth: 120 }} />
              <input className="input" placeholder={no ? 'Mobil' : 'Phone'}
                     value={techPhone} onChange={e => setTechPhone(e.target.value)}
                     style={{ flex: 1, minWidth: 100 }} />
              <button className="btn sm primary" onClick={leggTilTech}>
                {no ? 'Lagre' : 'Save'}
              </button>
            </div>
          )}
          {aktiveTechs.length > 0 && (
            <div style={{ marginTop: 6, fontSize: 11 }} className="muted">
              {no ? 'Registrerte teknikere' : 'Registered'}: {aktiveTechs.map(x => x.name).join(', ')}
            </div>
          )}
        </div>

        {/* Planlegg besøk — lagrer faktisk (service_visit) */}
        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 10 }}>
          <div className="row between">
            <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase' }}>
              {no ? 'Servicebesøk' : 'Service visits'}
            </div>
            <button className="btn sm" onClick={() => setPlanOpen(o => !o)}>
              <Icon name="bell" size={12} />{no ? 'Planlegg besøk' : 'Plan visit'}
            </button>
          </div>
          {planOpen && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
              <input type="date" className="input" value={planDate}
                     onChange={e => setPlanDate(e.target.value)} />
              <select className="select" value={planTech}
                      onChange={e => setPlanTech(e.target.value)}>
                <option value="">{no ? 'Tekniker (valgfritt)' : 'Technician (optional)'}</option>
                {aktiveTechs.map(x => (
                  <option key={x.id} value={x.id}>{x.name}</option>
                ))}
              </select>
              <input className="input" placeholder={no ? 'Notat' : 'Notes'}
                     value={planNotes} onChange={e => setPlanNotes(e.target.value)} />
              <button className="btn sm primary" onClick={planleggBesok}>
                {no ? 'Lagre besøk' : 'Save visit'}
              </button>
            </div>
          )}
          {visits === null && <div className="muted" style={{ fontSize: 11.5, marginTop: 6 }}>{no ? 'Laster…' : 'Loading…'}</div>}
          {visits !== null && kommende.length === 0 && (
            <div className="muted" style={{ fontSize: 11.5, marginTop: 6 }}>
              {no ? 'Ingen planlagte besøk' : 'No planned visits'}
            </div>
          )}
          {kommende.map(v => (
            <div key={v.id} className="row between" style={{ padding: '6px 0', borderTop: '1px solid var(--border)', marginTop: 6 }}>
              <span style={{ fontSize: 12 }}>
                📅 {(v.planned_date || '').slice(0, 10)}
                {v.technician_name && <span className="muted"> · {v.technician_name}</span>}
                {v.notes && <span className="muted" style={{ display: 'block', fontSize: 11 }}>{v.notes}</span>}
              </span>
              <span className="row" style={{ gap: 4 }}>
                <button className="btn sm" title={no ? 'Marker utført' : 'Mark done'}
                  onClick={() => window.api.visitUpdate(machine.id, v.id, { status: 'utfort' })
                    .then(lastVisits).catch(e => alert(e.message))}>✓</button>
                <button className="btn sm" title={no ? 'Avlys' : 'Cancel'}
                  onClick={() => window.api.visitUpdate(machine.id, v.id, { status: 'avlyst' })
                    .then(lastVisits).catch(e => alert(e.message))}>✕</button>
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* Tallfelt med Lagre-knapp for Innstillinger (2026-09-05). Validerer
   min/maks klientside; backend validerer også. */
const NumberSetting = ({ lang, label, sub, value, min, max, onSave }) => {
  const no = lang !== 'en';
  const [v, setV] = React.useState(String(value ?? ''));
  React.useEffect(() => { setV(String(value ?? '')); }, [value]);
  const n = parseInt(v, 10);
  const valid = Number.isFinite(n) && (min == null || n >= min) && (max == null || n <= max);
  const changed = valid && n !== Number(value);
  const save = () => { if (changed) onSave(n); };
  return (
    <div className="row between" style={{ padding: '4px 0', gap: 10, alignItems: 'flex-start' }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5 }}>{label}</div>
        {sub && <div className="muted" style={{ fontSize: 11.5 }}>{sub}</div>}
        {!valid && <div style={{ fontSize: 11, color: 'var(--danger)' }}>{no ? `Må være ${min}–${max}` : `Must be ${min}–${max}`}</div>}
      </div>
      <div className="row" style={{ gap: 4, flexShrink: 0 }}>
        <input className="input" type="number" min={min} max={max} value={v}
               onChange={e => setV(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter') save(); }}
               style={{ width: 76, height: 28, textAlign: 'right' }} />
        <button className="btn sm primary" disabled={!changed} onClick={save}>{no ? 'Lagre' : 'Save'}</button>
      </div>
    </div>
  );
};

/* Kommaseparert liste (f.eks. mobilnumre) → array ved lagring (2026-09-05). */
const ListSetting = ({ lang, label, sub, value, onSave, placeholder }) => {
  const no = lang !== 'en';
  const norm = (arr) => (arr || []).map(s => String(s).trim()).filter(Boolean);
  const current = norm(value).join(', ');
  const [v, setV] = React.useState(current);
  React.useEffect(() => { setV(current); }, [current]);
  const parsed = v.split(/[,;\n]+/).map(s => s.trim()).filter(Boolean);
  const changed = parsed.join(', ') !== current;
  return (
    <div style={{ padding: '4px 0' }}>
      <div style={{ fontSize: 12.5 }}>{label}</div>
      {sub && <div className="muted" style={{ fontSize: 11.5, marginBottom: 4 }}>{sub}</div>}
      <div className="row" style={{ gap: 4 }}>
        <input className="input" value={v} placeholder={placeholder || '+47 …'}
               onChange={e => setV(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter' && changed) onSave(parsed); }}
               style={{ flex: 1, height: 28 }} />
        <button className="btn sm primary" disabled={!changed} onClick={() => onSave(parsed)}>{no ? 'Lagre' : 'Save'}</button>
      </div>
    </div>
  );
};

/* Returandel siste 30 d = bytte / (bytte + kjøp) fra /sales/series (2026-09-05;
   før: fast «—»). Med én tenant valgt summeres per automat i tenanten, siden
   serie-endepunktet ikke tar tenant_id. */
const ReturandelKVP = ({ lang }) => {
  const [txt, setTxt] = React.useState('…');
  const activeId = DATA.activeTenant && DATA.activeTenant.id;
  React.useEffect(() => {
    let dau = false;
    const ids = (activeId && activeId !== '__all__')
      ? (DATA.machines || []).filter(m => m.tenantId === activeId).map(m => m.id)
      : [null];
    Promise.all(ids.map(id => window.api.salesSeries(30, id).catch(() => null))).then(all => {
      if (dau) return;
      let ex = 0, buy = 0, ok = false;
      all.forEach(d => {
        if (!d || !d.split) return;
        ok = true;
        ex += (d.split.exchange && d.split.exchange.count) || 0;
        buy += (d.split.buy && d.split.buy.count) || 0;
      });
      const tot = ex + buy;
      setTxt(!ok ? '—' : tot > 0 ? `${Math.round(ex / tot * 100)} % (${ex}/${tot})`
        : (lang === 'no' ? 'ingen salg' : 'no sales'));
    });
    return () => { dau = true; };
  }, [activeId]);
  return <KVP label={lang === 'no' ? 'Returandel (30 d)' : 'Return rate (30 d)'} value={txt} />;
};

/* Rolle-etiketter for brukeradmin: tenant_worker = sjåfør/fyller (2026-09-05) */
const USER_ROLE_LABELS = {
  operator: 'operator', tenant_admin: 'tenant_admin', tenant_worker: 'Sjåfør/fyller',
};

/* Skjemafelt for flaskekatalogen — på modulnivå (2026-09-05): en komponent
   definert INNE i modalen fikk ny identitet per render, så input-feltet ble
   remontert og mistet fokus for hvert tastetrykk. */
const BottleField = ({ label, k, type = 'text', step, form, set, disabled, hint }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
    <label className="muted" style={{ fontSize: 11 }}>{label}</label>
    <input className="input" type={type} step={step} disabled={disabled}
           value={form[k]} onChange={e => set(k, type === 'number' ? parseInt(e.target.value || '0', 10) : e.target.value)} />
    {hint && <span className="muted" style={{ fontSize: 10.5 }}>{hint}</span>}
  </div>
);

const Toggle = ({ label, on, sub, onChange }) => {
  const [v, setV] = React.useState(on);
  React.useEffect(() => { setV(on); }, [on]);
  // 44x24 (2026-09-04): stort nok touch-mål — brukes for gassalarm, dørsjekk,
  // sortiment og betalingsmetoder, ofte fra mobil.
  return (
    <div className="row between" style={{ padding: '4px 0' }}>
      <div>
        <div style={{ fontSize: 12.5 }}>{label}</div>
        {sub && <div className="muted" style={{ fontSize: 11.5 }}>{sub}</div>}
      </div>
      <div
        onClick={() => { const ny = !v; setV(ny); if (onChange) onChange(ny); }}
        style={{
          width: 44, height: 24, borderRadius: 12, flexShrink: 0,
          background: v ? 'var(--accent)' : 'var(--surface-3)',
          border: '1px solid var(--border)',
          position: 'relative', cursor: 'pointer',
          transition: 'background .15s'
        }}>
        <div style={{
          position: 'absolute', top: 1, left: v ? 21 : 1, width: 20, height: 20,
          background: v ? '#1a1100' : 'var(--text-faint)', borderRadius: '50%',
          transition: 'left .15s'
        }} />
      </div>
    </div>
  );
};

/* Bottles & pricing page */
const Bottles = ({ lang }) => {
  const t = I18N[lang];
  const machines = DATA.machinesView || DATA.machines;
  const [editBottle, setEditBottle] = React.useState(null);   // null | bottle-obj | 'new'
  const me = window.AUTH.getUser() || {};
  const canEdit = !!me.is_superadmin;

  const inv = {};
  machines.forEach(m => m.shelves.forEach(s => {
    if (!s.bottle) return;
    if (!inv[s.bottle]) inv[s.bottle] = { full: 0, empty: 0 };
    if (s.state === 'full')  inv[s.bottle].full++;
    if (s.state === 'empty') inv[s.bottle].empty++;
  }));

  const onSaved = async () => {
    setEditBottle(null);
    await window.AUTH.loadAllData();
    // Trigge re-render: liten state-bump via tema-toggle ville være hack;
    // bottle-katalogen leses fra DATA.BOTTLE_TYPES så vi må reload.
    location.reload();
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.bottles_title}</h1>
          <div className="page-sub">{t.bottles_sub}</div>
        </div>
        {canEdit && (
          <button className="btn primary" onClick={() => setEditBottle('new')}>
            <Icon name="plus" size={14} />{lang === 'no' ? 'Ny flasketype' : 'New bottle type'}
          </button>
        )}
      </div>
      {/* Per-tenant + per-automat prising */}
      <PricingManagerPanel lang={lang} me={me} />

      <div className="panel">
        <div style={{ overflow: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th>{t.type}</th>
                <th>{t.name}</th>
                <th className="num">{t.weight}</th>
                <th className="num">{t.swap_price}</th>
                <th className="num">{t.new_price}</th>
                <th className="num">{t.inventory_total}</th>
                <th>{lang === 'no' ? 'Tomme (klar for henting)' : 'Empties (pickup)'}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {DATA.BOTTLE_TYPES.map(b => {
                const stk = inv[b.id] || { full: 0, empty: 0 };
                return (
                  <tr key={b.id}>
                    <td>
                      <span className="row" style={{ gap: 10, alignItems: 'center' }}>
                        {b.image ? (
                          <img src={`/app/img/bottles/${b.image}`} alt="" style={{ width: 22, height: 28, objectFit: 'contain' }}
                               onError={e => { e.target.style.display = 'none'; }} />
                        ) : <BottleGlyph type={b.id} size={24} />}
                        <span className="mono" style={{ color: 'var(--text-dim)', fontSize: 11 }}>{b.id}</span>
                      </span>
                    </td>
                    <td><span style={{ fontWeight: 500 }}>{b.name}</span></td>
                    {/* Vekt utledes fra koden (11kg_steel → 11 kg); før fast «—» */}
                    <td className="num">{(() => { const kg = window.bottleHelpers && window.bottleHelpers.weightKg(b.id); return kg ? `${kg} kg` : '—'; })()}</td>
                    <td className="num">{fmtKr(b.priceSwap, lang)}</td>
                    <td className="num">{fmtKr(b.priceNew, lang)}</td>
                    <td className="num" style={{ fontWeight: 600 }}>{stk.full}</td>
                    <td><span className="num" style={{ color: 'var(--warn)' }}>{stk.empty}</span></td>
                    <td className="right">
                      {canEdit && (
                        <button className="btn sm" onClick={() => setEditBottle(b._raw)}>
                          {t.edit}
                        </button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="split-2">
        {/* Bilde-klassifisering er plattform-/driftsinfo — kun superadmin-
            VISNING (skjules også når superadmin «ser som» tenant). */}
        {canEdit && window.isSuperView && window.isSuperView() && (
        <div className="panel">
          <div className="panel-head"><h3>{lang === 'no' ? 'Bilde-klassifisering' : 'Image classification'}</h3></div>
          <div className="panel-body">
            {/* EKTE tall (mock-revisjon 2026-09-04): Gemini few-shot i kunde-
                flyten, snitt-konfidens fra faktiske ordrer siste 7 dager. */}
            <BildeKlassifiseringInfo lang={lang} />
          </div>
        </div>
        )}
        <div className="panel">
          <div className="panel-head"><h3>{lang === 'no' ? 'Returverdi & pant' : 'Return & deposit'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {DATA.BOTTLE_TYPES.map(b => (
              <KVP key={b.id}
                   label={(lang === 'no' ? 'Pant per tom ' : 'Deposit per empty ') + b.name}
                   value={fmtKr((b.inValue || 0) / 100, lang)} />
            ))}
            <ReturandelKVP lang={lang} />
          </div>
        </div>
      </div>

      {editBottle && (
        <BottleEditModal
          bottle={editBottle === 'new' ? null : editBottle}
          lang={lang}
          onClose={() => setEditBottle(null)}
          onSaved={onSaved} />
      )}
    </div>
  );
};

/* Ekte klassifiserings-info: modellnavn er fakta (Gemini few-shot i kunde-
   flyten, lokal MobileNet i fylling/sjekk); konfidens hentes fra ordrer. */
const BildeKlassifiseringInfo = ({ lang }) => {
  const [snitt, setSnitt] = React.useState(undefined);
  const [antall, setAntall] = React.useState(undefined);
  React.useEffect(() => {
    window.api.salesSeries(7).then(d => {
      setSnitt(d.avg_detected_score != null ? Math.round(d.avg_detected_score * 100) + ' %' : '—');
      setAntall(String(d.orders_total));
    }).catch(() => { setSnitt('—'); setAntall('—'); });
  }, []);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10 }}>
      <KVP label={lang === 'no' ? 'Kundeflyt' : 'Customer flow'} value="Gemini few-shot" />
      <KVP label={lang === 'no' ? 'Fylling/sjekk' : 'Fill/check'} value="Lokal MobileNet" />
      <KVP label={lang === 'no' ? 'Snitt-konfidens (7d)' : 'Avg confidence (7d)'} value={snitt ?? '…'} />
      <KVP label={lang === 'no' ? 'Deteksjoner (7d)' : 'Detections (7d)'} value={antall ?? '…'} />
    </div>
  );
};

/* Modal for å opprette / endre flasketype */
const BottleEditModal = ({ bottle, lang, onClose, onSaved }) => {
  const isNew = !bottle;
  const [form, setForm] = React.useState(() => bottle ? {
    code: bottle.code,
    display_name: bottle.display_name,
    description: bottle.description || '',
    image: bottle.image || '',
    group: bottle.group || 1,
    base_price: bottle.base_price,
    minimum_price: bottle.minimum_price,
    in_value: bottle.in_value || 0,
    low_alarm: bottle.low_alarm || 2,
    currency: bottle.currency || 'NOK',
    active: bottle.active !== false,
    valve_type: bottle.valve_type || 'Jumbo',
  } : {
    code: '', display_name: '', description: '', image: '',
    group: 1, base_price: 65000, minimum_price: 60000, in_value: 30000,
    low_alarm: 2, currency: 'NOK', active: true, valve_type: 'Jumbo',
  });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

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

  const submit = async () => {
    setBusy(true); setErr(null);
    try {
      if (isNew) {
        await window.api.bottleCreate(form);
      } else {
        // `code` kan ikke endres på eksisterende type (BottleUpdate har ikke
        // feltet) — sendes ikke, og feltet er låst i skjemaet (2026-09-05).
        const { code: _code, ...rest } = form;
        await window.api.bottleUpdate(bottle.id, rest);
      }
      await onSaved();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };

  const remove = async () => {
    if (!confirm(lang === 'no' ? `Slett ${bottle.code}?` : `Delete ${bottle.code}?`)) return;
    setBusy(true);
    try { await window.api.bottleDelete(bottle.id); await onSaved(); }
    catch (e) { setErr(e.message); }
    setBusy(false);
  };

  const F = { form, set };   // felles props til BottleField (modulnivå-komponent)

  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(540px, 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={{ margin: '0 0 14px', fontSize: 15 }}>
          {isNew
            ? (lang === 'no' ? 'Ny flasketype' : 'New bottle type')
            : `${lang === 'no' ? 'Rediger' : 'Edit'} ${form.code}`}
        </h3>
        <div className="modal-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <BottleField {...F} label="Code (unik)" k="code" disabled={!isNew}
                       hint={isNew ? null : (lang === 'no' ? 'Kan ikke endres etter opprettelse' : 'Fixed after creation')} />
          <BottleField {...F} label={lang === 'no' ? 'Visningsnavn' : 'Display name'} k="display_name" />
          <div style={{ gridColumn: 'span 2' }}>
            <BottleField {...F} label={lang === 'no' ? 'Beskrivelse' : 'Description'} k="description" />
          </div>
          <BottleField {...F} label="Image-fil (i /app/img/bottles/)" k="image" />
          <BottleField {...F} label={lang === 'no' ? 'Ventiltype' : 'Valve type'} k="valve_type" />
          <BottleField {...F} label={lang === 'no' ? 'Pris ny (øre)' : 'New price (öre)'} k="base_price" type="number" />
          <BottleField {...F} label={lang === 'no' ? 'Min-pris (øre)' : 'Min price (öre)'} k="minimum_price" type="number" />
          <BottleField {...F} label={lang === 'no' ? 'Pant tom (øre)' : 'Deposit empty (öre)'} k="in_value" type="number" />
          <BottleField {...F} label={lang === 'no' ? 'Lav-alarm grense' : 'Low-alarm threshold'} k="low_alarm" type="number" />
          <BottleField {...F} label="Group" k="group" type="number" />
          <BottleField {...F} label="Currency" k="currency" />
        </div>
        <div className="row" style={{ marginTop: 10, gap: 8 }}>
          <label className="row" style={{ gap: 6, fontSize: 12 }}>
            <input type="checkbox" checked={form.active} onChange={e => set('active', e.target.checked)} />
            {lang === 'no' ? 'Aktiv' : 'Active'}
          </label>
        </div>
        {err && <div style={{ marginTop: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
        <div className="row" style={{ marginTop: 18, gap: 8, justifyContent: 'flex-end' }}>
          {!isNew && (
            <button className="btn danger" onClick={remove} disabled={busy}>
              {lang === 'no' ? 'Slett' : 'Delete'}
            </button>
          )}
          <button className="btn" onClick={onClose} disabled={busy}>
            {lang === 'no' ? 'Avbryt' : 'Cancel'}
          </button>
          <button className="btn primary" onClick={submit} disabled={busy}>
            {busy ? '⏳…' : isNew ? (lang === 'no' ? 'Opprett' : 'Create')
              : (lang === 'no' ? 'Lagre' : 'Save')}
          </button>
        </div>
      </div>
    </>
  );
};

/* Users page — ekte data fra backend */
const Users = ({ lang }) => {
  const t = I18N[lang];
  const me = window.AUTH.getUser() || {};
  const [users, setUsers] = React.useState([]);
  const [tenants, setTenants] = React.useState([]);
  const [editUser, setEditUser] = React.useState(null);    // 'new' | user-obj | null
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  const refresh = React.useCallback(async () => {
    setLoading(true); setError(null);
    try {
      const [u, tn] = await Promise.all([
        window.api.usersList(),
        window.api.tenantsList(),
      ]);
      setUsers(u); setTenants(tn);
    } catch (e) { setError(e.message); }
    setLoading(false);
  }, []);
  React.useEffect(() => { refresh(); }, [refresh]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.users_title}</h1>
          <div className="page-sub">
            {users.length} {lang === 'no' ? 'brukere' : 'users'}
            {' · '}
            {tenants.length} tenants
          </div>
        </div>
        {me.is_superadmin && (
          <button className="btn primary" onClick={() => setEditUser('new')}>
            <Icon name="plus" size={14} />{lang === 'no' ? 'Ny bruker' : 'New user'}
          </button>
        )}
      </div>
      {error && <div style={{ padding: 10, color: 'var(--danger)' }}>❌ {error}</div>}
      <div className="panel">
        <div style={{ overflow: 'auto' }}>
          {loading ? (
            <div className="empty">⏳ Laster…</div>
          ) : users.length === 0 ? (
            <div className="empty">{lang === 'no' ? 'Ingen brukere' : 'No users'}</div>
          ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th>{lang === 'no' ? 'Navn' : 'Name'}</th>
                <th>{lang === 'no' ? 'E-post' : 'Email'}</th>
                <th>{lang === 'no' ? 'Rolle' : 'Role'}</th>
                <th>{lang === 'no' ? 'Tenants' : 'Tenants'}</th>
                <th>{lang === 'no' ? 'Sist innlogget' : 'Last login'}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {users.map((u, i) => (
                <tr key={u.id}>
                  <td>
                    <div className="row" style={{ gap: 10, alignItems: 'center' }}>
                      <div className="avatar" style={{
                        width: 26, height: 26, borderRadius: '50%',
                        background: `hsl(${(i * 73) % 360} 60% 55%)`,
                        display: 'grid', placeItems: 'center', color: '#fff', fontSize: 10.5, fontWeight: 600
                      }}>{(u.name || u.email || '?').charAt(0).toUpperCase()}</div>
                      <span style={{ fontWeight: 500 }}>{u.name || '—'}</span>
                    </div>
                  </td>
                  <td className="muted">{u.email}</td>
                  <td>
                    {u.is_superadmin
                      ? <Pill tone="accent">Superadmin</Pill>
                      : <Pill tone="info">User</Pill>}
                    {!u.active && <Pill tone="empty" style={{ marginLeft: 4 }}>inaktiv</Pill>}
                  </td>
                  <td style={{ fontSize: 11.5 }}>
                    {(u.tenants || []).length === 0
                      ? <span className="muted">—</span>
                      : (u.tenants || []).map(a => (
                          <span key={a.tenant_id} className="pill" style={{ marginRight: 4, fontSize: 10 }}>
                            {a.tenant_name || (tenants.find(tn => tn.id === a.tenant_id) || {}).name || a.tenant_id}
                            {' · '}{USER_ROLE_LABELS[a.role] || a.role}
                          </span>
                        ))}
                  </td>
                  <td className="muted mono" style={{ fontSize: 11 }}>
                    {u.last_login_at
                      ? new Date(u.last_login_at).toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'short' })
                      : '—'}
                  </td>
                  <td className="right">
                    {me.is_superadmin && (
                      <button className="btn sm" onClick={() => setEditUser(u)}>
                        {lang === 'no' ? 'Endre' : 'Edit'}
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </div>
      </div>

      {editUser && (
        <UserEditModal
          user={editUser === 'new' ? null : editUser}
          tenants={tenants}
          lang={lang}
          onClose={() => setEditUser(null)}
          onSaved={() => { setEditUser(null); refresh(); }} />
      )}
    </div>
  );
};

const UserEditModal = ({ user, tenants, lang, onClose, onSaved }) => {
  const isNew = !user;
  const [form, setForm] = React.useState(() => user ? {
    email: user.email, name: user.name || '',
    is_superadmin: !!user.is_superadmin,
    is_production: !!user.is_production,
    active: user.active !== false,
    password: '',
  } : { email: '', name: '', is_superadmin: false, is_production: false, active: true, password: '' });
  const [assignments, setAssignments] = React.useState(() => user?.tenants || []);
  const [pendingTenant, setPendingTenant] = React.useState('');
  const [pendingRole, setPendingRole] = React.useState('operator');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

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

  const submitUser = async () => {
    setBusy(true); setErr(null);
    try {
      let userId;
      if (isNew) {
        if (!form.password) { setErr('Passord påkrevd'); setBusy(false); return; }
        const r = await window.api.userCreate({
          email: form.email,
          name: form.name || null,
          password: form.password,
          is_superadmin: form.is_superadmin,
          is_production: form.is_production,
        });
        userId = r.id || r.user_id;
      } else {
        const patch = {};
        if (form.name !== user.name) patch.name = form.name;
        if (form.is_superadmin !== user.is_superadmin) patch.is_superadmin = form.is_superadmin;
        if (form.is_production !== user.is_production) patch.is_production = form.is_production;
        if (form.active !== user.active) patch.active = form.active;
        // Backend leser `new_password` — før sendte UI `password`, som ble
        // ignorert stille mens UI meldte «lagret» (2026-09-05).
        if (form.password) patch.new_password = form.password;
        if (Object.keys(patch).length > 0) {
          await window.api.userUpdate(user.id, patch);
        }
        userId = user.id;
      }
      onSaved();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };

  const addAssignment = async () => {
    if (!pendingTenant || isNew) return;
    setBusy(true); setErr(null);
    try {
      await window.api.userAssignTenant(user.id, {
        tenant_id: pendingTenant, role: pendingRole,
      });
      onSaved();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };
  const removeAssignment = async (tenantId) => {
    setBusy(true);
    try {
      await window.api.userRevokeTenant(user.id, tenantId);
      onSaved();
    } 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={{ margin: '0 0 14px', fontSize: 15 }}>
          {isNew ? (lang === 'no' ? 'Ny bruker' : 'New user') : `Endre ${user.email}`}
        </h3>
        <div className="modal-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{ gridColumn: 'span 2' }}>
            <label className="muted" style={{ fontSize: 11 }}>E-post</label>
            <input className="input" type="email" value={form.email}
                   disabled={!isNew}
                   onChange={e => set('email', e.target.value)} />
          </div>
          <div style={{ gridColumn: 'span 2' }}>
            <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Navn' : 'Name'}</label>
            <input className="input" value={form.name} onChange={e => set('name', e.target.value)} />
          </div>
          <div style={{ gridColumn: 'span 2' }}>
            <label className="muted" style={{ fontSize: 11 }}>
              {isNew ? 'Passord' : (lang === 'no' ? 'Nytt passord (tom = behold)' : 'New password (blank=keep)')}
            </label>
            <input className="input" type="password" value={form.password}
                   onChange={e => set('password', e.target.value)} />
          </div>
        </div>
        <div className="row" style={{ marginTop: 10, gap: 12, fontSize: 12 }}>
          <label className="row" style={{ gap: 6 }}>
            <input type="checkbox" checked={form.is_superadmin}
                   onChange={e => set('is_superadmin', e.target.checked)} />
            Superadmin
          </label>
          <label className="row" style={{ gap: 6 }}
                 title={lang === 'no' ? 'Tilgang til produksjons-portalen (flash + montør-konsoll)' : 'Access to the production portal'}>
            <input type="checkbox" checked={form.is_production}
                   onChange={e => set('is_production', e.target.checked)} />
            {lang === 'no' ? 'Produksjon' : 'Production'}
          </label>
          {!isNew && (
            <label className="row" style={{ gap: 6 }}>
              <input type="checkbox" checked={form.active}
                     onChange={e => set('active', e.target.checked)} />
              {lang === 'no' ? 'Aktiv' : 'Active'}
            </label>
          )}
        </div>

        {/* Tenant-tilknytninger */}
        {!isNew && (
          <div style={{ marginTop: 16 }}>
            <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 6 }}>
              {lang === 'no' ? 'Tenant-tilgang' : 'Tenant access'}
            </div>
            {assignments.length === 0 && (
              <div className="muted" style={{ fontSize: 12, marginBottom: 6 }}>
                {lang === 'no' ? 'Ingen tilknytninger ennå' : 'No assignments yet'}
              </div>
            )}
            {/* Backend gir {tenant_id, role, tenant_name} — før leste UI a.id/a.name
                (undefined) og «×» kalte …/tenants/undefined (2026-09-05). */}
            {assignments.map(a => (
              <div key={a.tenant_id} className="row between" style={{
                padding: '6px 0', borderBottom: '1px solid var(--border)', fontSize: 12.5,
              }}>
                <span>
                  <strong>{a.tenant_name || (tenants.find(tn => tn.id === a.tenant_id) || {}).name || a.tenant_id}</strong>
                  {' · '}<span className="muted">{USER_ROLE_LABELS[a.role] || a.role}</span>
                </span>
                <button className="btn sm danger" disabled={busy}
                        onClick={() => removeAssignment(a.tenant_id)}>×</button>
              </div>
            ))}
            <div className="row" style={{ gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
              <select value={pendingTenant} onChange={e => setPendingTenant(e.target.value)}
                      style={{ flex: 1, minWidth: 140, background: 'var(--surface-2)', color: 'var(--text)',
                               border: '1px solid var(--border)', borderRadius: 4, padding: 6, fontSize: 12 }}>
                <option value="">— velg tenant —</option>
                {tenants.filter(t => !assignments.find(a => a.tenant_id === t.id))
                  .map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
              </select>
              <select value={pendingRole} onChange={e => setPendingRole(e.target.value)}
                      style={{ background: 'var(--surface-2)', color: 'var(--text)',
                               border: '1px solid var(--border)', borderRadius: 4, padding: 6, fontSize: 12 }}>
                <option value="operator">operator</option>
                <option value="tenant_worker">{USER_ROLE_LABELS.tenant_worker} (tenant_worker)</option>
                <option value="tenant_admin">tenant_admin</option>
              </select>
              <button className="btn sm primary" onClick={addAssignment}
                      disabled={busy || !pendingTenant}>+</button>
            </div>
          </div>
        )}

        {err && <div style={{ marginTop: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
        <div className="row" style={{ marginTop: 18, justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={busy}>
            {lang === 'no' ? 'Avbryt' : 'Cancel'}
          </button>
          <button className="btn primary" onClick={submitUser} disabled={busy}>
            {busy ? '⏳' : (lang === 'no' ? 'Lagre' : 'Save')}
          </button>
        </div>
      </div>
    </>
  );
};

/* === Per-tenant / per-automat prisstyring ===
 * Lar admin sette pris pr. flasketype som:
 *  - Standard for hele tenanten (automat_id = NULL)
 *  - Spesifikk for én automat (automat_id satt) — overstyrer tenant-pris
 */
const PricingManagerPanel = ({ lang, me }) => {
  // TENANT-SEPARASJON (2026-09-04): prismatrisen er tenantens EGEN. Er en
  // tenant valgt i sidemenyen (eller superadmin «ser som» tenant) vises og
  // redigeres KUN den tenanten — ikke en nedtrekksliste over alle tenants.
  // (Backend krever tenant_admin på tenanten uansett; dette lukker UI-siden.)
  const active = DATA.activeTenant;
  const superAll = !!(window.isSuperView && window.isSuperView())
    && (!active || active.id === '__all__');
  const tenants = (DATA.TENANTS || [])
    .filter(t => t.id !== '__all__')
    .filter(t => superAll || (active && t.id === active.id) || !active);
  const [tenantId, setTenantId] = React.useState(tenants[0]?.id || '');
  React.useEffect(() => {
    // Følg tenant-valget i sidemenyen
    if (tenants.length && !tenants.find(t => t.id === tenantId)) setTenantId(tenants[0].id);
  }, [active && active.id]);
  const [automatId, setAutomatId] = React.useState('');     // '' = tenant-bred
  const [rows, setRows] = React.useState([]);
  const [editing, setEditing] = React.useState({});         // {bottle_id: {base, min, in}}
  const [loading, setLoading] = React.useState(false);
  const [saving, setSaving] = React.useState(null);
  const [err, setErr] = React.useState(null);

  const tenantAutomats = (DATA.machines || []).filter(m => m.tenantId === tenantId);

  const load = React.useCallback(async () => {
    if (!tenantId) return;
    setLoading(true); setErr(null);
    try {
      const r = await window.api.listPriceOverrides(tenantId, automatId || null);
      setRows(r);
      // Reset edit-buffer
      const ed = {};
      r.forEach(x => {
        ed[x.bottle_id] = {
          base: x.override?.base_price ?? '',
          min:  x.override?.minimum_price ?? '',
          in:   x.override?.in_value ?? '',
          scope: x.override?.scope || (automatId ? 'automat' : 'tenant'),
        };
      });
      setEditing(ed);
    } catch (e) { setErr(e.message); }
    setLoading(false);
  }, [tenantId, automatId]);
  React.useEffect(() => { load(); }, [load]);

  const save = async (bid) => {
    const e = editing[bid] || {};
    setSaving(bid); setErr(null);
    try {
      await window.api.upsertPriceOverride({
        tenant_id: tenantId,
        automat_id: automatId || null,
        bottle_id: bid,
        base_price:    e.base === '' ? null : parseInt(e.base),
        minimum_price: e.min  === '' ? null : parseInt(e.min),
        in_value:      e.in   === '' ? null : parseInt(e.in),
        active: true,
      });
      await load();
    } catch (er) { setErr(er.message); }
    setSaving(null);
  };

  const clear = async (bid) => {
    if (!confirm(lang === 'no' ? 'Fjerne overstyring?' : 'Remove override?')) return;
    setSaving(bid); setErr(null);
    try {
      await window.api.deletePriceOverride(tenantId, bid, automatId || null);
      await load();
    } catch (er) { setErr(er.message); }
    setSaving(null);
  };

  // Sortiment: skru flasketype av/på for valgt scope (alle automater / én automat)
  const toggleOffered = async (bid, next) => {
    setSaving(bid); setErr(null);
    try {
      await window.api.setAssortment({
        tenant_id: tenantId, automat_id: automatId || null,
        bottle_id: bid, enabled: next,
      });
      await load();
    } catch (er) { setErr(er.message); }
    setSaving(null);
  };

  if (tenants.length === 0) return null;

  return (
    <div className="panel" style={{ marginBottom: 16 }}>
      <div className="panel-head">
        <h3>{lang === 'no' ? 'Prisstyring & sortiment' : 'Pricing & assortment'}</h3>
        <span className="muted" style={{ fontSize: 11 }}>
          {lang === 'no'
            ? 'Velg hvilke flasker som tilbys og sett pris — for alle automater (bulk) eller én spesifikk'
            : 'Choose offered bottles and set price — for all automats (bulk) or a specific one'}
        </span>
      </div>
      <div className="panel-body">
        <div className="row" style={{ gap: 12, marginBottom: 12, flexWrap: 'wrap' }}>
          <div>
            <label className="muted" style={{ fontSize: 11 }}>Tenant</label>
            {tenants.length > 1 ? (
              <select className="input" value={tenantId}
                      onChange={e => { setTenantId(e.target.value); setAutomatId(''); }}>
                {tenants.map(tn => <option key={tn.id} value={tn.id}>{tn.name}</option>)}
              </select>
            ) : (
              <div style={{ fontWeight: 600, padding: '6px 0' }}>{tenants[0]?.name || '—'}</div>
            )}
          </div>
          <div>
            <label className="muted" style={{ fontSize: 11 }}>
              {lang === 'no' ? 'Gjelder' : 'Applies to'}
            </label>
            <select className="input" value={automatId}
                    onChange={e => setAutomatId(e.target.value)}>
              <option value="">
                {lang === 'no' ? '— Alle automater i tenanten (standard) —' : '— All automats (default) —'}
              </option>
              {tenantAutomats.map(m => (
                <option key={m.id} value={m.id}>{m.location} ({m.id})</option>
              ))}
            </select>
          </div>
        </div>
        <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
          {automatId
            ? (lang === 'no'
                ? 'Overstyrer tenant-prisen kun for denne automaten. Tomme felt = bruk tenant-pris/default.'
                : 'Overrides only this automat. Empty = use tenant default.')
            : (lang === 'no'
                ? 'Setter prisen for HELE tenanten. Hver automat kan overstyres separat.'
                : 'Sets price for the WHOLE tenant. Each automat can be overridden separately.')}
        </div>
        {err && <div style={{ color: 'var(--danger)', marginBottom: 8 }}>❌ {err}</div>}
        {loading ? (
          <div className="empty">⏳</div>
        ) : (
          <table className="tbl" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>{lang === 'no' ? 'Flaske' : 'Bottle'}</th>
                <th style={{ textAlign: 'center' }}>{lang === 'no' ? 'Tilbys' : 'Offered'}</th>
                <th className="num">{lang === 'no' ? 'Standardpris (øre)' : 'Default (øre)'}</th>
                <th className="num">{lang === 'no' ? 'Pris (øre)' : 'Price (øre)'}</th>
                <th className="num">{lang === 'no' ? 'Minstepris' : 'Minimum'}</th>
                <th className="num">{lang === 'no' ? 'Innbytte-verdi' : 'Trade-in'}</th>
                <th>Scope</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => {
                const ed = editing[r.bottle_id] || {};
                const hasOverride = r.override != null;
                return (
                  <tr key={r.bottle_id}>
                    <td>
                      <div style={{ fontWeight: 500 }}>{r.display_name}</div>
                      <div className="muted mono" style={{ fontSize: 10 }}>{r.code}</div>
                    </td>
                    <td style={{ textAlign: 'center' }}>
                      <input type="checkbox" checked={r.offered !== false}
                             disabled={saving === r.bottle_id}
                             title={r.offered_scope === 'automat'
                               ? (lang === 'no' ? 'Satt for denne automaten' : 'Set for this automat')
                               : r.offered_scope === 'tenant'
                               ? (lang === 'no' ? 'Satt for hele tenanten' : 'Set tenant-wide')
                               : (lang === 'no' ? 'Standard (tilbys)' : 'Default (offered)')}
                             onChange={e => toggleOffered(r.bottle_id, e.target.checked)} />
                    </td>
                    <td className="num muted">{r.default_base_price}</td>
                    <td><input className="input" type="number" value={ed.base}
                                 placeholder={String(r.default_base_price)}
                                 onChange={e => setEditing(s => ({ ...s,
                                   [r.bottle_id]: { ...ed, base: e.target.value }}))}
                                 style={{ width: 90 }} /></td>
                    <td><input className="input" type="number" value={ed.min}
                                 placeholder={String(r.default_minimum_price)}
                                 onChange={e => setEditing(s => ({ ...s,
                                   [r.bottle_id]: { ...ed, min: e.target.value }}))}
                                 style={{ width: 90 }} /></td>
                    <td><input className="input" type="number" value={ed.in}
                                 placeholder={String(r.default_in_value)}
                                 onChange={e => setEditing(s => ({ ...s,
                                   [r.bottle_id]: { ...ed, in: e.target.value }}))}
                                 style={{ width: 90 }} /></td>
                    <td>
                      {hasOverride
                        ? (r.override.scope === 'automat'
                            ? <Pill tone="accent">{lang === 'no' ? 'automat' : 'automat'}</Pill>
                            : <Pill tone="info">{lang === 'no' ? 'tenant' : 'tenant'}</Pill>)
                        : <span className="muted">—</span>}
                    </td>
                    <td>
                      <div className="row" style={{ gap: 4 }}>
                        <button className="btn sm primary" disabled={saving === r.bottle_id}
                                onClick={() => save(r.bottle_id)}>
                          {saving === r.bottle_id ? '⏳' : (lang === 'no' ? 'Lagre' : 'Save')}
                        </button>
                        {hasOverride && (
                          <button className="btn sm" disabled={saving === r.bottle_id}
                                  onClick={() => clear(r.bottle_id)}>
                            ✕
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Transactions, TransactionDetail, Events, MachineSettings, Bottles, Users, PricingManagerPanel });