/* Realtime inventory (24 shelves) + Shelves tab + Shelf drawer */

const STATE_LABELS = (lang) => ({
  full: I18N[lang].state_full,
  empty: I18N[lang].state_empty,
  vacant: I18N[lang].state_vacant,
  disabled: I18N[lang].state_disabled,
  error: I18N[lang].state_error,
});

const Inventory = ({ machine, lang }) => {
  const t = I18N[lang];
  const [selected, setSelected] = React.useState(null);
  const sl = STATE_LABELS(lang);
  // Mobil: detaljpanelet ligger UNDER hylle-flisene når kolonnene stables —
  // scroll det inn når en hylle velges, ellers ser det ut som ingenting skjer.
  const detailRef = React.useRef(null);
  const velgHylle = React.useCallback((sh) => {
    setSelected(sh);
    if (sh && window.matchMedia('(max-width: 900px)').matches) {
      setTimeout(() => detailRef.current?.scrollIntoView(
        { behavior: 'smooth', block: 'start' }), 60);
    }
  }, []);

  // EKTE sanntid (2026-09-03): poll hyllene hvert 10. sek. Før var visningen
  // et statisk øyeblikksbilde fra innlogging — innkomne returflasker
  // (empty_bottle) fra kundebytter dukket aldri opp.
  const [rev, setRev] = React.useState(0);
  const [lastSync, setLastSync] = React.useState(Date.now());
  const syncShelves = React.useCallback(async () => {
    try {
      const fresh = await window.api.refreshMachineShelves(machine.id);
      machine.shelves.splice(0, machine.shelves.length, ...fresh);
      setSelected(sel => sel ? (fresh.find(f => f.rawShelfId === sel.rawShelfId) || null) : null);
      setLastSync(Date.now());
      setRev(r => r + 1);
    } catch (e) { /* nettverksglipp — prøver igjen neste tick */ }
  }, [machine]);
  React.useEffect(() => {
    const iv = setInterval(syncShelves, 10000);
    return () => clearInterval(iv);
  }, [syncShelves]);

  // Dynamic counts: state-counters + per-bottle-code counters
  // (vi vet ikke navnene på flasketypene før vi har sett dataen, så vi
  // bygger en map per kode → {name, image, full, empty})
  const { counts, byType } = React.useMemo(() => {
    const c = { full: 0, empty: 0, vacant: 0, disabled: 0, error: 0 };
    const t = {};   // code → { name, image, full, empty }
    machine.shelves.forEach(s => {
      c[s.state] = (c[s.state] || 0) + 1;
      if (s.bottle) {
        if (!t[s.bottle]) t[s.bottle] = { name: s.bottleName || s.bottle, image: s.bottleImage, full: 0, empty: 0 };
        if (s.state === 'full')  t[s.bottle].full++;
        if (s.state === 'empty') t[s.bottle].empty++;
      }
    });
    return { counts: c, byType: t };
  }, [machine.shelves, rev]);
  const bottleEntries = Object.entries(byType).sort((a, b) => (b[1].full + b[1].empty) - (a[1].full + a[1].empty));

  return (
    <>
      <div className="split-7-5">
        <div className="col" style={{ gap: 16 }}>
          <div className="panel">
            <div className="panel-head">
              <h3>{t.tab_inventory}</h3>
              <div className="actions">
                {/* Totaler for HELE automaten (ikke per seksjon) — samme
                    typografi for full/tom/ledig. */}
                <span className="row" style={{ gap: 10, fontSize: 12, fontWeight: 600 }}>
                  <span style={{ color: 'var(--success)' }}>{counts.full} full</span>
                  <span style={{ color: 'var(--danger)' }}>{counts.empty} tom</span>
                  <span style={{ color: 'var(--text-dim)' }}>{counts.vacant} ledig</span>
                </span>
                <span className="live">{t.live}</span>
                <span className="muted" style={{ fontSize: 11.5 }}>
                  {lang === 'no' ? 'Oppdatert' : 'Updated'} {Math.max(0, Math.round((Date.now() - lastSync) / 1000))}s {lang === 'no' ? 'siden' : 'ago'}
                </span>
                <button className="btn sm" onClick={syncShelves}><Icon name="refresh" size={12} />{t.refresh}</button>
              </div>
            </div>
            <div className="panel-body">
              <Cabinets machine={machine} selected={selected} onSelect={velgHylle} lang={lang} />
              <div className="legend" style={{ marginTop: 14 }}>
                <span className="item"><span className="sw" style={{ background: 'var(--success)' }} /> {sl.full} ({counts.full})</span>
                <span className="item"><span className="sw" style={{ background: 'var(--warn)' }} /> {sl.empty} ({counts.empty})</span>
                <span className="item"><span className="sw" style={{ background: 'var(--surface-3)', border: '1px solid var(--border)' }} /> {sl.vacant} ({counts.vacant})</span>
                <span className="item"><span className="sw" style={{ background: 'repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 3px, var(--surface) 3px, var(--surface) 6px)' }} /> {sl.disabled} ({counts.disabled})</span>
                <span className="item"><span className="sw" style={{ background: 'var(--danger)' }} /> {sl.error} ({counts.error})</span>
              </div>
            </div>
          </div>
        </div>

        <div className="col" style={{ gap: 16 }}>
          <div className="panel">
            <div className="panel-head"><h3>{lang === 'no' ? 'Beholdning' : 'Inventory'}</h3></div>
            <div className="panel-body">
              <div className="row" style={{ gap: 16 }}>
                <Donut size={120} stroke={18}
                  segments={[
                    { value: counts.full, color: 'var(--success)' },
                    { value: counts.empty, color: 'var(--warn)' },
                    { value: counts.vacant, color: 'var(--surface-3)' },
                    { value: counts.disabled + counts.error, color: 'var(--danger)' },
                  ]} />
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {bottleEntries.length === 0 && (
                    <div className="muted" style={{ fontSize: 11.5 }}>{lang === 'no' ? 'Ingen flasker registrert' : 'No bottles registered'}</div>
                  )}
                  {bottleEntries.map(([code, info]) => (
                    <InvRow key={code} color="var(--success)"
                            image={info.image}
                            label={`${info.name}`}
                            sub={info.empty > 0 ? `${info.empty} ${sl.empty.toLowerCase()}` : null}
                            val={info.full} />
                  ))}
                  <InvRow color="var(--warn)" label={sl.empty} val={counts.empty || 0} />
                  <InvRow color="var(--surface-3)" label={sl.vacant} val={counts.vacant || 0} bordered />
                  <InvRow color="var(--danger)" label={`${sl.disabled} / ${sl.error}`} val={(counts.disabled || 0) + (counts.error || 0)} />
                </div>
              </div>
            </div>
          </div>

          {selected ? (
            <div ref={detailRef} style={{ scrollMarginTop: 62 }}>
              <ShelfDetail shelf={selected} machine={machine} lang={lang}
                onClose={() => setSelected(null)}
                onReload={machine._onReload}
                onRefresh={syncShelves} />
            </div>
          ) : (
            <div className="panel">
              <div className="panel-head"><h3>{lang === 'no' ? 'Velg en hylle' : 'Select a shelf'}</h3></div>
              <div className="empty">
                <Icon name="door" size={28} style={{ color: 'var(--text-disabled)' }} />
                <div style={{ marginTop: 10 }}>{lang === 'no' ? 'Klikk en hylle for detaljer, kamerabilde og styring' : 'Click a shelf for details, camera image and control'}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

const InvRow = ({ color, label, val, bordered, image, sub }) => (
  <div className="row between" style={{ alignItems: 'center' }}>
    <span className="row" style={{ gap: 8, alignItems: 'center', minWidth: 0 }}>
      {image ? (
        <img src={`/app/img/bottles/${image}`} alt="" style={{ width: 22, height: 28, objectFit: 'contain' }}
             onError={e => { e.target.style.display = 'none'; }} />
      ) : (
        <span style={{ width: 10, height: 10, borderRadius: 2, background: color, border: bordered ? '1px solid var(--border)' : 'none' }} />
      )}
      <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <span style={{ fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
        {sub && <span className="muted" style={{ fontSize: 10.5 }}>{sub}</span>}
      </span>
    </span>
    <span className="num" style={{ fontWeight: 600 }}>{val}</span>
  </div>
);

const Cabinets = ({ machine, selected, onSelect, lang }) => {
  const t = I18N[lang];
  const A = machine.shelves.filter(s => s.cabinet === 'A');
  const B = machine.shelves.filter(s => s.cabinet === 'B');
  return (
    <div className="cabinets">
      <Cabinet title={t.cabinet_front} sub={t.cabinet_sub} shelves={A} selected={selected} onSelect={onSelect} lang={lang} />
      <Cabinet title={t.cabinet_back} sub={t.cabinet_sub} shelves={B} selected={selected} onSelect={onSelect} lang={lang} />
    </div>
  );
};

const Cabinet = ({ title, sub, shelves, selected, onSelect, lang }) => {
  const sl = STATE_LABELS(lang);
  // Totaler vises samlet i panel-hodet (2026-09-04) — ikke per seksjon.
  return (
    <div className="cabinet">
      <div className="cabinet-head">
        <div>
          <div className="title">{title}</div>
          <div className="sub">{sub}</div>
        </div>
      </div>
      <div className="cabinet-grid">
        {shelves.map(sh => (
          <ShelfTile key={sh.id} sh={sh} selected={selected} onSelect={onSelect} sl={sl} />
        ))}
      </div>
    </div>
  );
};

/* En enkelt hylle — kompakt flis med tydelig flasketype i ramma */
const ShelfTile = ({ sh, selected, onSelect, sl }) => {
  const bottleImg = sh.bottleImage
    ? `/app/img/bottles/${sh.bottleImage}`
    : null;
  const isFull = sh.state === 'full';
  const isEmpty = sh.state === 'empty';
  const isVacant = sh.state === 'vacant';
  const isError = sh.state === 'error';
  const isDisabled = sh.state === 'disabled';
  const stateClass = `state-${sh.state}`;
  // Kort, tydelig typeetikett: «11 kg» + materiale (Stål/Kompositt/…)
  const wt = sh.bottle ? window.bottleHelpers?.weightKg(sh.bottle) : null;
  const mat = sh.bottle ? window.bottleHelpers?.material(sh.bottle) : null;
  const matLabel = mat ? (window.bottleHelpers?.materialLabels?.[mat]?.single || '') : '';
  return (
    <div className={`shelf shelf-rich ${stateClass}` + (selected && selected.id === sh.id ? ' selected' : '')}
         onClick={() => onSelect(sh)}>
      {/* topp-stripe: dør-id og status-badge */}
      <div className="shelf-rich-head">
        <span className="sh-id">{sh.id}</span>
        <span className={`shelf-status-pill ${sh.state}`}>{sl[sh.state]}</span>
      </div>

      {/* hoved-innhold: lite flaskebilde + STOR typeetikett */}
      <div className="shelf-rich-body" style={{ gap: 6 }}>
        {bottleImg && (isFull || isEmpty) && (
          <img src={bottleImg} alt=""
               className={`shelf-bottle-img ${isEmpty ? 'is-empty' : ''}`}
               style={{ maxWidth: '38%' }}
               onError={e => { e.target.style.display = 'none'; }} />
        )}
        {(isFull || isEmpty) && sh.bottle && (
          <div className="shelf-type-badge">
            {wt ? `${wt} kg` : (sh.bottleName || sh.bottle)}
            {matLabel && <span className="mat">{matLabel}</span>}
          </div>
        )}
        {isVacant && (
          <div className="shelf-rich-placeholder">
            <span>ledig</span>
          </div>
        )}
        {isDisabled && (
          <div className="shelf-rich-placeholder">
            <Icon name="lock" size={16} />
            <span>deaktivert</span>
          </div>
        )}
        {isError && (
          <div className="shelf-rich-placeholder">
            <Icon name="warning" size={18} style={{ color: 'var(--danger)' }} />
            <span>feil</span>
          </div>
        )}
      </div>

      {/* hjørne-indikator */}
      {isFull && <div className="shelf-corner-full" title="Full">●</div>}
      {isEmpty && <div className="shelf-corner-empty" title="Tom">○</div>}
    </div>
  );
};

const ShelfDetail = ({ shelf, machine, lang, onClose, onReload, onRefresh }) => {
  const t = I18N[lang];
  const sl = STATE_LABELS(lang);
  const isSuper = !!(window.isSuperView && window.isSuperView());
  const [busy, setBusy] = React.useState(null);
  const safe = async (label, fn) => {
    setBusy(label);
    try {
      await fn();
      // onRefresh (hylle-poll) oppdaterer den VALGTE hylla straks — bl.a. det
      // nye bildet etter «Ta nytt bilde» (URL-en er versjonert på bilde-id).
      if (onRefresh) await onRefresh();
      if (onReload) await onReload();
    }
    catch (e) { alert(`${label}: ${e.message}`); }
    finally { setBusy(null); }
  };
  return (
    <div className="panel">
      <div className="panel-head">
        <h3>{lang === 'no' ? 'Hylle' : 'Shelf'} <span className="mono">{shelf.id}</span> · <span className={`sh-state ${shelf.state}`}>{sl[shelf.state]}</span></h3>
        <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
      </div>
      <div className="panel-body">
        {/* Flaska i kammeret — samme illustrasjon som salgsskjermen. For
            test-automater ER dette den simulerte flaska. */}
        {shelf.bottle && (
          <div className={`chamber-bottle state-${shelf.state}`}>
            <img src={`/app/img/bottles/${shelf.bottleImage || (shelf.bottle + '.png')}`} alt=""
                 onError={e => { e.target.onerror = null; e.target.src = '/app/img/bottles/generic.svg'; }} />
            <div className="chamber-bottle-meta">
              <div className="name">{shelf.bottleName || shelf.bottle}</div>
              <div className={`sh-state ${shelf.state}`}>
                {sl[shelf.state]}{machine.isTest ? ' · simulert' : ''}
              </div>
            </div>
          </div>
        )}
        <CamShot machineId={machine.id} shelfId={shelf.id} cameraId={shelf.cameraId} bottle={shelf.bottle}
                 state={shelf.state} lang={lang} realImageUrl={shelf.lastImageUrl} />

        <div className="kvp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginTop: 12 }}>
          <KVP label={lang === 'no' ? 'Kamera' : 'Camera'} value={`CAM-${shelf.cameraId}`} />
          <KVP label={lang === 'no' ? 'Posisjon' : 'Position'} value={`${shelf.cabinet} · ${lang === 'no' ? 'rad' : 'row'} ${shelf.row + 1}, ${lang === 'no' ? 'kol' : 'col'} ${shelf.col + 1}`} />
          <KVP label={lang === 'no' ? 'Innhold' : 'Contents'} value={shelf.bottleName || '—'} />
          {/* AI-konfidens er plattform-/driftsinfo — kun superadmin */}
          {isSuper && (
            <KVP label={lang === 'no' ? 'AI-konfidens' : 'AI confidence'} value={shelf.lastScore != null ? `${Math.round(shelf.lastScore * 100)} %` : '—'} />
          )}
          <KVP label={t.last_event} value={`${shelf.lastEvent} · ${shelf.lastEventAt}`} colspan={isSuper ? 2 : 1} />
        </div>

        <div className="section-title" style={{ marginTop: 14, marginBottom: 8 }}>{t.shelf_actions}</div>
        {machine.kind === 'legacy' ? (
          <LegacyShelfActions shelf={shelf} machine={machine} onReload={onReload}
                              busy={busy} safe={safe} />
        ) : (
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <button className="btn" disabled={busy != null}
              onClick={() => safe('Åpne dør', () => window.api.testDoor(machine.id, shelf.rawDoor, true))}>
              <Icon name="unlock" size={14} />{t.btn_unlock}
            </button>
            <button className="btn" disabled={busy != null}
              onClick={() => safe('Ta nytt bilde', async () => {
                // Ikke-invasiv hyllesjekk: kameraet som SER hylla fotograferer,
                // ML kjører — poll til resultatet er klart (som /prod).
                await window.api.recheckShelf(machine.id, shelf.rawShelfId);
                for (let i = 0; i < 20; i++) {
                  await new Promise(r => setTimeout(r, 1500));
                  const r = await window.api.checkResult(machine.id, shelf.rawShelfId);
                  if (!r.pending) return;
                }
                throw new Error('Ingen svar fra kameraet på 30 s — er modulen online?');
              })}>
              <Icon name="camera" size={14} />{t.btn_capture}
            </button>
            <BottleOverride shelf={shelf} machine={machine} lang={lang} onDone={onReload} />
            {shelf.bottle && shelf.state === 'full' && (
              <button className="btn" disabled={busy != null}
                onClick={() => safe('Marker tomflaske', () => window.api.overrideShelf(machine.id, shelf.rawShelfId, shelf.bottle, 'empty_bottle'))}>
                {lang === 'no' ? 'Marker tomflaske' : 'Mark empty bottle'}
              </button>
            )}
            <button className="btn" disabled={busy != null}
              onClick={() => safe('Marker ledig', () => window.api.overrideShelf(machine.id, shelf.rawShelfId, null, 'empty'))}>
              {lang === 'no' ? 'Marker ledig' : 'Mark vacant'}
            </button>
            {shelf.state !== 'error' ? (
              <button className="btn danger" disabled={busy != null}
                onClick={() => safe('Deaktiver', () => window.api.overrideShelf(machine.id, shelf.rawShelfId, null, 'faulty'))}>
                {t.btn_disable}
              </button>
            ) : (
              <button className="btn primary" disabled={busy != null}
                onClick={() => safe('Aktiver', () => window.api.overrideShelf(machine.id, shelf.rawShelfId, null, 'empty'))}>
                {t.btn_enable}
              </button>
            )}
          </div>
        )}
        {busy && <div className="muted" style={{ fontSize: 11.5, marginTop: 8 }}>⏳ {busy}…</div>}
      </div>
    </div>
  );
};

/* === LEGACY HANDLINGER === */
const LegacyShelfActions = ({ shelf, machine, onReload, busy, safe }) => {
  const [shadowResult, setShadowResult] = React.useState(null);
  const [running, setRunning] = React.useState(null);
  // Skygge-sjekk (v1 vs v2-ML m/ konfidenser) er plattform-diagnostikk —
  // kun superadmin-visning
  const isSuper = !!(window.isSuperView && window.isSuperView());

  const doShadow = async (useExisting = false) => {
    setShadowResult(null);
    setRunning(useExisting ? 'shadow-existing' : 'shadow');
    try {
      const door = shelf.door || shelf.rawDoor;
      const r = await window.api.legacyShadowCheck(machine.id, door, 30, useExisting);
      setShadowResult(r);
      if (!useExisting && onReload) await onReload();
    } catch (e) { alert('Skygge-sjekk: ' + (e?.message || JSON.stringify(e))); }
    finally { setRunning(null); }
  };

  const doCheck = () => safe('Ta nytt bilde (v1)',
    () => window.api.legacyCheckDoor(machine.id, shelf.door));

  const doOpen = () => {
    if (!confirm(
      `⚠ ÅPNER FAKTISK DØR #${shelf.door} på ${machine.location}!\n\n` +
      `Dette KAN forstyrre en pågående kunde-handel. Sikker?`
    )) return;
    if (!confirm('Bekreft enda en gang — døren åpnes umiddelbart.')) return;
    safe('Dør åpnet', () => window.api.legacyOpenDoor(machine.id, shelf.door));
  };

  return (
    <>
      <div style={{
        padding: 10, marginBottom: 10,
        background: 'var(--info-soft)', borderRadius: 'var(--radius)',
        borderLeft: '3px solid var(--info)', fontSize: 12, color: 'var(--text-dim)',
      }}>
        ℹ <strong>v1 (gammel) automat — i drift.</strong> Kommandoer skrives til Firestore
        og kan ta 2-15 sekunder før v1 RPi plukker dem opp.
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        <button className="btn" disabled={busy != null || running} onClick={doCheck}>
          <Icon name="camera" size={14} />Ta nytt bilde (v1-ML)
        </button>
        {isSuper && (<>
          <button className="btn" disabled={busy != null || running} onClick={() => doShadow(true)}>
            <Icon name="eye" size={14} />v2-sjekk eksisterende bilde
          </button>
          <button className="btn primary" disabled={busy != null || running} onClick={() => doShadow(false)}>
            <Icon name="eye" size={14} />Skygge-sjekk (nytt bilde + v1+v2)
          </button>
        </>)}
        <button className="btn danger" disabled={busy != null || running} onClick={doOpen}>
          <Icon name="unlock" size={14} />Åpne dør
        </button>
      </div>
      {running === 'shadow-existing' && (
        <div className="muted" style={{ fontSize: 12, marginTop: 10 }}>
          ⏳ Kjører v2-ML mot eksisterende bilde…
        </div>
      )}
      {running === 'shadow' && (
        <div className="muted" style={{ fontSize: 12, marginTop: 10 }}>
          ⏳ Venter på at v1 tar bilde og laster opp… (opptil 30 sek)
        </div>
      )}
      {shadowResult && isSuper && <ShadowResult result={shadowResult} />}
    </>
  );
};

const ShadowResult = ({ result }) => {
  if (!result.ok) {
    return (
      <div style={{
        marginTop: 12, padding: 12, background: 'var(--warn-soft)',
        color: 'var(--warn)', borderRadius: 'var(--radius)',
        borderLeft: '3px solid var(--warn)', fontSize: 12,
      }}>
        ❌ Skygge-sjekk feilet: <strong>{result.reason}</strong>
        {result.note && <div style={{ marginTop: 6, opacity: 0.8 }}>{result.note}</div>}
      </div>
    );
  }
  const { v1, v2, agreement } = result;
  return (
    <div style={{
      marginTop: 12, padding: 14, background: 'var(--surface-2)',
      borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)',
    }}>
      <div className="section-title" style={{ marginBottom: 10 }}>
        Skygge-sjekk resultat
        {result.used_existing && <span className="pill" style={{ marginLeft: 8, fontSize: 10 }}>EKSISTERENDE BILDE</span>}
        {agreement.valve_match && agreement.bottle_match
          ? <span className="pill ok" style={{ marginLeft: 8 }}>v1 og v2 ENIG ✓</span>
          : <span className="pill warn" style={{ marginLeft: 8 }}>UENIGHET ⚠</span>}
      </div>
      {result.ml_stub && (
        <div style={{
          marginBottom: 10, padding: '8px 12px', fontSize: 11.5,
          background: 'var(--warn-soft)', color: 'var(--warn)',
          borderLeft: '3px solid var(--warn)', borderRadius: 4,
        }}>
          ⚠ <strong>v2-ML kjører i stub-modus</strong> — ingen TensorFlow-modell lastet,
          så v2-resultatet er tilfeldig generert. Last opp modell til <code>/app/models/bottle_v3</code>
          og <code>/app/models/valve_v1</code> for ekte ML.
        </div>
      )}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
        <div style={{
          padding: 10, background: 'var(--surface)', borderRadius: 6,
          border: '1px solid var(--border)',
        }}>
          <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase' }}>v1 (live)</div>
          <div style={{ fontWeight: 600, fontSize: 13, marginTop: 4 }}>{v1.label || '—'}</div>
          <div className="muted" style={{ fontSize: 11.5 }}>
            Ventil: {v1.valve || '—'} · konfidens: {v1.score != null ? (v1.score * 100).toFixed(0) + '%' : '—'}
          </div>
        </div>
        <div style={{
          padding: 10, background: 'var(--surface)', borderRadius: 6,
          border: '1px solid var(--border)',
        }}>
          <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase' }}>v2 (skygge)</div>
          <div style={{ fontWeight: 600, fontSize: 13, marginTop: 4 }}>
            {v2.bottle?.label || '—'}
          </div>
          <div className="muted" style={{ fontSize: 11.5 }}>
            Ventil: {v2.valve?.label || '—'} ({((v2.valve?.score || 0) * 100).toFixed(0)}%) ·
            Flaske: {((v2.bottle?.score || 0) * 100).toFixed(0)}%
          </div>
        </div>
      </div>
      <div style={{
        marginTop: 10, fontSize: 11.5, color: 'var(--text-faint)',
        display: 'flex', gap: 14, flexWrap: 'wrap',
      }}>
        <span>Ventil-match: {agreement.valve_match ? '✓' : '✗'}</span>
        <span>Flaske-match: {agreement.bottle_match ? '✓' : '✗'}</span>
        <span>v2 kombinert OK: {agreement.v2_combined_ok ? '✓' : '✗'}</span>
        {v2.mismatch && <span style={{ color: 'var(--warn)' }}>⚠ v2 valve/bottle mismatch</span>}
      </div>

      {/* === Detaljer: top-3 alternativer + anti-spoof + presence === */}
      {v2.bottle?.top3 && v2.bottle.top3.length > 0 && (
        <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
          <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', marginBottom: 6 }}>
            v2 top-3 alternativer (embedding cosine-sim)
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {v2.bottle.top3.map((t, i) => (
              <div key={t.code} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5 }}>
                <span style={{ minWidth: 90, fontWeight: i === 0 ? 600 : 400 }}>{t.code}</span>
                <div style={{ flex: 1, height: 6, background: 'var(--surface-3)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{
                    width: (t.score * 100) + '%', height: '100%',
                    background: i === 0 ? 'var(--success)' : 'var(--accent)',
                    opacity: i === 0 ? 1 : 0.55,
                  }} />
                </div>
                <span className="mono" style={{ fontSize: 11, minWidth: 38, textAlign: 'right' }}>
                  {(t.score * 100).toFixed(1)}%
                </span>
              </div>
            ))}
          </div>
          {v2.bottle?.margin != null && (
            <div className="muted" style={{ fontSize: 10.5, marginTop: 6 }}>
              Margin til 2.-plass: {(v2.bottle.margin * 100).toFixed(1)} pp
              {v2.bottle.margin < 0.05 && <span style={{ color: 'var(--warn)', marginLeft: 6 }}>⚠ liten margin, usikker</span>}
            </div>
          )}
        </div>
      )}

      {v2.anti_spoof && (
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase' }}>
              Anti-spoof analyse
            </span>
            <span className={'pill ' + (v2.anti_spoof.is_spoof ? 'danger' : 'ok')} style={{ fontSize: 10 }}>
              {v2.anti_spoof.is_spoof ? '⚠ MISTENKELIG' : '✓ EKTE'} ({(v2.anti_spoof.spoof_score * 100).toFixed(0)}%)
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))', gap: 8, fontSize: 11 }}>
            {Object.entries(v2.anti_spoof.signals || {}).map(([k, v]) => (
              <div key={k} style={{
                padding: '6px 8px', background: 'var(--surface)', borderRadius: 4,
                border: '1px solid var(--border)',
              }}>
                <div className="muted" style={{ fontSize: 9.5, textTransform: 'uppercase' }}>{k}</div>
                <div style={{ fontWeight: 600, color: v > 0.55 ? 'var(--warn)' : 'inherit' }}>
                  {(v * 100).toFixed(0)}%
                </div>
              </div>
            ))}
          </div>
          {v2.anti_spoof.reasons?.length > 0 && (
            <div style={{ marginTop: 6, fontSize: 11, color: 'var(--warn)' }}>
              ⚠ {v2.anti_spoof.reasons.join(' · ')}
            </div>
          )}
        </div>
      )}

      {v2.presence && (
        <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-faint)' }}>
          Objekt-presence: {v2.presence.has_bottle ? '✓' : '—'}
          ({(v2.presence.confidence * 100).toFixed(0)}% bottle-lignende)
        </div>
      )}

      {v2.pipeline_version && (
        <div className="muted" style={{ fontSize: 10, marginTop: 8, fontStyle: 'italic' }}>
          Pipeline: {v2.pipeline_version}
          {v2.using_embedding_classifier && ' · embedding cosine-sim'}
        </div>
      )}
    </div>
  );
};

/* Force-set bottle type dropdown.

   2026-09-04: (a) lista rendres position:fixed ut fra knappen så den ALDRI
   klippes av panel-ramma (før ble den skjult bak hylle-info); (b) viser kun
   flasketyper som er i bruk på automaten (sortimentet + det som står i
   hyllene) — ikke hele plattform-katalogen. */
const BottleOverride = ({ shelf, machine, lang, onDone }) => {
  const [open, setOpen] = React.useState(false);
  const [pos, setPos] = React.useState(null);
  const [inUse, setInUse] = React.useState(null);   // Set av bottle-koder
  const btnRef = React.useRef(null);

  React.useEffect(() => {
    let dau = false;
    // Koder som står i automaten akkurat nå (alltid relevante)
    const shelfCodes = new Set((machine.shelves || [])
      .map(s => s.bottle).filter(Boolean));
    if (!machine.tenantId) { setInUse(shelfCodes); return; }
    window.api.listPriceOverrides(machine.tenantId, machine.id)
      .then(rows => {
        if (dau) return;
        rows.filter(r => r.offered).forEach(r => shelfCodes.add(r.code));
        setInUse(new Set(shelfCodes));
      })
      .catch(() => { if (!dau) setInUse(shelfCodes); });
    return () => { dau = true; };
  }, [machine.id]);

  const bottles = (window.DATA?.BOTTLE_TYPES || [])
    .filter(b => !inUse || inUse.size === 0 || inUse.has(b.id));

  const toggle = () => {
    if (!open && btnRef.current) {
      const r = btnRef.current.getBoundingClientRect();
      // Åpne opp/ned avhengig av plass; fixed = klippes aldri av paneler.
      // maxHeight klemmes mot FAKTISK plass (lav viewport / telefon i landskap).
      const plassNed = window.innerHeight - r.bottom - 12;
      const plassOpp = r.top - 12;
      const nedover = plassNed >= Math.min(300, plassOpp) || plassNed >= 200;
      setPos({
        left: Math.max(8, Math.min(r.left, window.innerWidth - 260)),
        top: nedover ? r.bottom + 4 : null,
        bottom: nedover ? null : (window.innerHeight - r.top + 4),
        maxH: Math.max(120, Math.min(300, nedover ? plassNed : plassOpp)),
      });
    }
    setOpen(o => !o);
  };

  return (
    <>
      <button ref={btnRef} className="btn" onClick={toggle}>
        {lang === 'no' ? 'Sett type ▾' : 'Set type ▾'}
      </button>
      {open && pos && (
        <>
          <div style={{ position: 'fixed', inset: 0, zIndex: 998 }}
               onClick={() => setOpen(false)} />
          <div style={{
            position: 'fixed', left: pos.left,
            ...(pos.top != null ? { top: pos.top } : { bottom: pos.bottom }),
            minWidth: 240,
            background: 'var(--surface)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-md)',
            zIndex: 999, padding: 4, maxHeight: pos.maxH || 300, overflow: 'auto',
          }}>
            {bottles.length === 0 && (
              <div className="muted" style={{ padding: 10, fontSize: 12 }}>
                {lang === 'no' ? 'Ingen flasketyper i sortimentet' : 'No bottle types in assortment'}
              </div>
            )}
            {bottles.map(b => (
              <div key={b.id} className="nav-item" style={{ fontSize: 12.5 }}
                onClick={async () => {
                  setOpen(false);
                  try {
                    await window.api.overrideShelf(machine.id, shelf.rawShelfId, b.id, 'full');
                    if (onDone) await onDone();
                  } catch (e) { alert(e.message); }
                }}>
                {b.name}
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
};

const KVP = ({ label, value, colspan = 1 }) => (
  <div style={{
    gridColumn: `span ${colspan}`,
    background: 'var(--surface-2)',
    border: '1px solid var(--border)',
    borderRadius: 'var(--radius)',
    padding: '7px 10px'
  }}>
    <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
    <div style={{ fontSize: 12.5, fontWeight: 500, marginTop: 2 }}>{value}</div>
  </div>
);

/* Camera shot — EKTE bilde fra backend. Ingen tegnet SVG-mock lenger
   (mock-revisjon 2026-09-04): finnes ikke bilde, sier vi det ærlig. */
const CamShot = ({ machineId, shelfId, cameraId, bottle, state, lang, realImageUrl }) => {
  const [imgSrc, setImgSrc] = React.useState(null);
  const [feil, setFeil] = React.useState(null);
  React.useEffect(() => {
    if (!realImageUrl) { setImgSrc(null); setFeil(null); return; }
    let cancelled = false;
    setFeil(null);
    window.authedImageUrl(realImageUrl).then(url => { if (!cancelled) setImgSrc(url); })
      .catch(e => { if (!cancelled) { setImgSrc(null); setFeil(e.message); } });
    return () => { cancelled = true; };
  }, [realImageUrl]);

  if (imgSrc) {
    return (
      <div className="cam-shot">
        <img src={imgSrc} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div className="label-overlay">CAM-{cameraId} · {shelfId}</div>
        <div className="ts-overlay">{lang === 'no' ? 'Sist tatt' : 'Last taken'}</div>
      </div>
    );
  }

  return (
    <div className="cam-shot" style={{ display: 'grid', placeItems: 'center' }}>
      <div style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 12, padding: 16, position: 'relative', zIndex: 1 }}>
        <Icon name="camera" size={22} />
        <div style={{ marginTop: 6 }}>
          {feil
            ? (lang === 'no' ? `Kunne ikke hente bildet (${feil})` : `Could not load image (${feil})`)
            : (lang === 'no' ? 'Ingen bilde tatt av denne hyllen ennå — bruk «Ta nytt bilde»'
                             : 'No image captured for this shelf yet')}
        </div>
      </div>
      <div className="label-overlay">CAM-{cameraId} · {shelfId}</div>
    </div>
  );
};

const BottleSvg = ({ type, x, y, scale = 1, faded = false }) => {
  // Farge + størrelse fra material + vekt (utledet fra bottle.code)
  const mat = window.bottleHelpers?.material(type) || 'unknown';
  const weight = window.bottleHelpers?.weightKg(type);
  const color = ({
    stal:      '#94a3b8',
    lettstal:  '#cbd5e1',
    kompositt: '#fb923c',
    aluminium: '#60a5fa',
  })[mat] || '#f59e0b';
  // Liten flaske = lite høyde, stor = mye
  const w = weight && weight <= 5 ? 38 : (weight && weight >= 11 ? 48 : 44);
  const h = weight && weight <= 5 ? 68 : (weight && weight >= 11 ? 95 : 82);
  const shortLabel = weight ? `${weight}kg` : '?';
  return (
    <g transform={`translate(${x - w/2 * scale} ${y - h/2 * scale}) scale(${scale})`} opacity={faded ? 0.55 : 1}>
      <rect x={w/2 - 5} y="-6" width="10" height="8" fill="#666" />
      <rect x={w/2 - 4} y="0" width="8" height="4" fill="#888" />
      <rect x={w/2 - 12} y="4" width="24" height="6" fill="#444" />
      <rect x="0" y="10" width={w} height={h - 18} fill={color} stroke="#3a2400" strokeWidth="0.5" />
      <rect x="2" y="14" width="4" height={h - 26} fill="#fff" opacity="0.18" />
      <rect x="3" y="22" width={w - 6} height="20" fill="#1a1100" opacity="0.55" />
      <text x={w/2} y="35" textAnchor="middle" fill={color} fontSize="9" fontFamily="monospace" fontWeight="700">{shortLabel}</text>
      <ellipse cx={w/2} cy={h - 6} rx={w/2 - 2} ry="3" fill="#2a1a00" />
    </g>
  );
};

/* Liten EKTE hyllebilde-thumbnail (lazy, nedskalert server-side) */
const ShelfThumb = ({ shelf }) => {
  const [src, setSrc] = React.useState(null);
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);
  const url = shelf.lastImageUrl
    ? shelf.lastImageUrl + (shelf.lastImageUrl.includes('?') ? '&' : '?') + 'size=96'
    : null;

  React.useEffect(() => {
    if (!ref.current || !url) 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();
  }, [url]);

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

  return (
    <div ref={ref} style={{ width: 48, height: 36, borderRadius: 4, overflow: 'hidden',
                            background: 'var(--surface-3)', display: 'grid', placeItems: 'center' }}>
      {src ? (
        <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      ) : url ? null : (
        <Icon name="camera" size={12} style={{ color: 'var(--text-disabled)' }} />
      )}
    </div>
  );
};

/* ===== Shelves tab — table with last image thumb and per-shelf actions ===== */
const ShelvesTab = ({ machine, lang }) => {
  const t = I18N[lang];
  const sl = STATE_LABELS(lang);
  const isSuper = !!(window.isSuperView && window.isSuperView());
  const [filter, setFilter] = React.useState('all');
  const [open, setOpen] = React.useState(null);
  const filtered = machine.shelves.filter(s => filter === 'all' || s.state === filter);

  // CSV-eksport av hyllelista, klientside (2026-09-05 — knappen hadde ingen
  // handler før). Kolonner: hylle, dør, kamera, status, flaske, sist bilde.
  const exportCsv = () => {
    const cell = v => `"${String(v ?? '').replace(/"/g, '""')}"`;
    const lines = [
      ['Hylle', 'Dør', 'Kamera', 'Status', 'Flaske', 'Sist bilde'].join(';'),
      ...filtered.map(sh => [
        sh.id, sh.rawDoor, `CAM-${sh.cameraId}`, sl[sh.state] || sh.state,
        sh.bottleName || sh.bottle || '', sh.lastEventAt !== '—' ? sh.lastEventAt : '',
      ].map(cell).join(';')),
    ].join('\n');
    // BOM så Excel leser UTF-8 (æøå) riktig
    const blob = new Blob(['\ufeff' + lines], { type: 'text/csv;charset=utf-8' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `hyller-${machine.id}.csv`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 5000);
  };

  return (
    <>
      <div className="panel">
        <div className="toolbar">
          <div className="section-title">{lang === 'no' ? 'Alle 24 hyller' : 'All 24 shelves'}</div>
          <div className="muted mono" style={{ fontSize: 11.5 }}>{filtered.length}/{machine.shelves.length}</div>
          <div className="grow" />
          <div className="minitab">
            <button className={filter === 'all' ? 'on' : ''} onClick={() => setFilter('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
            <button className={filter === 'full' ? 'on' : ''} onClick={() => setFilter('full')}>{sl.full}</button>
            <button className={filter === 'empty' ? 'on' : ''} onClick={() => setFilter('empty')}>{sl.empty}</button>
            <button className={filter === 'vacant' ? 'on' : ''} onClick={() => setFilter('vacant')}>{sl.vacant}</button>
            <button className={filter === 'error' ? 'on' : ''} onClick={() => setFilter('error')}>{sl.error}</button>
          </div>
          <button className="btn sm" onClick={exportCsv} title={lang === 'no' ? 'Last ned hyllelista som CSV' : 'Download shelf list as CSV'}>
            <Icon name="download" size={12} />CSV
          </button>
        </div>
        <div style={{ overflow: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 60 }}></th>
                <th>{lang === 'no' ? 'Hylle' : 'Shelf'}</th>
                <th>{lang === 'no' ? 'Status' : 'Status'}</th>
                <th>{lang === 'no' ? 'Innhold' : 'Contents'}</th>
                <th>{lang === 'no' ? 'Kamera' : 'Camera'}</th>
                {/* «Lås»-kolonnen er fjernet (2026-09-05): lockState var en
                    konstant 'locked' uten kilde i backend. */}
                <th>{t.last_event}</th>
                <th style={{ width: 200 }}></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(sh => (
                <tr key={sh.id} onClick={() => setOpen(sh)} style={{ cursor: 'pointer' }}>
                  <td>
                    {/* EKTE hyllebilde-thumbnail (2026-09-04) — før: svart
                        boks med tegnet SVG-flaske. */}
                    <ShelfThumb shelf={sh} />
                  </td>
                  <td>
                    <div className="mono" style={{ fontWeight: 600 }}>{sh.id}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{sh.cabinet} · R{sh.row + 1}/K{sh.col + 1}</div>
                  </td>
                  <td><span className={`sh-state ${sh.state}`} style={{ fontSize: 11.5 }}>{sl[sh.state]}</span></td>
                  <td>{sh.bottleName ? <span style={{ fontWeight: 500 }}>{sh.bottleName}</span> : <span className="muted">—</span>}</td>
                  <td className="mono" style={{ fontSize: 12 }}>CAM-{sh.cameraId}</td>
                  <td><span style={{ fontSize: 12 }}>{sh.lastEvent}</span><span className="muted" style={{ fontSize: 11, marginLeft: 6 }}>· {sh.lastEventAt}</span></td>
                  <td onClick={(e) => e.stopPropagation()}>
                    {/* Ekte handlinger (mock-revisjon 2026-09-04) — samme
                        endepunkter som Lagerstatus-fanen bruker. */}
                    <div className="row" style={{ gap: 4, justifyContent: 'flex-end' }}>
                      <button className="btn sm" title={t.btn_unlock}
                        onClick={() => window.api.testDoor(machine.id, sh.rawDoor, true)
                          .catch(e => alert(e.message))}>
                        <Icon name="unlock" size={11} />{t.btn_unlock}
                      </button>
                      <button className="btn sm" title={t.btn_capture}
                        onClick={() => window.api.recheckShelf(machine.id, sh.rawShelfId)
                          .then(() => alert(lang === 'no' ? 'Bilde bestilt — se Lagerstatus om noen sekunder' : 'Capture requested'))
                          .catch(e => alert(e.message))}>
                        <Icon name="camera" size={11} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {open && (
        <Drawer onClose={() => setOpen(null)} title={`${lang === 'no' ? 'Hylle' : 'Shelf'} ${open.id}`}>
          {/* Ekte hyllebilde (mock-revisjon 2026-09-04): siste ROI-utsnitt fra
              backend i stedet for tegnet SVG med falsk REC-HUD. */}
          <CamShot machineId={machine.id} shelfId={open.id} cameraId={open.cameraId} bottle={open.bottle}
                   state={open.state} lang={lang} realImageUrl={open.lastImageUrl} />
          <div className="kvp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            <KVP label="Status" value={sl[open.state]} />
            <KVP label={lang === 'no' ? 'Flaske' : 'Bottle'} value={open.bottleName || '—'} />
            <KVP label="Kamera" value={`CAM-${open.rawCam ?? '—'}`} />
            {/* AI-konfidens er plattforminfo — kun superadmin */}
            {isSuper && (
              <KVP label={lang === 'no' ? 'AI-konfidens' : 'AI confidence'}
                   value={open.lastScore != null ? `${Math.round(open.lastScore * 100)} %` : '—'} />
            )}
            <KVP label={lang === 'no' ? 'Siste hendelse' : 'Last event'} value={`${open.lastEvent} · ${open.lastEventAt}`} colspan={2} />
          </div>
          <div className="section-title">{t.shelf_actions}</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => window.api.testDoor(machine.id, open.rawDoor, true)
                .catch(e => alert(e.message))}>
              <Icon name="unlock" size={14} />{t.btn_unlock}
            </button>
            <button className="btn" onClick={() => window.api.recheckShelf(machine.id, open.rawShelfId)
                .then(() => alert(lang === 'no' ? 'Bilde bestilt' : 'Capture requested'))
                .catch(e => alert(e.message))}>
              <Icon name="camera" size={14} />{t.btn_capture}
            </button>
            <button className="btn danger" onClick={() => {
              if (!confirm(lang === 'no' ? 'Deaktivere hyllen (faulty)?' : 'Disable shelf?')) return;
              window.api.overrideShelf(machine.id, open.rawShelfId, null, 'faulty')
                .then(() => { alert('OK'); setOpen(null); })
                .catch(e => alert(e.message));
            }}>{t.btn_disable}</button>
          </div>
        </Drawer>
      )}
    </>
  );
};

const Drawer = ({ title, onClose, children }) => (
  <>
    <div className="drawer-backdrop" onClick={onClose} />
    <div className="drawer">
      <div className="drawer-head">
        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>{title}</h3>
        <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
      </div>
      <div className="drawer-body">{children}</div>
    </div>
  </>
);

Object.assign(window, { Inventory, ShelvesTab, BottleSvg, CamShot, Drawer });