/* فورم تسجيل الاهتمام — الصفحة الرئيسية لمتجر معاد (store.maad.org.sa)
   يرسل البيانات إلى نموذج قوقل «معاد - فورم المتجر» ← جدول «معاد - فورم المتجر (الردود)»
   ثم يحوّل الزائر إلى صفحة «شكراً لك»:
   /thank-you/page-210535275?form=lead&step=thank_you&interest=donor
   وفي صفحة الشكر يرسل حدث generate_lead إلى dataLayer (لـ GTM / Google Ads). */
(function () {
  var FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSdcZ8o0BdPJtfaUP2byQ73zTXZE8bomYkaUrLsc8-9EGo9XMw/formResponse';
  var THANKS_PATH = '/thank-you/page-210535275';
  var ENTRY = { name: 'entry.2120277672', phone: 'entry.739663663', city: 'entry.1847905119', interest: 'entry.1271871149' };
  var CITIES = ['مكة المكرمة', 'جدة', 'الطائف', 'رابغ', 'القنفذة', 'الليث', 'الجموم', 'خليص', 'الكامل', 'أخرى'];
  var INTERESTS = ['متبرع', 'متطوع', 'مستفيد', 'شراكة'];
  // رمز إنجليزي لكل نوع اهتمام — يظهر في الرابط وفي حدث GTM
  var INTEREST_CODE = { 'متبرع': 'donor', 'متطوع': 'volunteer', 'مستفيد': 'beneficiary', 'شراكة': 'partner' };
  // بيانات الفورم تُحفظ مؤقتاً للحدث في صفحة الشكر، ولا تُوضع بيانات شخصية في الرابط (سياسة Google Ads)
  var STORAGE_KEY = 'maad_lead';

  function isHome() {
    return /^\/(ar|en)?\/?$/.test(location.pathname);
  }

  function isThanks() {
    return location.pathname.indexOf('page-210535275') !== -1;
  }

  function thanksUrl(interestCode) {
    return THANKS_PATH + '?form=lead&step=thank_you&interest=' + encodeURIComponent(interestCode);
  }

  // يرسل generate_lead مرة واحدة فقط لكل تعبئة، فلا يُحسب تحديث الصفحة أو زيارتها مباشرة كتحويل
  function pushLeadEvent() {
    var lead;
    try {
      lead = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || 'null');
      sessionStorage.removeItem(STORAGE_KEY);
    } catch (e) { return; }
    if (!lead) return;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'generate_lead',
      form_id: 'maad_home_lead',
      lead_interest: lead.interest,
      lead_city: lead.city,
      user_data: { phone_number: lead.phone }
    });
  }

  function options(list, placeholder) {
    return '<option value="" disabled selected>' + placeholder + '</option>' +
      list.map(function (v) { return '<option>' + v + '</option>'; }).join('');
  }

  // يحوّل الأرقام العربية/الفارسية إلى إنجليزية ويحذف المسافات والرموز
  function normalizePhone(v) {
    v = String(v || '').replace(/[٠-٩]/g, function (d) { return d.charCodeAt(0) - 1632; })
      .replace(/[۰-۹]/g, function (d) { return d.charCodeAt(0) - 1776; })
      .replace(/[^\d+]/g, '');
    if (v.indexOf('+966') === 0) v = '0' + v.slice(4);
    else if (v.indexOf('00966') === 0) v = '0' + v.slice(5);
    else if (v.indexOf('966') === 0 && v.length === 12) v = '0' + v.slice(3);
    return v;
  }

  var CSS =
    '#maad-lead{direction:rtl;margin:40px auto;padding:0 16px;max-width:760px;font-family:inherit}' +
    '#maad-lead .ml-card{background:#fff;border-radius:20px;padding:32px 24px;box-shadow:0 6px 24px rgba(0,0,0,.06);border-top:5px solid #89282f}' +
    '#maad-lead h2{margin:0 0 6px;font-size:24px;color:#89282f;text-align:center}' +
    '#maad-lead .ml-sub{margin:0 0 24px;color:#555;text-align:center;line-height:1.8}' +
    '#maad-lead .ml-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}' +
    '#maad-lead label{display:block;font-size:14px;color:#333;margin-bottom:6px}' +
    '#maad-lead input,#maad-lead select{width:100%;box-sizing:border-box;height:48px;padding:0 14px;border:1px solid #ddd;border-radius:12px;background:#fafafa;font:inherit;font-size:16px;color:#222}' +
    '#maad-lead input:focus,#maad-lead select:focus{outline:none;border-color:#89282f;background:#fff}' +
    '#maad-lead input[name=phone]{direction:ltr;text-align:right}' +
    '#maad-lead .ml-err{color:#b00020;font-size:13px;min-height:18px;margin-top:4px}' +
    '#maad-lead button{margin-top:18px;width:100%;height:52px;border:0;border-radius:999px;background:#89282f;color:#fff;font:inherit;font-size:18px;font-weight:bold;cursor:pointer}' +
    '#maad-lead button:hover{background:#630209}' +
    '#maad-lead button:disabled{opacity:.6;cursor:wait}' +
    // إخفاء حقل فخ الروبوتات دون إزاحته خارج الشاشة (الإزاحة تسبب تمريراً أفقياً في صفحات RTL)
    '#maad-lead .ml-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}' +
    '@media (max-width:600px){#maad-lead .ml-grid{grid-template-columns:1fr}#maad-lead h2{font-size:21px}}';

  var HTML =
    '<div class="ml-card">' +
    '<h2>سجّل اهتمامك وسنتواصل معك</h2>' +
    '<p class="ml-sub">عبّئ بياناتك وسيتواصل معك فريق جمعية معاد قريباً بإذن الله.</p>' +
    '<form novalidate>' +
    '<div class="ml-grid">' +
    '<div><label for="ml-name">الاسم</label><input id="ml-name" name="name" type="text" autocomplete="name" maxlength="80" required><div class="ml-err"></div></div>' +
    '<div><label for="ml-phone">رقم الجوال</label><input id="ml-phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="05xxxxxxxx" maxlength="16" required><div class="ml-err"></div></div>' +
    '<div><label for="ml-city">المدينة</label><select id="ml-city" name="city" required>' + options(CITIES, 'اختر المدينة') + '</select><div class="ml-err"></div></div>' +
    '<div><label for="ml-interest">نوع الاهتمام</label><select id="ml-interest" name="interest" required>' + options(INTERESTS, 'اختر نوع الاهتمام') + '</select><div class="ml-err"></div></div>' +
    '</div>' +
    '<div class="ml-hp" aria-hidden="true"><input name="website" tabindex="-1" autocomplete="off"></div>' +
    '<button type="submit">إرسال</button>' +
    '</form></div>';

  function setError(input, msg) {
    input.parentNode.querySelector('.ml-err').textContent = msg || '';
  }

  function send(data) {
    var body = new URLSearchParams();
    body.append(ENTRY.name, data.name);
    body.append(ENTRY.phone, data.phone);
    body.append(ENTRY.city, data.city);
    body.append(ENTRY.interest, data.interest);
    // sendBeacon يكمل الإرسال حتى بعد الانتقال لصفحة الشكر
    if (navigator.sendBeacon && navigator.sendBeacon(FORM_URL, body)) return Promise.resolve();
    return fetch(FORM_URL, { method: 'POST', mode: 'no-cors', keepalive: true, body: body }).catch(function () {});
  }

  function mount() {
    if (!isHome() || document.getElementById('maad-lead')) return;
    var main = document.getElementById('main-content') || document.querySelector('main');
    if (!main) return;

    var style = document.createElement('style');
    style.textContent = CSS;
    document.head.appendChild(style);

    var section = document.createElement('section');
    section.id = 'maad-lead';
    section.innerHTML = HTML;
    main.appendChild(section);

    var form = section.querySelector('form');
    var sending = false;
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (sending) return;
      var f = form.elements;
      var data = {
        name: f.name.value.trim(),
        phone: normalizePhone(f.phone.value),
        city: f.city.value,
        interest: f.interest.value
      };
      var ok = true;
      setError(f.name, ''); setError(f.phone, ''); setError(f.city, ''); setError(f.interest, '');
      if (data.name.length < 2) { setError(f.name, 'اكتب اسمك'); ok = false; }
      if (!/^05\d{8}$/.test(data.phone)) { setError(f.phone, 'اكتب رقم جوال صحيح يبدأ بـ 05 (10 أرقام)'); ok = false; }
      if (!data.city) { setError(f.city, 'اختر المدينة'); ok = false; }
      if (!data.interest) { setError(f.interest, 'اختر نوع الاهتمام'); ok = false; }
      if (!ok) return;

      sending = true;
      var btn = form.querySelector('button');
      btn.disabled = true;
      btn.textContent = 'جارٍ الإرسال…';
      var code = INTEREST_CODE[data.interest] || 'other';
      if (f.website.value) { location.href = thanksUrl(code); return; } // روبوت: لا نرسل شيئاً
      try {
        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
          interest: code,
          city: data.city,
          phone: '+966' + data.phone.slice(1) // صيغة E.164 للتحويلات المحسّنة
        }));
      } catch (err) {}
      send(data).then(function () { location.href = thanksUrl(code); });
    });
  }

  function init() {
    if (isThanks()) pushLeadEvent();
    else mount();
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();