/* global React */
const { useState, useEffect } = React;

const TG_QUALIFIED = 'https://t.me/m/8vw9Nf5jMzJi';
const TG_DISQUALIFIED = 'https://t.me/m/8vw9Nf5jMzJi';

const QUIZ_QUESTIONS = [
  {
    id: 'q1',
    title: 'Яка проблема зараз для вас найбільш актуальна?',
    options: [
      'Клієнти купують один раз і зникають',
      'Дохід «то густо, то пусто»',
      'Постійно шукаю нових клієнтів',
      'Все разом',
    ],
  },
  {
    id: 'q2',
    title: 'На який заробіток ви хочете вийти?',
    options: ['$1 000 – $3 000', '$3 000 – $5 000', '$5 000 – $10 000', 'Більше $10 000'],
  },
  {
    id: 'q3',
    title: 'Скільки зараз ви заробляєте?',
    options: [
      'до $800',
      '$800 – $1 500',
      '$1 500 – $2 000',
      'Більше $2 000',
    ],
  },
  {
    id: 'q4',
    title: 'Ви зараз більше «в режимі вижити», чи готові вкладати ресурси, щоб збудувати регулярний дохід?',
    options: [
      'Так, готовий(-а) інвестувати — є і бажання, і бюджет',
      'Так, хочу — але зручніше оплатити частинами / в розстрочку',
      'Поки ні — зараз не пріоритет',
    ],
  },
];

const INCOME_QUESTION_ID = 'q3';
const LOW_INCOME = 'до $800';
const READINESS_QUESTION_ID = 'q4';
const READY_TO_INVEST = 'Так, готовий(-а) інвестувати — є і бажання, і бюджет';

function sendLead(payload) {
  const url = window.__QUIZ_ENDPOINT;
  if (!url) return;
  const body = JSON.stringify(payload);
  try {
    const blob = new Blob([body], { type: 'text/plain;charset=UTF-8' });
    if (navigator.sendBeacon && navigator.sendBeacon(url, blob)) return;
  } catch (e) { /* fall through to fetch */ }
  fetch(url, {
    method: 'POST',
    body,
    headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
    keepalive: true,
  }).catch(() => {});
}

window.openQuiz = function () {
  window.dispatchEvent(new CustomEvent('baza:open-quiz'));
};

function QuizProgress({ step, total }) {
  return (
    <div className="quiz-progress">
      <div className="quiz-progress__bar">
        <div className="quiz-progress__fill" style={{ width: ((step + 1) / total) * 100 + '%' }}></div>
      </div>
      <span className="quiz-progress__label">Питання {step + 1} з {total}</span>
    </div>
  );
}

function QuizLeadForm({ onSubmit }) {
  const [firstName, setFirstName] = useState('');
  const [error, setError] = useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!firstName.trim()) { setError('Вкажіть ім’я'); return; }
    onSubmit({ firstName: firstName.trim() });
  };

  return (
    <form className="quiz-form" onSubmit={submit} noValidate>
      <h3 className="quiz-result__title">Заповни форму та обери в Телеграмі зручний час для консультації</h3>
      <p className="quiz-result__sub">Будь ласка, заповніть форму нижче</p>

      <div className="field">
        <input className="input" placeholder="Ім’я" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
        {error && <span className="quiz-field__err">{error}</span>}
      </div>

      <label className="quiz-consent">
        <input type="checkbox" checked readOnly />
        <span>
          Я погоджуюсь з <a href="#privacy" target="_blank" rel="noopener noreferrer">політикою конфіденційності</a> та{' '}
          <a href="#terms" target="_blank" rel="noopener noreferrer">правилами використання</a>
        </span>
      </label>

      <button type="submit" className="btn btn--primary btn--lg w-full">Перейти в Телеграм →</button>
    </form>
  );
}

function QuizModal() {
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [phase, setPhase] = useState('questions'); // 'questions' | 'qualified' | 'disqualified'

  const total = QUIZ_QUESTIONS.length;

  const reset = () => { setStep(0); setAnswers({}); setPhase('questions'); };
  const close = () => { setOpen(false); setTimeout(reset, 300); };

  useEffect(() => {
    const onOpen = () => { reset(); setOpen(true); };
    window.addEventListener('baza:open-quiz', onOpen);
    return () => window.removeEventListener('baza:open-quiz', onOpen);
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open]);

  const pick = (questionId, option) => {
    const nextAnswers = { ...answers, [questionId]: option };
    setAnswers(nextAnswers);

    if (questionId === INCOME_QUESTION_ID) {
      if (option === LOW_INCOME) {
        setStep(step + 1);
      } else {
        setPhase('qualified');
      }
      return;
    }

    if (questionId === READINESS_QUESTION_ID) {
      if (option === READY_TO_INVEST) {
        setPhase('qualified');
      } else {
        setPhase('disqualified');
        sendLead({ status: 'disqualified', ...nextAnswers });
      }
      return;
    }

    setStep(step + 1);
  };

  const goBack = () => { if (step > 0) setStep(step - 1); };

  const onLeadSubmit = (contact) => {
    sendLead({ status: 'qualified', ...answers, ...contact });
    if (window.fbq) window.fbq('track', 'Lead');
    window.location.href = TG_QUALIFIED;
  };

  if (!open) return null;

  const q = QUIZ_QUESTIONS[step];

  return (
    <div className="quiz-overlay" onClick={close}>
      <div className="quiz-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="quiz-close" onClick={close} aria-label="Закрити">×</button>

        {phase === 'questions' && (
          <div className="quiz-step">
            {step === 0 && (
              <p className="quiz-welcome">
                Вітаю! Розкажіть трішки про себе та свій проєкт і ми підберемо зручний час для розбору.
              </p>
            )}
            <QuizProgress step={step} total={total} />
            {step > 0 && (
              <button className="quiz-back" onClick={goBack}>← Назад</button>
            )}
            <h2 className="quiz-question">{q.title}</h2>
            <div className="quiz-options">
              {q.options.map(opt => (
                <button
                  key={opt}
                  className={`quiz-option ${answers[q.id] === opt ? 'quiz-option--active' : ''}`}
                  onClick={() => pick(q.id, opt)}
                >
                  {opt}
                </button>
              ))}
            </div>
          </div>
        )}

        {phase === 'disqualified' && (
          <div className="quiz-result">
            <span className="quiz-result__badge">Подарунок 🎁</span>
            <h2 className="quiz-result__title">
              На жаль, ми не можемо запропонувати вам консультацію — але ви отримаєте крутий подарунок
            </h2>
            <p className="quiz-result__sub">
              Заберіть корисний матеріал у Телеграмі — він допоможе зробити перший крок до системних повторних продажів.
            </p>
            <a className="btn btn--primary btn--lg w-full" href={TG_DISQUALIFIED}>
              Забрати подарунок →
            </a>
          </div>
        )}

        {phase === 'qualified' && (
          <div className="quiz-result">
            <QuizLeadForm onSubmit={onLeadSubmit} />
          </div>
        )}
      </div>
    </div>
  );
}

function ConsultBar() {
  return (
    <div className="consult-bar-wrap">
      <button type="button" className="consult-bar" onClick={() => window.openQuiz()}>
        <span className="consult-bar__text">
          Хочеш отримувати 50%+ доходу від продажів на діючій базі клієнтів без витрат на рекламу?{' '}
          <strong className="consult-bar__cta">ЗАПИШИСЬ</strong> на безкоштовну консультацію →
        </span>
      </button>
    </div>
  );
}

function FloatingConsultButton() {
  return (
    <div className="floating-cta">
      <button className="btn btn--primary floating-cta__btn" onClick={() => window.openQuiz()}>
        Записатись на консультацію
      </button>
    </div>
  );
}

Object.assign(window, { QuizModal, FloatingConsultButton, ConsultBar });