/* global React */
const { useState: useStateQ, useEffect: useEffectQ, useMemo: useMemoQ } = React;

/* questions strictly per brief — Email removed from channel options */
const QUESTIONS = [
  {
    id: "experience",
    title: "Есть ли у вас опыт инвестирования?",
    options: [
      "Да, есть опыт",
      "Частично",
      "Нет, только знакомлюсь",
      "Пока просто интересуюсь",
    ],
  },
  {
    id: "long_term",
    title: "Интересуют ли вас долгосрочные решения?",
    options: [
      "Да, рассматриваю долгосрочно",
      "Скорее да",
      "Скорее нет",
      "Пока не определился(ась)",
    ],
  },
  {
    id: "consult",
    title: "Рассматриваете ли вы консультацию?",
    options: [
      "Да, хотелось бы получить",
      "Возможно, нужна дополнительная информация",
      "Сначала хочу прочитать материалы",
      "Не сейчас",
    ],
  },
  {
    id: "channel",
    title: "Как вам удобнее получить информацию?",
    options: [
      "Звонок",
      "Telegram",
      "WhatsApp",
    ],
  },
];

const CHANNEL_INDEX = QUESTIONS.findIndex(q => q.id === "channel");

/* phone mask: +7 (XXX) XXX-XX-XX */
function formatPhoneQ(raw) {
  const digits = raw.replace(/\D/g, "").slice(0, 11);
  let d = digits;
  if (d.length > 0) {
    if (d[0] === "8") d = "7" + d.slice(1);
    if (d[0] !== "7") d = "7" + d;
    d = d.slice(0, 11);
  }
  if (d.length === 0) return "";
  let out = "+7";
  if (d.length > 1) out += " (" + d.slice(1, 4);
  if (d.length >= 4) out += ") " + d.slice(4, 7);
  if (d.length >= 7) out += "-" + d.slice(7, 9);
  if (d.length >= 9) out += "-" + d.slice(9, 11);
  return out;
}

/* "@username" or "+7 phone" — Telegram-flexible */
function formatTelegramQ(raw) {
  const trimmed = raw.trim();
  if (trimmed.startsWith("@")) {
    return "@" + trimmed.slice(1).replace(/[^A-Za-z0-9_]/g, "").slice(0, 32);
  }
  if (/^[A-Za-z]/.test(trimmed)) {
    return "@" + trimmed.replace(/[^A-Za-z0-9_]/g, "").slice(0, 32);
  }
  return formatPhoneQ(raw);
}

/* validation per channel */
function validateContact(channel, value) {
  const v = (value || "").trim();
  if (!v) return "Укажите контакт";
  if (channel === 1) {
    if (v.startsWith("@")) {
      if (v.length < 6) return "Минимум 5 символов после @";
      return null;
    }
    if (v.replace(/\D/g, "").length < 11) return "Введите @username или номер полностью";
    return null;
  }
  if (v.replace(/\D/g, "").length < 11) return "Введите номер полностью";
  return null;
}

function QuizOverlay({ onClose, onOpenPrivacy }) {
  // 0..3 = questions, 4 = form
  const [step, setStep] = useStateQ(0);
  const [answers, setAnswers] = useStateQ({});
  const [name, setName] = useStateQ("");
  const [contact, setContact] = useStateQ("");
  const [err, setErr] = useStateQ({});
  const [submitting, setSubmitting] = useStateQ(false);

  const totalSteps = QUESTIONS.length + 1; // 4 q + form
  const progress = step >= totalSteps ? 100 : Math.round((step / totalSteps) * 100);

  const currentQ = step < QUESTIONS.length ? QUESTIONS[step] : null;
  const currentAnswer = currentQ ? answers[currentQ.id] : null;

  // selected channel index (0=call, 1=telegram, 2=whatsapp); default = call
  const channel = answers["channel"] ?? 0;

  const channelMeta = useMemoQ(() => {
    if (channel === 1) {
      return {
        label: "Telegram",
        sub: "@username или номер телефона",
        placeholder: "@username или +7 (___) ___-__-__",
        inputMode: "text",
        autocomplete: "off",
        formatter: formatTelegramQ,
      };
    }
    if (channel === 2) {
      return {
        label: "WhatsApp",
        sub: "Номер для сообщения в WhatsApp",
        placeholder: "+7 (___) ___-__-__",
        inputMode: "tel",
        autocomplete: "tel",
        formatter: formatPhoneQ,
      };
    }
    return {
      label: "Телефон",
      sub: "Для звонка в рабочее время",
      placeholder: "+7 (___) ___-__-__",
      inputMode: "tel",
      autocomplete: "tel",
      formatter: formatPhoneQ,
    };
  }, [channel]);

  // reset contact value if user goes back and picks another channel
  useEffectQ(() => { setContact(""); setErr(e => ({ ...e, contact: undefined })); }, [channel]);

  useEffectQ(() => {
    function onKey(e) {
      if (e.key === "Escape") onClose();
      if (e.key === "Enter" && currentQ && currentAnswer != null) next();
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  });

  function pick(qid, idx) {
    setAnswers(a => ({ ...a, [qid]: idx }));
    setTimeout(() => setStep(s => Math.min(s + 1, totalSteps)), 260);
  }
  function next() { if (step < totalSteps) setStep(s => s + 1); }
  function back() { setStep(s => Math.max(0, s - 1)); }

  function validate() {
    const e = {};
    if (!name.trim() || name.trim().length < 2) e.name = "Укажите имя";
    const cErr = validateContact(channel, contact);
    if (cErr) e.contact = cErr;
    setErr(e);
    return Object.keys(e).length === 0;
  }

  function submit() {
    if (!validate()) return;
    setSubmitting(true);

    // Классическая HTML-форма (WAF-friendly): собираем скрытую <form> и
    // сабмитим нативно — обычный POST на submit.php, PHP пишет CSV + email
    // и редиректит на success.html.
    const form = document.createElement("form");
    form.method = "POST";
    form.action = "submit.php";
    form.style.display = "none";

    const addField = (n, v) => {
      const inp = document.createElement("input");
      inp.type = "hidden";
      inp.name = n;
      inp.value = v;
      form.appendChild(inp);
    };

    addField("source", "offer_page");
    addField("name", name.trim());

    const trimmedContact = contact.trim();
    const isTelegramUsername = channel === 1 && trimmedContact.startsWith("@");

    if (isTelegramUsername) {
      addField("telegram", trimmedContact);
      addField("phone", ""); // контакт — Telegram-ник, телефона нет
    } else {
      const cleanPhone = trimmedContact.replace(/\D/g, "");
      addField("phone", cleanPhone);
      if (channel === 1) addField("telegram", cleanPhone);
    }

    document.body.appendChild(form);
    form.submit();
  }

  return (
    <div className="quiz-overlay" onClick={onClose}>
      <div className="quiz-frame" onClick={e => e.stopPropagation()}>
        {/* head */}
        <div className="quiz-head">
          <div className="quiz-progress"><i style={{ width: progress + "%" }}/></div>
          <span className="quiz-step-num">
            {Math.min(step + 1, totalSteps)} / {totalSteps}
          </span>
          <button className="quiz-close" onClick={onClose} aria-label="Закрыть"><CloseX/></button>
        </div>

        {/* body */}
        {currentQ ? (
          <div className="quiz-body" key={"q" + step}>
            <div className="stack-xs">
              <span className="quiz-q-eyebrow">Вопрос {step + 1} из&nbsp;{QUESTIONS.length}</span>
              <h2 className="quiz-q-title">{currentQ.title}</h2>
            </div>
            <div className="quiz-options" role="radiogroup">
              {currentQ.options.map((opt, i) => {
                const checked = currentAnswer === i;
                return (
                  <button key={i}
                          className="quiz-opt"
                          role="radio"
                          aria-checked={checked}
                          onClick={() => pick(currentQ.id, i)}>
                    <span className="radio"/>
                    <span>{opt}</span>
                  </button>
                );
              })}
            </div>
          </div>
        ) : (
          /* form step — contact field adapts to chosen channel */
          <div className="quiz-body" key="form">
            <div className="stack-xs">
              <span className="quiz-q-eyebrow">Последний шаг</span>
              <h2 className="quiz-q-title">Оставьте контакт</h2>
              <p className="lede">
                Свяжемся через&nbsp;<strong style={{ color: "var(--ink)" }}>{channelMeta.label}</strong>{" "}
                и&nbsp;поделимся информационными материалами по&nbsp;теме рынка золота.
              </p>
            </div>

            <div className="stack-sm">
              <div className={"field" + (err.name ? " is-error" : "")}>
                <span className="field-lbl">Имя</span>
                <input type="text"
                       value={name}
                       autoComplete="given-name"
                       onChange={e => { setName(e.target.value); if (err.name) setErr({...err, name: undefined}); }}
                       placeholder="Как к вам обращаться"/>
                {err.name && <span className="field-err">{err.name}</span>}
              </div>

              <div className={"field" + (err.contact ? " is-error" : "")}>
                <span className="field-lbl">{channelMeta.label}</span>
                <input type="text"
                       inputMode={channelMeta.inputMode}
                       value={contact}
                       autoComplete={channelMeta.autocomplete}
                       onChange={e => { setContact(channelMeta.formatter(e.target.value)); if (err.contact) setErr({...err, contact: undefined}); }}
                       placeholder={channelMeta.placeholder}/>
                <span style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2 }}>
                  {channelMeta.sub}
                </span>
                {err.contact && <span className="field-err">{err.contact}</span>}
              </div>

              <div className="quiz-form-disclaimer">
                Нажимая кнопку, пользователь соглашается с&nbsp;обработкой персональных данных
                согласно&nbsp;<a href="#privacy"
                                  onClick={(e) => { e.preventDefault(); onOpenPrivacy && onOpenPrivacy(); }}
                                  style={{ color: "var(--ink-2)", borderBottom: "1px solid var(--line)", textDecoration: "none" }}>
                  политике конфиденциальности
                </a>. Материалы носят информационный характер и&nbsp;не&nbsp;являются индивидуальной
                инвестиционной рекомендацией.
              </div>
            </div>
          </div>
        )}

        {/* foot */}
        <div className="quiz-foot">
          {step > 0 && (
            <button className="btn btn-back" onClick={back} aria-label="Назад">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          )}
          {currentQ ? (
            <button className="btn btn-primary"
                    disabled={currentAnswer == null}
                    onClick={next}>
              {currentAnswer == null ? "Выберите вариант" : (step === QUESTIONS.length - 1 ? "К форме" : "Далее")}
              {currentAnswer != null && <ArrowR className="btn-arrow"/>}
            </button>
          ) : (
            <button className="btn btn-primary"
                    disabled={submitting}
                    onClick={submit}>
              {submitting ? "Отправка…" : "Отправить заявку"}
              {!submitting && <ArrowR className="btn-arrow"/>}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

/* ───────── Privacy / Terms modal ───────── */
function LegalModal({ kind, onClose }) {
  useEffectQ(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const isPrivacy = kind === "privacy";
  return (
    <div className="pp-backdrop" onClick={onClose}>
      <div className="pp-sheet" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="pp-head">
          <div>
            <div className="kicker">Документ</div>
            <h3>{isPrivacy ? "Политика конфиденциальности" : "Пользовательское соглашение"}</h3>
          </div>
          <button className="quiz-close" onClick={onClose} aria-label="Закрыть"><CloseX/></button>
        </div>

        {isPrivacy ? (
          <div className="pp-body">
            <p className="dim" style={{ fontSize: 12 }}>
              ООО «ГОЛДРА» · ИНН&nbsp;9705190653 · ОГРН&nbsp;1237700048850<br/>
              Редакция от&nbsp;{new Date().getFullYear()} г.
            </p>

            <h4>1. Общие положения</h4>
            <p>Настоящая Политика определяет порядок обработки персональных данных физических лиц (далее&nbsp;— «Пользователь»), оставивших свои контактные данные через сайт ООО&nbsp;«GOLDRA» (далее&nbsp;— «Оператор»), и&nbsp;соответствует требованиям Федерального закона от&nbsp;27.07.2006 №&nbsp;152-ФЗ «О&nbsp;персональных данных».</p>

            <h4>2. Состав обрабатываемых данных</h4>
            <p>Оператор обрабатывает следующие персональные данные, предоставленные Пользователем добровольно:</p>
            <ul className="pp-list">
              <li>имя;</li>
              <li>номер телефона или идентификатор в&nbsp;мессенджере;</li>
              <li>ответы Пользователя на&nbsp;вопросы опроса.</li>
            </ul>

            <h4>3. Цели обработки</h4>
            <ul className="pp-list">
              <li>обратная связь с&nbsp;Пользователем по&nbsp;оставленной заявке;</li>
              <li>подготовка информационных материалов по&nbsp;запросу Пользователя;</li>
              <li>информирование об&nbsp;услугах Оператора в&nbsp;рамках темы запроса.</li>
            </ul>

            <h4>4. Правовые основания</h4>
            <p>Согласие Пользователя, выраженное путём отправки формы; статья&nbsp;6 ФЗ&nbsp;№&nbsp;152-ФЗ.</p>

            <h4>5. Сроки и хранение</h4>
            <p>Данные хранятся не&nbsp;дольше, чем этого требует цель обработки, но&nbsp;не&nbsp;более 1&nbsp;года с&nbsp;момента последнего обращения. По&nbsp;истечении срока данные обезличиваются или удаляются.</p>

            <h4>6. Передача третьим лицам</h4>
            <p>Оператор не&nbsp;передаёт персональные данные третьим лицам, за&nbsp;исключением случаев, прямо предусмотренных законодательством&nbsp;РФ, а&nbsp;также сервисов, обеспечивающих техническую работу сайта (хостинг, аналитика, IP-телефония) на&nbsp;условиях конфиденциальности.</p>

            <h4>7. Права Пользователя</h4>
            <p>Пользователь вправе отозвать согласие, потребовать уточнения, блокировки или&nbsp;удаления своих персональных данных, направив запрос на&nbsp;адрес <a href="mailto:info@goldra.ru">info@goldra.ru</a>. Запрос рассматривается в&nbsp;срок до&nbsp;30 дней.</p>

            <h4>8. Cookies и&nbsp;аналитика</h4>
            <p>Сайт может использовать файлы cookie и&nbsp;счётчики веб-аналитики для&nbsp;оценки посещаемости. Эти данные обезличены и&nbsp;не&nbsp;позволяют идентифицировать Пользователя без&nbsp;дополнительных сведений.</p>

            <h4>9. Контакты Оператора</h4>
            <p>По&nbsp;всем вопросам обработки персональных данных&nbsp;— <a href="mailto:info@goldra.ru">info@goldra.ru</a>.</p>

            <h4>10. Информационный дисклеймер</h4>
            <p>Материалы сайта носят исключительно информационный характер и&nbsp;не&nbsp;являются индивидуальной инвестиционной рекомендацией. Оператор не&nbsp;принимает денежные средства, не&nbsp;осуществляет доверительное управление и&nbsp;не&nbsp;гарантирует получение дохода. Инвестиции связаны с&nbsp;рисками, в&nbsp;том числе с&nbsp;риском потери средств.</p>
          </div>
        ) : (
          <div className="pp-body">
            <p className="dim" style={{ fontSize: 12 }}>
              ООО «ГОЛДРА» · ИНН&nbsp;9705190653 · ОГРН&nbsp;1237700048850<br/>
              Редакция от&nbsp;{new Date().getFullYear()} г.
            </p>

            <h4>1. Термины</h4>
            <p>«Сайт»&nbsp;— информационный ресурс ООО «ГОЛДРА». «Пользователь»&nbsp;— физическое лицо, использующее Сайт. «Оператор»&nbsp;— ООО&nbsp;«GOLDRA».</p>

            <h4>2. Назначение сайта</h4>
            <p>Сайт предназначен для&nbsp;предоставления информационных и&nbsp;справочных материалов по&nbsp;теме рынка золота и&nbsp;инвестиций. Сайт не&nbsp;является торговой платформой, не&nbsp;осуществляет приём денежных средств и&nbsp;не&nbsp;управляет средствами Пользователей.</p>

            <h4>3. Информационный характер материалов</h4>
            <p>Все&nbsp;материалы носят исключительно информационный характер и&nbsp;не&nbsp;являются индивидуальной инвестиционной рекомендацией в&nbsp;смысле Федерального закона №&nbsp;39-ФЗ «О&nbsp;рынке ценных бумаг». Оператор не&nbsp;гарантирует получение дохода и&nbsp;не&nbsp;несёт ответственности за&nbsp;решения, принятые Пользователем самостоятельно.</p>

            <h4>4. Использование Сайта</h4>
            <p>Пользователь обязуется использовать Сайт добросовестно, не&nbsp;нарушать законодательство РФ и&nbsp;права третьих лиц. Запрещены автоматизированный сбор данных, попытки нарушить работу Сайта и&nbsp;иные действия, противоречащие назначению ресурса.</p>

            <h4>5. Заявки и обратная связь</h4>
            <p>Отправляя заявку через&nbsp;форму на&nbsp;Сайте, Пользователь подтверждает достоверность указанных данных и&nbsp;соглашается с&nbsp;Политикой конфиденциальности. Оператор связывается с&nbsp;Пользователем для&nbsp;предоставления запрошенных информационных материалов.</p>

            <h4>6. Ограничение ответственности</h4>
            <p>Оператор не&nbsp;несёт ответственности за&nbsp;возможные убытки, возникшие у&nbsp;Пользователя в&nbsp;связи с&nbsp;самостоятельным принятием решений на&nbsp;основании информации, размещённой на&nbsp;Сайте. Инвестиции связаны с&nbsp;рисками, в&nbsp;том числе с&nbsp;риском потери средств.</p>

            <h4>7. Изменения соглашения</h4>
            <p>Оператор вправе вносить изменения в&nbsp;настоящее Соглашение. Актуальная редакция размещается на&nbsp;Сайте. Продолжая использование Сайта, Пользователь соглашается с&nbsp;действующей редакцией.</p>

            <h4>8. Контакты</h4>
            <p>Для&nbsp;связи с&nbsp;Оператором&nbsp;— <a href="mailto:info@goldra.ru">info@goldra.ru</a>.</p>
          </div>
        )}

        <div className="pp-foot">
          <button className="btn btn-dark btn-block" onClick={onClose}>Понятно</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { QuizOverlay, LegalModal });