/* signup-modal.jsx — Progressive sign-up flow with API integration */

function SignupModal({ isOpen, onClose, presetCategory, presetPlan }) {
  var lang = React.useContext(window.LangCtx);
  var s = window.T[lang].signup;
  var [step, setStep] = React.useState(0);
  var [data, setData] = React.useState({ name: '', email: '', language: lang, category: presetCategory || 'car' });
  var [submitted, setSubmitted] = React.useState(false);
  var [submitting, setSubmitting] = React.useState(false);
  var [error, setError] = React.useState(null);
  var [closing, setClosing] = React.useState(false);
  var selectedPlan = React.useRef(presetPlan || null);

  React.useEffect(function() {
    if (isOpen) {
      setStep(0);
      setData({ name: '', email: '', language: lang, category: presetCategory || 'car' });
      setSubmitted(false); setSubmitting(false); setError(null); setClosing(false);
      selectedPlan.current = presetPlan || null;
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return function() { document.body.style.overflow = ''; };
  }, [isOpen, lang, presetCategory, presetPlan]);

  var handleClose = function() {
    setClosing(true);
    setTimeout(onClose, 200);
  };

  var handleNext = function() {
    setError(null);
    if (step === 0 && !data.name.trim()) return;
    if (step === 1 && (!data.email.trim() || !data.email.includes('@'))) return;
    if (step < 2) {
      setStep(step + 1);
    } else {
      submitLead();
    }
  };

  var submitLead = function() {
    setSubmitting(true); setError(null);
    var utm = window.__cbrUtm || {};
    var body = {
      name: data.name.trim(),
      email: data.email.trim(),
      language: data.language,
      category: data.category,
      selected_plan: selectedPlan.current,
      utm_source: utm.utm_source || null,
      utm_medium: utm.utm_medium || null,
      utm_campaign: utm.utm_campaign || null,
      utm_content: utm.utm_content || null,
      utm_term: utm.utm_term || null,
      landing_page_id: window.CBR_CONFIG.LANDING_PAGE_ID
    };
    fetch(window.CBR_CONFIG.API_BASE + '/api/leads/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    })
    .then(function(res) {
      if (!res.ok) throw new Error('API error ' + res.status);
      return res.json();
    })
    .then(function() {
      setSubmitting(false);
      setSubmitted(true);
    })
    .catch(function(err) {
      console.error('[CBRMaster] Lead submission failed:', err);
      setSubmitting(false);
      setError(s.errorMsg);
    });
  };

  var handleGoToLogin = function() {
    window.location.href = window.CBR_CONFIG.API_BASE + '/login';
  };

  var handleKeyDown = function(e) {
    if (e.key === 'Enter' && !submitting) handleNext();
    if (e.key === 'Escape') handleClose();
  };

  if (!isOpen) return null;

  var progress = submitted ? 100 : ((step + 1) / 3) * 100;

  return (
    <div className={"modal-overlay" + (closing ? " modal-overlay--closing" : "")} onClick={handleClose}>
      <div className={"modal" + (closing ? " modal--closing" : "")} onClick={function(e){ e.stopPropagation(); }} onKeyDown={handleKeyDown}>
        <button className="modal__close" onClick={handleClose} aria-label="Close">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>

        <div className="modal__progress">
          <div className="modal__progress-fill" style={{ width: progress + '%' }}></div>
        </div>

        <div className="modal__body">
          {error && (
            <div className="modal__error">{error}</div>
          )}

          {submitted ? (
            <div className="modal__step" key="done">
              <div className="modal__success-icon">✓</div>
              <h3 className="modal__title">{s.successTitle}</h3>
              <p className="modal__desc">
                {s.successDesc1} <strong>{data.email}</strong>. {s.successDesc2}
              </p>
              <button className="btn btn--primary modal__btn" onClick={handleGoToLogin}>
                {s.successBtn}
              </button>
            </div>
          ) : step === 0 ? (
            <div className="modal__step" key="name">
              <div className="modal__step-label">{s.step1of3}</div>
              <h3 className="modal__title">{s.nameTitle}</h3>
              <p className="modal__desc">{s.nameDesc}</p>
              <input className="modal__input" type="text" placeholder={s.namePlaceholder}
                value={data.name} onChange={function(e){ setData(Object.assign({}, data, {name: e.target.value})); }} autoFocus />
              <button className={"btn btn--primary modal__btn" + (!data.name.trim() ? " modal__btn--disabled" : "")}
                onClick={handleNext}>{s.continue}</button>
            </div>
          ) : step === 1 ? (
            <div className="modal__step" key="email">
              <div className="modal__step-label">{s.step2of3}</div>
              <h3 className="modal__title">{s.emailTitle}</h3>
              <p className="modal__desc">{s.emailDesc}</p>
              <input className="modal__input" type="email" placeholder={s.emailPlaceholder}
                value={data.email} onChange={function(e){ setData(Object.assign({}, data, {email: e.target.value})); }} autoFocus />
              <div className="modal__nav-row">
                <button className="modal__back" onClick={function(){ setStep(step - 1); }}>{s.back}</button>
                <button className={"btn btn--primary modal__btn" + (!data.email.trim() || !data.email.includes('@') ? " modal__btn--disabled" : "")}
                  onClick={handleNext}>{s.continue}</button>
              </div>
            </div>
          ) : (
            <div className="modal__step" key="prefs">
              <div className="modal__step-label">{s.step3of3}</div>
              <h3 className="modal__title">{s.prefsTitle}</h3>
              <p className="modal__desc">{s.prefsDesc}</p>

              <div className="modal__field">
                <label className="modal__field-label">{s.langLabel}</label>
                <div className="modal__option-group">
                  {[{ value: 'en', label: s.langEn }, { value: 'nl', label: s.langNl }].map(function(opt) {
                    return (
                      <button key={opt.value}
                        className={"modal__option" + (data.language === opt.value ? " modal__option--active" : "")}
                        onClick={function(){ setData(Object.assign({}, data, {language: opt.value})); }}>
                        {opt.label}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="modal__field">
                <label className="modal__field-label">{s.catLabel}</label>
                <div className="modal__option-group">
                  {[{ value: 'car', label: s.catCar, icon: '🚗' }, { value: 'motorcycle', label: s.catMoto, icon: '🏍️' }].map(function(opt) {
                    return (
                      <button key={opt.value}
                        className={"modal__option modal__option--wide" + (data.category === opt.value ? " modal__option--active" : "")}
                        onClick={function(){ setData(Object.assign({}, data, {category: opt.value})); }}>
                        <span className="modal__option-icon">{opt.icon}</span>
                        {opt.label}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="modal__nav-row">
                <button className="modal__back" onClick={function(){ setStep(step - 1); }}>{s.back}</button>
                <button className={"btn btn--primary modal__btn" + (submitting ? " modal__btn--disabled" : "")}
                  onClick={handleNext} disabled={submitting}>
                  {submitting ? '...' : s.createAccount}
                </button>
              </div>
            </div>
          )}
        </div>

        {!submitted && (
          <div className="modal__footer">
            {s.terms} <a href="#">{s.termsLink}</a> {s.and} <a href="#">{s.privacyLink}</a>.
          </div>
        )}
      </div>
    </div>
  );
}

/* Global signup state with preset support */
window.__signupModal = {
  _listeners: [],
  _open: false,
  _presetCategory: null,
  _presetPlan: null,
  open: function(opts) {
    this._presetCategory = (opts && opts.category) || null;
    this._presetPlan = (opts && opts.plan) || null;
    this._open = true;
    this._listeners.forEach(function(fn) { fn({ open: true, category: this._presetCategory, plan: this._presetPlan }); }.bind(this));
  },
  close: function() {
    this._open = false;
    this._listeners.forEach(function(fn) { fn({ open: false, category: null, plan: null }); });
  },
  subscribe: function(fn) {
    this._listeners.push(fn);
    return function() { this._listeners = this._listeners.filter(function(l) { return l !== fn; }); }.bind(this);
  }
};
window.openSignup = function(opts) { window.__signupModal.open(opts); };

function useSignupModal() {
  var ref = React.useState({ isOpen: false, category: null, plan: null });
  var state = ref[0]; var setState = ref[1];
  React.useEffect(function() {
    return window.__signupModal.subscribe(function(s) {
      setState({ isOpen: s.open, category: s.category, plan: s.plan });
    });
  }, []);
  return { isOpen: state.isOpen, category: state.category, plan: state.plan,
    open: function(opts) { window.__signupModal.open(opts); },
    close: function() { window.__signupModal.close(); }
  };
}

Object.assign(window, { SignupModal, useSignupModal });