{% extends "base.html" %}
{% block title %}Generate — ContentBot{% endblock %}
{% block page_title %}Generate Content{% endblock %}

{% block content %}
{% if not sites %}
<div class="card" style="text-align:center;padding:48px">
  <p class="text-muted" style="margin-bottom:14px">You need to add a website first.</p>
  <a href="{{ url_for('add_website') }}" class="btn btn-primary">Add Website</a>
</div>
{% else %}
<div style="max-width:680px">
  <div class="card">
    <div class="card-title">New Generation Job</div>
    <form method="POST" id="genForm">

      <!-- Site selector -->
      <div class="form-row">
        <label>Target Website</label>
        <select name="site_id" id="siteSelect" required>
          <option value="">— Select a website —</option>
          {% for s in sites %}
          <option value="{{ s.id }}" {% if selected_site==s.id %}selected{% endif %}>
            {{ s.name }} ({{ s.url }})
          </option>
          {% endfor %}
        </select>
      </div>

      <!-- Keywords -->
      <div class="form-row">
        <label>Keywords <span class="text-muted">(one per line)</span></label>
        <textarea name="keywords" rows="6"
          placeholder="panneau solaire agricole&#10;installation photovoltaique PME&#10;énergie solaire industrielle"></textarea>
      </div>

      <!-- Category -->
      <div class="form-row">
        <label>Category</label>
        <select name="category" id="categorySelect">
          <option value="">— Select a site first —</option>
          {% for opt in cate_data %}
          {{ opt | safe }}
          {% endfor %}
        </select>
      </div>

      <!-- Author -->
      <div class="form-row">
        <label>Author</label>
        <select name="author" id="authorSelect">
          <option value="">— Select a site first —</option>
          {% for opt in author_data %}
          {{ opt | safe }}
          {% endfor %}
        </select>
      </div>

      <hr>
      <div class="card-title">Options</div>

      <div class="form-grid-3">
        <div class="form-row">
          <label>Images per post</label>
          <select name="num_images">
            <option value="0">None</option>
            <option value="1">1</option>
            <option value="2" selected>2</option>
            <option value="3">3</option>
            <option value="5">5</option>
          </select>
        </div>
        <div class="form-row">
          <label>YouTube embed</label>
          <select name="youtube_video">
            <option value="0">No</option>
            <option value="1">Yes</option>
          </select>
        </div>
        <div class="form-row">
          <label>Content type</label>
          <select name="page_or_post">
            <option value="0" selected>Post</option>
            <option value="1">Page</option>
          </select>
        </div>
        <div class="form-row">
          <label>Status</label>
          <select name="draft_or_published">
            <option value="0" selected>Published</option>
            <option value="1">Draft</option>
          </select>
        </div>
        <div class="form-row">
          <label>AI-generated title</label>
          <select name="p_title">
            <option value="1" selected>NO</option>
            <option value="0">YES</option>
          </select>
        </div>
      </div>

      <div class="gap-2 mt-4">
        <button type="submit" class="btn btn-primary" id="submitBtn">▶ Start Job</button>
        <a href="{{ url_for('dashboard') }}" class="btn btn-ghost">Cancel</a>
      </div>

    </form>
  </div>
</div>
{% endif %}

<script>
  const siteSelect = document.getElementById('siteSelect');
  const catSelect = document.getElementById('categorySelect');
  const authorSelect = document.getElementById('authorSelect');

  async function loadCategories(siteId) {
    if (!siteId) return;
    catSelect.innerHTML = '<option>Loading…</option>';
    try {
      const res = await fetch(`/api/categories/${siteId}`);
      const opts = await res.json();
      if (opts.length) {
        catSelect.innerHTML = opts.join('');
      } else {
        catSelect.innerHTML = '<option value="">No categories found</option>';
      }
    } catch {
      catSelect.innerHTML = '<option value="">Failed to load</option>';
    }
  }

  async function loadAuthors(siteId) {
    if (!siteId) return;
    authorSelect.innerHTML = '<option>Loading…</option>';
    try {
      const res = await fetch(`/api/authors/${siteId}`);
      const opts = await res.json();
      if (opts.length) {
        authorSelect.innerHTML = opts.join('');
      } else {
        authorSelect.innerHTML = '<option value="">No authors found</option>';
      }
    } catch {
      authorSelect.innerHTML = '<option value="">Failed to load</option>';
    }
  }

  siteSelect.addEventListener('change', () => {
    loadCategories(siteSelect.value);
    loadAuthors(siteSelect.value);
  });

  // Auto-load if site pre-selected
  if (siteSelect.value) {
    loadCategories(siteSelect.value);
    loadAuthors(siteSelect.value);
  }

  document.getElementById('genForm').addEventListener('submit', () => {
    document.getElementById('submitBtn').textContent = '⏳ Submitting…';
    document.getElementById('submitBtn').disabled = true;
  });
</script>
{% endblock %}