{% extends "admin/base.html" %}
{% block title %}Translation | Admin
<script>
document.addEventListener("DOMContentLoaded", () => {
  const aiForm = document.querySelector('form[action="{{ url_for("admin_translations_start") }}"][class*="bg-amber"]');
  const editor = document.querySelector('[data-interface-editor]');
  const status = document.querySelector('[data-interface-ai-selection-status]');
  if (!aiForm || !editor) return;

  const allItems = aiForm.querySelector('[name="all_items"]');
  const rowChecks = Array.from(editor.querySelectorAll('.interface-row-checkbox'));
  const selectAll = editor.querySelector('[data-check-all]');

  const updateStatus = () => {
    const selectedCount = rowChecks.filter((box) => box.checked).length;
    if (!status) return;
    if (allItems?.checked) {
      status.textContent = `All ${rowChecks.length} visible interface strings are included; the server will skip existing translations in missing-only mode.`;
    } else {
      status.textContent = `${selectedCount} interface string${selectedCount === 1 ? '' : 's'} selected for AI translation.`;
    }
  };

  rowChecks.forEach((box) => box.addEventListener('change', updateStatus));
  selectAll?.addEventListener('change', () => window.setTimeout(updateStatus, 0));
  allItems?.addEventListener('change', updateStatus);
  updateStatus();

  aiForm.addEventListener('submit', (event) => {
    aiForm.querySelectorAll('input[data-copied-interface]').forEach((node) => node.remove());
    if (allItems?.checked) return;
    const selected = rowChecks.filter((box) => box.checked);
    if (!selected.length) {
      event.preventDefault();
      alert('Select at least one interface string, or choose Process all interface strings.');
      return;
    }
    selected.forEach((checkbox) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'item_ids';
      input.value = checkbox.value;
      input.dataset.copiedInterface = '1';
      aiForm.appendChild(input);
    });
  });
});
</script>

{% endblock %}
{% block content %}
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
  <div>
    <p class="eyebrow-dark">Multilingual content</p>
    <h1 class="mt-3 text-4xl font-black tracking-normal">Translation Center</h1>
    <p class="mt-3 max-w-3xl text-sm font-bold text-zinc-600">Manage pages, listings, shared interface text and AI models from one place. English is always the master source.</p>
  </div>
</div>

<nav class="mt-8 flex flex-wrap gap-2">
  {% for code,label in [('listings','Listings'),('pages','Pages'),('faqs','FAQs'),('interface','Interface & Templates'),('models','Models')] %}
    <a class="{{ 'btn-primary' if tab == code else 'btn-outline' }}" href="{{ url_for('admin_translations', tab=code) }}">{{ label }}</a>
  {% endfor %}
</nav>

{% if job %}
<section class="mt-6 rounded-lg border border-zinc-200 bg-white p-5 shadow-sm">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-black">Background translation job</h2>
      <p class="mt-1 text-sm font-bold text-zinc-600">{{ job.content_type or '' }} · {{ job.mode or '' }} · {{ job.model or '' }}</p>
    </div>
    <span class="rounded-full px-3 py-1 text-xs font-black {{ 'bg-emerald-100 text-emerald-800' if job.status == 'completed' else 'bg-amber-100 text-amber-900' if job.status in ('running','pausing','paused') else 'bg-zinc-200 text-zinc-800' if job.status in ('cancelled','cancelling') else 'bg-red-100 text-red-800' }}">{{ job.status|upper }}</span>
  </div>
  <div class="mt-4 grid gap-3 sm:grid-cols-4">
    <div class="rounded-lg bg-zinc-50 p-3"><strong>{{ job.completed or 0 }}</strong><br><span class="text-xs text-zinc-500">Completed</span></div>
    <div class="rounded-lg bg-zinc-50 p-3"><strong>{{ job.total_tasks or 0 }}</strong><br><span class="text-xs text-zinc-500">Needed</span></div>
    <div class="rounded-lg bg-zinc-50 p-3"><strong>{{ job.skipped_existing or 0 }}</strong><br><span class="text-xs text-zinc-500">Skipped existing</span></div>
    <div class="rounded-lg bg-zinc-50 p-3"><strong>{{ job.failed or 0 }}</strong><br><span class="text-xs text-zinc-500">Failed</span></div>
  </div>
  {% if job.current %}<p class="mt-3 text-sm"><strong>Current:</strong> {{ job.current }}</p>{% endif %}
  <div class="mt-4 flex flex-wrap gap-2">
    {% if job.status == 'running' %}
      <form method="post" action="{{ url_for('admin_translations_control') }}"><input type="hidden" name="action" value="pause"><button class="btn-outline" type="submit">Pause After Current</button></form>
      <form method="post" action="{{ url_for('admin_translations_control') }}" onsubmit="return confirm('Stop this translation job now? Completed translations will be kept.');"><input type="hidden" name="action" value="stop"><button class="btn-outline" type="submit">Stop Job</button></form>
    {% elif job.status == 'pausing' %}
      <form method="post" action="{{ url_for('admin_translations_control') }}" onsubmit="return confirm('Stop this translation job now?');"><input type="hidden" name="action" value="stop"><button class="btn-outline" type="submit">Stop Job</button></form>
      <span class="rounded-lg bg-amber-50 px-3 py-2 text-sm font-bold text-amber-900">Pausing after current translation…</span>
    {% elif job.status == 'paused' %}
      <form method="post" action="{{ url_for('admin_translations_control') }}"><input type="hidden" name="action" value="resume"><button class="btn-primary" type="submit">Resume Job</button></form>
      <form method="post" action="{{ url_for('admin_translations_control') }}" onsubmit="return confirm('Cancel the paused workload?');"><input type="hidden" name="action" value="stop"><button class="btn-outline" type="submit">Cancel Paused Job</button></form>
    {% endif %}
    {% if job.failed and job.status not in ('running','pausing','cancelling') %}
      <form method="post" action="{{ url_for('admin_translations_control') }}"><input type="hidden" name="action" value="retry_failed"><button class="btn-outline" type="submit">Retry Failed Only ({{ job.failed }})</button></form>
    {% endif %}
  </div>
  {% if job.errors %}<details class="mt-3"><summary class="cursor-pointer font-bold">Recent errors</summary><pre class="mt-2 overflow-auto rounded bg-zinc-950 p-3 text-xs text-white">{{ job.errors|join('\n') }}</pre></details>{% endif %}
  <p class="mt-3 text-xs font-bold text-zinc-500">Refresh this page to update progress. Pause waits for the current API call; Stop terminates the worker immediately. Completed translations are kept.</p>
</section>
{% endif %}

{% if tab in ('listings','pages','faqs') %}
<form class="mt-6 rounded-lg border border-zinc-200 bg-white shadow-sm" method="post" action="{{ url_for('admin_translations_start') }}">
  <input type="hidden" name="content_type" value="{{ tab }}">
  <div class="border-b border-zinc-200 p-5">
    <div class="grid gap-5 xl:grid-cols-[1fr_1fr_1fr]">
      <div>
        <p class="form-label">Target languages</p>
        <div class="grid gap-2 sm:grid-cols-2">
          {% for language in languages %}{% if language.code != 'en' %}
          <label class="rounded-lg border border-zinc-200 p-3 text-sm font-bold"><input type="checkbox" name="langs" value="{{ language.code }}" checked> {{ language_display_code(language.code) }} — {{ language.name }}</label>
          {% endif %}{% endfor %}
        </div>
      </div>
      <div>
        <p class="form-label">Action</p>
        <label class="mb-2 block rounded-lg border border-zinc-200 p-3 text-sm font-bold"><input type="radio" name="mode" value="missing" checked> Generate missing/outdated only</label>
        <label class="block rounded-lg border border-zinc-200 p-3 text-sm font-bold"><input type="radio" name="mode" value="regenerate"> Regenerate selected translations</label>
        <label class="mt-4 block rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm font-bold"><input type="checkbox" name="all_items" value="1"> Process all {{ tab }} instead of selected rows</label>
      </div>
      <div>
        <label><span class="form-label">Translation model</span>
          <select class="form-input" name="model">
            {% for label,value in models %}<option value="{{ value }}" {% if settings.translation_model == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </label>
        <button class="btn-primary mt-5" type="submit">Start Background Translation</button>
        <p class="mt-2 text-xs font-bold text-zinc-500">Existing translations are excluded before the task list is built, so they do not consume the workload count.</p>
      </div>
    </div>
  </div>
  <div class="max-h-[680px] overflow-auto">
    <table class="min-w-full divide-y divide-zinc-200">
      <thead class="sticky top-0 bg-zinc-100"><tr><th class="table-heading"><input type="checkbox" data-check-all></th><th class="table-heading">English source</th><th class="table-heading">Coverage</th></tr></thead>
      <tbody class="divide-y divide-zinc-200">
      {% set rows = listings if tab == 'listings' else (pages if tab == 'pages' else faqs) %}
      {% for item in rows %}
        <tr>
          <td class="table-cell"><input class="listing-row-checkbox translation-row-checkbox" type="checkbox" name="item_ids" value="{{ item.id }}"></td>
          <td class="table-cell"><strong>{{ item.title_en if tab != 'faqs' else item.question_en }}</strong><br><span class="text-xs text-zinc-500">{% if tab == 'listings' %}{{ item.public_stock_number or item.slug }}{% elif tab == 'pages' %}{{ item.slug }}{% else %}FAQ #{{ item.id }}{% endif %}</span></td>
          <td class="table-cell"><div class="flex flex-wrap gap-1">
          {% for language in languages %}{% if language.code != 'en' %}
            {% if tab == 'listings' %}{% set ok = item['title_' ~ language.code] or item['description_html_' ~ language.code] %}{% elif tab == 'pages' %}{% set ok = item['title_' ~ language.code] and item['translation_status_' ~ language.code] not in ('missing','outdated') %}{% else %}{% set ok = item['question_' ~ language.code] and item['answer_' ~ language.code] %}{% endif %}
            <span class="rounded-full px-2 py-1 text-[11px] font-black {{ 'bg-emerald-100 text-emerald-800' if ok else 'bg-zinc-200 text-zinc-700' }}">{{ language_display_code(language.code) }} {{ 'OK' if ok else 'Missing' }}</span>
          {% endif %}{% endfor %}
          </div></td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</form>
{% elif tab == 'interface' %}
<section class="mt-6 rounded-lg border border-zinc-200 bg-white shadow-sm">
  {% if fallback_report %}<div class="border-b border-red-200 bg-red-50 p-5"><h2 class="text-lg font-black text-red-900">{{ fallback_report|length }} English fallback{{ 's' if fallback_report|length != 1 else '' }} still visible in {{ interface_lang|upper }}</h2><details class="mt-3"><summary class="cursor-pointer font-bold text-red-800">Show exact sources</summary><div class="mt-3 max-h-72 overflow-auto"><table class="min-w-full text-sm"><thead><tr><th class="text-left p-2">Source</th><th class="text-left p-2">Item</th><th class="text-left p-2">English fallback</th></tr></thead><tbody>{% for issue in fallback_report %}<tr class="border-t border-red-100"><td class="p-2 font-bold">{{ issue.type }}</td><td class="p-2 font-mono text-xs">{{ issue.item }}</td><td class="p-2">{{ issue.detail }}</td></tr>{% endfor %}</tbody></table></div></details></div>{% else %}<div class="border-b border-emerald-200 bg-emerald-50 p-5 font-bold text-emerald-900">No English fallbacks detected for {{ interface_lang|upper }} across interface strings, published pages and active FAQs.</div>{% endif %}
  <div class="border-b border-zinc-200 p-5">
    <div class="flex flex-col justify-between gap-4 xl:flex-row xl:items-end">
      <div>
        <h2 class="text-xl font-black">Shared interface and template text</h2>
        <p class="mt-2 text-sm font-bold text-zinc-600">Compact editor for navigation, buttons, headings, forms, status labels and reusable public text. English remains the source.</p>
      </div>
      <form class="flex flex-wrap items-end gap-3" method="get">
        <input type="hidden" name="tab" value="interface">
        <label><span class="form-label">Target language</span><select class="form-input" name="lang" onchange="this.form.submit()">{% for language in languages %}{% if language.code != 'en' %}<option value="{{ language.code }}" {% if interface_lang == language.code %}selected{% endif %}>{{ language_display_code(language.code) }} — {{ language.name }}</option>{% endif %}{% endfor %}</select></label>
        <label><span class="form-label">Search strings</span><input class="form-input" name="q" value="{{ interface_query }}" placeholder="navigation, price, enquiry..."></label>
        <button class="btn-outline" type="submit">Filter</button>
      </form>
    </div>
  </div>

  <form method="post" action="{{ url_for('admin_translations_start') }}" class="border-b border-zinc-200 bg-amber-50 p-5">
    <input type="hidden" name="content_type" value="interface">
    <input type="hidden" name="langs" value="{{ interface_lang }}">
    <div class="flex flex-wrap items-end gap-4">
      <div><p class="form-label">AI action for {{ interface_lang|upper }}</p><label class="mr-3 text-sm font-bold"><input type="radio" name="mode" value="missing" checked> Generate missing only</label><label class="text-sm font-bold"><input type="radio" name="mode" value="regenerate"> Regenerate selected</label></div>
      <label class="text-sm font-bold"><input type="checkbox" name="all_items" value="1"> Process all interface strings in {{ interface_lang|upper }}</label>
      <select class="form-input max-w-md" name="model">{% for label,value in models %}<option value="{{ value }}" {% if settings.translation_model == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select>
      <button class="btn-primary" type="submit">Start Background Translation</button>
    </div>
    <div data-interface-selected-inputs></div>
    <p class="mt-3 text-sm font-bold text-zinc-700" data-interface-ai-selection-status>No interface strings selected for AI translation.</p>
  </form>

  <form method="post" action="{{ url_for('admin_translations_interface') }}" data-interface-editor>
    <input type="hidden" name="interface_lang" value="{{ interface_lang }}">
    <div class="max-h-[720px] overflow-auto">
      <table class="min-w-full divide-y divide-zinc-200">
        <thead class="sticky top-0 z-10 bg-zinc-100"><tr><th class="table-heading w-12"><input type="checkbox" data-check-all></th><th class="table-heading w-64">Key / area</th><th class="table-heading">English source</th><th class="table-heading">{{ interface_lang|upper }} translation</th></tr></thead>
        <tbody class="divide-y divide-zinc-200">
        {% for row in interface_rows %}
          <tr>
            <td class="table-cell align-top"><input class="listing-row-checkbox interface-row-checkbox" type="checkbox" value="{{ row.translation_key }}"></td>
            <td class="table-cell align-top"><input type="hidden" name="translation_keys" value="{{ row.translation_key }}"><strong class="font-mono text-xs">{{ row.translation_key }}</strong></td>
            <td class="table-cell align-top"><div class="max-w-xl whitespace-pre-wrap text-sm text-zinc-700">{{ row.en or '' }}</div></td>
            <td class="table-cell align-top"><textarea class="form-input min-h-20 min-w-[320px]" name="translation_{{ row.translation_key }}">{{ row[interface_lang] or '' }}</textarea></td>
          </tr>
        {% else %}<tr><td class="table-cell" colspan="4">No interface strings match this filter.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
    <div class="sticky bottom-0 flex items-center justify-between gap-3 border-t border-zinc-200 bg-white p-5"><p class="text-sm font-bold text-zinc-600">Editing {{ interface_lang|upper }} only. Switch language above to edit another language.</p><button class="btn-primary" type="submit">Save {{ interface_lang|upper }} Translations</button></div>
  </form>
</section>
{% elif tab == 'models' %}
<form class="mt-6 rounded-lg border border-zinc-200 bg-white p-6 shadow-sm" method="post" action="{{ url_for('admin_translations_models') }}">
  <h2 class="text-xl font-black">AI model assignments</h2>
  <p class="mt-2 text-sm font-bold text-zinc-600">OpenAI image editing stays unchanged. These settings only control Fireworks text workloads.</p>
  <div class="mt-5 grid gap-5 md:grid-cols-3">
    {% for field,label,help in [('translation_model','Translation model','Quality-first for listings, pages and interface content.'),('content_model','Listing/content model','English listing and page generation.'),('chatbot_model','Chatbot model','Fast user-facing responses.')] %}
      <label><span class="form-label">{{ label }}</span><select class="form-input" name="{{ field }}">{% for model_label,value in models %}<option value="{{ value }}" {% if settings[field] == value %}selected{% endif %}>{{ model_label }}</option>{% endfor %}</select><span class="mt-1 block text-xs font-bold text-zinc-500">{{ help }}</span></label>
    {% endfor %}
  </div>
  <button class="btn-primary mt-6" type="submit">Save Model Assignments</button>
</form>
{% endif %}

<script>
document.addEventListener("DOMContentLoaded", () => {
  const aiForm = document.querySelector('form[action="{{ url_for("admin_translations_start") }}"][class*="bg-amber"]');
  const editor = document.querySelector('[data-interface-editor]');
  if (aiForm && editor) {
    aiForm.addEventListener('submit', (event) => {
      if (aiForm.querySelector('[name="all_items"]')?.checked) return;
      aiForm.querySelectorAll('input[data-copied-interface]').forEach((node) => node.remove());
      const selected = editor.querySelectorAll('.interface-row-checkbox:checked');
      if (!selected.length) { event.preventDefault(); alert('Select at least one interface string, or choose Process all interface strings.'); return; }
      selected.forEach((checkbox) => {
        const input = document.createElement('input'); input.type='hidden'; input.name='item_ids'; input.value=checkbox.value; input.dataset.copiedInterface='1'; aiForm.appendChild(input);
      });
    });
  }
});
</script>

{% endblock %}