{% extends "admin/base.html" %}

{% block title %}Pages | Admin{% endblock %}

{% block content %}
<p class="eyebrow-dark">Content</p>
<h1 class="mt-3 text-4xl font-black tracking-normal">Static Pages</h1>
<p class="mt-3 max-w-3xl text-sm font-bold text-zinc-500">
  English is the master copy. Select pages, select target languages, then generate translations from the current English content.
  Use regenerate only when you intentionally want to overwrite an existing translation.
</p>

<div class="mt-8 rounded-lg border border-amber-200 bg-amber-50 p-5 shadow-sm">
  <h2 class="text-xl font-black">Page content generation</h2>
  <p class="mt-2 text-sm font-bold text-zinc-600">Store a master prompt with dealer info/updates. Generation checks each page's current English content against the prompt and skips pages that already match; the rest are regenerated (EN only). Runs on a schedule while the app is running, or click Run now.</p>
  <form class="mt-4 space-y-3" method="post" action="{{ url_for('admin_pages_save_gen_settings') }}">
    <label class="block">
      <span class="form-label">Master prompt</span>
      <textarea name="pages_master_prompt" rows="6" class="form-input font-mono text-xs w-full">{{ settings.pages_master_prompt or '' }}</textarea>
    </label>
    <div class="flex flex-wrap items-center gap-4">
      <label class="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-bold"><input type="checkbox" name="pages_generation_enabled" value="1" {% if settings.pages_generation_enabled %}checked{% endif %}> Scheduled generation enabled</label>
      <label class="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-bold">Every <input class="form-input mt-0 inline-block w-20" type="number" name="pages_generation_interval_hours" min="1" value="{{ settings.pages_generation_interval_hours or 24 }}"> hours</label>
      <button class="btn-primary" type="submit">Save generation settings</button>
    </div>
  </form>
  <form class="mt-3" method="post" action="{{ url_for('admin_pages_run_now') }}">
    <button class="btn-primary" type="submit">Run now</button>
    <span class="ml-3 text-sm font-bold text-zinc-600" id="pageGenStatus">Idle</span>
  </form>
</div>

<form class="mt-8 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm" method="post" action="{{ url_for('admin_pages_translate') }}" data-confirm-bulk>
  <div class="grid gap-5 border-b border-zinc-200 bg-zinc-50 p-5 xl:grid-cols-[1.1fr_0.9fr]">
    <div>
      <p class="text-sm font-black uppercase tracking-[0.2em] text-zinc-500">1. Select pages</p>
      <div class="mt-3 flex flex-wrap gap-2 text-sm font-bold">
        <button class="btn-outline py-2" type="button" data-check-all-button>Select all pages</button>
        <button class="btn-outline py-2" type="button" data-uncheck-all-button>Clear pages</button>
      </div>
      <p class="mt-3 text-sm font-bold text-zinc-500" data-listing-selected-count>Selected 0 pages</p>
    </div>

    <div>
      <p class="text-sm font-black uppercase tracking-[0.2em] text-zinc-500">2. Select target languages</p>
      <div class="mt-3 grid gap-2 sm:grid-cols-2">
        {% for language in active_languages %}
          {% if language.code != 'en' %}
            <label class="flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-bold">
              <input type="checkbox" name="langs" value="{{ language.code }}">
              {{ language.name }} <span class="text-xs text-zinc-400">({{ language_display_code(language.code) }})</span>
            </label>
          {% endif %}
        {% endfor %}
      </div>
      <div class="mt-3 flex flex-wrap gap-2 text-sm font-bold">
        <button class="btn-outline py-2" type="button" data-check-languages>Select all languages</button>
        <button class="btn-outline py-2" type="button" data-uncheck-languages>Clear languages</button>
      </div>
    </div>

    <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
      <p class="text-sm font-black uppercase tracking-[0.2em] text-emerald-800">Recommended action</p>
      <label class="mt-3 flex items-start gap-3 rounded-lg bg-white p-3 text-sm font-bold text-zinc-700">
        <input class="mt-1" type="radio" name="translation_mode" value="missing" checked>
        <span>
          Generate missing/outdated translations from English
          <span class="mt-1 block text-xs font-bold text-zinc-500">Safe mode. Existing published translations are not overwritten.</span>
        </span>
      </label>
    </div>

    <div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
      <p class="text-sm font-black uppercase tracking-[0.2em] text-amber-800">Overwrite action</p>
      <label class="mt-3 flex items-start gap-3 rounded-lg bg-white p-3 text-sm font-bold text-zinc-700">
        <input class="mt-1" type="radio" name="translation_mode" value="regenerate">
        <span>
          Regenerate selected translations from English
          <span class="mt-1 block text-xs font-bold text-zinc-500">Overwrites existing selected language content. Use after editing English.</span>
        </span>
      </label>
    </div>

    <div class="xl:col-span-2 flex flex-wrap items-center gap-3">
      <button class="btn-primary" type="submit">Run English → Selected Languages</button>
      <p class="text-xs font-bold text-zinc-500">
        Generated translations are published automatically. No approve/disapprove step is required.
      </p>
    </div>
  </div>

  <table class="min-w-full divide-y divide-zinc-200">
    <thead class="bg-zinc-100">
      <tr>
        <th class="table-heading"><input type="checkbox" data-check-all></th>
        <th class="table-heading">English page</th>
        <th class="table-heading">Slug</th>
        <th class="table-heading">Live</th>
        <th class="table-heading">Translation status</th>
        <th class="table-heading">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-zinc-200">
      {% for page in pages %}
        <tr>
          <td class="table-cell"><input class="listing-row-checkbox" type="checkbox" name="page_ids" value="{{ page.id }}"></td>
          <td class="table-cell">
            <p class="font-black text-zinc-950">{{ page.title_en }}</p>
            <p class="mt-1 text-xs font-bold text-zinc-500">{{ page.status or ('published' if page.is_published else 'draft') }} · Header {{ 'Yes' if page.show_in_header or page.menu_visibility else 'No' }} · Footer {{ 'Yes' if page.show_in_footer else 'No' }}</p>
          </td>
          <td class="table-cell font-mono text-xs">{{ page.slug }}</td>
          <td class="table-cell text-xs font-bold">
            {% if page.is_published and page.status in ['approved','published'] %}
              <a class="underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('home', lang='en') if page.slug == 'home' else url_for('public_page', lang='en', page_slug=page.slug) }}" target="_blank" rel="noopener noreferrer">English</a>
            {% else %}
              <span class="text-zinc-400">Draft</span>
            {% endif %}
          </td>
          <td class="table-cell">
            <div class="flex max-w-xl flex-wrap gap-1.5 text-[11px] font-black uppercase">
              {% for language in active_languages %}
                {% if language.code != 'en' %}
                  {% set status = page['translation_status_' ~ language.code] or 'missing' %}
                  {% set published = page['translation_published_' ~ language.code] %}
                  <span class="rounded-full border px-2 py-1
                    {% if published and status in ['approved','published'] %}border-emerald-200 bg-emerald-50 text-emerald-700
                    {% elif status == 'outdated' %}border-amber-200 bg-amber-50 text-amber-700
                    {% elif status in ['needs_review','approved'] %}border-sky-200 bg-sky-50 text-sky-700
                    {% else %}border-zinc-200 bg-zinc-50 text-zinc-500{% endif %}">
                    {{ language_display_code(language.code) }}: {{ 'live' if published and status in ['approved','published'] else status.replace('_',' ') }}
                  </span>
                {% endif %}
              {% endfor %}
            </div>
          </td>
          <td class="table-cell">
            <div class="flex flex-wrap gap-2 text-sm font-bold">
              <a class="underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('admin_page_edit', id=page.id) }}">Edit</a>
              <form class="inline" method="post" action="{{ url_for('admin_pages_run_now') }}">
                <input type="hidden" name="page_ids" value="{{ page.id }}">
                <button type="submit" class="ml-2 rounded bg-zinc-100 px-2 py-1 text-xs font-bold text-zinc-700 hover:bg-zinc-200">Generate</button>
              </form>
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</form>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const rowChecks = Array.from(document.querySelectorAll('.listing-row-checkbox'));
    const checkAll = document.querySelector('[data-check-all]');
    const selectedCount = document.querySelector('[data-listing-selected-count]');
    function updateSelectedCount() {
      const count = rowChecks.filter((box) => box.checked).length;
      if (selectedCount) selectedCount.textContent = `Selected ${count} page${count === 1 ? '' : 's'}`;
      if (checkAll) checkAll.checked = rowChecks.length > 0 && count === rowChecks.length;
    }
    document.querySelector('[data-check-all-button]')?.addEventListener('click', function () {
      rowChecks.forEach((box) => { box.checked = true; });
      updateSelectedCount();
    });
    document.querySelector('[data-uncheck-all-button]')?.addEventListener('click', function () {
      rowChecks.forEach((box) => { box.checked = false; });
      updateSelectedCount();
    });
    checkAll?.addEventListener('change', function () {
      rowChecks.forEach((box) => { box.checked = checkAll.checked; });
      updateSelectedCount();
    });
    rowChecks.forEach((box) => box.addEventListener('change', updateSelectedCount));
    updateSelectedCount();

    const langChecks = Array.from(document.querySelectorAll('input[name="langs"]'));
    document.querySelector('[data-check-languages]')?.addEventListener('click', function () {
      langChecks.forEach((box) => { box.checked = true; });
    });
    document.querySelector('[data-uncheck-languages]')?.addEventListener('click', function () {
      langChecks.forEach((box) => { box.checked = false; });
    });
  });
</script>

<script>
(() => {
  const el = document.getElementById('pageGenStatus');
  if (!el) return;
  async function tick() {
    try {
      const r = await fetch('{{ url_for("admin_pages_gen_status") }}');
      const d = await r.json();
      const j = d.job;
      if (j && !j.finished) {
        el.textContent = `Running ${j.done}/${j.total} (gen ${j.generated}, skip ${j.skipped}, err ${j.errors}) — ${j.current_slug || ''}`;
      } else if (j && j.finished) {
        el.textContent = `Last batch: ${j.done}/${j.total} (gen ${j.generated}, skip ${j.skipped}, err ${j.errors})`;
      } else {
        el.textContent = d.enabled ? `Scheduled (every ${d.interval_hours}h). Last run: ${d.last_run || 'never'}` : 'Idle';
      }
    } catch (e) { /* ignore */ }
  }
  tick();
  setInterval(tick, 3000);
})();
</script>
{% endblock %}