/* Camera setup wizard + ROI marker + health dashboard.
 *
 * Tre hovedseksjoner:
 *   1. CameraSetupPage — toppnivå, vises som ny tab på automat-detail
 *   2. CameraWizard — flytter operatør gjennom binding av 8 cams
 *   3. RoiMarker — canvas der operatør tegner shelf-rektangler i kamerabildet
 *
 * Brukerflyt:
 *   Step 1: Velg en cam_id som skal bindes (1-8)
 *   Step 2: System triggrer identifikasjon
 *     - Dør-cam (1/3/5/7): "trykk dette så åpner én dør, fortell oss hvilken"
 *     - Bilde-cam (2/4/6/8): "trykk dette så tas et bilde, fortell oss hvilken hylle"
 *   Step 3: Operatør bekrefter → backend binder
 *   Step 4: ROI-marking av synlige hyller
 */

const CameraSetupPage = ({ machine, lang, onReload }) => {
  const t = I18N[lang];
  const [tab, setTab] = React.useState('overview');   // overview|wizard|health|roi
  const [cameras, setCameras] = React.useState([]);
  const [unbound, setUnbound] = React.useState([]);
  const [layout, setLayout] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);

  const refresh = React.useCallback(async () => {
    setBusy(true); setError(null);
    try {
      const [cams, unb, lay] = await Promise.all([
        window.api.camerasList(machine.id),
        window.api.camerasListUnbound(),
        window.api.camerasExpectedLayout(machine.id),
      ]);
      setCameras(cams);
      setUnbound(unb);
      setLayout(lay);
    } catch (e) { setError(e.message); }
    setBusy(false);
  }, [machine.id]);

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

  return (
    <div>
      <div className="tabs" style={{ marginBottom: 12 }}>
        {[
          { k: 'overview', label: lang === 'no' ? 'Oversikt' : 'Overview', icon: 'camera' },
          { k: 'wizard',   label: lang === 'no' ? 'Setup-wizard' : 'Setup wizard', icon: 'plus' },
          { k: 'health',   label: lang === 'no' ? 'Helse' : 'Health', icon: 'heart' },
        ].map(tb => (
          <div key={tb.k}
               className={'tab' + (tab === tb.k ? ' active' : '')}
               onClick={() => setTab(tb.k)}>
            <Icon name={tb.icon} size={13} />{tb.label}
          </div>
        ))}
      </div>
      {error && <div style={{ padding: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {error}</div>}
      {tab === 'overview' && <CameraOverview machine={machine} cameras={cameras} unbound={unbound}
                                              layout={layout} lang={lang} onRefresh={refresh} />}
      {tab === 'wizard'   && <CameraWizard machine={machine} cameras={cameras} unbound={unbound}
                                            layout={layout} lang={lang} onRefresh={refresh} />}
      {tab === 'health'   && <CameraHealth machine={machine} lang={lang} />}
    </div>
  );
};

/* ===== Oversiktstabell — viser alle 8 cams + status + handlinger ===== */
const CameraOverview = ({ machine, cameras, unbound, layout, lang, onRefresh }) => {
  const [busyCam, setBusyCam] = React.useState(null);
  const [roiTarget, setRoiTarget] = React.useState(null);

  const expected = layout?.expected_cams || [];
  const camById = Object.fromEntries(cameras.map(c => [c.cam_id, c]));

  const identifyLed = async (cid) => {
    setBusyCam(cid);
    try { await window.api.camerasIdentifyLed(machine.id, cid); }
    catch (e) { alert(e.message); }
    setBusyCam(null);
  };
  const unbind = async (cid) => {
    if (!confirm(lang === 'no' ? `Frikoble cam ${cid}? MAC går tilbake til unbound-listen.` : `Unbind cam ${cid}?`)) return;
    setBusyCam(cid);
    try { await window.api.camerasUnbind(machine.id, cid); await onRefresh(); }
    catch (e) { alert(e.message); }
    setBusyCam(null);
  };
  const runHealth = async () => {
    setBusyCam('health');
    try { await window.api.camerasRunHealth(machine.id); alert('Helsesjekk-kommando sendt — vent 15-30 sek + refresh'); }
    catch (e) { alert(e.message); }
    setBusyCam(null);
  };

  return (
    <>
      <div className="row" style={{ gap: 10, marginBottom: 12 }}>
        <button className="btn" onClick={onRefresh}><Icon name="refresh" size={12} />Refresh</button>
        <button className="btn primary" onClick={runHealth} disabled={busyCam === 'health'}>
          <Icon name="heart" size={12} />{lang === 'no' ? 'Kjør helsesjekk nå' : 'Run health check now'}
        </button>
        <span className="muted" style={{ fontSize: 12 }}>
          {cameras.length}/{expected.length} {lang === 'no' ? 'bundet' : 'bound'}
          {unbound.length > 0 && ` · ${unbound.length} ${lang === 'no' ? 'venter' : 'pending'}`}
        </span>
      </div>

      <div className="panel">
        <table className="tbl">
          <thead>
            <tr>
              <th>Cam</th>
              <th>{lang === 'no' ? 'Plassering' : 'Position'}</th>
              <th>{lang === 'no' ? 'Type' : 'Type'}</th>
              <th>{lang === 'no' ? 'Hyller' : 'Shelves'}</th>
              <th>{lang === 'no' ? 'Dører' : 'Doors'}</th>
              <th>MAC</th>
              <th>Status</th>
              <th>{lang === 'no' ? 'Sist sett' : 'Last seen'}</th>
              <th>{lang === 'no' ? 'Handlinger' : 'Actions'}</th>
            </tr>
          </thead>
          <tbody>
            {expected.map(spec => {
              const cam = camById[spec.cam_id];
              const isBound = !!cam;
              const status = cam?.health_status || 'unknown';
              return (
                <tr key={spec.cam_id} style={{ background: !isBound ? 'var(--warn-soft)' : 'transparent' }}>
                  <td><span className="mono" style={{ fontWeight: 600 }}>{spec.cam_id}</span></td>
                  <td><span style={{ fontSize: 11.5 }}>{spec.position}</span></td>
                  <td>{spec.has_doors
                    ? <Pill tone="info">{lang === 'no' ? 'Dør+kamera' : 'Door+cam'}</Pill>
                    : <Pill tone="empty">{lang === 'no' ? 'Kun kamera' : 'Cam only'}</Pill>}
                  </td>
                  <td className="mono" style={{ fontSize: 11 }}>{spec.shelves.join(', ')}</td>
                  <td className="mono" style={{ fontSize: 11 }}>{spec.doors.length > 0 ? `${spec.doors[0]}-${spec.doors[spec.doors.length-1]}` : '—'}</td>
                  <td className="mono" style={{ fontSize: 10.5 }}>{cam?.mac_address || <span className="muted">—</span>}</td>
                  <td>{isBound
                    ? status === 'ok'       ? <Pill tone="ok" dot>OK</Pill>
                    : status === 'degraded' ? <Pill tone="warn" dot>Degraded</Pill>
                    : status === 'offline'  ? <Pill tone="danger" dot>Offline</Pill>
                    : <Pill tone="empty" dot>Ukjent</Pill>
                    : <Pill tone="warn">{lang === 'no' ? 'Ikke bundet' : 'Unbound'}</Pill>}
                  </td>
                  <td className="muted" style={{ fontSize: 11 }}>
                    {cam?.last_seen_at
                      ? new Date(cam.last_seen_at).toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'short' })
                      : '—'}
                  </td>
                  <td>
                    <div className="row" style={{ gap: 4, flexWrap: 'wrap' }}>
                      {isBound && (
                        <button className="btn sm" disabled={busyCam === spec.cam_id} onClick={() => identifyLed(spec.cam_id)}
                                title={lang === 'no' ? 'Blink LED' : 'Blink LED'}>
                          💡
                        </button>
                      )}
                      {isBound && (
                        <button className="btn sm" onClick={() => setRoiTarget(spec.cam_id)} title="ROI">
                          ROI
                        </button>
                      )}
                      {isBound && (
                        <button className="btn sm danger" disabled={busyCam === spec.cam_id} onClick={() => unbind(spec.cam_id)}>
                          {lang === 'no' ? 'Frikoble' : 'Unbind'}
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {roiTarget && <RoiMarker machine={machine} camId={roiTarget} cameras={cameras}
                                lang={lang} onClose={() => setRoiTarget(null)}
                                onSaved={() => { setRoiTarget(null); onRefresh(); }} />}
    </>
  );
};

/* ===== Wizard for å binde unbound cams sekvensielt ===== */
const CameraWizard = ({ machine, cameras, unbound, layout, lang, onRefresh }) => {
  const [step, setStep] = React.useState('select');     // select|identify|bind|done
  const [selectedMac, setSelectedMac] = React.useState(null);
  const [doorInput, setDoorInput] = React.useState('');
  const [shelfInput, setShelfInput] = React.useState('');
  const [suggestion, setSuggestion] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const selected = unbound.find(u => u.mac_address === selectedMac);
  const expectedCams = layout?.expected_cams || [];
  const boundIds = new Set(cameras.map(c => c.cam_id));
  const missing = expectedCams.filter(s => !boundIds.has(s.cam_id));

  if (unbound.length === 0 && missing.length === 0) {
    return (
      <div className="panel" style={{ padding: 20, textAlign: 'center' }}>
        <Icon name="ok" size={32} style={{ color: 'var(--success)' }} />
        <div style={{ marginTop: 10, fontSize: 14 }}>
          {lang === 'no' ? 'Alle 8 kameraer er bundet!' : 'All 8 cameras are bound!'}
        </div>
      </div>
    );
  }

  if (unbound.length === 0) {
    return (
      <div className="panel" style={{ padding: 20 }}>
        <div className="muted">⏳ {lang === 'no'
          ? 'Venter på at nye kameraer dukker opp på MQTT (provisioning/<mac>/hello)…'
          : 'Waiting for new cameras to appear on MQTT…'}</div>
        <div style={{ marginTop: 10, fontSize: 12 }}>
          {missing.length > 0 && (
            <>{lang === 'no' ? 'Mangler' : 'Missing'}: cam {missing.map(m => m.cam_id).join(', ')}</>
          )}
        </div>
        <button className="btn sm" style={{ marginTop: 10 }} onClick={onRefresh}>
          <Icon name="refresh" size={12} />Refresh
        </button>
      </div>
    );
  }

  // STEP 1: Velg en unbound device + start identify
  if (step === 'select') {
    const startIdentify = async (mac) => {
      setSelectedMac(mac);
      setErr(null);
      setBusy(true);
      const dev = unbound.find(u => u.mac_address === mac);
      try {
        if (dev?.has_mcp_expander) {
          // Dør-cam — trigger relé 0
          await window.api.camerasIdentifyDoor(mac, {});
          setStep('identify');
        } else {
          // Bilde-cam — ta bilde
          await window.api.camerasCaptureTest(mac, {});
          setStep('identify');
        }
      } catch (e) { setErr(e.message); }
      setBusy(false);
    };
    return (
      <div className="panel">
        <div className="panel-head">
          <h3>{lang === 'no' ? 'Velg en uidentifisert enhet' : 'Select an unidentified device'}</h3>
        </div>
        <table className="tbl">
          <thead><tr><th>MAC</th><th>Firmware</th><th>Type</th><th>Sett</th><th></th></tr></thead>
          <tbody>
            {unbound.map(u => (
              <tr key={u.mac_address}>
                <td className="mono" style={{ fontSize: 11 }}>{u.mac_address}</td>
                <td>{u.firmware_version || '—'}</td>
                <td>{u.has_mcp_expander
                  ? <Pill tone="info">Dør-cam (MCP detected)</Pill>
                  : <Pill tone="empty">Bilde-cam</Pill>}
                </td>
                <td className="muted" style={{ fontSize: 11 }}>
                  {new Date(u.last_seen_at).toLocaleString('no-NO', { timeStyle: 'short' })}
                </td>
                <td>
                  <button className="btn sm primary" disabled={busy} onClick={() => startIdentify(u.mac_address)}>
                    {lang === 'no' ? 'Start ID' : 'Start ID'}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {err && <div style={{ padding: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
      </div>
    );
  }

  // STEP 2: Operatør forteller hvilken dør / hylle de så
  if (step === 'identify' && selected) {
    const submitDoor = async () => {
      const doorNum = parseInt(doorInput, 10);
      if (!doorNum || doorNum < 1 || doorNum > 24) {
        setErr(lang === 'no' ? 'Dør må være 1-24' : 'Door must be 1-24');
        return;
      }
      setBusy(true);
      try {
        const r = await window.api.camerasIdentifyDoor(selected.mac_address, { door_number: doorNum });
        setSuggestion(r);
        setStep('bind');
      } catch (e) { setErr(e.message); }
      setBusy(false);
    };
    const submitShelf = async () => {
      const shelfNum = parseInt(shelfInput, 10);
      if (!shelfNum || shelfNum < 1 || shelfNum > 24) {
        setErr(lang === 'no' ? 'Hylle må være 1-24' : 'Shelf must be 1-24');
        return;
      }
      setBusy(true);
      try {
        const r = await window.api.camerasCaptureTest(selected.mac_address, { observed_shelf: shelfNum });
        setSuggestion(r);
        setStep('bind');
      } catch (e) { setErr(e.message); }
      setBusy(false);
    };
    const retrigger = async () => {
      try {
        if (selected.has_mcp_expander) await window.api.camerasIdentifyDoor(selected.mac_address, {});
        else await window.api.camerasCaptureTest(selected.mac_address, {});
      } catch (e) { setErr(e.message); }
    };
    return (
      <div className="panel" style={{ padding: 16 }}>
        <h3 style={{ margin: 0, fontSize: 14 }}>
          {lang === 'no' ? 'Identifiser enhet' : 'Identify device'}
          <span className="muted mono" style={{ fontSize: 11, marginLeft: 8 }}>{selected.mac_address}</span>
        </h3>
        <div style={{ marginTop: 14, padding: 12, background: 'var(--info-soft)',
                       borderRadius: 'var(--radius)', borderLeft: '3px solid var(--info)' }}>
          {selected.has_mcp_expander ? (
            <>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>
                🚪 {lang === 'no' ? 'En dør har akkurat åpnet seg på automaten.' : 'A door just opened on the machine.'}
              </div>
              <div style={{ fontSize: 12 }}>
                {lang === 'no' ? 'Hvilket dørnummer var det? (1-24)' : 'Which door number was it? (1-24)'}
              </div>
              <div className="row" style={{ marginTop: 10, gap: 8 }}>
                <input type="number" min="1" max="24" value={doorInput}
                       onChange={e => setDoorInput(e.target.value)}
                       className="input" style={{ width: 100 }}
                       placeholder="1-24" autoFocus />
                <button className="btn primary" onClick={submitDoor} disabled={busy}>
                  {lang === 'no' ? 'Bekreft' : 'Confirm'}
                </button>
                <button className="btn sm" onClick={retrigger} disabled={busy}>
                  🔁 {lang === 'no' ? 'Trigg på nytt' : 'Re-trigger'}
                </button>
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>
                📷 {lang === 'no' ? 'Et bilde ble nettopp tatt.' : 'A picture was just taken.'}
              </div>
              <div style={{ fontSize: 12 }}>
                {lang === 'no'
                  ? 'Sjekk live-bildet (hvis tilgjengelig) — hvilken hylle ser du i øvre venstre hjørne?'
                  : 'Check the live image — which shelf is in the top-left corner?'}
              </div>
              <div className="row" style={{ marginTop: 10, gap: 8 }}>
                <input type="number" min="1" max="24" value={shelfInput}
                       onChange={e => setShelfInput(e.target.value)}
                       className="input" style={{ width: 100 }} placeholder="1-24" autoFocus />
                <button className="btn primary" onClick={submitShelf} disabled={busy}>
                  {lang === 'no' ? 'Bekreft' : 'Confirm'}
                </button>
                <button className="btn sm" onClick={retrigger} disabled={busy}>
                  🔁 {lang === 'no' ? 'Ta nytt bilde' : 'Re-capture'}
                </button>
              </div>
            </>
          )}
        </div>
        {err && <div style={{ marginTop: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
        <button className="btn sm" style={{ marginTop: 14 }} onClick={() => setStep('select')}>
          ← {lang === 'no' ? 'Tilbake' : 'Back'}
        </button>
      </div>
    );
  }

  // STEP 3: Bekreft bindingen
  if (step === 'bind' && selected && suggestion) {
    const camId = suggestion.suggested_cam_id;
    const doBind = async () => {
      setBusy(true);
      try {
        await window.api.camerasBind({
          mac_address: selected.mac_address,
          automat_id: machine.id,
          cam_id: camId,
        });
        await onRefresh();
        setStep('done');
      } catch (e) { setErr(e.message); }
      setBusy(false);
    };
    return (
      <div className="panel" style={{ padding: 16 }}>
        <h3 style={{ margin: 0, fontSize: 14 }}>
          {lang === 'no' ? 'Bekreft binding' : 'Confirm binding'}
        </h3>
        <div style={{ marginTop: 14 }}>
          <KVPRow label="MAC" value={selected.mac_address} />
          <KVPRow label="Cam ID" value={`#${camId}`} />
          {suggestion.base_door && <KVPRow label={lang === 'no' ? 'Dører' : 'Doors'}
            value={`${suggestion.base_door}-${suggestion.base_door + 5}`} />}
          <KVPRow label={lang === 'no' ? 'Hyller' : 'Shelves'}
                  value={(suggestion.shelves || []).join(', ')} />
        </div>
        <div className="row" style={{ marginTop: 16, gap: 8 }}>
          <button className="btn primary" onClick={doBind} disabled={busy}>
            ✓ {lang === 'no' ? 'Bind enheten' : 'Bind device'}
          </button>
          <button className="btn" onClick={() => setStep('identify')}>
            ← {lang === 'no' ? 'Tilbake' : 'Back'}
          </button>
        </div>
        {err && <div style={{ marginTop: 10, color: 'var(--danger)', fontSize: 12 }}>❌ {err}</div>}
      </div>
    );
  }

  // STEP 4: Done!
  if (step === 'done') {
    return (
      <div className="panel" style={{ padding: 20, textAlign: 'center' }}>
        <Icon name="ok" size={28} style={{ color: 'var(--success)' }} />
        <div style={{ marginTop: 10, fontSize: 14 }}>
          {lang === 'no' ? 'Bundet!' : 'Bound!'}
          {missing.length - 1 > 0 && (
            <span className="muted" style={{ marginLeft: 8 }}>
              {missing.length - 1} {lang === 'no' ? 'igjen' : 'remaining'}
            </span>
          )}
        </div>
        <div className="row" style={{ marginTop: 16, justifyContent: 'center', gap: 8 }}>
          <button className="btn primary" onClick={() => {
            setStep('select'); setSelectedMac(null); setDoorInput(''); setShelfInput('');
            setSuggestion(null); setErr(null);
          }}>
            {lang === 'no' ? 'Neste enhet' : 'Next device'}
          </button>
        </div>
      </div>
    );
  }
  return null;
};

/* ===== ROI-marker: canvas der operatør tegner rektangler over hyller ===== */
const RoiMarker = ({ machine, camId, cameras, lang, onClose, onSaved }) => {
  const cam = cameras.find(c => c.cam_id === camId);
  // Hardkodet shelves-per-cam fra layout
  const SHELVES = {
    1: [19, 20, 22, 23], 2: [20, 21, 23, 24],
    3: [13, 14, 16, 17], 4: [14, 15, 17, 18],
    5: [7, 8, 10, 11],   6: [8, 9, 11, 12],
    7: [1, 2, 4, 5],     8: [2, 3, 5, 6],
  };
  const expectedShelves = SHELVES[camId] || [];
  const [boxes, setBoxes] = React.useState(
    (cam?.roi_config || []).map(r => ({ shelf_id: r.shelf_id, bbox: r.bbox, rotation_deg: r.rotation_deg || 0 }))
  );
  const [drawing, setDrawing] = React.useState(null);   // {x, y} mens man drar
  const [currentShelfIdx, setCurrentShelfIdx] = React.useState(0);
  const [busy, setBusy] = React.useState(false);
  const containerRef = React.useRef(null);

  // Hent bilde med JWT-auth via authedImageUrl (lager blob-URL)
  const [imageUrl, setImageUrl] = React.useState(null);
  const [imageErr, setImageErr] = React.useState(null);
  const reloadImage = React.useCallback(() => {
    setImageErr(null);
    window.authedImageUrl(window.api.camerasLastFrameUrl(machine.id, camId))
      .then(setImageUrl)
      .catch(e => setImageErr(e.message));
  }, [machine.id, camId]);
  React.useEffect(() => { reloadImage(); }, [reloadImage]);

  const captureNow = async () => {
    setBusy(true);
    try {
      await window.api.camerasCaptureNow(machine.id, camId);
      alert(lang === 'no' ? 'Bilde-kommando sendt. Reload bildet om ~5 sek.' : 'Capture sent. Reload in ~5s.');
    } catch (e) { alert(e.message); }
    setBusy(false);
  };

  // Pointer Events (2026-09-04): virker likt for mus OG touch — før var
  // ROI-tegning umulig på mobil/nettbrett (kun mouse-eventer, og touch-drag
  // scrollet siden i stedet). touchAction:'none' + setPointerCapture holder
  // gesten i containeren.
  const onMouseDown = (e) => {
    if (currentShelfIdx >= expectedShelves.length) return;
    try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
    const rect = containerRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
    setDrawing({ startX: x, startY: y, x, y });
  };
  const onMouseMove = (e) => {
    if (!drawing) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
    setDrawing({ ...drawing, x, y });
  };
  const onMouseUp = () => {
    if (!drawing) return;
    const x = Math.min(drawing.startX, drawing.x);
    const y = Math.min(drawing.startY, drawing.y);
    const w = Math.abs(drawing.x - drawing.startX);
    const h = Math.abs(drawing.y - drawing.startY);
    if (w > 0.02 && h > 0.02) {
      const shelfId = expectedShelves[currentShelfIdx];
      const newBoxes = boxes.filter(b => b.shelf_id !== shelfId);
      newBoxes.push({ shelf_id: shelfId, bbox: [x, y, w, h], rotation_deg: 0 });
      setBoxes(newBoxes);
      setCurrentShelfIdx(Math.min(currentShelfIdx + 1, expectedShelves.length));
    }
    setDrawing(null);
  };

  const save = async () => {
    setBusy(true);
    try {
      await window.api.camerasSaveRoi(machine.id, camId, boxes);
      onSaved();
    } catch (e) { alert(e.message); }
    setBusy(false);
  };

  const clear = () => { setBoxes([]); setCurrentShelfIdx(0); };

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer" style={{ width: 'min(900px, 95vw)' }}>
        <div className="drawer-head">
          <div>
            <h3 style={{ margin: 0, fontSize: 14 }}>ROI · Cam {camId}</h3>
            <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>
              {lang === 'no'
                ? `Tegn rektangler rundt hver hylle i bildet — neste hylle: ${expectedShelves[currentShelfIdx] || 'ferdig'}`
                : `Draw rectangles around each shelf — next: ${expectedShelves[currentShelfIdx] || 'done'}`}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close" size={14} /></button>
        </div>
        <div className="drawer-body">
          <div ref={containerRef}
               style={{ position: 'relative', width: '100%', aspectRatio: '4/3',
                        background: '#07070a', borderRadius: 'var(--radius)',
                        cursor: currentShelfIdx < expectedShelves.length ? 'crosshair' : 'default',
                        overflow: 'hidden', userSelect: 'none', touchAction: 'none' }}
               onPointerDown={onMouseDown}
               onPointerMove={onMouseMove}
               onPointerUp={onMouseUp}
               onPointerCancel={() => setDrawing(null)}>
            {imageUrl && (
              <img src={imageUrl} alt="" draggable={false}
                   style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            )}
            {!imageUrl && (
              <div className="empty" style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--text-faint)' }}>
                {imageErr ? `❌ ${imageErr}` : '⏳ Laster…'}
              </div>
            )}
            {boxes.map((b) => (
              <div key={b.shelf_id} style={{
                position: 'absolute',
                left: `${b.bbox[0] * 100}%`, top: `${b.bbox[1] * 100}%`,
                width: `${b.bbox[2] * 100}%`, height: `${b.bbox[3] * 100}%`,
                border: '2px solid var(--accent)', background: 'rgba(245,158,11,0.15)',
                color: 'var(--accent)', fontWeight: 600, fontSize: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{b.shelf_id}</div>
            ))}
            {drawing && (
              <div style={{
                position: 'absolute',
                left: `${Math.min(drawing.startX, drawing.x) * 100}%`,
                top:  `${Math.min(drawing.startY, drawing.y) * 100}%`,
                width: `${Math.abs(drawing.x - drawing.startX) * 100}%`,
                height: `${Math.abs(drawing.y - drawing.startY) * 100}%`,
                border: '2px dashed var(--info)', background: 'rgba(59,130,246,0.10)',
              }} />
            )}
          </div>
          <div className="row" style={{ marginTop: 12, gap: 8 }}>
            <button className="btn" onClick={captureNow} disabled={busy}>
              <Icon name="camera" size={12} />{lang === 'no' ? 'Ta nytt bilde' : 'Capture now'}
            </button>
            <button className="btn sm" onClick={reloadImage}>
              <Icon name="refresh" size={12} />Reload
            </button>
            <button className="btn" onClick={clear}>{lang === 'no' ? 'Tøm' : 'Clear'}</button>
            <button className="btn primary" onClick={save} disabled={busy || boxes.length === 0}>
              ✓ {lang === 'no' ? 'Lagre' : 'Save'} ({boxes.length}/{expectedShelves.length})
            </button>
            <div className="grow" />
            <span className="muted" style={{ fontSize: 11 }}>
              {boxes.length}/{expectedShelves.length} {lang === 'no' ? 'tegnet' : 'drawn'}
            </span>
          </div>
        </div>
      </div>
    </>
  );
};

/* ===== Helsesjekk-historikk + live status ===== */
const CameraHealth = ({ machine, lang }) => {
  const [history, setHistory] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const refresh = React.useCallback(async () => {
    setLoading(true);
    try { setHistory(await window.api.camerasHealth(machine.id, 100)); }
    catch (e) { console.warn(e); }
    setLoading(false);
  }, [machine.id]);

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

  // Grupper per cam_id for tidslinje
  const byCam = {};
  history.forEach(h => {
    if (!byCam[h.cam_id]) byCam[h.cam_id] = [];
    byCam[h.cam_id].push(h);
  });

  return (
    <div className="panel">
      <div className="toolbar">
        <div className="section-title">{lang === 'no' ? 'Helsesjekk-historikk' : 'Health check history'}</div>
        <span className="muted mono" style={{ fontSize: 11 }}>{history.length} sjekker</span>
        <div className="grow" />
        <button className="btn sm" onClick={refresh}>
          <Icon name="refresh" size={12} />{loading ? '…' : 'Refresh'}
        </button>
      </div>
      {history.length === 0 ? (
        <div className="empty" style={{ padding: 30 }}>
          {lang === 'no' ? 'Ingen helsesjekker registrert ennå. Kontrolleren kjører timetlige sjekker automatisk.' : 'No checks yet'}
        </div>
      ) : (
        <table className="tbl">
          <thead>
            <tr>
              <th>Tid</th>
              <th>Cam</th>
              <th>Status</th>
              <th>Heap</th>
              <th>RSSI</th>
              <th>MCP</th>
              <th>Latency</th>
              <th>Firmware</th>
              <th>Feil</th>
            </tr>
          </thead>
          <tbody>
            {history.map((h, i) => (
              <tr key={i}>
                <td className="mono" style={{ fontSize: 11.5 }}>
                  {new Date(h.check_at).toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'medium' })}
                </td>
                <td>#{h.cam_id}</td>
                <td>{h.status === 'ok' ? <Pill tone="ok" dot>OK</Pill>
                     : h.status === 'timeout' ? <Pill tone="danger" dot>Timeout</Pill>
                     : h.status === 'missing_mcp' ? <Pill tone="warn" dot>MCP missing</Pill>
                     : <Pill tone="warn" dot>{h.status}</Pill>}
                </td>
                <td className="mono" style={{ fontSize: 11 }}>
                  {h.free_heap ? `${Math.round(h.free_heap / 1024)} KB` : '—'}
                </td>
                <td className="mono" style={{ fontSize: 11 }}>{h.rssi != null ? `${h.rssi} dB` : '—'}</td>
                <td>{h.mcp_detected === true ? '✓' : h.mcp_detected === false ? '✗' : '—'}</td>
                <td className="mono" style={{ fontSize: 11 }}>{h.response_time_ms ? `${h.response_time_ms} ms` : '—'}</td>
                <td className="mono" style={{ fontSize: 11 }}>{h.firmware || '—'}</td>
                <td>{h.error && <span style={{ color: 'var(--danger)', fontSize: 11 }}>{h.error}</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

Object.assign(window, { CameraSetupPage, CameraOverview, CameraWizard, RoiMarker, CameraHealth });