{% extends "base.html" %}
{% block title %}رفع وثائق — سجل العقارات{% endblock %}

{% block content %}
<div class="page-header page-header-hero">
  <div>
    <span class="page-kicker">منصة الأرشفة والمراجعة</span>
    <h1>بطاقات معلومات الملكية العقارية</h1>
    <p class="subtitle">ارفع صور أو ملفات PDF، ثم راجع النتائج واستكمل البحث من واجهة واحدة واضحة وسريعة.</p>
  </div>
  <div class="header-actions">
    <a href="/search" class="btn btn-secondary">فتح البحث</a>
    <a href="/documents" class="btn btn-primary">عرض الوثائق</a>
  </div>
</div>

{% if stats and stats.total %}
<div class="stats-bar">
  <div class="stat"><span class="stat-num">{{ stats.total }}</span><span class="stat-label">إجمالي الوثائق</span></div>
  <div class="stat confirmed"><span class="stat-num">{{ stats.confirmed or 0 }}</span><span class="stat-label">مؤكّدة</span></div>
  <div class="stat pending"><span class="stat-num">{{ stats.pending_review or 0 }}</span><span class="stat-label">بانتظار المراجعة</span></div>
  {% if stats.errors %}<div class="stat error"><span class="stat-num">{{ stats.errors }}</span><span class="stat-label">أخطاء</span></div>{% endif %}
</div>
{% if stats.pending_review %}
<div class="alert-banner">
  <a href="/review/next">ابدأ مراجعة {{ stats.pending_review }} وثيقة →</a>
</div>
{% endif %}
{% endif %}

<div class="upload-card">
  <div class="card-heading">
    <div>
      <h2>رفع ملفات جديدة</h2>
      <p class="desktop-only">اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
      <p class="mobile-only">التقط صوراً أو اختر ملفات، ثم اضغط «معالجة الكل».</p>
    </div>
  </div>

  <!-- Hidden file inputs -->
  <input type="file" id="cameraInput" accept="image/*" capture="environment" class="file-input">
  <input type="file" id="galleryInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">

  <!-- Empty state: show capture buttons -->
  <div id="emptyState" class="upload-empty-state">
    <div class="capture-buttons">
      <label for="cameraInput" class="capture-btn capture-btn-camera" id="cameraBtnLabel">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <span>التقط صورة</span>
      </label>
      <label for="galleryInput" class="capture-btn capture-btn-gallery">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        <span>اختر من المعرض</span>
      </label>
    </div>
    <p class="upload-hint">التقط عدة صور، ثم اضغط «معالجة الكل» دفعة واحدة</p>
  </div>

  <!-- Gallery: shown once images are added -->
  <div id="stagingGallery" class="staging-gallery hidden"></div>

  <!-- Floating add-more button (appears after first image) -->
  <div id="addMoreBar" class="add-more-bar hidden">
    <label for="cameraInput" class="add-more-btn" id="addMoreCameraLabel">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
      التقط المزيد
    </label>
    <label for="galleryInput" class="add-more-btn">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      أضف ملفات
    </label>
    <span id="stagingCount" class="staging-count-inline">0 صور</span>
  </div>

  <!-- Provider + process actions -->
  <div id="stagingActions" class="staging-actions hidden">
    <div class="provider-section">
      <label class="provider-label">محرك الاستخراج:</label>
      <div class="provider-options">
        {% for p in providers %}
        <label class="provider-option">
          <input type="radio" name="provider" value="{{ p.id }}"
                 {{ 'checked' if p.id == default_provider else '' }}>
          <span class="provider-card {{ 'provider-free' if p.id == 'easyocr' else 'provider-ai' }}">
            <span class="provider-name">{{ p.name }}</span>
            <span class="provider-model">{{ p.model }}</span>
          </span>
        </label>
        {% endfor %}
      </div>
    </div>
    <div class="stage-action-buttons">
      <button type="button" class="btn btn-primary btn-large btn-process" id="processAllBtn" onclick="processStaged()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        معالجة الكل
      </button>
      <button type="button" class="btn btn-secondary" onclick="clearStaged()">مسح الكل</button>
    </div>
  </div>
</div>

<div class="quick-links">
  <a href="/search" class="quick-link-card">
    <span class="ql-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    </span>
    <span>
      <strong>البحث في قاعدة البيانات</strong>
      <small>ابحث بالأسماء أو بالعقارات مع نتائج منظّمة.</small>
    </span>
  </a>
  <a href="/documents" class="quick-link-card">
    <span class="ql-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    </span>
    <span>
      <strong>قائمة جميع الوثائق</strong>
      <small>تابع الحالات، افتح المراجعة، أو احذف المستندات غير المطلوبة.</small>
    </span>
  </a>
</div>
{% endblock %}

{% block scripts %}
<script>
// ─── Unified staging workflow ─────────────────────────────────
const stagedItems = {{ staged_documents|tojson }}; // {id, image_path, name}
let uploading = false;

const cameraInput = document.getElementById('cameraInput');
const galleryInput = document.getElementById('galleryInput');
const emptyState = document.getElementById('emptyState');
const gallery = document.getElementById('stagingGallery');
const addMoreBar = document.getElementById('addMoreBar');
const actionsEl = document.getElementById('stagingActions');
const countEl = document.getElementById('stagingCount');

// Wire up file inputs
cameraInput.addEventListener('change', () => stageFiles(cameraInput));
galleryInput.addEventListener('change', () => stageFiles(galleryInput));

// Desktop drag & drop on the empty state
emptyState.addEventListener('dragover', e => { e.preventDefault(); emptyState.classList.add('drag-over'); });
emptyState.addEventListener('dragleave', () => emptyState.classList.remove('drag-over'));
emptyState.addEventListener('drop', e => {
  e.preventDefault();
  emptyState.classList.remove('drag-over');
  stageFileList(e.dataTransfer.files);
});

// Also allow drag & drop on gallery when it's visible
gallery.addEventListener('dragover', e => { e.preventDefault(); gallery.classList.add('drag-over'); });
gallery.addEventListener('dragleave', () => gallery.classList.remove('drag-over'));
gallery.addEventListener('drop', e => {
  e.preventDefault();
  gallery.classList.remove('drag-over');
  stageFileList(e.dataTransfer.files);
});

async function stageFiles(inputEl) {
  const files = inputEl.files;
  if (!files.length) return;
  await stageFileList(files);
  inputEl.value = '';
}

async function stageFileList(files) {
  if (!files.length) return;
  uploading = true;
  refreshUI();

  for (const file of files) {
    const formData = new FormData();
    formData.append('files', file);
    const thumb = addPlaceholder(file.name);

    try {
      const res = await fetch('/upload/stage', { method: 'POST', body: formData });
      const data = await res.json();
      for (const item of data.staged) {
        stagedItems.push(item);
        finishThumb(thumb, item);
      }
    } catch (e) {
      thumb.remove();
    }
  }

  uploading = false;
  refreshUI();
}

function addPlaceholder(name) {
  gallery.classList.remove('hidden');
  const div = document.createElement('div');
  div.className = 'staging-thumb loading';
  div.innerHTML = '<div class="staging-thumb-spinner"></div>';
  gallery.appendChild(div);
  return div;
}

function finishThumb(thumb, item) {
  thumb.classList.remove('loading');
  thumb.dataset.id = item.id;
  thumb.innerHTML = `
    <img src="/uploads/${item.image_path}" alt="">
    <span class="staging-thumb-name">${item.name}</span>
    <button type="button" class="staging-remove" onclick="removeStagedItem(${item.id}, this)" title="إزالة">&times;</button>
  `;
}

function renderExistingStaged() {
  gallery.innerHTML = '';
  for (const item of stagedItems) {
    const thumb = addPlaceholder(item.name);
    finishThumb(thumb, item);
  }
}

async function removeStagedItem(id, btn) {
  const thumb = btn.closest('.staging-thumb');
  thumb.classList.add('removing');
  try { await fetch('/upload/staged/' + id, { method: 'DELETE' }); } catch(e) {}
  const idx = stagedItems.findIndex(s => s.id === id);
  if (idx !== -1) stagedItems.splice(idx, 1);
  thumb.remove();
  refreshUI();
}

function refreshUI() {
  const n = stagedItems.length;
  const hasItems = n > 0 || uploading;

  emptyState.classList.toggle('hidden', hasItems);
  gallery.classList.toggle('hidden', !hasItems);
  addMoreBar.classList.toggle('hidden', !hasItems);
  actionsEl.classList.toggle('hidden', n === 0);
  countEl.textContent = n === 1 ? 'صورة واحدة' : n + ' صور';

  const processBtn = document.getElementById('processAllBtn');
  if (processBtn) {
    processBtn.querySelector('.btn-process-count')?.remove();
    if (n > 0) {
      const badge = document.createElement('span');
      badge.className = 'btn-process-count';
      badge.textContent = n;
      processBtn.appendChild(badge);
    }
  }
}

function processStaged() {
  if (!stagedItems.length) return;
  const ids = stagedItems.map(s => s.id).join(',');
  const provider = document.querySelector('input[name="provider"]:checked')?.value || '';

  const btn = document.getElementById('processAllBtn');
  btn.textContent = 'جارٍ المعالجة...';
  btn.disabled = true;

  const form = document.createElement('form');
  form.method = 'POST';
  form.action = '/upload/process-staged';
  form.innerHTML = `<input type="hidden" name="doc_ids" value="${ids}"><input type="hidden" name="provider" value="${provider}">`;
  document.body.appendChild(form);
  form.submit();
}

async function clearStaged() {
  for (const item of [...stagedItems]) {
    try { await fetch('/upload/staged/' + item.id, { method: 'DELETE' }); } catch(e) {}
  }
  stagedItems.length = 0;
  gallery.innerHTML = '';
  refreshUI();
}

renderExistingStaged();
refreshUI();
</script>
{% endblock %}