(function () {
  const $ = (s, c) => (c || document).querySelector(s),
    $$ = (s, c) => (c || document).querySelectorAll(s),
    O = $('#ocr-svg-overlay'),
    I = $('#ocr-svg-image'),
    P = $('#canvas-placeholder-msg'),
    D = $('#details-content-area'),
    V = $('.canvas-viewport-container'),
    W = $('.viewport-wrapper'),
    Z = $('#zoom-level-text'),
    btn = id => $(`#btn-zoom-${id}`);

  let z = 1, px = 0, py = 0, dr = 0, dragging = false, sx = 0, sy = 0;

  const upd = () => { W && (W.style.transform = `translate(${px}px,${py}px) scale(${z})`); Z && (Z.innerText = `${Math.round(z * 100)}%`); },
    zoom = f => { z = Math.min(5, Math.max(.5, z * f)); upd(); },
    reset = () => { z = 1; px = 0; py = 0; upd(); };

  [['In', () => zoom(1.2)], ['Out', () => zoom(1 / 1.2)], ['Reset', reset]].forEach(([id, fn]) => {
    const b = btn(id.toLowerCase());
    b && b.addEventListener('click', e => { e.stopPropagation(); fn(); });
  });

  V && (I.addEventListener('dragstart', e => e.preventDefault()),
    V.addEventListener('wheel', e => { e.preventDefault(); zoom(e.deltaY < 0 ? 1.15 : .85); }, { passive: !1 }),
    V.addEventListener('mousedown', e => {
      if (e.target.closest('button,input')) return;
      dragging = !0; dr = 0; sx = e.clientX - px; sy = e.clientY - py;
      V.style.cursor = 'grabbing'; e.preventDefault();
    }),
    window.addEventListener('mousemove', e => {
      if (!dragging) return;
      const dx = e.clientX - (sx + px), dy = e.clientY - (sy + py);
      dr += Math.sqrt(dx * dx + dy * dy);
      px = e.clientX - sx; py = e.clientY - sy; upd();
    }),
    window.addEventListener('mouseup', () => { dragging && (dragging = !1, V.style.cursor = 'grab'); }));

  const src = () => { const c = $('#input-image'); return c && c.querySelector('img')?.src || null; },
    CELL = (k, v, c = 'text-foreground') => `<span class="text-xs font-medium text-muted-foreground">${k}</span><span class="text-xs font-semibold ${c}">${v}</span>`,
    EMPTY = '<div class="flex h-full min-h-[200px] items-center justify-center px-2"><p class="text-center text-xs text-muted-foreground">Click any element inside the canvas to inspect its properties</p></div>';

  function populate(data) {
    O.innerHTML = '';
    if (!data) return;
    const el = [];
    ['blocks', 'paragraphs'].forEach(k => (data[k] || []).forEach(v => el.push({ t: k == 'blocks' ? 'Block' : 'Paragraph', d: v })));
    (data.lines || []).forEach(l => {
      el.push({ t: 'Line', d: l });
      (l.words || []).forEach(w => {
        el.push({ t: 'Word', d: w });
        (w.symbols || []).forEach(s => el.push({ t: 'Symbol', d: s }));
        w.whitespace_bounding_box && el.push({ t: 'Whitespace', d: { bounding_box: w.whitespace_bounding_box } });
      });
    });
    const order = ['Block', 'Paragraph', 'Line', 'Word', 'Symbol', 'Whitespace'];
    el.sort((a, b) => order.indexOf(a.t) - order.indexOf(b.t));
    window.ocr = el;
    el.forEach((e, i) => {
      const b = e.d.bounding_box;
      if (!b) return;
      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      r.setAttribute('class', `ocr-box box-${e.t.toLowerCase()}`);
      r.setAttribute('x', b.x); r.setAttribute('y', b.y);
      r.setAttribute('width', b.width); r.setAttribute('height', b.height);
      b.angle && r.setAttribute('transform', `rotate(${b.angle},${b.x + b.width / 2},${b.y + b.height / 2})`);
      r.setAttribute('data-idx', i);
      O.appendChild(r);
    });
  }

  const C = { Block: ['#f472b6', 'bg-pink-500/20 text-pink-400'], Paragraph: ['#22d3ee', 'bg-cyan-500/20 text-cyan-400'], Line: ['#c084fc', 'bg-violet-500/20 text-violet-400'], Word: ['#34d399', 'bg-emerald-500/20 text-emerald-400'], Symbol: ['#fbbf24', 'bg-amber-500/20 text-amber-400'], Whitespace: ['#f87171', 'bg-red-500/20 text-red-400'] };

  function meta(item) {
    const d = item.d, b = d.bounding_box, t = item.t, cl = (C[t] || ['#818cf8', 'bg-indigo-500/20 text-indigo-400'])[1];
    let rows = [CELL('Type', `<span class="${cl} rounded px-2 py-0.5 text-xs font-semibold">${t}</span>`),
    CELL('Confidence', d.confidence !== void 0 ? (d.confidence * 100).toFixed(1) + '%' : 'N/A', 'text-emerald-400')];
    if (t == 'Line' || t == 'Word') rows.push(CELL('Language', d.language || 'N/A'), CELL('Direction', d.direction || 'N/A'), CELL('Content Type', d.content_type || 'N/A'));
    if (t == 'Word') {
      const f = d.foreground_rgb_hex || 'N/A', g = d.background_rgb_hex || 'N/A';
      rows.push(CELL('FG Color', `<span class="inline-flex items-center gap-1.5"><span class="inline-block h-3 w-3 rounded border border-white/20" style="background:${f}"></span>${f}</span>`),
        CELL('BG Color', `<span class="inline-flex items-center gap-1.5"><span class="inline-block h-3 w-3 rounded border border-white/20" style="background:${g}"></span>${g}</span>`),
        CELL('Gray', `${d.foreground_gray_value} / ${d.background_gray_value}`),
        CELL('Space After', d.has_space_after ? 'Yes' : 'No'));
    }
    rows.push(CELL('BBox', `<span class="font-mono text-[11px]">${b.x}, ${b.y}, ${b.width}×${b.height}</span>`),
      CELL('Rotation', `<span class="font-mono text-[11px] text-amber-400">${(b.angle || 0).toFixed(1)}°</span>`));
    D.innerHTML = `<div class="flex flex-col gap-2">${rows.map(r => `<div class="flex items-center justify-between border-b border-border pb-1.5">${r}</div>`).join('')}</div>
<div class="mt-3 flex flex-col gap-1.5"><span class="text-[11px] font-medium text-muted-foreground">Extracted text</span><div class="rounded-lg border border-primary/30 bg-primary/10 px-3 py-2 text-sm font-bold text-foreground">${d.utf8_string || 'N/A'}</div></div>`;
  }

  O.addEventListener('click', e => {
    if (dr > 5 || !window.ocr) return;
    const el = e.target.closest('.ocr-box');
    if (!el) return;
    $$('.ocr-box.selected').forEach(x => x.classList.remove('selected'));
    el.classList.add('selected');
    const item = window.ocr[+el.getAttribute('data-idx')];
    item && meta(item);
  });

  function loadImg(src) {
    reset();
    if (!src) { I.removeAttribute('src'); O.innerHTML = ''; P.style.display = 'block'; D.innerHTML = EMPTY; return; }
    P.style.display = 'none';
    I.onload = () => O.setAttribute('viewBox', `0 0 ${I.naturalWidth || I.width} ${I.naturalHeight || I.height}`);
    I.src = src;
  }

  window.loadStreamedData = function (raw) {
    if (!raw || !raw.trim()) { loadImg(null); I.style.filter = 'none'; return; }
    try {
      const p = JSON.parse(raw);
      I.style.filter = 'none'; P.style.display = 'none'; D.innerHTML = EMPTY;
      populate(p.annotation);
      loadImg(src());
    } catch (e) { console.error(e); }
  };

  (function init() {
    const el = $('#input-image');
    if (!el) { setTimeout(init, 150); return; }
    new MutationObserver(() => {
      const s = src();
      if (s && s !== I.src) { window.ocr = null; loadImg(s); I.style.filter = 'blur(8px)'; }
      else if (!s) { loadImg(null); I.style.filter = 'none'; }
    }).observe(el, { childList: true, subtree: true, attributes: true });
    const s = src();
    s && loadImg(s);
  })();

  $$('.canvas-toggles input').forEach(el => {
    const fn = () => O.classList.toggle('show-' + el.id.replace('cb-', ''), el.checked);
    el.addEventListener('change', fn); fn();
  });
})();