<?php $pageTitle = 'Bulk Upload Topics'; require __DIR__ . '/../layout/header.php'; ?>

<div class="d-flex align-items-center gap-3 mb-4">
  <a href="<?= BASE_URL ?>/topics" class="btn btn-sm btn-light"><i class="bi bi-arrow-left"></i></a>
  <div>
    <h4 class="fw-bold mb-0">Bulk Upload Topics</h4>
    <p class="text-muted mb-0 small">Import multiple topics at once via CSV file.</p>
  </div>
</div>

<div class="row g-4">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white py-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-upload text-primary me-2"></i>Upload CSV File</h6>
      </div>
      <div class="card-body">
        <form method="POST" action="<?= BASE_URL ?>/topics/bulk-upload" enctype="multipart/form-data">

          <div class="mb-3">
            <label class="form-label fw-medium">Project <span class="text-danger">*</span></label>
            <select name="project_id" class="form-select" required>
              <option value="">— Select Project —</option>
              <?php foreach ($projects as $p): ?>
              <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['business_name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label fw-medium">Default Page Type <span class="text-danger">*</span></label>
            <select name="page_type_id" class="form-select" required>
              <option value="">— Select Default Page Type —</option>
              <?php foreach ($pageTypes as $pt): ?>
              <option value="<?= $pt['id'] ?>"><?= htmlspecialchars($pt['name']) ?> (<?= $pt['category'] ?>)</option>
              <?php endforeach; ?>
            </select>
            <div class="form-text">Applied to all rows that don't specify a page type.</div>
          </div>

          <div class="mb-4">
            <label class="form-label fw-medium">CSV File <span class="text-danger">*</span></label>
            <div class="upload-zone border border-2 border-dashed rounded-3 p-4 text-center" id="upload-zone">
              <i class="bi bi-file-earmark-spreadsheet fs-1 text-muted mb-2 d-block"></i>
              <p class="text-muted mb-2">Drag & drop your CSV here or click to browse</p>
              <input type="file" name="csv_file" id="csv-file" class="form-control d-none" accept=".csv" required>
              <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('csv-file').click()">
                <i class="bi bi-folder2-open me-1"></i>Browse File
              </button>
              <div id="file-name" class="mt-2 text-success fw-medium d-none"></div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">
            <i class="bi bi-upload me-1"></i>Import Topics
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white py-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-info-circle text-info me-2"></i>CSV Format</h6>
      </div>
      <div class="card-body">
        <p class="text-muted small mb-3">Your CSV must have these column headers (first row):</p>

        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0">
            <thead class="table-light">
              <tr><th>Column</th><th>Required</th><th>Example</th></tr>
            </thead>
            <tbody class="small">
              <tr><td><code>title</code></td><td><span class="badge bg-danger">Yes</span></td><td>How to Scale Content Marketing</td></tr>
              <tr><td><code>primary_keyword</code></td><td><span class="badge bg-danger">Yes</span></td><td>content marketing strategy</td></tr>
              <tr><td><code>supporting_keywords</code></td><td><span class="badge bg-secondary">No</span></td><td>content calendar, blog topics</td></tr>
              <tr><td><code>search_intent</code></td><td><span class="badge bg-secondary">No</span></td><td>informational</td></tr>
              <tr><td><code>content_angle</code></td><td><span class="badge bg-secondary">No</span></td><td>Focus on B2B companies</td></tr>
              <tr><td><code>target_word_count</code></td><td><span class="badge bg-secondary">No</span></td><td>1500</td></tr>
            </tbody>
          </table>
        </div>

        <div class="mt-3">
          <a href="<?= BASE_URL ?>/assets/templates/topics_template.csv" download class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-download me-1"></i>Download Template CSV
          </a>
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm">
      <div class="card-body">
        <h6 class="fw-semibold mb-2"><i class="bi bi-lightbulb text-warning me-2"></i>Tips</h6>
        <ul class="list-unstyled text-muted small mb-0">
          <li class="mb-1"><i class="bi bi-check2 text-success me-2"></i>Max 500 rows per upload</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-2"></i>UTF-8 encoding required</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-2"></i>Valid search_intent: informational, navigational, transactional, commercial</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-2"></i>Save as CSV (Comma delimited) from Excel</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<?php
$extraJs = <<<JS
<script>
const fileInput = document.getElementById('csv-file');
const fileNameEl = document.getElementById('file-name');
const uploadZone = document.getElementById('upload-zone');

fileInput.addEventListener('change', () => {
  if (fileInput.files.length) {
    fileNameEl.textContent = fileInput.files[0].name;
    fileNameEl.classList.remove('d-none');
  }
});

['dragenter','dragover'].forEach(e => {
  uploadZone.addEventListener(e, ev => { ev.preventDefault(); uploadZone.classList.add('border-primary'); });
});
['dragleave','drop'].forEach(e => {
  uploadZone.addEventListener(e, ev => { ev.preventDefault(); uploadZone.classList.remove('border-primary'); });
});
uploadZone.addEventListener('drop', ev => {
  const files = ev.dataTransfer.files;
  if (files.length) {
    fileInput.files = files;
    fileNameEl.textContent = files[0].name;
    fileNameEl.classList.remove('d-none');
  }
});
</script>
JS;
require __DIR__ . '/../layout/footer.php';
?>
