/* Påfylling direkte fra automat-siden (2026-09-04).
 *
 * 1. Start: velg omfang (tomme/tomflaske-hyller, seksjon, eller enkeltdører)
 *    → dørene åpnes; kameraet tar bilde og detekterer når hver dør lukkes.
 * 2. Under fylling: dør-for-dør-status (før / nå / bilde / konfidens), og
 *    operatøren kan RETTE feil deteksjon (setter lager + lagrer treningsbilde)
 *    eller ta nytt bilde.
 * 3. Avslutt → rapport: hva ble tatt ut (tomflasker) og satt inn (fulle),
 *    per type og per dør. Historikk over tidligere fyllinger.
 * 4. Kontroller lageret: gå gjennom alle hyller, bekreft eller rett.
 */

const FILL_KIND = {
  satt_inn: { no: 'Satt inn', tone: 'ok' },
  byttet: { no: 'Tomflaske ut, full inn', tone: 'ok' },
  byttet_type: { no: 'Byttet type', tone: 'info' },
  tatt_ut: { no: 'Tomflaske tatt ut', tone: 'warn' },
  uendret: { no: 'Uendret', tone: 'empty' },
  uendret_tomflaske: { no: 'Tomflaske står igjen', tone: 'warn' },
  defekt: { no: 'Defekt / mismatch', tone: 'danger' },
  ubekreftet: { no: 'Ubekreftet', tone: 'danger' },
};

const fillStatusLabel = (st) => ({
  full: 'Full', empty: 'Ledig', empty_bottle: 'Tomflaske', faulty: 'Defekt',
  unknown: 'Venter / usikker',
}[st] || st || '—');

/* Bilde-thumb med versjonert URL (ny bilde-id → ny henting) */
const FillThumb = ({ url, imageId, size = 64 }) => {
  const [src, setSrc] = React.useState(null);
  const full = url ? `${url}?v=${encodeURIComponent(imageId || '')}&size=${size * 2}` : null;
  React.useEffect(() => {
    if (!full) { setSrc(null); return; }
    let dau = false;
    window.authedImageUrl(full).then(u => { if (!dau) setSrc(u); }).catch(() => { if (!dau) setSrc(null); });
    return () => { dau = true; };
  }, [full]);
  return (
    <div style={{ width: size, height: Math.round(size * 0.75), borderRadius: 4, overflow: 'hidden',
                  background: 'var(--surface-3)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
      {src ? <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
           : <Icon name="camera" size={12} style={{ color: 'var(--text-disabled)' }} />}
    </div>
  );
};

/* Dropdown for å rette flasketype — kun typer i automatens sortiment + Tom */
const useTenantBottles = (machine) => {
  const [codes, setCodes] = React.useState(null);
  React.useEffect(() => {
    let dau = false;
    const shelfCodes = new Set((machine.shelves || []).map(s => s.bottle).filter(Boolean));
    if (!machine.tenantId) { setCodes(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)); setCodes(new Set(shelfCodes)); })
      .catch(() => { if (!dau) setCodes(shelfCodes); });
    return () => { dau = true; };
  }, [machine.id]);
  return (window.DATA?.BOTTLE_TYPES || []).filter(b => !codes || codes.size === 0 || codes.has(b.id));
};

const CorrectSelect = ({ bottles, value, onPick, disabled, lang }) => (
  <select className="select" value="" disabled={disabled}
          onChange={e => { if (e.target.value) onPick(e.target.value); }}>
    <option value="">{lang === 'no' ? 'Rett til…' : 'Correct to…'}</option>
    {bottles.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
    <option value="tom">{lang === 'no' ? 'Tom / ledig hylle' : 'Empty shelf'}</option>
  </select>
);

const FillTab = ({ machine, lang }) => {
  const no = lang === 'no';
  const [active, setActive] = React.useState(undefined);   // undefined=laster, null=ingen
  const [history, setHistory] = React.useState([]);
  const [report, setReport] = React.useState(null);
  const [scope, setScope] = React.useState('empty');        // empty | A | B | doors
  const [pick, setPick] = React.useState(() => new Set());
  const [includeFaulty, setIncludeFaulty] = React.useState(false);
  const [busy, setBusy] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const bottles = useTenantBottles(machine);

  const last = React.useCallback(async () => {
    try {
      const r = await window.api.fillActive(machine.id);
      setActive(r && r.active ? r : null);
    } catch (e) { setErr(e.message); }
  }, [machine.id]);
  const lastHist = React.useCallback(() => {
    window.api.fillHistory(machine.id).then(setHistory).catch(() => {});
  }, [machine.id]);
  React.useEffect(() => { last(); lastHist(); }, [last, lastHist]);
  React.useEffect(() => {
    if (!active) return;
    const iv = setInterval(last, 3000);
    return () => clearInterval(iv);
  }, [active && active.fill_session_id, last]);

  const start = async () => {
    setBusy('start'); setErr(null);
    try {
      const opts = { include_faulty: includeFaulty };
      if (scope === 'A') opts.section = 1;
      else if (scope === 'B') opts.section = 2;
      else if (scope === 'doors') {
        if (pick.size === 0) { setErr(no ? 'Velg minst én dør' : 'Pick at least one door'); setBusy(null); return; }
        opts.doors = [...pick];
      }
      await window.api.fillStart(machine.id, opts);
      setReport(null);
      await last();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const finish = async () => {
    if (!active) return;
    if (!confirm(no ? 'Avslutte påfyllingen og lage rapport?' : 'Finish and create report?')) return;
    setBusy('finish'); setErr(null);
    try {
      const r = await window.api.fillFinish(machine.id, active.fill_session_id);
      setReport(r.report || null);
      setActive(null);
      lastHist();
      if (machine._onReload) await machine._onReload();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const cancel = async () => {
    if (!active) return;
    if (!confirm(no ? 'Avbryte påfyllingen? Hyllene settes tilbake slik de var.' : 'Cancel refill?')) return;
    setBusy('cancel'); setErr(null);
    try {
      await window.api.fillCancel(machine.id, active.fill_session_id);
      setActive(null);
      if (machine._onReload) await machine._onReload();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const correct = async (shelf, label) => {
    setBusy('c' + shelf.id); setErr(null);
    try {
      await window.api.confirmLabel(machine.id, shelf.id, {
        label, detected: shelf.bottle?.code || null, detected_score: shelf.last_score ?? null,
      });
      await last();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const recheck = async (shelf) => {
    setBusy('r' + shelf.id); setErr(null);
    try { await window.api.recheckShelf(machine.id, shelf.id); }
    catch (e) { setErr(e.message); }
    setBusy(null);
  };
  // Åpne dører (på nytt): null = alle som ikke er bekreftet åpne
  const reopen = async (doors) => {
    if (!active) return;
    setBusy('open'); setErr(null);
    try {
      await window.api.fillOpenDoors(machine.id, active.fill_session_id, doors);
      await last();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };

  const allShelves = machine.shelves || [];
  const candidates = allShelves.filter(s => ['vacant', 'empty'].includes(s.state) || (includeFaulty && s.state === 'error'));

  return (
    <div className="col" style={{ gap: 16 }}>
      {err && <div style={{ padding: '8px 12px', color: 'var(--danger)', background: 'var(--danger-soft)', borderRadius: 'var(--radius)', fontSize: 12 }}>❌ {err}</div>}

      {/* ===== AKTIV PÅFYLLING ===== */}
      {active && (
        <div className="panel">
          <div className="panel-head">
            <h3>
              <span className="live" style={{ marginRight: 8 }}>{no ? 'Påfylling pågår' : 'Refill in progress'}</span>
              {no ? 'startet' : 'started'} {formatTs(active.started_at)} · {active.doors.length} {no ? 'dører' : 'doors'}
            </h3>
            <div className="actions">
              <button className="btn danger sm" disabled={!!busy} onClick={cancel}>{no ? 'Avbryt' : 'Cancel'}</button>
              <button className="btn primary" disabled={!!busy} onClick={finish}>
                {busy === 'finish' ? '⏳' : (no ? 'Avslutt og lag rapport' : 'Finish & report')}
              </button>
            </div>
          </div>
          <div className="muted" style={{ padding: '8px 16px', fontSize: 11.5, borderBottom: '1px solid var(--border)' }}>
            {no ? 'Dørene åpnes én etter én (ca. 2,5 s per dør per modul). Ta ut ev. tomflaske, sett inn full flaske og lukk døra — bildet tas og typen detekteres automatisk. Er deteksjonen feil, rett den her før du avslutter.'
                : 'Doors open one by one. Swap bottles and close each door — detection runs automatically. Correct any wrong detection before finishing.'}
          </div>
          {(() => {
            const dop = active.door_open || {};
            const res = dop.doors || {};
            const opened = active.doors.filter(d => (res[String(d)] || {}).opened === true);
            const notOpen = active.doors.filter(d => (res[String(d)] || {}).opened !== true);
            if (dop.opening) {
              return (
                <div style={{ padding: '8px 16px', fontSize: 12.5, background: 'var(--warn-soft)', borderBottom: '1px solid var(--border)' }}>
                  ⏳ {no ? 'Åpner dører…' : 'Opening doors…'} {opened.length}/{active.doors.length} {no ? 'bekreftet åpne' : 'confirmed open'}
                </div>
              );
            }
            if (dop.done && notOpen.length > 0) {
              return (
                <div className="row" style={{ padding: '8px 16px', fontSize: 12.5, gap: 10, background: 'var(--danger-soft)', borderBottom: '1px solid var(--border)', flexWrap: 'wrap' }}>
                  <span>⚠️ {notOpen.length} {no ? 'dør(er) er ikke bekreftet åpne' : 'door(s) not confirmed open'}: <strong>{notOpen.join(', ')}</strong></span>
                  <button className="btn sm primary" disabled={!!busy} onClick={() => reopen(null)}>
                    {no ? 'Åpne disse på nytt' : 'Reopen these'}
                  </button>
                </div>
              );
            }
            return null;
          })()}
          <div style={{ overflow: 'auto' }}>
            <table className="tbl">
              <thead><tr>
                <th>{no ? 'Dør' : 'Door'}</th><th>{no ? 'Luke' : 'Hatch'}</th><th>{no ? 'Før' : 'Before'}</th><th>{no ? 'Nå' : 'Now'}</th>
                <th>{no ? 'Bilde' : 'Image'}</th><th>{no ? 'Rett' : 'Correct'}</th><th></th>
              </tr></thead>
              <tbody>
                {active.shelves.map(s => {
                  const p = (active.prior || {})[String(s.door)] || {};
                  const pb = (window.DATA?.BOTTLE_TYPES || []).find(b => b._raw?.id === p.bottle_id);
                  const isSuper = !!(window.isSuperView && window.isSuperView());
                  const waiting = s.status === 'unknown';
                  const ds = (active.door_states || {})[String(s.door)];
                  const dres = ((active.door_open || {}).doors || {})[String(s.door)] || {};
                  const hatch = ds && ds.closed === false ? 'open' : ds && ds.closed === true ? 'closed' : 'unknown';
                  return (
                    <tr key={s.id} style={{ background: waiting ? 'var(--warn-soft)' : s.status === 'faulty' ? 'var(--danger-soft)' : 'transparent' }}>
                      <td className="mono" style={{ fontWeight: 600 }}>{s.door}</td>
                      <td>
                        <div className="row" style={{ gap: 6, alignItems: 'center' }}>
                          {hatch === 'open' ? <Pill tone="danger" dot>{no ? 'Åpen' : 'Open'}</Pill>
                            : hatch === 'closed' ? <Pill tone="ok" dot>{no ? 'Lukket' : 'Closed'}</Pill>
                            : <Pill tone="empty">{no ? 'Ukjent' : 'Unknown'}</Pill>}
                          {(active.door_open || {}).opening && dres.opened !== true && <span className="muted" style={{ fontSize: 10.5 }}>⏳</span>}
                          {!(active.door_open || {}).opening && (
                            <button className="btn sm" disabled={!!busy} title={no ? 'Åpne døra (igjen)' : 'Open door (again)'}
                                    onClick={() => reopen([s.door])}>
                              <Icon name="door" size={12} />
                            </button>
                          )}
                        </div>
                      </td>
                      <td>
                        <span className="muted" style={{ fontSize: 12 }}>
                          {fillStatusLabel(p.status)}{pb ? ` · ${pb.name}` : ''}
                        </span>
                      </td>
                      <td>
                        {waiting ? <Pill tone="warn" dot>{no ? 'Venter på lukking / deteksjon' : 'Waiting'}</Pill>
                          : s.status === 'full' ? <span><Pill tone="ok" dot>{no ? 'Full' : 'Full'}</Pill> <strong style={{ marginLeft: 6 }}>{s.bottle?.display_name || '—'}</strong>
                              {isSuper && s.last_score != null && <span className="muted" style={{ marginLeft: 6, fontSize: 11 }}>{Math.round(s.last_score * 100)} %</span>}</span>
                          : s.status === 'faulty' ? <Pill tone="danger" dot>{no ? 'Defekt / ventil-mismatch' : 'Faulty'}</Pill>
                          : <span>{fillStatusLabel(s.status)}{s.bottle ? ` · ${s.bottle.display_name}` : ''}</span>}
                      </td>
                      <td><FillThumb url={s.last_image_url} imageId={s.last_image_id} /></td>
                      <td>
                        <CorrectSelect bottles={bottles} lang={lang} disabled={!!busy}
                                       onPick={(v) => correct(s, v)} />
                      </td>
                      <td>
                        <button className="btn sm" disabled={!!busy} onClick={() => recheck(s)} title={no ? 'Ta nytt bilde' : 'Recapture'}>
                          <Icon name="camera" size={12} />
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div className="muted" style={{ padding: '8px 16px', fontSize: 11.5 }}>
            {(() => {
              const done = active.shelves.filter(s => s.status !== 'unknown').length;
              return `${done}/${active.shelves.length} ${no ? 'dører ferdig' : 'doors done'}`;
            })()}
          </div>
        </div>
      )}

      {/* ===== START ===== */}
      {active === null && (
        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Start påfylling' : 'Start refill'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
              {[['empty', no ? 'Alle ledige + tomflaske-hyller' : 'All empty + empty-bottle shelves'],
                ['A', no ? 'Seksjon A (dør 1–12)' : 'Section A (1–12)'],
                ['B', no ? 'Seksjon B (dør 13–24)' : 'Section B (13–24)'],
                ['doors', no ? 'Velg dører' : 'Pick doors']].map(([k, lbl]) => (
                <label key={k} className="row" style={{ gap: 6, fontSize: 12.5, cursor: 'pointer' }}>
                  <input type="radio" name="fillscope" checked={scope === k} onChange={() => setScope(k)} />{lbl}
                </label>
              ))}
              <label className="row" style={{ gap: 6, fontSize: 12.5, cursor: 'pointer' }}>
                <input type="checkbox" checked={includeFaulty} onChange={e => setIncludeFaulty(e.target.checked)} />
                {no ? 'Ta med deaktiverte/defekte dører' : 'Include faulty doors'}
              </label>
            </div>
            {scope === 'doors' && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(96px, 1fr))', gap: 6 }}>
                {allShelves.map(s => (
                  <label key={s.rawShelfId} className="row" style={{ gap: 6, fontSize: 12, cursor: 'pointer',
                          padding: '4px 6px', border: '1px solid var(--border)', borderRadius: 4,
                          opacity: candidates.includes(s) ? 1 : 0.55 }}>
                    <input type="checkbox" checked={pick.has(s.rawDoor)}
                           onChange={e => setPick(prev => { const n = new Set(prev); e.target.checked ? n.add(s.rawDoor) : n.delete(s.rawDoor); return n; })} />
                    <span className="mono">{s.rawDoor}</span>
                    <span className="muted" style={{ fontSize: 10.5 }}>{s.bottleName || fillStatusLabel(s.rawStatus)}</span>
                  </label>
                ))}
              </div>
            )}
            <div className="row" style={{ gap: 8 }}>
              <button className="btn primary" disabled={!!busy} onClick={start}>
                {busy === 'start' ? '⏳' : (no ? 'Start påfylling — åpne dører' : 'Start refill — open doors')}
              </button>
              <span className="muted" style={{ fontSize: 11.5 }}>
                {scope === 'empty' ? `${candidates.length} ${no ? 'hyller vil åpnes' : 'shelves will open'}` : ''}
              </span>
            </div>
          </div>
        </div>
      )}

      {/* ===== RAPPORT ===== */}
      {report && <FillReport report={report} lang={lang} onClose={() => setReport(null)} />}

      {/* ===== HISTORIKK ===== */}
      <div className="panel">
        <div className="panel-head"><h3>{no ? 'Tidligere påfyllinger' : 'Previous refills'}</h3></div>
        {history.length === 0 ? (
          <div className="empty">{no ? 'Ingen påfyllinger registrert ennå' : 'No refills yet'}</div>
        ) : (
          <div style={{ overflow: 'auto' }}>
            <table className="tbl">
              <thead><tr>
                <th>{no ? 'Startet' : 'Started'}</th><th>Status</th><th>{no ? 'Dører' : 'Doors'}</th>
                <th className="num">{no ? 'Satt inn' : 'Inserted'}</th><th className="num">{no ? 'Tatt ut' : 'Removed'}</th>
                <th className="num">{no ? 'Ubekreftet' : 'Unconfirmed'}</th><th></th>
              </tr></thead>
              <tbody>
                {history.map(h => (
                  <tr key={h.fill_session_id}>
                    <td className="mono" style={{ fontSize: 12 }}>{formatTs(h.started_at)}</td>
                    <td>{h.status === 'done' ? <Pill tone="ok">{no ? 'fullført' : 'done'}</Pill>
                        : h.status === 'active' ? <Pill tone="warn" dot>{no ? 'pågår' : 'active'}</Pill>
                        : <Pill tone="empty">{no ? 'avbrutt' : 'cancelled'}</Pill>}</td>
                    <td className="num">{h.doors}</td>
                    <td className="num">{h.summary ? h.summary.inserted_total : '—'}</td>
                    <td className="num">{h.summary ? h.summary.removed_total : '—'}</td>
                    <td className="num" style={{ color: h.summary && h.summary.unconfirmed > 0 ? 'var(--danger)' : 'inherit' }}>{h.summary ? h.summary.unconfirmed : '—'}</td>
                    <td>
                      <button className="btn sm" onClick={() => window.api.fillReport(machine.id, h.fill_session_id).then(setReport).catch(e => setErr(e.message))}>
                        {no ? 'Vis rapport' : 'Report'}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* ===== KONTROLLER LAGERET ===== */}
      <ShelfReview machine={machine} lang={lang} bottles={bottles} />
    </div>
  );
};

const FillReport = ({ report, lang, onClose }) => {
  const no = lang === 'no';
  const s = report.summary || {};
  const kv = (o) => Object.entries(o || {}).map(([k, v]) => `${v} × ${k}`).join(', ') || '—';
  return (
    <div className="panel" style={{ borderColor: 'var(--accent)' }}>
      <div className="panel-head">
        <h3>{no ? 'Påfyllingsrapport' : 'Refill report'} · {formatTs(report.started_at)}{report.finished_at ? ` → ${formatTs(report.finished_at)}` : ''}</h3>
        <div className="actions">
          <button className="btn sm" onClick={() => window.print()}><Icon name="download" size={12} />{no ? 'Skriv ut' : 'Print'}</button>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
        </div>
      </div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div className="stat-row" style={{ gap: 22, flexWrap: 'wrap' }}>
          <div className="stat"><div className="lbl">{no ? 'Satt inn (fulle)' : 'Inserted'}</div><div className="val">{s.inserted_total ?? 0}</div></div>
          <div className="stat"><div className="lbl">{no ? 'Tatt ut (tomme)' : 'Removed'}</div><div className="val">{s.removed_total ?? 0}</div></div>
          <div className="stat"><div className="lbl">{no ? 'Dører' : 'Doors'}</div><div className="val">{s.doors_total ?? 0}</div></div>
          <div className="stat"><div className="lbl" style={{ color: s.unconfirmed ? 'var(--danger)' : undefined }}>{no ? 'Ubekreftet' : 'Unconfirmed'}</div><div className="val" style={{ color: s.unconfirmed ? 'var(--danger)' : undefined }}>{s.unconfirmed ?? 0}</div></div>
        </div>
        <div className="kvp-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <KVP label={no ? 'Satt inn per type' : 'Inserted by type'} value={kv(s.inserted_by_type)} />
          <KVP label={no ? 'Tomflasker tatt ut per type' : 'Empties removed by type'} value={kv(s.removed_empty_by_type)} />
        </div>
        {report.by && <div className="muted" style={{ fontSize: 11 }}>{no ? 'Utført av' : 'By'}: {report.by}</div>}
        <div style={{ overflow: 'auto' }}>
          <table className="tbl">
            <thead><tr><th>{no ? 'Dør' : 'Door'}</th><th>{no ? 'Før' : 'Before'}</th><th>{no ? 'Etter' : 'After'}</th><th>{no ? 'Hendelse' : 'Event'}</th><th>{no ? 'Bilde' : 'Image'}</th></tr></thead>
            <tbody>
              {(report.doors || []).map(d => {
                const k = FILL_KIND[d.kind] || { no: d.kind, tone: 'empty' };
                return (
                  <tr key={d.door}>
                    <td className="mono" style={{ fontWeight: 600 }}>{d.door}</td>
                    <td className="muted">{fillStatusLabel(d.prior_status)}{d.prior_bottle ? ` · ${d.prior_bottle.display_name}` : ''}</td>
                    <td>{fillStatusLabel(d.now_status)}{d.now_bottle ? <strong> · {d.now_bottle.display_name}</strong> : ''}</td>
                    <td><Pill tone={k.tone}>{k.no}</Pill></td>
                    <td><FillThumb url={d.image_url} imageId={d.image_id} size={48} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

/* Gå gjennom alle hyller: bekreft eller rett hva som faktisk står der */
const ShelfReview = ({ machine, lang, bottles }) => {
  const no = lang === 'no';
  const [rows, setRows] = React.useState(machine.shelves || []);
  const [busy, setBusy] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const [confirmed, setConfirmed] = React.useState(() => new Set());
  const refresh = React.useCallback(async () => {
    try { setRows(await window.api.refreshMachineShelves(machine.id)); } catch (e) { setErr(e.message); }
  }, [machine.id]);
  React.useEffect(() => { refresh(); }, [refresh]);

  const bekreft = async (s) => {
    setBusy(s.rawShelfId); setErr(null);
    try {
      await window.api.confirmLabel(machine.id, s.rawShelfId, {
        label: s.state === 'full' && s.bottle ? s.bottle : 'tom',
        detected: s.bottle || null, detected_score: s.lastScore ?? null,
      });
      setConfirmed(prev => new Set(prev).add(s.rawShelfId));
      await refresh();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const rett = async (s, label) => {
    setBusy(s.rawShelfId); setErr(null);
    try {
      await window.api.confirmLabel(machine.id, s.rawShelfId, {
        label, detected: s.bottle || null, detected_score: s.lastScore ?? null,
      });
      setConfirmed(prev => new Set(prev).add(s.rawShelfId));
      await refresh();
      if (machine._onReload) await machine._onReload();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };
  const setStatus = async (s, status) => {
    setBusy(s.rawShelfId); setErr(null);
    try {
      await window.api.overrideShelf(machine.id, s.rawShelfId,
        status === 'empty_bottle' ? s.bottle : null, status);
      await refresh();
      if (machine._onReload) await machine._onReload();
    } catch (e) { setErr(e.message); }
    setBusy(null);
  };

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>{no ? 'Kontroller lageret' : 'Review inventory'}</h3>
        <div className="actions">
          <span className="muted" style={{ fontSize: 11.5 }}>{confirmed.size}/{rows.length} {no ? 'bekreftet' : 'confirmed'}</span>
          <button className="btn sm" onClick={refresh}><Icon name="refresh" size={12} />{no ? 'Oppdater' : 'Refresh'}</button>
        </div>
      </div>
      <div className="muted" style={{ padding: '8px 16px', fontSize: 11.5, borderBottom: '1px solid var(--border)' }}>
        {no ? 'Gå gjennom hylle for hylle: stemmer bildet med typen? Bekreft, eller rett. Bekreftelser lagres som treningsdata og gjør gjenkjenningen bedre.'
            : 'Go through each shelf: does the image match the type? Confirm or correct. Confirmations are saved as training data.'}
      </div>
      {err && <div style={{ padding: '8px 16px', color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
      <div style={{ overflow: 'auto' }}>
        <table className="tbl">
          <thead><tr>
            <th>{no ? 'Dør' : 'Door'}</th><th>{no ? 'Bilde' : 'Image'}</th><th>Status</th><th>{no ? 'Innhold' : 'Contents'}</th><th></th>
          </tr></thead>
          <tbody>
            {rows.map(s => (
              <tr key={s.rawShelfId} style={{ background: confirmed.has(s.rawShelfId) ? 'var(--success-soft)' : 'transparent' }}>
                <td className="mono" style={{ fontWeight: 600 }}>{s.rawDoor}</td>
                <td><FillThumb url={s.lastImageUrl ? s.lastImageUrl.split('?')[0] : null} imageId={s.lastImageUrl ? (s.lastImageUrl.split('v=')[1] || '') : ''} /></td>
                <td><span className={`sh-state ${s.state}`} style={{ fontSize: 11.5 }}>{fillStatusLabel(s.rawStatus)}</span></td>
                <td>{s.bottleName || <span className="muted">—</span>}</td>
                <td>
                  <div className="row" style={{ gap: 4, flexWrap: 'wrap' }}>
                    <button className="btn sm primary" disabled={busy === s.rawShelfId || s.state === 'error'} onClick={() => bekreft(s)}>
                      {confirmed.has(s.rawShelfId) ? '✓ ' : ''}{no ? 'Bekreft' : 'Confirm'}
                    </button>
                    <CorrectSelect bottles={bottles} lang={lang} disabled={busy === s.rawShelfId} onPick={(v) => rett(s, v)} />
                    {s.state === 'full' && s.bottle && (
                      <button className="btn sm" disabled={busy === s.rawShelfId} onClick={() => setStatus(s, 'empty_bottle')}>{no ? 'Tomflaske' : 'Empty bottle'}</button>
                    )}
                    {s.state !== 'error'
                      ? <button className="btn sm danger" disabled={busy === s.rawShelfId} onClick={() => setStatus(s, 'faulty')}>{no ? 'Deaktiver' : 'Disable'}</button>
                      : <button className="btn sm" disabled={busy === s.rawShelfId} onClick={() => setStatus(s, 'empty')}>{no ? 'Aktiver' : 'Enable'}</button>}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, { FillTab });