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

{% block bodyPage %}
<style>
  {% verbatim %}
  /* --- صفحهٔ قالب‌های پیامک: استایل‌ها با پیشوند smsx و محدود به همین صفحه --- */

  /* هیچ عنصری از این صفحه نباید از کادر خودش بیرون بزند؛ ریشهٔ به‌هم‌ریختگی‌ها
     معمولاً همین box-sizing است (width:100% + padding). */
  .smsx, .smsx *, .smsx *::before, .smsx *::after { box-sizing: border-box; }
  .smsx { max-width: 60rem; margin-inline: auto; }
  .smsx img, .smsx textarea, .smsx input, .smsx button { max-width: 100%; }

  .smsx-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
  .smsx-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

  /* ---------- کارت هر نوع پیامک ---------- */
  .smsx-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: .9rem; overflow: hidden; }
  .smsx-card[open] { box-shadow: 0 6px 18px rgba(0,0,0,.07); border-color: #d9d9d9; }
  .smsx-card.is-off .smsx-summary__title { color: #9a9a9a; }
  .smsx-card.is-dirty { border-color: #ffdd57; }

  .smsx-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .9rem 1rem; cursor: pointer; list-style: none; }
  .smsx-summary::-webkit-details-marker { display: none; }
  .smsx-summary:hover { background: #fafafa; }
  .smsx-summary:focus-visible { outline: 2px solid #3273dc; outline-offset: -2px; }
  .smsx-summary__icon { font-size: 1.35rem; line-height: 1; }
  .smsx-summary__main { min-width: 0; }
  .smsx-summary__title { display: block; font-weight: 600; color: #363636; overflow-wrap: anywhere; }
  .smsx-summary__sub { display: block; font-size: .78rem; color: #7a7a7a; line-height: 1.7; overflow-wrap: anywhere; }
  .smsx-summary__meta { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
  .smsx-summary__chev { flex: 0 0 auto; width: .55rem; height: .55rem; border-right: 2px solid #b5b5b5; border-bottom: 2px solid #b5b5b5; transform: rotate(45deg); transition: transform .18s; }
  .smsx-card[open] .smsx-summary__chev { transform: rotate(-135deg); }

  /* ---------- بدنهٔ فرم ---------- */
  .smsx-body { padding: 1rem; border-top: 1px solid #f0f0f0; }
  /* گرید سه‌ستونی مقاوم: ستون عنوان کشسان، دو ستون دیگر به‌قدر محتوا */
  .smsx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) max-content; gap: .9rem 1rem; align-items: start; }
  .smsx-cell { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
  .smsx-label { display: block; margin: 0; font-size: .8rem; font-weight: 600; color: #4a4a4a; line-height: 1.6; overflow-wrap: anywhere; }
  .smsx-cell--switch .smsx-label { white-space: nowrap; }
  .smsx-note { margin-top: .75rem; margin-bottom: 0; line-height: 1.9; }

  /* کلید فعال/غیرفعال */
  .smsx-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; min-height: 2.5rem; }
  .smsx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .smsx-switch__track { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px; background: #dbdbdb; transition: background .18s; }
  .smsx-switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
  .smsx-switch input:checked + .smsx-switch__track { background: #48c774; }
  .smsx-switch input:checked + .smsx-switch__track::after { transform: translateX(-20px); }
  .smsx-switch input:focus-visible + .smsx-switch__track { outline: 2px solid #3273dc; outline-offset: 2px; }
  .smsx-switch__text { font-size: .85rem; color: #4a4a4a; white-space: nowrap; }

  /* ---------- کادر نوشتن متن ---------- */
  .smsx-editor { margin-top: 1rem; border: 1px solid #e2e2e2; border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
  .smsx-editor:focus-within { border-color: #3273dc; box-shadow: 0 0 0 3px rgba(50,115,220,.12); }
  /* padding افقی سر/پا هم‌اندازهٔ padding خود textarea (1rem) تا متن و برچسب هم‌تراز بمانند */
  .smsx-editor__head { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; padding: .65rem 1rem; background: #fbfbfb; border-bottom: 1px solid #eee; }
  .smsx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
  .smsx-chip { display: inline-block; font-size: .75rem; line-height: 1.6; padding: .35rem .65rem; border-radius: 999px; border: 1px solid #dbdbdb; background: #fff; color: #4a4a4a; cursor: pointer; direction: ltr; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
  .smsx-chip:hover { border-color: #3273dc; color: #3273dc; background: #f5f9ff; }
  .smsx-chip:active { transform: translateY(1px); }

  /* textarea دقیقاً به اندازهٔ کادر؛ بدون border/padding سرکش */
  .smsx-editor textarea.smsx-textarea {
    display: block; width: 100%; max-width: 100%; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    padding: .85rem 1rem; font-size: 1rem; line-height: 1.9; font-family: inherit;
    resize: vertical; overflow-y: auto;
    unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere;
  }
  .smsx-editor textarea.smsx-textarea:focus { border: 0; box-shadow: none; outline: none; }
  .smsx-editor__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem 1rem; border-top: 1px solid #f0f0f0; background: #fbfbfb; font-size: .78rem; color: #7a7a7a; }
  .smsx-dot { color: #dbdbdb; }
  .smsx-metric { font-variant-numeric: tabular-nums; }
  .smsx-metric.is-ok { color: #257942; }
  .smsx-metric.is-warn { color: #b8860b; }
  .smsx-metric.is-bad { color: #cc0f35; font-weight: 600; }
  .smsx-warn { color: #cc0f35; overflow-wrap: anywhere; }

  /* ---------- پیش‌نمایش ---------- */
  .smsx-preview { margin-top: 1rem; }
  .smsx-preview__label { display: block; font-size: .8rem; font-weight: 600; color: #4a4a4a; margin-bottom: .4rem; }
  .smsx-bubble { background: #ecf7ee; border: 1px solid #d5ecda; border-radius: 14px 14px 4px 14px; padding: .75rem .95rem; line-height: 1.9; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 2.6rem; }
  .smsx-preview__hint { margin: .4rem 0 0; font-size: .75rem; line-height: 1.8; }

  .smsx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
  .smsx-dirty { font-size: .8rem; color: #b8860b; }

  .smsx-help { margin-bottom: 1rem; background: #f5f9ff; border: 1px solid #dbe9ff; border-radius: 10px; padding: .7rem .95rem; }
  .smsx-help > summary { cursor: pointer; font-size: .85rem; color: #3273dc; font-weight: 600; }
  .smsx-help .smsx-chips { margin-top: .6rem; }
  .smsx-help .smsx-chip { cursor: default; white-space: normal; }

  /* ---------- موبایل ---------- */
  @media (max-width: 768px) {
    .smsx-body { padding: .85rem; }
    .smsx-summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: .8rem .85rem; row-gap: .5rem; }
    .smsx-summary__meta { grid-column: 1 / -1; }
    /* همهٔ فیلدها زیر هم؛ دیگر هیچ چیز به هم نمی‌چسبد */
    .smsx-grid { grid-template-columns: minmax(0, 1fr); }
    .smsx-cell--switch .smsx-label { white-space: normal; }
    .smsx-editor textarea.smsx-textarea { font-size: 16px; } /* جلوگیری از زوم خودکار iOS */
    .smsx-actions .button { width: 100%; }
  }
  {% endverbatim %}
</style>

<div class="container mt-5" dir="rtl">
  <div class="smsx">
    <div class="smsx-head">
      <div>
        <h1 class="title is-4 mb-1">قالب‌های پیامک</h1>
        <p class="subtitle is-6 has-text-grey mb-0">
          متن هر نوع پیامک و زمان ارسال آن را اینجا تعیین کنید. برای ویرایش، روی هر کارت بزنید.
        </p>
      </div>
      <div class="smsx-head__actions">
        <button type="button" class="button is-small is-light" data-smsx-expand-all>باز کردن همه</button>
        <button type="button" class="button is-small is-light" data-smsx-collapse-all>بستن همه</button>
      </div>
    </div>

    <details class="smsx-help">
      <summary>متغیرهای قابل استفاده در متن پیامک</summary>
      <p class="help mb-0">کافی است روی هر متغیر بزنید تا در کادر متن همان پیامک درج شود.</p>
      <div class="smsx-chips">
        {% for token, desc in variables %}
        <span class="smsx-chip" title="{{ desc }}">{{ token }} <span class="has-text-grey">{{ desc }}</span></span>
        {% endfor %}
      </div>
    </details>

    {{ smsx_config|json_script:"smsx-config" }}

    {% for row in rows %}
    <details class="smsx-card" id="type-{{ row.code }}" {% if forloop.first %}open{% endif %} data-smsx-card>
      <summary class="smsx-summary">
        <span class="smsx-summary__icon" aria-hidden="true">{{ row.icon }}</span>
        <span class="smsx-summary__main">
          <span class="smsx-summary__title">{{ row.label }}</span>
          <span class="smsx-summary__sub">
            {{ row.when }}{% if row.timing_value is not None %} · {{ row.timing_label }}: {{ row.timing_value }}{% endif %}
          </span>
        </span>
        <span class="smsx-summary__meta">
          <span class="tag is-light" data-smsx-badge>—</span>
          {% if not row.template.is_enabled %}
          <span class="tag is-warning is-light">غیرفعال</span>
          {% endif %}
          {% if row.template.auto_send %}
          <span class="tag is-success is-light">خودکار</span>
          {% endif %}
        </span>
        <span class="smsx-summary__chev" aria-hidden="true"></span>
      </summary>

      <form class="smsx-body" method="post" action="{% url 'admin_panel:sms_template_edit' row.template.id %}">
        {% csrf_token %}

        <div class="smsx-grid">
          <div class="smsx-cell">
            <label class="smsx-label" for="title-{{ row.code }}">عنوان</label>
            <input id="title-{{ row.code }}" class="input" type="text" name="title" value="{{ row.template.title }}">
          </div>

          {% if row.timing_value is not None %}
          <div class="smsx-cell">
            <label class="smsx-label" for="timing-{{ row.code }}">{{ row.timing_label }}</label>
            <input id="timing-{{ row.code }}" class="input" type="number" inputmode="numeric" min="0"
                   name="timing_value" value="{{ row.timing_value|default_if_none:'' }}">
          </div>
          {% endif %}

          <div class="smsx-cell smsx-cell--switch">
            <span class="smsx-label">وضعیت ارسال</span>
            <label class="smsx-switch">
              <input type="checkbox" name="is_enabled" {% if row.template.is_enabled %}checked{% endif %}>
              <span class="smsx-switch__track"></span>
              <span class="smsx-switch__text">{% if row.template.is_enabled %}فعال{% else %}غیرفعال{% endif %}</span>
            </label>
          </div>

          <div class="smsx-cell smsx-cell--switch">
            <span class="smsx-label">ارسال</span>
            <label class="smsx-switch" title="روشن = ارسال خودکار بدون صف تأیید مدیر / خاموش = نیازمند تأیید مدیر">
              <input type="checkbox" name="auto_send" {% if row.template.auto_send %}checked{% endif %}>
              <span class="smsx-switch__track"></span>
              <span class="smsx-switch__text">{% if row.template.auto_send %}خودکار{% else %}با تأیید مدیر{% endif %}</span>
            </label>
          </div>
        </div>

        {% if row.timing.note %}
        <p class="help smsx-note">{{ row.timing.note }}</p>
        {% endif %}

        <div class="smsx-editor">
          <div class="smsx-editor__head">
            <label class="smsx-label" for="text-{{ row.code }}">متن پیامک</label>
            <div class="smsx-chips" role="group" aria-label="درج متغیر در متن">
              {% for token, desc in variables %}
              <button type="button" class="smsx-chip" data-smsx-insert="{{ token }}"
                      title="{{ desc }}" aria-label="درج {{ token }} — {{ desc }}">{{ token }}</button>
              {% endfor %}
            </div>
          </div>
          <textarea id="text-{{ row.code }}" class="textarea smsx-textarea" name="text" rows="6"
                    data-smsx-text aria-describedby="meta-{{ row.code }}"
                    placeholder="متن پیامک را اینجا بنویسید…">{{ row.template.text }}</textarea>
          <div class="smsx-editor__foot" id="meta-{{ row.code }}">
            <span class="smsx-metric" data-smsx-counter>—</span>
            <span class="smsx-dot" aria-hidden="true">•</span>
            <span class="smsx-metric" data-smsx-segments>—</span>
            <span class="smsx-warn" data-smsx-warn hidden></span>
          </div>
        </div>

        <div class="smsx-preview">
          <span class="smsx-preview__label">پیش‌نمایش (با دادهٔ نمونه)</span>
          <div class="smsx-bubble" data-smsx-preview>{{ row.preview }}</div>
          <p class="help smsx-preview__hint">
            مقادیر نمونه فقط برای نمایش است؛ هنگام ارسال، اطلاعات واقعی همان مشتری جای متغیرها می‌نشیند.
          </p>
        </div>

        <div class="smsx-actions">
          <button class="button is-success" type="submit">ذخیره</button>
          <span class="smsx-dirty" data-smsx-dirty hidden>● تغییرات ذخیره‌نشده</span>
        </div>
      </form>
    </details>
    {% empty %}
    <div class="notification is-warning">هیچ قالبی تعریف نشده است.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block jsEnd %}
<script>
  {% verbatim %}
  (function () {
    "use strict";

    var configEl = document.getElementById("smsx-config");
    if (!configEl) return;
    var CFG = JSON.parse(configEl.textContent);
    var TOKENS = CFG.tokens || [];
    var SAMPLE = CFG.sample || {};

    var TOKEN_RE = /\{([A-Za-z_][A-Za-z0-9_]*)\}/g;
    // GSM-7 پایه (یک نویسه) و نویسه‌های افزودنی (دو نویسه)
    var GSM_BASIC = {};
    " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\n\r".split("").forEach(function (c) { GSM_BASIC[c] = true; });
    var GSM_EXT = {};
    ["^", "{", "}", "[", "]", "~", "|", "\\", "€"].forEach(function (c) { GSM_EXT[c] = true; });

    function toFa(value) {
      return String(value).replace(/\d/g, function (d) { return "۰۱۲۳۴۵۶۷۸۹"[d]; });
    }

    // شمارش نویسه و بخش‌های پیامک: GSM-7 ⇒ ۱۶۰/۱۵۳، یونیکد ⇒ ۷۰/۶۷
    function measure(text) {
      var chars = Array.from(text);
      var gsm = true, len = 0;
      for (var i = 0; i < chars.length; i++) {
        var c = chars[i];
        if (GSM_BASIC[c]) { len += 1; }
        else if (GSM_EXT[c]) { len += 2; }
        else { gsm = false; break; }
      }
      if (!gsm) len = chars.length;
      var single = gsm ? 160 : 70, multi = gsm ? 153 : 67;
      var parts = len === 0 ? 0 : (len <= single ? 1 : Math.ceil(len / multi));
      return { len: len, parts: parts, gsm: gsm };
    }

    function fillSample(text) {
      return text.replace(TOKEN_RE, function (match, name) {
        return Object.prototype.hasOwnProperty.call(SAMPLE, name) ? SAMPLE[name] : "";
      });
    }

    function unknownTokens(text) {
      var found, seen = {}, out = [];
      while ((found = TOKEN_RE.exec(text)) !== null) {
        var name = "{" + found[1] + "}";
        if (TOKENS.indexOf(name) === -1 && !seen[name]) { seen[name] = true; out.push(name); }
      }
      TOKEN_RE.lastIndex = 0;
      return out;
    }

    function cardOf(el) { return el ? el.closest("[data-smsx-card]") : null; }

    function refresh(card) {
      var ta = card.querySelector("[data-smsx-text]");
      if (!ta) return;
      var text = ta.value;
      var shown = fillSample(text);
      var info = measure(shown);

      var counter = card.querySelector("[data-smsx-counter]");
      var segments = card.querySelector("[data-smsx-segments]");
      var warn = card.querySelector("[data-smsx-warn]");
      var preview = card.querySelector("[data-smsx-preview]");
      var badge = card.querySelector("[data-smsx-badge]");

      counter.textContent = toFa(info.len) + " نویسه";

      if (info.parts === 0) {
        segments.textContent = "متن خالی است";
        segments.className = "smsx-metric";
      } else {
        segments.textContent = toFa(info.parts) + (info.parts === 1 ? " پیامک" : " پیامک (چندبخشی)");
        segments.className = "smsx-metric " + (info.parts <= 1 ? "is-ok" : (info.parts <= 3 ? "is-warn" : "is-bad"));
      }
      if (badge) badge.textContent = info.parts === 0 ? "—" : toFa(info.parts) + " پیامک";

      var unknown = unknownTokens(text);
      if (unknown.length) {
        warn.hidden = false;
        warn.textContent = "متغیر ناشناخته: " + unknown.join("، ") + " — خالی رندر می‌شود.";
      } else {
        warn.hidden = true;
        warn.textContent = "";
      }

      if (preview) preview.textContent = shown;
    }

    var DIRTY = false;
    function markDirty(card) {
      if (!card || card.classList.contains("is-dirty")) return;
      card.classList.add("is-dirty");
      var flag = card.querySelector("[data-smsx-dirty]");
      if (flag) flag.hidden = false;
      DIRTY = true;
    }

    function insertAtCursor(ta, token) {
      ta.focus();
      var value = ta.value;
      var start = ta.selectionStart == null ? value.length : ta.selectionStart;
      var end = ta.selectionEnd == null ? value.length : ta.selectionEnd;
      var before = value.slice(0, start);
      var prefix = (before && !/\s$/.test(before)) ? " " : "";
      ta.value = before + prefix + token + value.slice(end);
      var pos = start + prefix.length + token.length;
      ta.setSelectionRange(pos, pos);
    }

    document.addEventListener("click", function (event) {
      // بستن اعلان‌ها (Bulma JS بارگذاری نشده است).
      var dismiss = event.target.closest(".notification .delete");
      if (dismiss) {
        var box = dismiss.closest(".notification");
        if (box) box.remove();
        return;
      }
      var insert = event.target.closest("[data-smsx-insert]");
      if (insert) {
        event.preventDefault();
        var card = cardOf(insert);
        var ta = card && card.querySelector("[data-smsx-text]");
        if (!ta) return;
        insertAtCursor(ta, insert.getAttribute("data-smsx-insert"));
        refresh(card);
        markDirty(card);
        return;
      }
      if (event.target.closest("[data-smsx-expand-all]")) {
        document.querySelectorAll("[data-smsx-card]").forEach(function (d) { d.open = true; refresh(d); });
        return;
      }
      if (event.target.closest("[data-smsx-collapse-all]")) {
        document.querySelectorAll("[data-smsx-card]").forEach(function (d) { d.open = false; });
      }
    });

    document.addEventListener("input", function (event) {
      var card = cardOf(event.target);
      if (!card) return;
      if (event.target.matches("[data-smsx-text]")) {
        refresh(card);
        markDirty(card);
      } else if (event.target.matches('input[name="title"], input[name="timing_value"]')) {
        markDirty(card);
      }
    });

    document.addEventListener("change", function (event) {
      var input = event.target;
      if (!input.matches('input[name="is_enabled"], input[name="auto_send"]')) return;
      var card = cardOf(input);
      if (!card) return;
      markDirty(card);
      if (input.name === "is_enabled") card.classList.toggle("is-off", !input.checked);
      // متن سوئیچِ همان کلید به‌روز می‌شود (نه اولین سوئیچ کارت).
      var sw = input.closest(".smsx-switch");
      var label = sw && sw.querySelector(".smsx-switch__text");
      if (label) {
        label.textContent = input.name === "is_enabled"
          ? (input.checked ? "فعال" : "غیرفعال")
          : (input.checked ? "خودکار" : "با تأیید مدیر");
      }
    });

    // «toggle» رویداد حباب‌شو نیست؛ با capture گرفته می‌شود.
    document.addEventListener("toggle", function (event) {
      if (event.target.matches && event.target.matches("[data-smsx-card]") && event.target.open) {
        refresh(event.target);
      }
    }, true);

    document.addEventListener("submit", function () { DIRTY = false; });

    window.addEventListener("beforeunload", function (event) {
      if (!DIRTY) return;
      event.preventDefault();
      event.returnValue = "";
    });

    function init() {
      document.querySelectorAll("[data-smsx-card]").forEach(function (card) {
        var toggle = card.querySelector('input[name="is_enabled"]');
        if (toggle) card.classList.toggle("is-off", !toggle.checked);
        refresh(card);
      });

      // پس از ذخیره، همان کارت باز و در نمای دید باقی می‌ماند (لنگر #type-…).
      var hash = window.location.hash;
      if (hash.indexOf("#type-") === 0) {
        var target = document.getElementById(hash.slice(1));
        if (target) {
          document.querySelectorAll("[data-smsx-card][open]").forEach(function (d) {
            if (d !== target) d.open = false;
          });
          target.open = true;
          refresh(target);
          target.scrollIntoView({ block: "start" });
        }
      }
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", init);
    } else {
      init();
    }
  })();
  {% endverbatim %}
</script>
{% endblock %}