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

{% block title %}Edit Page | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Content</p>
    <h1>Edit {{ page.slug }}</h1>
  </div>
  <div class="flex flex-wrap gap-2">
    <a class="btn-outline" href="{{ url_for('admin_pages') }}">Back to Pages</a>
    {% if page.is_published and page.status in ['approved','published'] %}
      <a class="btn-primary" href="{{ url_for('home', lang=settings.default_language or 'en') if page.slug == 'home' else url_for('public_page', lang=settings.default_language or 'en', page_slug=page.slug) }}" target="_blank" rel="noopener noreferrer">View Live</a>
    {% endif %}
  </div>
</div>

<form class="mt-8 grid gap-6 xl:grid-cols-[1fr_0.7fr]" method="post">
  <section class="admin-panel">
    <h2>English Master</h2>
    <label class="mt-5 block"><span class="form-label">Title EN</span><input class="form-input" name="title_en" value="{{ page.title_en or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">Excerpt EN</span><textarea class="form-input min-h-24" name="excerpt_en">{{ page.excerpt_en or '' }}</textarea></label>
    <label class="mt-4 block"><span class="form-label">Content HTML EN</span><textarea class="form-input min-h-72 font-mono text-sm" name="content_html_en">{{ page.content_html_en or '' }}</textarea></label>
    <div class="mt-4 grid gap-4 md:grid-cols-2">
      <label><span class="form-label">SEO title EN</span><input class="form-input" name="seo_title_en" value="{{ page.seo_title_en or '' }}"></label>
      <label><span class="form-label">Meta description EN</span><textarea class="form-input min-h-24" name="meta_description_en">{{ page.meta_description_en or '' }}</textarea></label>
    </div>
  </section>

  <aside class="admin-panel">
    <h2>Workflow</h2>
    <label class="mt-5 block"><span class="form-label">Hero image path</span><input class="form-input" name="hero_image_path" value="{{ page.hero_image_path or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">Page type</span><input class="form-input" name="page_type" value="{{ page.page_type or 'standard' }}"></label>
    <label class="mt-4 block"><span class="form-label">Status</span><select class="form-input" name="status">{% for status in ['draft','needs_review','approved','published'] %}<option value="{{ status }}" {% if page.status == status %}selected{% endif %}>{{ status }}</option>{% endfor %}</select></label>
    <label class="mt-4 block"><span class="form-label">Menu order</span><input class="form-input" name="menu_order" value="{{ page.menu_order or 100 }}"></label>
    <label class="mt-5 block text-sm font-bold"><input type="checkbox" name="show_in_header" {% if page.show_in_header or page.menu_visibility %}checked{% endif %}> Show in header</label>
    <label class="mt-3 block text-sm font-bold"><input type="checkbox" name="show_in_footer" {% if page.show_in_footer %}checked{% endif %}> Show in footer</label>
    <label class="mt-3 block text-sm font-bold"><input type="checkbox" name="is_published" {% if page.is_published %}checked{% endif %}> Published</label>
    <label class="mt-5 block"><span class="form-label">CTA title EN</span><input class="form-input" name="cta_title_en" value="{{ page.cta_title_en or '' }}"></label>
    <label class="mt-4 block"><span class="form-label">CTA text EN</span><textarea class="form-input min-h-24" name="cta_text_en">{{ page.cta_text_en or '' }}</textarea></label>
    <label class="mt-4 block"><span class="form-label">Visual prompt EN</span><textarea class="form-input min-h-24" name="visual_prompt_en">{{ page.visual_prompt_en or '' }}</textarea></label>
    <label class="block">
      <span class="form-label">Custom generation prompt (overrides/augments the master prompt for this page)</span>
      <textarea name="custom_prompt" rows="6" class="form-input font-mono text-xs w-full">{{ page.custom_prompt or '' }}</textarea>
    </label>
    <div class="mt-4 rounded-lg border border-zinc-200 bg-zinc-50 p-4">
      <label class="block"><span class="form-label">Image model</span><input class="form-input" name="visual_model" value="gpt-image-2"></label>
      <button class="btn-outline mt-3 w-full" type="submit" formaction="{{ url_for('admin_page_generate_visual', id=page.id) }}">Generate Hero Visual</button>
      <p class="mt-2 text-xs font-bold text-zinc-500">Manual only. Saves a local image and tracks it in generated visuals.</p>
    </div>
  </aside>

  <section class="admin-panel xl:col-span-2">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h2>Translations</h2>
        <p class="mt-2 max-w-3xl text-sm font-bold text-zinc-500">
          English is the master copy. Save English first, then regenerate any language from the saved English page.
          Generated translations are published automatically.
        </p>
      </div>
      <a class="btn-outline" href="{{ url_for('admin_pages') }}">Bulk translate pages</a>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      {% for language in languages %}
        {% if language.code != 'en' %}
          {% set status = page['translation_status_' ~ language.code] or 'missing' %}
          {% set published = page['translation_published_' ~ language.code] %}
          <div class="rounded-lg border border-zinc-200 p-4">
            <div class="flex items-center justify-between gap-3">
              <p class="font-black">{{ language.name }}</p>
              <span class="rounded-full border px-2 py-1 text-[11px] font-black uppercase
                {% 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 %}">
                {{ 'Live' if published and status in ['approved','published'] else status.replace('_',' ') }}
              </span>
            </div>
            <p class="mt-2 text-xs text-zinc-500">Last generated: {{ page['translated_at_' ~ language.code] or 'Never' }}</p>

            <div class="mt-4 grid gap-2">
              <button class="btn-primary py-2" type="submit" name="translation_action" value="translate" formaction="{{ url_for('admin_page_edit', id=page.id) }}" onclick="this.form.translation_lang.value='{{ language.code }}';">
                Regenerate + Publish from English
              </button>
              {% if published %}
                <button class="btn-outline py-2" type="submit" name="translation_action" value="unpublish" onclick="this.form.translation_lang.value='{{ language.code }}';">
                  Hide this translation
                </button>
              {% endif %}
            </div>
            <p class="mt-3 text-xs font-bold text-zinc-500">
              This overwrites {{ language.name }} using the saved English title, excerpt, content, SEO title, and meta description.
            </p>
          </div>
        {% endif %}
      {% endfor %}
    </div>
    <input type="hidden" name="translation_lang" value="">
  </section>
  <section class="admin-panel xl:col-span-2">
    <h2>Generated Visuals</h2>
    <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {% for visual in visuals %}
        <div class="rounded-lg border border-zinc-200 p-4">
          {% if visual.local_path %}
            <img class="aspect-video w-full rounded-md bg-zinc-100 object-cover" src="{{ visual.local_path|thumb }}" alt="{{ page.title_en }} generated visual" loading="lazy" decoding="async">
          {% endif %}
          <p class="mt-3 text-sm font-black">{{ visual.placement_key or 'hero' }} {% if visual.is_active %}<span class="text-emerald-700">Active</span>{% endif %}</p>
          <p class="mt-1 text-xs font-bold text-zinc-500">{{ visual.provider }} / {{ visual.model }}</p>
          <p class="mt-2 text-xs text-zinc-600">{{ visual.prompt }}</p>
        </div>
      {% else %}
        <p class="text-sm font-bold text-zinc-500">No generated visuals stored for this page yet.</p>
      {% endfor %}
    </div>
  </section>
  <button class="btn-primary mt-6" type="submit">Save Page</button>
</form>
{% endblock %}