{% extends "base.html" %}
{% block title %}{{ file.document_title or file.original_filename or 'Document' }} - DocuElevate{% endblock %}

{% block head_extra %}
  <script src="/static/js/common.js"></script>
  <!-- PDF.js library (Apache 2.0 License - compatible) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  <script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
  </script>
  <style>
    .doc-container { max-width: 1200px; margin: 0 auto; }

    /* ── header ── */
    .doc-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    }
    .doc-title { font-size: 1.75rem; font-weight: 700; color: #1f2937; line-height: 1.25; }
    .doc-subtitle { font-size: 0.9rem; color: #6b7280; margin-top: 0.25rem; font-family: monospace; }

    /* ── status pill ── */
    .status-pill {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.35rem 0.85rem; border-radius: 9999px;
      font-size: 0.8rem; font-weight: 600; white-space: nowrap;
    }
    .pill-completed  { background: #d1fae5; color: #065f46; }
    .pill-failed     { background: #fee2e2; color: #991b1b; }
    .pill-processing { background: #dbeafe; color: #1e3a8a; }
    .pill-pending    { background: #fef3c7; color: #92400e; }
    .pill-duplicate  { background: #e5e7eb; color: #374151; }

    /* ── cards ── */
    .doc-card {
      background: white; border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
      padding: 1.5rem; margin-bottom: 1.25rem;
    }
    .doc-card-title {
      font-size: 1rem; font-weight: 700; color: #374151;
      text-transform: uppercase; letter-spacing: 0.05em;
      margin-bottom: 1rem;
    }

    /* ── two-column layout ── */
    .doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    @media (max-width: 768px) { .doc-grid { grid-template-columns: 1fr; } }

    /* ── metadata table ── */
    .meta-row { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; align-items: baseline; }
    .meta-row:last-child { border-bottom: none; }
    .meta-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; min-width: 110px; flex-shrink: 0; }
    .meta-value { font-size: 0.9rem; color: #1f2937; word-break: break-word; }

    /* ── tags ── */
    .tag-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #f0fdf4; color: #15803d; margin: 0.1rem; }

    /* ── pdf.js viewer ── */
    .pdf-viewer { position: relative; background: #525659; border-radius: 0.375rem; overflow: hidden; }
    .pdf-controls {
      display: flex; align-items: center; justify-content: center; gap: 0.75rem;
      padding: 0.5rem; background: #f1f5f9; border-radius: 0.375rem 0.375rem 0 0;
    }
    .pdf-nav-btn {
      padding: 0.35rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.25rem;
      background: white; color: #374151; font-size: 0.8rem; cursor: pointer;
      min-height: 36px; min-width: 36px;
    }
    .pdf-nav-btn:disabled { opacity: 0.4; cursor: default; }
    .pdf-nav-btn:hover:not(:disabled) { background: #e2e8f0; }
    .pdf-page-info { font-size: 0.8rem; color: #374151; font-weight: 600; min-width: 100px; text-align: center; }
    .pdf-canvas-wrap { display: flex; justify-content: center; padding: 0.75rem; min-height: 400px; max-height: 700px; overflow: auto; }
    .pdf-canvas-wrap canvas { max-width: 100%; height: auto; }

    /* ── image viewer with zoom/pan ── */
    .img-viewer { position: relative; background: #f1f5f9; border-radius: 0.375rem; overflow: hidden; }
    .img-controls {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.5rem; background: #f1f5f9; border-radius: 0.375rem 0.375rem 0 0;
    }
    .img-controls button {
      padding: 0.35rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.25rem;
      background: white; color: #374151; font-size: 0.85rem; cursor: pointer;
      min-height: 36px; min-width: 36px;
    }
    .img-controls button:hover { background: #e2e8f0; }
    .img-wrap {
      display: flex; justify-content: center; align-items: center;
      overflow: auto; max-height: 650px; min-height: 300px; cursor: grab;
      padding: 0.5rem; background: #525659;
    }
    .img-wrap.dragging { cursor: grabbing; }
    .img-wrap img { transition: transform 0.15s ease; transform-origin: center center; }

    /* ── text viewer ── */
    .text-viewer { border-radius: 0.375rem; overflow: hidden; }
    .text-viewer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.5rem 0.75rem; background: #f1f5f9; border-radius: 0.375rem 0.375rem 0 0;
    }
    .text-viewer-header span { font-size: 0.8rem; color: #374151; font-weight: 600; }
    .text-content {
      background: #1e293b; color: #e2e8f0; padding: 1rem; font-family: 'SFMono-Regular', Consolas, monospace;
      font-size: 0.82rem; line-height: 1.65; max-height: 600px; overflow: auto; white-space: pre-wrap; word-break: break-word;
      tab-size: 4;
    }
    .text-content .line-number {
      display: inline-block; width: 3.5em; color: #64748b; text-align: right;
      margin-right: 1em; user-select: none; font-size: 0.75rem;
    }

    /* ── preview iframe fallback ── */
    .preview-frame { width: 100%; height: 600px; border: none; border-radius: 0.375rem; background: #f1f5f9; display: block; }

    /* ── text box ── */
    .ocr-text {
      background: #1a202c; color: #e2e8f0; padding: 1rem 1.25rem;
      border-radius: 0.375rem; font-size: 0.8rem; font-family: monospace;
      line-height: 1.6; max-height: 400px; overflow-y: auto;
      white-space: pre-wrap; word-break: break-word;
    }
    .text-toggle {
      cursor: pointer; color: #3b82f6; font-size: 0.875rem;
      font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem;
      background: none; border: none; padding: 0;
    }
    .text-toggle:hover { color: #2563eb; }

    /* ── action buttons ── */
    .action-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.5rem 1.1rem; border-radius: 0.375rem;
      font-size: 0.875rem; font-weight: 600; text-decoration: none;
      cursor: pointer; border: none; transition: filter 0.1s;
    }
    .action-btn:hover { filter: brightness(0.92); }
    .btn-primary   { background: #3b82f6; color: white; }
    .btn-secondary { background: #f3f4f6; color: #374151; }
    .btn-green     { background: #10b981; color: white; }
    .btn-process   { background: #6366f1; color: white; }

    /* ── detail rows ── */
    .info-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; }
    .info-row:last-child { border-bottom: none; }
    .info-key { color: #6b7280; }
    .info-val { color: #1f2937; font-family: monospace; text-align: right; word-break: break-all; max-width: 60%; }

    /* ── error ── */
    .error-box { background: #fee2e2; border: 1px solid #f87171; color: #b91c1c; padding: 1rem; border-radius: 0.375rem; margin-bottom: 1rem; }
  </style>
{% endblock %}

{% block content %}
<div class="doc-container">

  {% if error %}
  <div class="error-box"><strong>Error:</strong> {{ error }}</div>
  {% elif file %}

  <!-- ── Back + header ── -->
  <a href="/files" style="display:inline-flex;align-items:center;gap:0.4rem;color:#3b82f6;font-weight:600;text-decoration:none;margin-bottom:1.25rem;" aria-label="Back to Files">
    <i class="fas fa-arrow-left" aria-hidden="true"></i> Back to Files
  </a>

  <div class="doc-header">
    <div>
      <div class="doc-title">
        {% if gpt_metadata and gpt_metadata.filename %}
          {{ gpt_metadata.filename | replace('.pdf','') | replace('_',' ') }}
        {% elif file.document_title %}
          {{ file.document_title }}
        {% else %}
          {{ file.original_filename or '(untitled)' }}
        {% endif %}
      </div>
      <div class="doc-subtitle">{{ file.original_filename }}</div>
    </div>

    <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
      <!-- Status pill -->
      {% if file.is_duplicate %}
        <span class="status-pill pill-duplicate"><i class="fas fa-copy" aria-hidden="true"></i> Duplicate</span>
      {% elif step_summary %}
        {% set main_completed = step_summary.main.success + step_summary.main.skipped %}
        {% if step_summary.main.failure > 0 or step_summary.uploads.failure > 0 %}
          <span class="status-pill pill-failed"><i class="fas fa-times-circle" aria-hidden="true"></i> Failed</span>
        {% elif step_summary.main["in_progress"] > 0 or step_summary.uploads["in_progress"] > 0 %}
          <span class="status-pill pill-processing"><i class="fas fa-circle-notch fa-spin" aria-hidden="true"></i> Processing</span>
        {% elif step_summary.total_main_steps > 0 and main_completed == step_summary.total_main_steps and step_summary.main.failure == 0 %}
          <span class="status-pill pill-completed"><i class="fas fa-check-circle" aria-hidden="true"></i> Completed</span>
        {% else %}
          <span class="status-pill pill-pending"><i class="fas fa-pause-circle" aria-hidden="true"></i> Pending</span>
        {% endif %}
      {% endif %}

      <!-- Process detail link -->
      <a href="/files/{{ file.id }}/detail" class="action-btn btn-process">
        <i class="fas fa-cogs" aria-hidden="true"></i> Processing Details
      </a>
    </div>
  </div>

  <!-- ── Main two-column grid ── -->
  <div class="doc-grid">

    <!-- LEFT: Metadata -->
    <div>
      {% if gpt_metadata %}
      <div class="doc-card">
        <div class="doc-card-title"><i class="fas fa-tags" aria-hidden="true" style="color:#3b82f6;margin-right:0.4rem;"></i>Document Metadata</div>

        {% if gpt_metadata.document_type %}
        <div class="meta-row">
          <span class="meta-label">Type</span>
          <span class="meta-value">{{ gpt_metadata.document_type }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.date %}
        <div class="meta-row">
          <span class="meta-label">Date</span>
          <span class="meta-value">{{ gpt_metadata.date }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.absender %}
        <div class="meta-row">
          <span class="meta-label">Sender</span>
          <span class="meta-value">{{ gpt_metadata.absender }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.empfaenger %}
        <div class="meta-row">
          <span class="meta-label">Recipient</span>
          <span class="meta-value">{{ gpt_metadata.empfaenger }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.betrag %}
        <div class="meta-row">
          <span class="meta-label">Amount</span>
          <span class="meta-value">{{ gpt_metadata.betrag }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.kontonummer %}
        <div class="meta-row">
          <span class="meta-label">Account</span>
          <span class="meta-value" style="font-family:monospace;">{{ gpt_metadata.kontonummer }}</span>
        </div>
        {% endif %}

        {% if gpt_metadata.tags %}
        <div class="meta-row" style="align-items:flex-start;">
          <span class="meta-label" style="margin-top:0.2rem;">Tags</span>
          <span class="meta-value">
            {% if gpt_metadata.tags is string %}
              {% for t in gpt_metadata.tags.split(',') %}
                <span class="tag-pill">{{ t.strip() }}</span>
              {% endfor %}
            {% else %}
              {% for t in gpt_metadata.tags %}
                <span class="tag-pill">{{ t }}</span>
              {% endfor %}
            {% endif %}
          </span>
        </div>
        {% endif %}

        {% if gpt_metadata.filename %}
        <div class="meta-row">
          <span class="meta-label">Suggested name</span>
          <span class="meta-value" style="font-family:monospace;font-size:0.8rem;">{{ gpt_metadata.filename }}</span>
        </div>
        {% endif %}
      </div>
      {% endif %}

      <!-- File info -->
      <div class="doc-card">
        <div class="doc-card-title"><i class="fas fa-info-circle" aria-hidden="true" style="color:#6b7280;margin-right:0.4rem;"></i>File Info</div>
        <div class="info-row">
          <span class="info-key">Uploaded</span>
          <span class="info-val">{{ file.created_at.strftime('%Y-%m-%d %H:%M') if file.created_at else 'N/A' }}</span>
        </div>
        <div class="info-row">
          <span class="info-key">Size</span>
          <span class="info-val">{{ (file.file_size / 1024) | round(1) }} KB</span>
        </div>
        <div class="info-row">
          <span class="info-key">MIME type</span>
          <span class="info-val">{{ file.mime_type or 'N/A' }}</span>
        </div>
        <div class="info-row">
          <span class="info-key">ID</span>
          <span class="info-val">{{ file.id }}</span>
        </div>
        <div class="info-row">
          <span class="info-key">Hash</span>
          <span class="info-val" style="font-size:0.7rem;">{{ file.filehash[:32] }}…</span>
        </div>
      </div>

      <!-- Actions -->
      <div class="doc-card">
        <div class="doc-card-title"><i class="fas fa-bolt" aria-hidden="true" style="color:#f59e0b;margin-right:0.4rem;"></i>Actions</div>
        <div style="display:flex;flex-wrap:wrap;gap:0.6rem;">
          {% if processed_file_exists %}
          <a href="/api/files/{{ file.id }}/download?version=processed" class="action-btn btn-primary">
            <i class="fas fa-download" aria-hidden="true"></i> Download (processed)
          </a>
          {% endif %}
          {% if original_file_exists %}
          <a href="/api/files/{{ file.id }}/download?version=original" class="action-btn btn-secondary">
            <i class="fas fa-download" aria-hidden="true"></i> Download (original)
          </a>
          {% endif %}
          {% if processed_file_exists %}
          <a href="/api/files/{{ file.id }}/preview?version=processed" target="_blank" class="action-btn btn-secondary">
            <i class="fas fa-external-link-alt" aria-hidden="true"></i> Open processed
          </a>
          {% elif original_file_exists %}
          <a href="/api/files/{{ file.id }}/preview?version=original" target="_blank" class="action-btn btn-secondary">
            <i class="fas fa-external-link-alt" aria-hidden="true"></i> Open original
          </a>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- RIGHT: Document preview -->
    <div>
      <div class="doc-card" style="padding:1rem;">
        {% set preview_mime = file.mime_type or 'application/pdf' %}
        {% set preview_version = 'processed' if processed_file_exists else 'original' %}
        {% set has_preview = processed_file_exists or original_file_exists %}

        {% if preview_mime.startswith('image/') %}
        <div class="doc-card-title"><i class="fas fa-image" aria-hidden="true" style="color:#8b5cf6;margin-right:0.4rem;"></i>Preview</div>
        {% elif preview_mime.startswith('text/') %}
        <div class="doc-card-title"><i class="fas fa-file-code" aria-hidden="true" style="color:#059669;margin-right:0.4rem;"></i>Preview</div>
        {% else %}
        <div class="doc-card-title"><i class="fas fa-file-pdf" aria-hidden="true" style="color:#ef4444;margin-right:0.4rem;"></i>Preview</div>
        {% endif %}

        {% if has_preview %}
          {% if preview_mime.startswith('image/') %}
          <!-- ── Image viewer with zoom / pan ── -->
          <div class="img-viewer" id="img-viewer">
            <div class="img-controls">
              <button onclick="imgZoom(1.25)" title="Zoom in" aria-label="Zoom in"><i class="fas fa-search-plus" aria-hidden="true"></i></button>
              <button onclick="imgZoom(0.8)" title="Zoom out" aria-label="Zoom out"><i class="fas fa-search-minus" aria-hidden="true"></i></button>
              <button onclick="imgReset()" title="Reset zoom" aria-label="Reset zoom"><i class="fas fa-expand" aria-hidden="true"></i></button>
              <span id="img-zoom-level" style="font-size:0.8rem;color:#6b7280;min-width:3em;text-align:center;">100%</span>
            </div>
            <div class="img-wrap" id="img-wrap">
              <img
                id="preview-img"
                src="/api/files/{{ file.id }}/preview?version={{ preview_version }}"
                alt="{{ file.original_filename }}"
                draggable="false"
                style="max-width:100%;height:auto;">
            </div>
          </div>

          {% elif preview_mime.startswith('text/') %}
          <!-- ── Text file viewer with line numbers ── -->
          <div class="text-viewer" id="text-viewer">
            <div class="text-viewer-header">
              <span><i class="fas fa-file-code" aria-hidden="true" style="margin-right:0.3rem;"></i>{{ file.original_filename }}</span>
              <button class="text-toggle" onclick="copyTextPreview()" id="text-copy-btn" aria-label="Copy file text">
                <i class="fas fa-copy" aria-hidden="true"></i> Copy
              </button>
            </div>
            <div class="text-content" id="text-preview-content" aria-live="polite">
              <div style="text-align:center;padding:2rem;color:#94a3b8;"><i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Loading…</div>
            </div>
          </div>

          {% else %}
          <!-- ── PDF viewer (pdf.js) ── -->
          <div class="pdf-viewer" id="pdf-viewer">
            <div class="pdf-controls">
              <button class="pdf-nav-btn" onclick="pdfChangePage(-1)" id="pdf-prev-btn" aria-label="Previous page"><i class="fas fa-chevron-left" aria-hidden="true"></i></button>
              <span class="pdf-page-info" id="pdf-page-info" aria-live="polite">Loading…</span>
              <button class="pdf-nav-btn" onclick="pdfChangePage(1)" id="pdf-next-btn" aria-label="Next page"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
            </div>
            <div class="pdf-canvas-wrap" id="pdf-canvas-wrap">
              <div style="text-align:center;padding:3rem;color:#94a3b8;">
                <i class="fas fa-spinner fa-spin" aria-hidden="true" style="font-size:2rem;margin-bottom:0.75rem;"></i>
                <p>Loading PDF…</p>
              </div>
            </div>
          </div>
          {% endif %}
          <div style="font-size:0.75rem;color:#9ca3af;margin-top:0.4rem;text-align:right;">{{ 'Processed' if processed_file_exists else 'Original' }} version</div>
        {% else %}
          <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;background:#f9fafb;border-radius:0.375rem;color:#9ca3af;">
            <i class="fas fa-file" aria-hidden="true" style="font-size:3rem;margin-bottom:1rem;opacity:0.4;"></i>
            <p>No file available for preview</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- ── Extracted text ── -->
  {% if file.ocr_text %}
  <div class="doc-card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
      <div class="doc-card-title" style="margin:0;"><i class="fas fa-align-left" aria-hidden="true" style="color:#8b5cf6;margin-right:0.4rem;"></i>Extracted Text</div>
      <div style="display:flex;gap:0.5rem;">
        <button class="text-toggle" onclick="toggleOcrText()" aria-expanded="false" aria-controls="ocr-text-block">
          <i id="ocr-toggle-icon" class="fas fa-chevron-down" aria-hidden="true"></i>
          <span id="ocr-toggle-label">Show text</span>
        </button>
        <button class="text-toggle" onclick="copyOcrText()" id="ocr-copy-btn" style="color:#10b981;" aria-label="Copy extracted text">
          <i class="fas fa-copy" aria-hidden="true"></i> Copy
        </button>
      </div>
    </div>
    <div id="ocr-text-block" style="display:none;">
      <pre class="ocr-text" id="ocr-text-content">{{ file.ocr_text }}</pre>
    </div>
  </div>
  {% elif processed_file_exists or original_file_exists %}
  <div class="doc-card">
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <div class="doc-card-title" style="margin:0;"><i class="fas fa-align-left" aria-hidden="true" style="color:#8b5cf6;margin-right:0.4rem;"></i>Extracted Text</div>
      <button class="action-btn btn-secondary" onclick="loadText({{ file.id }})">
        <i class="fas fa-file-alt" aria-hidden="true"></i> Extract &amp; show text
      </button>
    </div>
    <div id="text-load-area" style="margin-top:0.75rem;"></div>
  </div>
  {% endif %}

  {% else %}
  <!-- file is None without error -->
  <div class="error-box">Document not found.</div>
  {% endif %}

</div>

<script>
  // ── Toggle inline OCR text visibility ──
  function toggleOcrText() {
    var block = document.getElementById('ocr-text-block');
    var icon  = document.getElementById('ocr-toggle-icon');
    var label = document.getElementById('ocr-toggle-label');
    var btn   = icon.closest('button');
    if (block.style.display === 'none') {
      block.style.display = 'block';
      icon.className = 'fas fa-chevron-up';
      label.textContent = 'Hide text';
      if (btn) btn.setAttribute('aria-expanded', 'true');
    } else {
      block.style.display = 'none';
      icon.className = 'fas fa-chevron-down';
      label.textContent = 'Show text';
      if (btn) btn.setAttribute('aria-expanded', 'false');
    }
  }

  // ── Copy OCR text to clipboard ──
  function copyOcrText() {
    var content = document.getElementById('ocr-text-content');
    if (!content) return;
    var text = content.textContent;
    var btn = document.getElementById('ocr-copy-btn');
    var orig = btn.innerHTML;

    navigator.clipboard.writeText(text).then(function() {
      btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
      setTimeout(function() { btn.innerHTML = orig; }, 2000);
    }).catch(function() {
      try {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.cssText = 'position:fixed;opacity:0;';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(function() { btn.innerHTML = orig; }, 2000);
      } catch(e) {}
    });
  }

  // ── On-demand text extraction (when ocr_text not in DB) ──
  var _textCache = null;
  function loadText(fileId) {
    var area = document.getElementById('text-load-area');
    if (_textCache) {
      renderText(area, _textCache);
      return;
    }
    area.innerHTML = '<div style="text-align:center;padding:1.5rem;color:#6b7280;"><i class="fas fa-spinner fa-spin fa-2x"></i><p style="margin-top:0.5rem;">Extracting text…</p></div>';

    var url = {% if processed_file_exists %}'/files/' + fileId + '/text/processed'{% else %}'/files/' + fileId + '/text/original'{% endif %};
    fetch(url)
      .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
      .then(function(data) {
        _textCache = data.text;
        renderText(area, data.text);
      })
      .catch(function(err) {
        area.innerHTML = '<div style="color:#dc2626;padding:0.75rem;background:#fee2e2;border-radius:0.375rem;font-size:0.875rem;"><i class="fas fa-exclamation-triangle"></i> Failed to extract text: ' + err.message + '</div>';
      });
  }

  function renderText(container, text) {
    container.innerHTML = '';
    var pre = document.createElement('pre');
    pre.className = 'ocr-text';
    pre.textContent = text;
    container.appendChild(pre);
  }

  // ── PDF.js viewer ──
  var _pdfState = { doc: null, page: 1, total: 0 };

  function pdfInit(url) {
    var wrap = document.getElementById('pdf-canvas-wrap');
    if (!wrap) return;
    pdfjsLib.getDocument(url).promise.then(function(pdf) {
      _pdfState.doc = pdf;
      _pdfState.total = pdf.numPages;
      _pdfState.page = 1;
      pdfRenderPage();
    }).catch(function() {
      wrap.innerHTML = '<div style="text-align:center;padding:2rem;color:#f87171;"><i class="fas fa-exclamation-triangle" style="font-size:2rem;margin-bottom:0.5rem;"></i><p>Failed to load PDF</p></div>';
    });
  }

  function pdfRenderPage() {
    var wrap = document.getElementById('pdf-canvas-wrap');
    if (!_pdfState.doc || !wrap) return;
    _pdfState.doc.getPage(_pdfState.page).then(function(page) {
      var vp = page.getViewport({ scale: 1.0 });
      var scale = Math.min(wrap.clientWidth / vp.width, 2.0);
      var svp = page.getViewport({ scale: scale });
      var canvas = document.createElement('canvas');
      canvas.width = svp.width;
      canvas.height = svp.height;
      canvas.style.maxWidth = '100%';
      canvas.style.height = 'auto';
      wrap.innerHTML = '';
      wrap.appendChild(canvas);
      page.render({ canvasContext: canvas.getContext('2d'), viewport: svp });
      pdfUpdateInfo();
    });
  }

  function pdfChangePage(delta) {
    var np = _pdfState.page + delta;
    if (np >= 1 && np <= _pdfState.total) {
      _pdfState.page = np;
      pdfRenderPage();
    }
  }

  function pdfUpdateInfo() {
    var info = document.getElementById('pdf-page-info');
    if (info) info.textContent = 'Page ' + _pdfState.page + ' of ' + _pdfState.total;
    var prev = document.getElementById('pdf-prev-btn');
    var next = document.getElementById('pdf-next-btn');
    if (prev) prev.disabled = _pdfState.page <= 1;
    if (next) next.disabled = _pdfState.page >= _pdfState.total;
  }

  // ── Image viewer with zoom / pan ──
  var _imgScale = 1;

  function imgZoom(factor) {
    _imgScale = Math.max(0.25, Math.min(5, _imgScale * factor));
    var img = document.getElementById('preview-img');
    if (img) img.style.transform = 'scale(' + _imgScale + ')';
    var label = document.getElementById('img-zoom-level');
    if (label) label.textContent = Math.round(_imgScale * 100) + '%';
  }

  function imgReset() {
    _imgScale = 1;
    var img = document.getElementById('preview-img');
    if (img) img.style.transform = 'scale(1)';
    var label = document.getElementById('img-zoom-level');
    if (label) label.textContent = '100%';
  }

  // Mouse-drag panning for image viewer
  (function() {
    var wrap = document.getElementById('img-wrap');
    if (!wrap) return;
    var dragging = false, startX, startY, scrollL, scrollT;
    wrap.addEventListener('mousedown', function(e) {
      dragging = true; wrap.classList.add('dragging');
      startX = e.pageX - wrap.offsetLeft; startY = e.pageY - wrap.offsetTop;
      scrollL = wrap.scrollLeft; scrollT = wrap.scrollTop;
    });
    wrap.addEventListener('mousemove', function(e) {
      if (!dragging) return; e.preventDefault();
      wrap.scrollLeft = scrollL - (e.pageX - wrap.offsetLeft - startX);
      wrap.scrollTop  = scrollT - (e.pageY - wrap.offsetTop  - startY);
    });
    wrap.addEventListener('mouseup', function() { dragging = false; wrap.classList.remove('dragging'); });
    wrap.addEventListener('mouseleave', function() { dragging = false; wrap.classList.remove('dragging'); });
    // Mouse wheel zoom
    wrap.addEventListener('wheel', function(e) {
      e.preventDefault();
      imgZoom(e.deltaY < 0 ? 1.1 : 0.9);
    }, { passive: false });
  })();

  // ── Text file viewer ──
  function loadTextPreview(url) {
    var container = document.getElementById('text-preview-content');
    if (!container) return;
    fetch(url)
      .then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); })
      .then(function(text) {
        container.innerHTML = '';
        var lines = text.split('\n');
        for (var i = 0; i < lines.length; i++) {
          var lineEl = document.createElement('div');
          var numSpan = document.createElement('span');
          numSpan.className = 'line-number';
          numSpan.textContent = (i + 1) + '';
          lineEl.appendChild(numSpan);
          lineEl.appendChild(document.createTextNode(lines[i]));
          container.appendChild(lineEl);
        }
      })
      .catch(function() {
        container.innerHTML = '<div style="color:#f87171;padding:1rem;">Failed to load file content</div>';
      });
  }

  function copyTextPreview() {
    var container = document.getElementById('text-preview-content');
    if (!container) return;
    var lines = container.querySelectorAll('div');
    var text = [];
    lines.forEach(function(line) {
      var clone = line.cloneNode(true);
      var num = clone.querySelector('.line-number');
      if (num) num.remove();
      text.push(clone.textContent);
    });
    var btn = document.getElementById('text-copy-btn');
    var orig = btn.innerHTML;
    navigator.clipboard.writeText(text.join('\n')).then(function() {
      btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
      setTimeout(function() { btn.innerHTML = orig; }, 2000);
    }).catch(function() {
      try {
        var ta = document.createElement('textarea');
        ta.value = text.join('\n');
        ta.style.cssText = 'position:fixed;opacity:0;';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(function() { btn.innerHTML = orig; }, 2000);
      } catch(e) {}
    });
  }

  // ── Initialise on load ──
  document.addEventListener('DOMContentLoaded', function() {
    {% if (processed_file_exists or original_file_exists) and file %}
      {% set pv = 'processed' if processed_file_exists else 'original' %}
      {% set pm = file.mime_type or 'application/pdf' %}
      {% if pm.startswith('text/') %}
        loadTextPreview('/api/files/{{ file.id }}/preview?version={{ pv }}');
      {% elif not pm.startswith('image/') %}
        pdfInit('/api/files/{{ file.id }}/preview?version={{ pv }}');
      {% endif %}
    {% endif %}
  });
</script>
{% endblock %}