{% extends "recipe_hub/base_recipe_hub.html" %}
{% block recipe_hub_content %}

<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h4 class="mb-1"><i class="fas fa-layer-group me-2 text-success"></i>Batch Import</h4>
    <div class="text-muted small">
      Dry folder: {{ total }} total &middot;
      <span class="text-success">{{ done }} processed</span> &middot;
      <span class="text-warning">{{ pending }} pending</span>
    </div>
  </div>
</div>

{% if not has_api_key %}
<div class="alert alert-danger">
  <i class="fas fa-exclamation-triangle me-2"></i>
  No API key configured. Set your Claude/OpenAI key in Settings.
</div>
{% endif %}

{# Progress panel — hidden until processing starts #}
<div id="progressPanel" class="card border-0 shadow-sm mb-3 d-none">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <span class="fw-semibold" id="progressLabel">Processing...</span>
      <span class="text-muted small" id="progressCount"></span>
    </div>
    <div class="progress mb-3" style="height:8px">
      <div class="progress-bar bg-success progress-bar-striped progress-bar-animated"
           id="progressBar" style="width:0%"></div>
    </div>
    <div id="resultsList"></div>
  </div>
</div>

{# Tabs #}
<ul class="nav nav-tabs mb-3" id="batchTabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#tab-upload">
      <i class="fas fa-upload me-1"></i>Manual Upload
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#tab-dry">
      <i class="fas fa-folder-open me-1"></i>Dry Folder Queue
      {% if pending %}<span class="badge bg-warning text-dark ms-1">{{ pending }}</span>{% endif %}
    </a>
  </li>
</ul>

<div class="tab-content">

  {# ── TAB 1: MANUAL UPLOAD ── #}
  <div class="tab-pane fade show active" id="tab-upload">
    <form method="POST" action="{{ url_for('recipe_hub.batch_upload') }}"
          enctype="multipart/form-data">
      <div class="card border-0 shadow-sm">
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label fw-semibold small">AI Provider</label>
            <select name="ai_provider" class="form-select form-select-sm" style="width:200px">
              <option value="claude">Claude (Anthropic)</option>
              <option value="openai">OpenAI GPT-4</option>
              <option value="gemini">Google Gemini</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">
              PDF Files <span class="text-muted">(max 25, {{ max_mb }}MB each)</span>
            </label>
            <div id="dropZone" class="border border-2 rounded p-5 text-center"
                 style="border-color:#dee2e6;border-style:dashed;cursor:pointer;background:#f8f9fa"
                 onclick="document.getElementById('pdfInput').click()"
                 ondragover="event.preventDefault();this.style.borderColor='#2ab870'"
                 ondragleave="this.style.borderColor='#dee2e6'"
                 ondrop="handleDrop(event)">
              <i class="fas fa-file-pdf text-danger fs-2 mb-2 d-block"></i>
              <div class="fw-semibold">Drop PDFs here or click to browse</div>
              <div class="text-muted small mt-1">Up to 25 files at once</div>
            </div>
            <input type="file" id="pdfInput" name="pdfs" multiple accept=".pdf"
                   class="d-none" onchange="updateFileList(this.files)">
          </div>
          <div id="fileList" class="mb-3 d-none">
            <div class="fw-semibold small mb-1">
              Selected: <span id="fileCount">0</span> files
            </div>
            <div id="fileNames"></div>
          </div>
          <button type="button" class="btn btn-success" id="uploadBtn"
                  onclick="startManualUpload()"
                  {% if not has_api_key %}disabled{% endif %}>
            <i class="fas fa-robot me-1"></i>Import with AI
          </button>
        </div>
      </div>
    </form>
  </div>

  {# ── TAB 2: DRY FOLDER QUEUE ── #}
  <div class="tab-pane fade" id="tab-dry">
    {% if not pending %}
    <div class="alert alert-success">
      <i class="fas fa-check-circle me-2"></i>
      All {{ total }} recipes in the dry folder have been processed.
    </div>
    {% else %}
    <div class="d-flex justify-content-between align-items-center mb-2">
      <div class="small text-muted">
        Select up to 25 &middot; <span id="selectedCount" class="fw-semibold text-success">0</span> selected
      </div>
      <button onclick="startDryBatch()" class="btn btn-success btn-sm"
              id="processBtn" {% if not has_api_key %}disabled{% endif %}>
        <i class="fas fa-play me-1"></i>Process Selected
      </button>
    </div>

    {% for cuisine, pdfs in by_cuisine.items() %}
    {% set cidx = loop.index %}
    <div class="card border-0 shadow-sm mb-2">
      <div class="card-header bg-white py-2 d-flex align-items-center gap-2">
        <input type="checkbox" class="cuisine-check"
               id="ccheck-{{ cidx }}"
               onchange="toggleCuisine(this,'{{ cidx }}')"
               onclick="event.stopPropagation()">
        <div class="d-flex align-items-center gap-2 flex-grow-1"
             style="cursor:pointer"
             onclick="document.querySelector('#sec-{{ cidx }}').classList.toggle('show')">
          <span class="fw-semibold small">{{ cuisine }}</span>
          <span class="badge bg-secondary">{{ pdfs|length }}</span>
        </div>
        <i class="fas fa-chevron-down small text-muted"
           style="cursor:pointer"
           onclick="document.querySelector('#sec-{{ cidx }}').classList.toggle('show')"></i>
      </div>
      <div id="sec-{{ cidx }}" class="collapse">
        <div class="card-body p-0">
          {% for pdf in pdfs %}
          <div class="d-flex align-items-center px-3 py-2 border-bottom" id="row-{{ pdf.rel|replace('/','_')|replace(' ','_')|replace('\\','_') }}">
            <input type="checkbox" class="recipe-check me-2"
                   data-cuisine="{{ cidx }}"
                   data-rel="{{ pdf.rel }}"
                   onchange="updateCount()"
                   {% if pdf.imported %}disabled{% endif %}>
            <div class="flex-grow-1 small {% if pdf.imported %}text-muted{% endif %}">
              <span class="fw-medium">{{ pdf.name }}</span>
              {% if pdf.category %}
              <span class="text-muted ms-2 small">{{ pdf.category }}</span>
              {% endif %}
              {% if pdf.imported %}
                {% if pdf.import_exists %}
                  <span class="badge bg-success ms-2" style="font-size:.6rem">✓ Imported</span>
                {% else %}
                  <span class="badge bg-secondary ms-2" style="font-size:.6rem">Attempted</span>
                {% endif %}
              {% endif %}
            </div>
            <span class="status-badge ms-2"></span>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endfor %}
    {% endif %}
  </div>

</div>

<script>
// ── Manual upload ──
function updateFileList(files) {
  const fl = document.getElementById('fileList');
  const fc = document.getElementById('fileCount');
  const fn = document.getElementById('fileNames');
  const btn = document.getElementById('uploadBtn');
  if (!files.length) { fl.classList.add('d-none'); btn.disabled = true; return; }
  fl.classList.remove('d-none');
  const capped = Math.min(files.length, 25);
  fc.textContent = capped;
  fn.innerHTML = Array.from(files).slice(0, 25).map(f =>
    '<span class="badge bg-light text-dark border me-1 mb-1 small">' + f.name + '</span>'
  ).join('');
  btn.disabled = {{ 'true' if not has_api_key else 'false' }};
}

function handleDrop(e) {
  e.preventDefault();
  document.getElementById('dropZone').style.borderColor = '#dee2e6';
  const dt = new DataTransfer();
  Array.from(e.dataTransfer.files).filter(f => f.name.endsWith('.pdf')).slice(0, 25)
    .forEach(f => dt.items.add(f));
  const input = document.getElementById('pdfInput');
  input.files = dt.files;
  updateFileList(dt.files);
}

// ── Manual upload handler ──
function startManualUpload() {
  const input = document.getElementById('pdfInput');
  const files = Array.from(input.files).slice(0, 25);
  if (!files.length) { alert('Please select at least one PDF file.'); return; }
  
  const provider = document.querySelector('select[name="ai_provider"]').value;
  const panel = document.getElementById('progressPanel');
  panel.classList.remove('d-none');
  document.getElementById('uploadBtn').disabled = true;
  document.getElementById('resultsList').innerHTML = '';
  
  const results = [];
  
  (async function() {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const pct = Math.round((i / files.length) * 100);
      document.getElementById('progressBar').style.width = pct + '%';
      document.getElementById('progressLabel').textContent = 'Uploading ' + (i+1) + ' of ' + files.length + '...';
      document.getElementById('progressCount').textContent = file.name.replace('.pdf','');
      
      try {
        const fd = new FormData();
        fd.append('pdfs', file);
        fd.append('ai_provider', provider);
        const resp = await fetch('{{ url_for("recipe_hub.batch_upload") }}', {
          method: 'POST', body: fd,
          headers: {'X-Requested-With': 'XMLHttpRequest'}
        });
        const data = await resp.json();
        const rList = data.results || [data];
        for (const r of rList) {
          results.push(r);
          const li = document.createElement('div');
          li.className = 'small py-1 border-bottom d-flex justify-content-between';
          const title = r.title || file.name.replace('.pdf','');
          const cls = r.status==='success' ? 'text-success' : r.status==='flagged' ? 'text-warning' : r.status==='duplicate' ? 'text-info' : 'text-danger';
          li.innerHTML = '<span class="' + cls + '">' + (r.status==='success'?'✓ ':r.status==='flagged'?'⚑ ':r.status==='duplicate'?'⟳ ':'✗ ') + title + '</span>';
          document.getElementById('resultsList').prepend(li);
        }
      } catch(e) {
        results.push({status:'error', error: String(e)});
        const li = document.createElement('div');
        li.className = 'small py-1 border-bottom';
        li.innerHTML = '<span class="text-danger">✗ Network error: ' + String(e).substring(0,80) + '</span>';
        document.getElementById('resultsList').prepend(li);
      }
    }
    
    document.getElementById('progressBar').style.width = '100%';
    document.getElementById('progressBar').classList.remove('progress-bar-animated','progress-bar-striped');
    const s = results.filter(r=>r.status==='success').length;
    const f = results.filter(r=>r.status==='flagged').length;
    const d = results.filter(r=>r.status==='duplicate').length;
    const e = results.filter(r=>r.status==='error').length;
    document.getElementById('progressLabel').innerHTML = '<i class="fas fa-check-circle text-success me-1"></i>Done — ' + s + ' imported, ' + f + ' flagged, ' + d + ' duplicates, ' + e + ' errors';
    document.getElementById('progressCount').textContent = '';
    document.getElementById('uploadBtn').disabled = false;
  })();
}

// ── Dry folder queue ──
function updateCount() {
  const checked = document.querySelectorAll('.recipe-check:checked:not(:disabled)');
  document.getElementById('selectedCount').textContent = checked.length;
  document.getElementById('processBtn').disabled = checked.length === 0;
  if (checked.length > 25) {
    checked[checked.length - 1].checked = false;
    updateCount();
  }
}

function toggleCuisine(cb, idx) {
  document.querySelectorAll('[data-cuisine="' + idx + '"]:not(:disabled)')
    .forEach(c => c.checked = cb.checked);
  updateCount();
}

async function startDryBatch() {
  const checks = Array.from(document.querySelectorAll('.recipe-check:checked:not(:disabled)'));
  if (!checks.length) return;
  const rels = checks.map(c => c.dataset.rel);

  // Show progress panel
  const panel = document.getElementById('progressPanel');
  panel.classList.remove('d-none');
  document.getElementById('processBtn').disabled = true;
  const results = [];

  for (let i = 0; i < rels.length; i++) {
    const rel = rels[i];
    const pct = Math.round((i / rels.length) * 100);
    document.getElementById('progressBar').style.width = pct + '%';
    document.getElementById('progressLabel').textContent =
      'Processing ' + (i + 1) + ' of ' + rels.length + '...';
    document.getElementById('progressCount').textContent =
      rel.split('/').pop().replace('.pdf', '');

    try {
      const resp = await fetch('{{ url_for("recipe_hub.batch_process_one") }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({rel: rel})
      });
      const r = await resp.json();
      results.push(r);
      const title = r.title || rel.split('/').pop().replace('.pdf','');

      // Mark row as processed
      const rowEl = document.getElementById('row-' + rel.replace(/[\/\s]/g,'_'));
      if (rowEl) {
        const cb = rowEl.querySelector('input[type=checkbox]');
        if (cb) { cb.checked = false; cb.disabled = true; }
        rowEl.style.opacity = '0.5';
        const sb = rowEl.querySelector('.status-badge');
        if (sb) {
          const cls = r.status === 'success' ? 'bg-success' :
                      r.status === 'flagged' && r.flag_type === 'product_review' ? '' :
                      r.status === 'flagged' ? 'bg-warning text-dark' :
                      r.status === 'duplicate' ? 'bg-info' : 'bg-danger';
          const style = r.status === 'flagged' && r.flag_type === 'product_review'
            ? 'background:#fd7e14;color:white;font-size:.6rem'
            : 'font-size:.6rem';
          const label = r.status === 'flagged' && r.flag_type === 'product_review'
            ? 'product' : r.status;
          sb.innerHTML = '<span class="badge ' + cls + ' ms-1" style="' + style + '">' + label + '</span>';
        }
      }

      // Add to results list
      const li = document.createElement('div');
      li.className = 'small py-1 border-bottom d-flex justify-content-between';
      const statusHtml = r.status === 'success'
        ? '<span class="text-success">✓ ' + title + '</span>'
        : r.status === 'duplicate' ? '<span class="text-info">⟳ Duplicate — <a href="/recipe/' + (r.recipe_id||'') + '" target="_blank">' + (r.title||'existing recipe') + '</a></span>'
        : r.status === 'flagged' ? '<span class="text-warning">⚑ ' + title + '</span>'
        : '<span class="text-danger" title="' + (r.error||'') + '">✗ ' + (r.error ? r.error.substring(0,80) : 'Error') + '</span>';
      li.innerHTML = statusHtml + '<span class="text-muted">' +
        (r.matched !== undefined ? r.matched + '/' + (r.matched + r.unmatched) : '') + '</span>';
      document.getElementById('resultsList').prepend(li);

    } catch(e) {
      results.push({status:'error', error: String(e), filename: rel});
    }
  }

  document.getElementById('progressBar').style.width = '100%';
  document.getElementById('progressBar').classList.remove('progress-bar-animated','progress-bar-striped');
  const s = results.filter(r=>r.status==='success'||r.status==='partial').length;
  const f = results.filter(r=>r.status==='flagged').length;
  const e = results.filter(r=>r.status==='error').length;
  const d = results.filter(r=>r.status==='duplicate').length;
  document.getElementById('progressLabel').innerHTML =
    '<i class="fas fa-check-circle text-success me-1"></i>Done — ' +
    s + ' imported, ' + f + ' flagged, ' + d + ' duplicates, ' + e + ' errors';
  document.getElementById('progressCount').textContent = '';
}
  updateCount();
</script>
{% endblock %}