{% extends "base.html" %}
{% block title %}Escaneos{% endblock %}

{% block head %}
<style>
  body { background: #f0f4f8; }
  h1   { margin-bottom: 1rem; font-size: 1.6rem; }

  .page-header { display: flex; justify-content: space-between; align-items: center;
                 flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
  .page-header h1 { margin-bottom: 0; }
  .header-actions { display: flex; align-items: center; gap: .8rem; }

  .app-version { font-size: .6em; color: #94a3b8; font-weight: 400;
                 margin-left: .5rem; letter-spacing: .04em; }

  .btn-stop { background: #fff; color: #dc2626; border: 1px solid #fca5a5;
              padding: .45rem .9rem; border-radius: .4rem;
              font-size: .85rem; font-weight: 600; cursor: pointer;
              transition: background .15s, color .15s; }
  .btn-stop:hover          { background: #fee2e2; }
  .btn-stop.confirming     { background: #dc2626; color: #fff; border-color: #dc2626; }
  .btn-stop:disabled       { opacity: .6; cursor: not-allowed; }

  .stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
  .stat  { flex: 1; background: #fff; border-radius: .75rem; padding: .75rem 1.25rem;
           font-size: .9rem; box-shadow: 0 1px 4px #0001; text-align: center; }
  .stat strong { font-size: 1.4rem; display: block; }

  .actions { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.5rem; }
  .btn { display: inline-flex; align-items: center; justify-content: center;
         gap: .35ch; padding: .6rem 1.4rem;
         border-radius: .6rem; text-decoration: none; font-weight: 600;
         border: none; cursor: pointer; font-size: .95rem; transition: background .2s; }
  .btn-process, .btn-export { min-width: 13rem; }
  .btn-process { background: #2563eb; color: #fff; }
  .btn-process:hover:not(:disabled) { background: #1d4ed8; }
  .btn-process:disabled             { background: #94a3b8; cursor: not-allowed; }
  .btn-export  { background: #16a34a; color: #fff; }
  .btn-export:hover { background: #15803d; }
  progress { flex: 1; height: 1rem; }
  .actions .btn-export { margin-left: auto; }

  table  { width: 100%; border-collapse: collapse; background: #fff;
           border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 6px #0001; }
  th, td { padding: .65rem .85rem; text-align: left; font-size: .875rem; vertical-align: middle; }
  th     { background: #1e293b; color: #e2e8f0; font-weight: 600; }
  tr:nth-child(even) { background: #f8fafc; }
  tr:hover           { background: #eff6ff; }
  tr.flash           { animation: flash .8s ease-out; }
  @keyframes flash { from { background: #fef9c3; } to { background: inherit; } }

  .badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px;
           font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
  .READ       { background: #dcfce7; color: #166534; }
  .UNREADABLE { background: #f3e8ff; color: #6b21a8; }
  .PENDING    { background: #e0e7ff; color: #3730a3; }

  .qr-block { display: flex; flex-direction: column; align-items: center;
              gap: .5rem; margin-bottom: 1.5rem;
              background: #fff; border-radius: 1rem;
              padding: 1rem 1.5rem; box-shadow: 0 1px 4px #0001; }
  .qr-block img { width: 140px; height: 140px; }
  .qr-block p   { font-size: .8rem; color: #64748b; margin: 0; }

  .ocr-edit {
    display: inline-block; min-width: 90px; max-width: 280px;
    padding: .25rem .5rem; margin-right: .3rem;
    border: 1px solid transparent; border-radius: .3rem;
    cursor: text; white-space: pre-wrap; word-break: break-all;
    font-family: ui-monospace, monospace;
  }
  .ocr-edit:hover                 { border-color: #93c5fd; background: #eff6ff; }
  .ocr-edit:focus                 { border-color: #2563eb; background: #fff; outline: none; }
  .ocr-edit:empty::before         { content: attr(data-placeholder); color: #94a3b8;
                                    font-style: italic; font-family: system-ui, sans-serif; }
  .ocr-edit.saving                { opacity: .6; }
  .ocr-edit.saved                 { background: #dcfce7 !important; }
  .ocr-edit[data-pending="1"]     { color: #94a3b8; cursor: not-allowed; pointer-events: none; }

  /* Weight input (history table) */
  .weight-edit { width: 5rem; padding: .25rem .4rem; border: 1px solid #cbd5e1;
                 border-radius: .3rem; font-size: .85rem; font-family: ui-monospace, monospace;
                 background: #fff; }
  .weight-edit:focus { border-color: #2563eb; outline: none; }
  .weight-edit.saving { opacity: .6; }
  .weight-edit.saved  { background: #dcfce7; }

  /* Checkbox cells */
  .meta-checkbox { width: 1.15rem; height: 1.15rem; cursor: pointer; accent-color: #c2410c; }
  .meta-checkbox[data-field="waste"] { accent-color: #b91c1c; }

  .btn-mark { background: #fff; color: #2563eb; border: 1px solid #93c5fd;
              padding: .25rem .5rem; border-radius: .3rem;
              font-size: .8rem; cursor: pointer; vertical-align: middle; }
  .btn-mark:hover { background: #eff6ff; }

  .btn-delete { background: #fff; color: #dc2626; border: 1px solid #fca5a5;
                padding: .25rem .55rem; border-radius: .3rem;
                font-size: .95rem; cursor: pointer; vertical-align: middle;
                min-width: 2.4rem; transition: background .15s, color .15s; }
  .btn-delete:hover            { background: #fee2e2; }
  .btn-delete.confirming       { background: #dc2626; color: #fff; border-color: #dc2626;
                                 font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
  .btn-delete:disabled         { opacity: .5; cursor: not-allowed; }

  .img-thumb-btn { background: none; border: none; font-size: 1.3rem;
                   cursor: pointer; padding: 0; line-height: 1;
                   transition: transform .15s; }
  .img-thumb-btn:hover { transform: scale(1.3); }

  .modal-backdrop { display: none; position: fixed; inset: 0;
                    background: rgba(0,0,0,.7); z-index: 1000;
                    align-items: center; justify-content: center; }
  .modal-backdrop.open { display: flex; }
  .modal-box { position: relative; background: #fff; border-radius: 1rem;
               padding: 1rem; max-width: 90vw; max-height: 90vh;
               box-shadow: 0 8px 32px rgba(0,0,0,.4); }
  .modal-box img { display: block; max-width: 80vw; max-height: 80vh; border-radius: .5rem; }
  .modal-close   { position: absolute; top: .5rem; right: .75rem;
                   background: none; border: none; font-size: 1.4rem;
                   cursor: pointer; color: #64748b; }
  .modal-close:hover { color: #1e293b; }

  .crop-overlay { position: fixed; inset: 0; z-index: 1100;
                  background: rgba(0,0,0,.92);
                  display: none; flex-direction: column; }
  .crop-overlay.open { display: flex; }
  .crop-toolbar { display: flex; align-items: center; justify-content: space-between;
                  padding: .8rem 1rem; gap: 1rem; color: #eee; }
  .crop-toolbar button { background: #374151; color: #fff; border: none;
                         padding: .55rem 1rem; border-radius: .4rem;
                         font-size: .9rem; font-weight: 600; cursor: pointer; }
  .crop-hint { font-size: .8rem; opacity: .8; flex: 1; text-align: center; }
  .crop-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center;
                      overflow: auto; padding: .5rem; touch-action: none; }
  .crop-frame { position: relative; display: inline-block; }
  #cropCanvas { display: block; max-width: 92vw; max-height: 78vh;
                user-select: none; touch-action: none; cursor: crosshair; }
  .crop-rect  { position: absolute; pointer-events: none;
                border: 2px solid #2563eb; background: rgba(37,99,235,.18);
                display: none; }
  .crop-status { text-align: center; padding: .5rem; font-size: .85rem;
                 color: #eee; min-height: 1.5rem; }
</style>
{% endblock %}

{% block content %}
<div class="container">
  <div class="page-header">
    <h1><span data-i18n="h1.scans">Escaneos</span><span class="app-version">v{{ app_version }}</span></h1>
    <div class="header-actions">
      <div class="lang-toggle" role="group" aria-label="Language">
        <button class="lang-btn" data-lang="es">ES</button>
        <button class="lang-btn" data-lang="en">EN</button>
      </div>
      <button id="stopBtn" class="btn-stop"
              data-i18n="btn.stop"
              data-i18n-attr="title:btn.stop.title">⏻ Detener servidor</button>
    </div>
  </div>

  <div class="qr-block">
    <img src="/qrcode.png" alt="QR">
    <p data-i18n="qr.hint">Escanea para abrir el escáner en el móvil</p>
  </div>

  <div class="stats">
    <div class="stat"><strong>{{ stats.total }}</strong> <span data-i18n="stat.total">Total</span></div>
    <div class="stat"><strong id="stat-pending">{{ stats.pending }}</strong> <span data-i18n="stat.pending">Pendientes</span></div>
    <div class="stat"><strong>{{ stats.read }}</strong> <span data-i18n="stat.read">Leídos</span></div>
    <div class="stat"><strong>{{ stats.unreadable }}</strong> <span data-i18n="stat.unreadable">Sin leer</span></div>
  </div>

  <div class="actions">
    <button id="processBtn" class="btn btn-process"
        {% if stats.pending == 0 %}disabled{% endif %}>
      <span id="processLabel"></span>
    </button>
    <progress id="processBar" max="100" value="0" hidden></progress>
    <a id="exportLink" class="btn btn-export" href="/export/xlsx" data-i18n="btn.export">⬇ Exportar XLSX</a>
  </div>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th data-i18n="col.timestamp">Fecha y hora</th>
        <th data-i18n="col.ocr">OCR (toca para editar)</th>
        <th data-i18n="col.weight">Peso (kg)</th>
        <th data-i18n="col.broken">Roto</th>
        <th data-i18n="col.waste">Descarte</th>
        <th data-i18n="col.status">Estado</th>
        <th data-i18n="col.photo">Foto</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for s in scans %}
      <tr id="scan-{{ s.id }}" data-img="/uploads/{{ s.image_filename }}">
        <td>{{ s.id }}</td>
        <td>{{ s.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
        <td class="cell-ocr">
          <div class="ocr-edit"
               contenteditable="plaintext-only"
               data-id="{{ s.id }}"
               data-original="{{ s.ocr_value or '' }}"
               data-placeholder="Toca para escribir"
               {% if s.status == 'PENDING' %}data-pending="1"{% endif %}
            >{{ s.ocr_value or '' }}</div>
          <button class="btn-mark"
                  data-id="{{ s.id }}"
                  data-img="/uploads/{{ s.image_filename }}"
                  data-i18n-attr="title:mark.title">✂️</button>
        </td>
        <td class="cell-weight">
          <input type="number" class="weight-edit" data-id="{{ s.id }}"
                 step="0.01" min="0" inputmode="decimal"
                 value="{{ '%g'|format(s.weight_kg) if s.weight_kg is not none else '' }}"
                 placeholder="—">
        </td>
        <td class="cell-broken">
          <input type="checkbox" class="meta-checkbox" data-id="{{ s.id }}" data-field="broken"
                 {% if s.broken %}checked{% endif %}>
        </td>
        <td class="cell-waste">
          <input type="checkbox" class="meta-checkbox" data-id="{{ s.id }}" data-field="waste"
                 {% if s.waste %}checked{% endif %}>
        </td>
        <td>
          <span class="badge {{ s.status }}" data-i18n="status.{{ s.status }}">{{ s.status }}</span>
        </td>
        <td class="cell-photo">
          {% if s.image_filename %}
            <button class="img-thumb-btn"
                    data-src="/uploads/{{ s.image_filename }}"
                    title="{{ s.image_filename }}">🖼️</button>
          {% else %}—{% endif %}
        </td>
        <td class="cell-actions">
          <button class="btn-delete" data-id="{{ s.id }}"
                  data-i18n-attr="title:delete.title">🗑️</button>
        </td>
      </tr>
      {% endfor %}
      {% if not scans %}
      <tr><td colspan="9" style="text-align:center;padding:2rem;color:#888"
              data-i18n="noscans">Aún no hay escaneos.</td></tr>
      {% endif %}
    </tbody>
  </table>
</div>

<div id="img-modal" class="modal-backdrop">
  <div class="modal-box" onclick="event.stopPropagation()">
    <button class="modal-close" id="modalCloseBtn">✕</button>
    <img id="modal-img" src="" alt="">
  </div>
</div>

<div id="cropOverlay" class="crop-overlay">
  <div class="crop-toolbar">
    <button id="cropCancelBtn" data-i18n="crop.cancel">✕ Cancelar</button>
    <span class="crop-hint" data-i18n="crop.hint">Dibuja un rectángulo alrededor del texto</span>
    <span style="width: 60px"></span>
  </div>
  <div class="crop-canvas-wrap">
    <div class="crop-frame">
      <canvas id="cropCanvas"></canvas>
      <div id="cropRect" class="crop-rect"></div>
    </div>
  </div>
  <div class="crop-status" id="cropStatus">&nbsp;</div>
</div>

<script>
  // ── Translation dictionary ─────────────────────────────────────────────
  const T_HISTORY = {
    en: {
      'page.title':       'Scans',
      'h1.scans':         'Scans',
      'btn.stop':         '⏻ Stop server',
      'btn.stop.confirm': 'Click again to confirm',
      'btn.stop.busy':    'Stopping…',
      'btn.stop.done':    '⏹ Server stopped — restart with python app.py',
      'btn.stop.title':   'Stop the Flask server',
      'qr.hint':          'Scan to open scanner on your phone',
      'stat.total':       'Total',
      'stat.pending':     'Pending',
      'stat.read':        'Read',
      'stat.unreadable':  'Unreadable',
      'btn.process':      '▶ Process {n} pending',
      'btn.process.done': '✓ Done',
      'btn.process.err':  '⚠ Error — retry',
      'btn.export':       '⬇ Export XLSX',
      'col.timestamp':    'Timestamp',
      'col.ocr':          'OCR (click to edit)',
      'col.weight':       'Weight (kg)',
      'col.broken':       'Broken',
      'col.waste':        'Waste',
      'col.status':       'Status',
      'col.photo':        'Photo',
      'noscans':          'No scans yet.',
      'placeholder.type': 'Click to type',
      'status.PENDING':   'PENDING',
      'status.READ':      'READ',
      'status.UNREADABLE':'UNREADABLE',
      'crop.cancel':      '✕ Cancel',
      'crop.hint':        'Drag a rectangle around the text',
      'crop.running':     'Running OCR…',
      'crop.too_small':   'Selection too small — try again.',
      'crop.no_text':     'No text found — try a different crop.',
      'crop.failed':      'OCR failed — try again.',
      'delete.title':     'Delete scan and photo (click again to confirm)',
      'delete.confirm':   'Confirm',
      'delete.failed':    'Delete failed — please retry.',
      'save.failed':      'Save failed — please retry.',
      'weight.invalid':   'Weight must be a positive number.',
      'mark.title':       'Crop & re-OCR a region',
    },
    es: {
      'page.title':       'Escaneos',
      'h1.scans':         'Escaneos',
      'btn.stop':         '⏻ Detener servidor',
      'btn.stop.confirm': 'Toca de nuevo para confirmar',
      'btn.stop.busy':    'Deteniendo…',
      'btn.stop.done':    '⏹ Servidor detenido — reinicia con python app.py',
      'btn.stop.title':   'Detener el servidor Flask',
      'qr.hint':          'Escanea para abrir el escáner en el móvil',
      'stat.total':       'Total',
      'stat.pending':     'Pendientes',
      'stat.read':        'Leídos',
      'stat.unreadable':  'Sin leer',
      'btn.process':      '▶ Procesar {n} pendientes',
      'btn.process.done': '✓ Listo',
      'btn.process.err':  '⚠ Error — reintentar',
      'btn.export':       '⬇ Exportar XLSX',
      'col.timestamp':    'Fecha y hora',
      'col.ocr':          'OCR (toca para editar)',
      'col.weight':       'Peso (kg)',
      'col.broken':       'Roto',
      'col.waste':        'Descarte',
      'col.status':       'Estado',
      'col.photo':        'Foto',
      'noscans':          'Aún no hay escaneos.',
      'placeholder.type': 'Toca para escribir',
      'status.PENDING':   'PENDIENTE',
      'status.READ':      'LEÍDO',
      'status.UNREADABLE':'SIN LEER',
      'crop.cancel':      '✕ Cancelar',
      'crop.hint':        'Dibuja un rectángulo alrededor del texto',
      'crop.running':     'Ejecutando OCR…',
      'crop.too_small':   'Selección demasiado pequeña — inténtalo de nuevo.',
      'crop.no_text':     'No se encontró texto — prueba con otro recorte.',
      'crop.failed':      'OCR falló — inténtalo de nuevo.',
      'delete.title':     'Eliminar escaneo y foto (toca de nuevo para confirmar)',
      'delete.confirm':   'Confirmar',
      'delete.failed':    'Eliminación fallida — reintenta.',
      'save.failed':      'Guardado fallido — reintenta.',
      'weight.invalid':   'El peso debe ser un número positivo.',
      'mark.title':       'Recortar y re-OCR una región',
    }
  };

  const $ = (id) => document.getElementById(id);

  // ── Modal helpers ──────────────────────────────────────────────────────
  function openModal(src){ $('modal-img').src = src; $('img-modal').classList.add('open'); }
  function closeModal()  { $('img-modal').classList.remove('open'); $('modal-img').src = ''; }
  $('modalCloseBtn').addEventListener('click', closeModal);
  $('img-modal').addEventListener('click', (e) => { if (e.target.id === 'img-modal') closeModal(); });
  document.body.addEventListener('click', (e) => {
    const btn = e.target.closest('.img-thumb-btn');
    if (btn) openModal(btn.dataset.src);
  });

  // ── Helpers ────────────────────────────────────────────────────────────
  function setBadge(row, status) {
    const b = row.querySelector('.badge');
    b.className       = 'badge ' + status;
    b.dataset.i18n    = 'status.' + status;
    b.textContent     = t('status.' + status);
  }
  function flash(row) { row.classList.add('flash'); setTimeout(() => row.classList.remove('flash'), 800); }
  function decrementPending() {
    const el = $('stat-pending');
    const n  = Math.max(0, parseInt(el.textContent, 10) - 1);
    el.textContent = n;
    refreshProcessLabel(n);
  }
  function refreshProcessLabel(pending) {
    $('processLabel').textContent = t('btn.process', { n: pending });
  }

  // ── Stop server (two-click confirm) ────────────────────────────────────
  (() => {
    const stopBtn = $('stopBtn');
    let armed = false, armTimer = null;
    function disarm() {
      armed = false; clearTimeout(armTimer);
      stopBtn.classList.remove('confirming');
      stopBtn.textContent = t('btn.stop');
    }
    stopBtn.addEventListener('click', async () => {
      if (!armed) {
        armed = true;
        stopBtn.classList.add('confirming');
        stopBtn.textContent = t('btn.stop.confirm');
        armTimer = setTimeout(disarm, 3000);
        return;
      }
      clearTimeout(armTimer);
      stopBtn.disabled    = true;
      stopBtn.textContent = t('btn.stop.busy');
      try { await fetch('/shutdown', { method: 'POST' }); } catch (_) {}
      stopBtn.textContent = t('btn.stop.done');
      stopServerRequested = true;  // pause auto-refresh
    });
  })();

  // ── SSE: process pending queue ─────────────────────────────────────────
  const btn = $('processBtn');
  const bar = $('processBar');
  let sseActive = false;

  btn.addEventListener('click', () => {
    btn.disabled = true; bar.hidden = false; bar.value = 0;
    sseActive = true;

    const es = new EventSource('/process-pending');
    let total = 0, done = 0;

    es.addEventListener('start', e => { total = JSON.parse(e.data).total; bar.max = total; });
    es.addEventListener('progress', e => {
      const r   = JSON.parse(e.data);
      const row = $('scan-' + r.id);
      if (row) {
        const edit = row.querySelector('.ocr-edit');
        edit.textContent      = r.ocr || '';
        edit.dataset.original = r.ocr || '';
        edit.removeAttribute('data-pending');
        if (r.image_filename) {
          row.dataset.img = '/uploads/' + r.image_filename;
          const mark = row.querySelector('.btn-mark');  if (mark)  mark.dataset.img  = row.dataset.img;
          const thumb = row.querySelector('.img-thumb-btn'); if (thumb) thumb.dataset.src = row.dataset.img;
        }
        setBadge(row, r.status);
        flash(row);
      }
      done++; bar.value = done; decrementPending();
    });
    es.addEventListener('done', () => { es.close(); sseActive = false; btn.textContent = t('btn.process.done'); });
    es.onerror = () => { es.close(); sseActive = false; btn.disabled = false; btn.textContent = t('btn.process.err'); };
  });

  // ── Inline OCR edit ────────────────────────────────────────────────────
  document.body.addEventListener('focusout', async (e) => {
    const el = e.target.closest('.ocr-edit');
    if (el) {
      const newVal   = el.textContent.trim();
      const original = el.dataset.original.trim();
      if (newVal === original) return;
      el.classList.add('saving');
      try {
        const resp = await fetch(`/scan/${el.dataset.id}/ocr`, {
          method:  'POST',
          headers: { 'Content-Type': 'application/json' },
          body:    JSON.stringify({ value: newVal }),
        });
        const data = await resp.json();
        el.dataset.original = newVal;
        setBadge(el.closest('tr'), data.status);
        el.classList.remove('saving');
        el.classList.add('saved');
        setTimeout(() => el.classList.remove('saved'), 800);
      } catch { el.classList.remove('saving'); alert(t('save.failed')); }
      return;
    }

    // Weight cell save
    const w = e.target.closest('.weight-edit');
    if (w) {
      const raw = w.value.trim();
      const val = raw === '' ? null : parseFloat(raw);
      if (raw !== '' && (isNaN(val) || val < 0)) { alert(t('weight.invalid')); return; }
      w.classList.add('saving');
      try {
        const resp = await fetch(`/scan/${w.dataset.id}/metadata`, {
          method:  'POST',
          headers: { 'Content-Type': 'application/json' },
          body:    JSON.stringify({ weight_kg: val }),
        });
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        w.classList.remove('saving');
        w.classList.add('saved');
        setTimeout(() => w.classList.remove('saved'), 800);
      } catch { w.classList.remove('saving'); alert(t('save.failed')); }
    }
  });

  document.body.addEventListener('keydown', (e) => {
    if (!e.target.classList.contains('ocr-edit')) return;
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); e.target.blur(); }
    else if (e.key === 'Escape')           { e.preventDefault(); e.target.textContent = e.target.dataset.original; e.target.blur(); }
  });

  // Checkbox toggles for Broken / Waste
  document.body.addEventListener('change', async (e) => {
    const box = e.target.closest('.meta-checkbox');
    if (!box) return;
    const id    = box.dataset.id;
    const field = box.dataset.field;
    const newVal = box.checked;
    try {
      const r = await fetch(`/scan/${id}/metadata`, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ [field]: newVal }),
      });
      if (!r.ok) throw new Error('HTTP ' + r.status);
    } catch {
      box.checked = !newVal;  // revert
      alert(t('save.failed'));
    }
  });

  // ── Manual crop overlay ────────────────────────────────────────────────
  const crop = { scanId: null, cropping: false, start: null };

  function openManualCrop(id, url) {
    crop.scanId = id;
    const canvas = $('cropCanvas');
    const img    = new Image();
    img.onload = () => {
      canvas.width = img.naturalWidth; canvas.height = img.naturalHeight;
      canvas.getContext('2d').drawImage(img, 0, 0);
      $('cropRect').style.display = 'none';
      $('cropStatus').textContent = '';
      $('cropOverlay').classList.add('open');
    };
    img.onerror = () => alert('Could not load image.');
    img.src = url;
  }
  function closeManualCrop() {
    $('cropOverlay').classList.remove('open');
    crop.cropping = false; crop.start = null;
  }
  $('cropCancelBtn').addEventListener('click', closeManualCrop);

  document.body.addEventListener('click', (e) => {
    const btn = e.target.closest('.btn-mark');
    if (btn) openManualCrop(parseInt(btn.dataset.id, 10), btn.dataset.img);
  });

  const cropCanvas = $('cropCanvas');
  const cropRect   = $('cropRect');
  cropCanvas.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    cropCanvas.setPointerCapture(e.pointerId);
    crop.cropping = true;
    const cb = cropCanvas.getBoundingClientRect();
    crop.start = { x: e.clientX - cb.left, y: e.clientY - cb.top };
    Object.assign(cropRect.style, {
      display: 'block',
      left: crop.start.x + 'px', top: crop.start.y + 'px',
      width: '0px', height: '0px',
    });
  });
  cropCanvas.addEventListener('pointermove', (e) => {
    if (!crop.cropping || !crop.start) return;
    const cb = cropCanvas.getBoundingClientRect();
    const x  = e.clientX - cb.left, y = e.clientY - cb.top;
    Object.assign(cropRect.style, {
      left:   Math.min(crop.start.x, x) + 'px',
      top:    Math.min(crop.start.y, y) + 'px',
      width:  Math.abs(x - crop.start.x) + 'px',
      height: Math.abs(y - crop.start.y) + 'px',
    });
  });
  cropCanvas.addEventListener('pointerup', async (e) => {
    if (!crop.cropping || !crop.start) return;
    crop.cropping = false;
    const cb = cropCanvas.getBoundingClientRect();
    const x = e.clientX - cb.left, y = e.clientY - cb.top;
    const L = Math.min(crop.start.x, x), T = Math.min(crop.start.y, y);
    const W = Math.abs(x - crop.start.x), H = Math.abs(y - crop.start.y);
    const statusEl = $('cropStatus');
    if (W < 8 || H < 8) { statusEl.textContent = t('crop.too_small'); return; }
    const ratio = cropCanvas.width / cropCanvas.clientWidth;
    const sx = Math.round(L * ratio), sy = Math.round(T * ratio);
    const sw = Math.round(W * ratio), sh = Math.round(H * ratio);
    const off = document.createElement('canvas');
    off.width = sw; off.height = sh;
    off.getContext('2d').drawImage(cropCanvas, sx, sy, sw, sh, 0, 0, sw, sh);
    const dataUrl = off.toDataURL('image/png');
    statusEl.textContent = t('crop.running');
    try {
      const resp = await fetch(`/scan/${crop.scanId}/ocr-region`, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ image: dataUrl }),
      });
      const data = await resp.json();
      if (data.ocr) {
        const row  = $('scan-' + crop.scanId);
        const edit = row.querySelector('.ocr-edit');
        edit.textContent      = data.ocr;
        edit.dataset.original = data.ocr;
        edit.removeAttribute('data-pending');
        setBadge(row, data.status); flash(row);
        closeManualCrop();
      } else {
        statusEl.textContent = data.message || t('crop.no_text');
      }
    } catch { statusEl.textContent = t('crop.failed'); }
  });

  // ── Two-step row delete ────────────────────────────────────────────────
  let pendingDelete = null;
  function resetPendingDelete() {
    if (!pendingDelete) return;
    clearTimeout(pendingDelete.timer);
    pendingDelete.btn.classList.remove('confirming');
    pendingDelete.btn.textContent = '🗑️';
    pendingDelete = null;
  }
  document.body.addEventListener('click', async (e) => {
    const delBtn = e.target.closest('.btn-delete');
    if (!delBtn) { resetPendingDelete(); return; }
    if (pendingDelete && pendingDelete.btn === delBtn) {
      const id = pendingDelete.id;
      resetPendingDelete();
      delBtn.disabled = true;
      try {
        const resp = await fetch(`/scan/${id}/delete`, { method: 'POST' });
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        const row = $('scan-' + id); if (row) row.remove();
      } catch { delBtn.disabled = false; alert(t('delete.failed')); }
      return;
    }
    resetPendingDelete();
    delBtn.classList.add('confirming');
    delBtn.textContent = t('delete.confirm');
    pendingDelete = { btn: delBtn, id: parseInt(delBtn.dataset.id, 10),
                      timer: setTimeout(resetPendingDelete, 3000) };
  });

  document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape') return;
    if (pendingDelete)                                                 resetPendingDelete();
    else if ($('cropOverlay').classList.contains('open'))              closeManualCrop();
    else if ($('img-modal').classList.contains('open'))                closeModal();
  });

  // ── Auto-refresh every 10s (paused when user is busy) ──────────────────
  // We check /ping first so a stopped server doesn't trigger a broken reload.
  const REFRESH_INTERVAL_MS = 10000;
  let stopServerRequested = false;

  function isBusy() {
    if (sseActive || stopServerRequested) return true;
    if (pendingDelete) return true;
    if ($('cropOverlay').classList.contains('open')) return true;
    if ($('img-modal').classList.contains('open'))   return true;
    const focused = document.activeElement;
    if (focused && (focused.classList?.contains('ocr-edit') ||
                    focused.classList?.contains('weight-edit'))) return true;
    return false;
  }

  async function tryAutoRefresh() {
    if (isBusy()) return;
    try {
      const r = await fetch('/ping', { cache: 'no-store' });
      if (r.ok) window.location.reload();
    } catch { /* server unreachable — try again next tick */ }
  }

  // ── Init ───────────────────────────────────────────────────────────────
  // Interpolated labels (process button) and the export link (carries the
  // current lang to the XLSX endpoint so column headers match the UI) are
  // re-rendered on every langchange — including the initial dispatch
  // fired by initI18n, which is why no explicit refresh call is needed below.
  document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener('langchange', () => {
      refreshProcessLabel(parseInt($('stat-pending').textContent, 10) || 0);
      $('exportLink').href = '/export/xlsx?lang=' + getLang();
    });
    initI18n(T_HISTORY);
    setInterval(tryAutoRefresh, REFRESH_INTERVAL_MS);
  });
</script>
{% endblock %}