{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit Post{% else %}New Post{% endif %} — CMS{% endblock %}

{% load static %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:#033152; }
  .field-input.error { border-color:#ff404b !important; }
  .field-error { display:none;font-size:.72rem;color:#ff404b;margin-top:.25rem; }
  .field-error.visible { display:block; }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
  .seo-score-ring { display:flex;align-items:center;gap:14px;margin-bottom:16px; }
  .seo-score-circle { width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff;flex-shrink:0;transition:background .3s; }
  .seo-check { display:flex;align-items:flex-start;gap:8px;font-size:12.5px;margin-bottom:5px;line-height:1.4; }
  .seo-check .ic { flex-shrink:0;font-size:13px;margin-top:1px; }
  .seo-check.ok .ic::before { content:"✔";color:#2e9e5b; }
  .seo-check.bad .ic::before { content:"✖";color:#d9534f; }
  .char-counter { font-size:11px;color:#888;margin-top:3px; }
  .char-counter.good { color:#2e9e5b; }
  .char-counter.warn { color:#e0a72e; }
  .char-counter.bad  { color:#d9534f; }
  .faq-pair { border:1px solid var(--cms-border);border-radius:8px;padding:.75rem;margin-bottom:.5rem;background:var(--cms-bg); }
  .faq-pair input[type=text], .faq-pair textarea { width:100%;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none;box-sizing:border-box; }
  .faq-pair input[type=text] { margin-bottom:.4rem; }
  .faq-pair textarea { resize:vertical; }
  .faq-pair-num { font-size:.68rem;font-weight:700;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem; }
  .source-row { display:flex;gap:8px;align-items:center;margin-bottom:8px; }
  .source-row input { margin-bottom:0; }
  .card-body { padding:1rem; }
  .thumb-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .thumb-box { width:60px;height:70px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .thumb-box img { width:60px;height:70px;object-fit:cover; }
  .thumb-box .no-thumb { color:#cbd5e1;font-size:1.2rem; }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_insights' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Insights</a> <span style="color:var(--cms-muted);font-weight:400">/</span> {% if obj.pk %}{{ obj.title|truncatechars:50 }}{% else %}New Post{% endif %}</h2>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_insights' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
    {% if obj.pk and obj.slug %}
    <a href="{% url 'insight_detail' obj.slug %}" target="_blank" rel="noopener" class="btn-cms-site">
      <i class="fa-solid fa-arrow-up-right-from-square"></i>View Live Post
    </a>
    {% endif %}
  </div>
</div>

<form method="post" enctype="multipart/form-data" id="insightForm" novalidate>
{% csrf_token %}
<input type="hidden" name="thumbnail_b64" id="thumbnail_b64">

<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Basic Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Title <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="title" id="f_title" value="{{ obj.title }}" oninput="seoScore();clearErr(this)" class="field-input">
              <div class="field-error" id="err_title">Title is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Category <span class="req">*</span></td>
            <td class="field-td">
              <select name="category" id="f_category" onchange="seoScore();clearErr(this)" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="">-- No Category --</option>
                {% for cat in categories %}
                <option value="{{ cat.pk }}" {% if obj.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
              </select>
              <div class="field-error" id="err_category">Please select a category.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Status <span class="req">*</span></td>
            <td class="field-td">
              <select name="status" id="f_status" onchange="toggleScheduleField()" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="draft"        {% if obj.status == 'draft' or not obj.pk %}selected{% endif %}>Draft</option>
                <option value="review"       {% if obj.status == 'review' %}selected{% endif %}>In Review</option>
                <option value="approved"     {% if obj.status == 'approved' %}selected{% endif %}>Approved</option>
                <option value="ready"        {% if obj.status == 'ready' %}selected{% endif %}>Ready to Publish</option>
                <option value="scheduled"    {% if obj.status == 'scheduled' %}selected{% endif %}>Scheduled</option>
                <option value="published"    {% if obj.status == 'published' %}selected{% endif %}>Published</option>
                <option value="needs_update" {% if obj.status == 'needs_update' %}selected{% endif %}>Needs Update</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Priority</td>
            <td class="field-td">
              <select name="priority" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="critical" {% if obj.priority == 'critical' %}selected{% endif %}>🔴 Critical</option>
                <option value="high"     {% if obj.priority == 'high' %}selected{% endif %}>🟠 High</option>
                <option value="medium"   {% if obj.priority == 'medium' or not obj.pk %}selected{% endif %}>🔵 Medium</option>
                <option value="low"      {% if obj.priority == 'low' %}selected{% endif %}>🟢 Low</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Article Type</td>
            <td class="field-td">
              <select name="article_type" id="f_article_type" onchange="togglePillarField()" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="pillar"  {% if obj.article_type == 'pillar' or not obj.pk %}selected{% endif %}>Pillar (Main)</option>
                <option value="cluster" {% if obj.article_type == 'cluster' %}selected{% endif %}>Cluster (Sub-post)</option>
              </select>
            </td>
          </tr>
          <tr id="pillarWrap" style="display:none">
            <td class="field-label">Parent Pillar</td>
            <td class="field-td">
              <select name="pillar_id" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="">-- Select Pillar --</option>
                {% for p in pillar_posts %}
                <option value="{{ p.pk }}" {% if obj.pillar_id == p.pk %}selected{% endif %}>{{ p.title|truncatechars:50 }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Author</td>
            <td class="field-td">
              <input type="text" value="{% if obj.author %}{% firstof obj.author.get_full_name obj.author.username %}{% else %}{% firstof request.user.get_full_name request.user.username %}{% endif %}" disabled class="field-input" style="width:260px;background:#f5f7fa;opacity:.7">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Content</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label top">Excerpt <span class="req">*</span></td>
            <td class="field-td">
              <textarea name="excerpt" id="f_excerpt" rows="2" oninput="seoScore();clearErr(this)" class="field-input" style="resize:vertical">{{ obj.excerpt }}</textarea>
              <div class="field-error" id="err_excerpt">Excerpt is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">TL;DR <small style="font-weight:400;text-transform:none">(GEO)</small></td>
            <td class="field-td">
              <textarea name="tldr" id="f_tldr" rows="3" placeholder="2-3 sentences that directly answer the topic — for AI Overview &amp; GEO" oninput="seoScore()" class="field-input" style="resize:vertical">{{ obj.tldr }}</textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body" style="border-top:1px solid var(--cms-border)">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cms-muted);margin-bottom:.6rem">Body <span class="req">*</span></div>
        <textarea name="body" id="id_body" class="django_ckeditor_5">{{ obj.body }}</textarea>
        <input type="hidden" id="id_body_script-ck-editor-5-upload-url"
               data-upload-url="{% url 'ck_editor_5_upload_file' %}"
               data-upload-file-types='["jpeg","jpg","png","gif","webp","svg"]'
               data-csrf_cookie_name="csrftoken">
        <span id="id_body_script-span" style="display:none;">{{ ck_config|safe }}</span>
      </div>
      <div class="card-body" style="border-top:1px solid var(--cms-border)">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cms-muted);margin-bottom:.6rem">FAQ Pairs <span style="font-weight:400;text-transform:none;font-size:.72rem">(renders FAQ schema — great for Google &amp; AI answers)</span></div>
        <div id="faqList">
          {% for item in faq_items %}
          <div class="faq-pair" data-idx="{{ forloop.counter0 }}">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem">
              <span class="faq-pair-num">FAQ #{{ forloop.counter }}</span>
              <button type="button" class="btn-cms-danger" style="font-size:.72rem;padding:.2rem .55rem" onclick="this.closest('.faq-pair').remove();reindexFaq();seoScore();"><i class="fa-solid fa-trash" style="font-size:.65rem"></i> Remove</button>
            </div>
            <input type="text" name="faq_q_{{ forloop.counter0 }}" placeholder="Question" value="{{ item.q }}">
            <textarea name="faq_a_{{ forloop.counter0 }}" rows="2" placeholder="Answer">{{ item.a }}</textarea>
          </div>
          {% endfor %}
        </div>
        <button type="button" class="btn-cms-ghost" style="font-size:.8rem;margin-top:.25rem" onclick="addFaq()"><i class="fa-solid fa-plus me-1"></i>Add FAQ Pair</button>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Media</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label top">Thumbnail <span class="req">*</span></td>
            <td class="field-td">
              <input type="hidden" name="clear_thumbnail" id="clear_thumbnail" value="">
              <div class="thumb-upload-zone">
                <div class="thumb-box" id="thumbPreviewWrap">
                  {% if obj.thumbnail %}
                    <img id="thumbPreview" src="{{ obj.thumbnail.url }}">
                  {% else %}
                    <i class="fa-solid fa-image no-thumb" id="thumbNoImg"></i>
                  {% endif %}
                </div>
                <div>
                  <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">600 × 700 px portrait</div>
                  <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
                    <div class="upload-btn-wrap">
                      <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                        <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>
                        {% if obj.thumbnail %}Change Image{% else %}Upload Image{% endif %}
                      </button>
                      <input type="file" name="thumbnail" id="f_thumbnail" accept="image/*">
                    </div>
                    {% if obj.thumbnail %}
                    <button type="button" id="deleteThumbBtn" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="clearThumbnail()">
                      <i class="fa-solid fa-trash me-1"></i>Remove Image
                    </button>
                    {% endif %}
                  </div>
                  <div id="imgSizeWarning" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
                  <div id="imgSizeOk" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
                  <div class="field-error" id="err_thumbnail">Thumbnail is required for new posts.</div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">OG Image URL</td>
            <td class="field-td">
              <input type="url" name="og_image_url" id="f_og_image" value="{{ obj.og_image_url }}" placeholder="https://... (overrides thumbnail for social sharing)" oninput="seoScore()" class="field-input">
            </td>
          </tr>
          <tr>
            <td class="field-label">Image Alt Text</td>
            <td class="field-td">
              <input type="text" name="image_alt" value="{{ obj.image_alt }}" placeholder="e.g. Team working on SEO strategy for a London client" class="field-input">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">SEO / GEO</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Target Region</td>
            <td class="field-td">
              <select name="target_region" id="seo_region" onchange="seoScore()" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="global" {% if not obj.target_region or obj.target_region == 'global' %}selected{% endif %}>🌍 Global</option>
                <option value="europe" {% if obj.target_region == 'europe' %}selected{% endif %}>🇪🇺 Europe</option>
                <option value="uk"     {% if obj.target_region == 'uk' %}selected{% endif %}>🇬🇧 United Kingdom</option>
                <option value="ir"     {% if obj.target_region == 'ir' %}selected{% endif %}>🇮🇷 Iran</option>
                <option value="gcc"    {% if obj.target_region == 'gcc' %}selected{% endif %}>🏳️ GCC</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Meta Title <small style="font-weight:400;text-transform:none">30-60 chars</small></td>
            <td class="field-td">
              <input type="text" name="meta_title" id="f_meta_title" value="{{ obj.meta_title }}" placeholder="{{ obj.title }}" oninput="updateMetaTitleCounter();seoScore();" class="field-input">
              <div class="char-counter" id="metaTitleCounter">0 chars</div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Meta Description <span class="req">*</span> <small style="font-weight:400;text-transform:none">50-160</small></td>
            <td class="field-td">
              <textarea name="meta_description" id="f_meta_desc" rows="2" oninput="updateMetaDescCounter();seoScore();clearErr(this)" class="field-input" style="resize:vertical">{{ obj.meta_description }}</textarea>
              <div class="char-counter" id="metaDescCounter">0 chars</div>
              <div class="field-error" id="err_meta_desc">Meta description is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Focus Keyword</td>
            <td class="field-td">
              <input type="text" name="focus_keyword" id="f_focus" value="{{ obj.focus_keyword }}" placeholder="e.g. SEO services London" oninput="seoScore()" class="field-input">
              <div id="seoKeywordHint" style="font-size:.72rem;color:var(--cms-muted);margin-top:.2rem"></div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Canonical URL</td>
            <td class="field-td">
              <input type="url" name="canonical_url" id="f_canonical" value="{{ obj.canonical_url }}" placeholder="{{ site_url }}/insights/..." oninput="seoScore()" class="field-input">
            </td>
          </tr>
          <tr>
            <td class="field-label">Internal Tags</td>
            <td class="field-td">
              <input type="text" name="tags" id="f_tags" value="{{ obj.tags }}" placeholder="SEO, London, web design, case study" oninput="seoScore()" class="field-input">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Author E-E-A-T <span style="font-weight:400;text-transform:none;font-size:.72rem;letter-spacing:0">(Experience, Expertise, Authoritativeness, Trustworthiness)</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Job Title</td>
            <td class="field-td">
              <input type="text" name="author_title" id="f_author_title" value="{{ obj.author_title }}" placeholder="e.g. Senior SEO Strategist" oninput="seoScore()" class="field-input">
            </td>
          </tr>
          <tr>
            <td class="field-label">LinkedIn URL</td>
            <td class="field-td">
              <input type="url" name="author_linkedin" value="{{ obj.author_linkedin }}" placeholder="https://linkedin.com/in/..." class="field-input">
            </td>
          </tr>
          <tr>
            <td class="field-label top">Author Bio</td>
            <td class="field-td">
              <textarea name="author_bio" id="f_author_bio" rows="2" placeholder="Short expertise bio for structured data…" oninput="seoScore()" class="field-input" style="resize:vertical">{{ obj.author_bio }}</textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Official Sources <span style="font-weight:400;text-transform:none;font-size:.72rem;letter-spacing:0">(Article citation schema — important for YMYL/trust)</span></div>
      <div class="card-body">
        <div id="sourcesList">
          {% for src in sources %}
          <div class="source-row" data-idx="{{ forloop.counter0 }}">
            <input type="text" name="source_title_{{ forloop.counter0 }}" value="{{ src.title }}" placeholder="Source title" style="flex:1;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
            <input type="url" name="source_url_{{ forloop.counter0 }}" value="{{ src.url }}" placeholder="https://..." style="flex:2;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
            <button type="button" class="btn-cms-ghost" style="color:#d9534f;padding:4px 8px;white-space:nowrap;" onclick="this.closest('.source-row').remove();reindexSources();seoScore();">✕</button>
          </div>
          {% endfor %}
        </div>
        <button type="button" class="btn-cms-ghost" style="font-size:12px;" onclick="addSource()">+ Add Source</button>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Publishing</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label" id="pubDateLabel">Published Date</td>
            <td class="field-td">
              <input type="datetime-local" id="f_pub_date"
                     value="{% if obj.status == 'scheduled' and obj.scheduled_at %}{{ obj.scheduled_at|date:'Y-m-d' }}T{{ obj.scheduled_at|date:'H:i' }}{% elif obj.published_at %}{{ obj.published_at|date:'Y-m-d' }}T{{ obj.published_at|date:'H:i' }}{% endif %}"
                     title="Leave blank to auto-set when publishing"
                     class="field-input" style="width:auto">
              <input type="hidden" name="published_at_manual" id="f_pub_date_utc">
            </td>
          </tr>
          <tr>
            <td class="field-label">Last Updated</td>
            <td class="field-td">
              <input type="date" name="update_date" value="{{ obj.update_date|date:'Y-m-d' }}" class="field-input" style="width:auto">
            </td>
          </tr>
          <tr>
            <td class="field-label">Read Time (min)</td>
            <td class="field-td">
              <input type="number" name="read_time" value="{{ obj.read_time|default:3 }}" min="1" class="field-input" style="width:80px">
            </td>
          </tr>
          <tr>
            <td class="field-label">Revision Note</td>
            <td class="field-td">
              <input type="text" name="revision_note" value="{{ obj.revision_note }}" placeholder="e.g. Updated pricing, added new case study" class="field-input">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Post</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_featured" id="is_featured" {% if obj.is_featured %}checked{% endif %}>
        <label for="is_featured">Featured — show first in listing</label>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem;position:sticky;top:80px;z-index:200;">
      <div class="section-head">SEO / GEO Score</div>
      <div class="card-body">
        <div class="seo-score-ring">
          <div class="seo-score-circle" id="scoreCircle" style="background:#d9534f;">0</div>
          <div>
            <div style="font-weight:700;font-size:14px;" id="scoreLabel">Not started</div>
            <div style="font-size:11px;color:#888;" id="scoreSubLabel">Fill in the required fields</div>
          </div>
        </div>
        <div id="insightRegionBadge"
             style="font-size:.72rem;font-weight:600;border-radius:4px;padding:.2rem .5rem;
                    display:inline-block;background:rgba(3,49,82,.07);color:#16517b;margin-bottom:10px">
        </div>
        <div id="seoChecklist"></div>
      </div>
    </div>

    <a href="{% url 'cms_insights' %}" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

  </div>

</div>
</form>

<div id="cropOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:1.5rem;width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <strong style="font-size:1rem">Crop Image</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem">Aspect ratio locked to 600 × 700 (portrait)</span>
      </div>
      <button type="button" onclick="closeCropper()" style="background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#666">&times;</button>
    </div>
    <div style="flex:1;overflow:hidden;min-height:0;max-height:60vh">
      <img id="cropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="closeCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="applyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>

/* ─── Required-field validation ─────────────────────────────── */
const REQUIRED = [
  { id: 'f_title',     err: 'err_title',     msg: 'Title is required.' },
  { id: 'f_category',  err: 'err_category',  msg: 'Please select a category.' },
  { id: 'f_excerpt',   err: 'err_excerpt',   msg: 'Excerpt is required.' },
  { id: 'f_meta_desc', err: 'err_meta_desc', msg: 'Meta description is required.' },
];

function clearErr(el) {
  el.classList.remove('error');
  // derive error div id from field id
  const key = el.id.replace('f_', '').replace('_', '_');
  const errId = 'err_' + el.id.slice(2); // strip 'f_'
  const errDiv = document.getElementById('err_' + el.id.slice(2));
  if (errDiv) errDiv.classList.remove('visible');
}

document.getElementById('insightForm').addEventListener('submit', function(e) {
  let firstInvalid = null;
  let hasErrors = false;

  REQUIRED.forEach(function(r) {
    const el  = document.getElementById(r.id);
    const err = document.getElementById(r.err);
    if (!el) return;
    const empty = !el.value.trim();
    if (empty) {
      el.classList.add('error');
      if (err) err.classList.add('visible');
      if (!firstInvalid) firstInvalid = el;
      hasErrors = true;
    } else {
      el.classList.remove('error');
      if (err) err.classList.remove('visible');
    }
  });

  // Thumbnail required only for new posts
  const hasThumbnailValue =
    document.getElementById('thumbnail_b64').value ||
    document.getElementById('f_thumbnail').files.length > 0 ||
    {% if obj.thumbnail %}(document.getElementById('clear_thumbnail').value !== '1'){% else %}false{% endif %};

  if (!hasThumbnailValue) {
    const errThumb = document.getElementById('err_thumbnail');
    if (errThumb) errThumb.classList.add('visible');
    if (!firstInvalid) firstInvalid = document.getElementById('f_thumbnail');
    hasErrors = true;
  }

  // Block if image too small AND publishing
  const status  = document.getElementById('f_status').value;
  const warning = document.getElementById('imgSizeWarning');
  if (status === 'published' && warning.style.display !== 'none') {
    e.preventDefault();
    alert('Image is too small (minimum 600×700 px). Please upload a larger image or change status to Draft.');
    document.getElementById('f_status').focus();
    return;
  }

  if (hasErrors) {
    e.preventDefault();
    if (firstInvalid) {
      firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
      setTimeout(() => firstInvalid.focus(), 350);
    }
    return;
  }

  // Sync pub date to UTC hidden field
  const localInput = document.getElementById('f_pub_date');
  const utcField   = document.getElementById('f_pub_date_utc');
  if (localInput && localInput.value) {
    const d = new Date(localInput.value);
    if (!isNaN(d)) utcField.value = d.toISOString();
  }
});

/* ─── Thumbnail / Crop logic ────────────────────────────────── */
const MIN_W = 600, MIN_H = 700;
let cropperInstance = null;

document.getElementById('f_thumbnail').addEventListener('change', function () {
  const file = this.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function (ev) {
    const src = ev.target.result;
    const probe = new Image();
    probe.onload = function () {
      const w = this.naturalWidth, h = this.naturalHeight;
      hideImgMessages();
      if (w < MIN_W || h < MIN_H) {
        showWarning(`Image is ${w}×${h}px — minimum is ${MIN_W}×${MIN_H}. Cannot publish with this image.`);
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
        seoScore();
      } else if (w > MIN_W || h > MIN_H) {
        openCropper(src);
      } else {
        showOk(`Image is exactly ${MIN_W}×${MIN_H} — perfect.`);
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
        seoScore();
      }
    };
    probe.src = src;
  };
  reader.readAsDataURL(file);
});

function showThumbPreview(src) {
  const wrap = document.getElementById('thumbPreviewWrap');
  wrap.innerHTML = '<img src="' + src + '" style="width:60px;height:70px;object-fit:cover;">';
}
function hideImgMessages() {
  document.getElementById('imgSizeWarning').style.display = 'none';
  document.getElementById('imgSizeOk').style.display = 'none';
}
function showWarning(msg) { const el = document.getElementById('imgSizeWarning'); el.textContent = msg; el.style.display = 'block'; }
function showOk(msg)      { const el = document.getElementById('imgSizeOk');      el.textContent = msg; el.style.display = 'block'; }

function openCropper(src) {
  const overlay = document.getElementById('cropOverlay');
  const cropImg = document.getElementById('cropImage');
  cropImg.src = src;
  overlay.style.display = 'flex';
  if (cropperInstance) { cropperInstance.destroy(); }
  cropImg.onload = function () {
    cropperInstance = new Cropper(cropImg, { aspectRatio: MIN_W / MIN_H, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}
function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  document.getElementById('f_thumbnail').value = '';
  hideImgMessages();
}
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.getElementById('cropOverlay').style.display === 'flex') closeCropper();
});

function applyCrop() {
  if (!cropperInstance) return;
  const canvas = cropperInstance.getCroppedCanvas({ width: MIN_W, height: MIN_H });
  const dataURL = canvas.toDataURL('image/jpeg', 0.92);
  document.getElementById('thumbnail_b64').value = dataURL;
  showThumbPreview(dataURL);
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  hideImgMessages();
  showOk(`Image cropped to ${MIN_W}×${MIN_H}px — ready to publish.`);
  seoScore();
}

function clearThumbnail(){
  if(!confirm('Remove the current image?')) return;
  document.getElementById('clear_thumbnail').value = '1';
  document.getElementById('thumbnail_b64').value = '';
  document.getElementById('f_thumbnail').value = '';
  const wrap = document.getElementById('thumbPreviewWrap');
  wrap.innerHTML = '<i class="fa-solid fa-image no-thumb" style="color:#cbd5e1;font-size:1.2rem"></i>';
  const btn = document.getElementById('deleteThumbBtn');
  if(btn) btn.style.display = 'none';
  hideImgMessages();
  seoScore();
}

/* ─── FAQ dynamic rows ─────────────────────────────────────── */
let faqCount = {{ faq_items|length }};
function addFaq(){
  const wrap = document.getElementById('faqList');
  const num = wrap.querySelectorAll('.faq-pair').length + 1;
  const div = document.createElement('div');
  div.className = 'faq-pair';
  div.dataset.idx = faqCount;
  div.innerHTML = `
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem">
      <span class="faq-pair-num">FAQ #${num}</span>
      <button type="button" class="btn-cms-danger" style="font-size:.72rem;padding:.2rem .55rem" onclick="this.closest('.faq-pair').remove();reindexFaq();seoScore();"><i class="fa-solid fa-trash" style="font-size:.65rem"></i> Remove</button>
    </div>
    <input type="text" name="faq_q_${faqCount}" placeholder="Question">
    <textarea name="faq_a_${faqCount}" rows="2" placeholder="Answer"></textarea>`;
  wrap.appendChild(div);
  faqCount++;
  seoScore();
}
function reindexFaq(){
  document.querySelectorAll('#faqList .faq-pair').forEach((div, i) => {
    div.querySelector('input[type=text]').name = `faq_q_${i}`;
    div.querySelector('textarea').name = `faq_a_${i}`;
  });
  faqCount = document.querySelectorAll('#faqList .faq-pair').length;
}

/* ─── Sources dynamic rows ─────────────────────────────────── */
let srcCount = {{ sources|length }};
function addSource(){
  const wrap = document.getElementById('sourcesList');
  const div = document.createElement('div');
  div.className = 'source-row';
  div.dataset.idx = srcCount;
  div.innerHTML = `
    <input type="text" name="source_title_${srcCount}" placeholder="Source title" style="flex:1;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
    <input type="url" name="source_url_${srcCount}" placeholder="https://..." style="flex:2;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
    <button type="button" class="btn-cms-ghost" style="color:#d9534f;padding:4px 8px;white-space:nowrap;"
      onclick="this.closest('.source-row').remove();reindexSources();seoScore();">✕</button>`;
  wrap.appendChild(div);
  srcCount++;
  seoScore();
}
function reindexSources(){
  document.querySelectorAll('#sourcesList .source-row').forEach((div, i) => {
    div.querySelectorAll('input')[0].name = `source_title_${i}`;
    div.querySelectorAll('input')[1].name = `source_url_${i}`;
  });
  srcCount = document.querySelectorAll('#sourcesList .source-row').length;
}

/* ─── Date label toggle ────────────────────────────────────── */
function toggleScheduleField(){
  const v = document.getElementById('f_status').value;
  const lbl = document.getElementById('pubDateLabel');
  if (lbl) lbl.textContent = v === 'scheduled' ? 'Scheduled For (UTC)' : 'Published Date';
}
toggleScheduleField();

/* ─── Pillar field toggle ──────────────────────────────────── */
function togglePillarField(){
  const v = document.getElementById('f_article_type').value;
  document.getElementById('pillarWrap').style.display = v === 'cluster' ? 'table-row' : 'none';
}
togglePillarField();

/* ─── Char counters ────────────────────────────────────────── */
function updateMetaTitleCounter(){
  const el = document.getElementById('f_meta_title');
  const n = el ? el.value.length : 0;
  const ct = document.getElementById('metaTitleCounter');
  if(!ct) return;
  ct.textContent = n + ' chars' + (n===0?'': n<30?' — too short': n>60?' — too long':' ✓');
  ct.className = 'char-counter' + (n===0?'': n<30?' warn': n>60?' bad':' good');
}
function updateMetaDescCounter(){
  const el = document.getElementById('f_meta_desc');
  const n = el ? el.value.length : 0;
  const ct = document.getElementById('metaDescCounter');
  if(!ct) return;
  ct.textContent = n + ' chars' + (n===0?'': n<50?' — too short': n>160?' — too long':' ✓');
  ct.className = 'char-counter' + (n===0?'': n<50?' warn': n>160?' bad':' good');
}
updateMetaTitleCounter();
updateMetaDescCounter();

/* ─── SEO Score (region-aware) ─────────────────────────────── */
function v(id){ const el = document.getElementById(id); return el ? el.value.trim() : ''; }
function hasFaqRows(){ return document.querySelectorAll('#faqList .faq-pair').length > 0; }
function hasSources(){ return document.querySelectorAll('#sourcesList .source-row').length > 0; }
function hasThumbnail(){
  if(document.getElementById('clear_thumbnail').value === '1') return false;
  if(document.getElementById('thumbnail_b64').value) return true;
  const fi = document.getElementById('f_thumbnail');
  if(fi && fi.files.length > 0) return true;
  return {% if obj.thumbnail %}true{% else %}false{% endif %};
}
function getRegion(){ const el=document.getElementById('seo_region'); return el?el.value:'global'; }
function metaTitleLen(){ return v('f_meta_title').length; }
function metaDescLen(){  return v('f_meta_desc').length; }

const REGION_CHECKS = {
  global:{
    label:'🌍 Global', hint:'English · Google · Bing · GEO (AI Overviews)',
    kwHint:'English keyword — e.g. "web design agency London"',
    checks:[
      {label:'Title filled',                     fn:()=>!!v('f_title')},
      {label:'Meta title (30–60 chars)',          fn:()=>{const n=metaTitleLen();return n>=30&&n<=60;}},
      {label:'Meta description (50–160 chars)',   fn:()=>{const n=metaDescLen();return n>=50&&n<=160;}},
      {label:'Focus keyword set',                fn:()=>!!v('f_focus')},
      {label:'Canonical URL set',               fn:()=>!!v('f_canonical')},
      {label:'TL;DR / GEO summary filled',       fn:()=>!!v('f_tldr')},
      {label:'At least one FAQ pair (schema)',   fn:hasFaqRows},
      {label:'Thumbnail uploaded',               fn:hasThumbnail},
      {label:'OG / social image set',            fn:()=>!!v('f_og_image')||hasThumbnail()},
      {label:'At least one official source',     fn:hasSources},
      {label:'Author title (E-E-A-T)',            fn:()=>!!v('f_author_title')},
      {label:'Author bio (E-E-A-T)',              fn:()=>!!v('f_author_bio')},
      {label:'Internal tags set',                fn:()=>!!v('f_tags')},
    ]
  },
  europe:{
    label:'🇪🇺 Europe', hint:'English · Google EU · hreflang · GDPR aware',
    kwHint:'English keyword for European audience',
    checks:[
      {label:'Title filled',                     fn:()=>!!v('f_title')},
      {label:'Meta title (30–60 chars)',          fn:()=>{const n=metaTitleLen();return n>=30&&n<=60;}},
      {label:'Meta description (50–160 chars)',   fn:()=>{const n=metaDescLen();return n>=50&&n<=160;}},
      {label:'Focus keyword set',                fn:()=>!!v('f_focus')},
      {label:'Canonical URL (hreflang)',         fn:()=>!!v('f_canonical')},
      {label:'TL;DR / GEO summary filled',       fn:()=>!!v('f_tldr')},
      {label:'At least one FAQ pair (schema)',   fn:hasFaqRows},
      {label:'Thumbnail uploaded',               fn:hasThumbnail},
      {label:'OG / social image set',            fn:()=>!!v('f_og_image')||hasThumbnail()},
      {label:'At least one official source',     fn:hasSources},
      {label:'Author title (E-E-A-T)',            fn:()=>!!v('f_author_title')},
      {label:'Author bio (E-E-A-T)',              fn:()=>!!v('f_author_bio')},
      {label:'Internal tags set',                fn:()=>!!v('f_tags')},
    ]
  },
  uk:{
    label:'🇬🇧 United Kingdom', hint:'English · Google UK · Bing UK · local schema',
    kwHint:'UK-phrased keyword — e.g. "web design London"',
    checks:[
      {label:'Title filled',                     fn:()=>!!v('f_title')},
      {label:'Meta title (30–60 chars)',          fn:()=>{const n=metaTitleLen();return n>=30&&n<=60;}},
      {label:'Meta description (50–160 chars)',   fn:()=>{const n=metaDescLen();return n>=50&&n<=160;}},
      {label:'Focus keyword (UK phrasing)',       fn:()=>!!v('f_focus')},
      {label:'Canonical URL set',               fn:()=>!!v('f_canonical')},
      {label:'TL;DR / GEO summary filled',       fn:()=>!!v('f_tldr')},
      {label:'At least one FAQ pair (schema)',   fn:hasFaqRows},
      {label:'Thumbnail uploaded',               fn:hasThumbnail},
      {label:'OG / social image set',            fn:()=>!!v('f_og_image')||hasThumbnail()},
      {label:'At least one official source',     fn:hasSources},
      {label:'Author title (E-E-A-T)',            fn:()=>!!v('f_author_title')},
      {label:'Author bio (E-E-A-T)',              fn:()=>!!v('f_author_bio')},
      {label:'Internal tags set',                fn:()=>!!v('f_tags')},
    ]
  },
  ir:{
    label:'🇮🇷 Iran', hint:'Persian · Yandex · Parsijoo · Telegram · RTL',
    kwHint:'کلمه کلیدی فارسی — e.g. طراحی سایت حرفه‌ای',
    checks:[
      {label:'Title filled (Persian preferred)', fn:()=>!!v('f_title')},
      {label:'Meta title (20–60 chars, FA)',      fn:()=>{const n=metaTitleLen();return n>=20&&n<=60;}},
      {label:'Meta description (50–160 chars)',   fn:()=>{const n=metaDescLen();return n>=50&&n<=160;}},
      {label:'Focus keyword — Persian (FA)',      fn:()=>!!v('f_focus')},
      {label:'TL;DR for VPN / AI users (GEO)',   fn:()=>!!v('f_tldr')},
      {label:'At least one FAQ pair (schema)',   fn:hasFaqRows},
      {label:'Thumbnail uploaded',               fn:hasThumbnail},
      {label:'At least one official source',     fn:hasSources},
      {label:'Internal tags set (Persian)',      fn:()=>!!v('f_tags')},
    ]
  },
  gcc:{
    label:'🏳️ GCC', hint:'Arabic + English · Google · Snap · TikTok · RTL',
    kwHint:'Arabic or English keyword for Gulf — e.g. تصميم مواقع or "web design Dubai"',
    checks:[
      {label:'Title filled',                     fn:()=>!!v('f_title')},
      {label:'Meta title (30–60 chars)',          fn:()=>{const n=metaTitleLen();return n>=30&&n<=60;}},
      {label:'Meta description (50–160 chars)',   fn:()=>{const n=metaDescLen();return n>=50&&n<=160;}},
      {label:'Focus keyword (Arabic or EN)',      fn:()=>!!v('f_focus')},
      {label:'TL;DR / GEO summary filled',       fn:()=>!!v('f_tldr')},
      {label:'At least one FAQ pair (schema)',   fn:hasFaqRows},
      {label:'Thumbnail uploaded',               fn:hasThumbnail},
      {label:'OG / social image set',            fn:()=>!!v('f_og_image')||hasThumbnail()},
      {label:'At least one official source',     fn:hasSources},
      {label:'Internal tags set',                fn:()=>!!v('f_tags')},
    ]
  }
};

function seoScore(){
  const region  = getRegion();
  const rc      = REGION_CHECKS[region] || REGION_CHECKS.global;
  const results = rc.checks.map(c => ({ label:c.label, ok:c.fn() }));
  const passed  = results.filter(r=>r.ok).length;
  const total   = results.length;
  const pct     = Math.round((passed / total) * 100);
  const circle  = document.getElementById('scoreCircle');
  const label   = document.getElementById('scoreLabel');
  const sub     = document.getElementById('scoreSubLabel');
  const badge   = document.getElementById('insightRegionBadge');
  circle.textContent = pct;
  if(pct >= 85){ circle.style.background = '#2e9e5b'; label.textContent = 'Excellent'; }
  else if(pct >= 60){ circle.style.background = '#e0a72e'; label.textContent = 'Good'; }
  else if(pct >= 40){ circle.style.background = '#e8570e'; label.textContent = 'Needs work'; }
  else { circle.style.background = '#d9534f'; label.textContent = 'Incomplete'; }
  sub.textContent = `${passed} of ${total} checks passed`;
  if(badge) badge.textContent = rc.label + ' · ' + rc.hint;
  const kh = document.getElementById('seoKeywordHint');
  if(kh) kh.textContent = rc.kwHint || '';
  document.getElementById('seoChecklist').innerHTML = results.map(r =>
    `<div class="seo-check ${r.ok?'ok':'bad'}"><span class="ic"></span><span>${r.label}</span></div>`
  ).join('');
}
seoScore();
</script>
{% endblock %}