const { useEffect, useRef, useState, useCallback } = React;

// ── Beta sign-up form ─────────────────────────────────────────────────
// CTA(무료로 시작하기) 를 누르면 요금제 선택 없이 바로 띄우는 사전등록 폼.
// 데이터는 Amplitude 의 "Beta Interest Submitted" 이벤트로만 전송 + localStorage 백업.
// 실제 백엔드 연동 시 handleSubmit 의 // TODO 부분에 endpoint 호출 추가.
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const BetaSignupModal = ({ open, plan, source, onClose }) => {
  const openedAtRef = useRef(null);
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (open) {
      openedAtRef.current = Date.now();
      track("Beta Form Viewed", { plan_intent: plan, source });
      document.body.style.overflow = "hidden";
      // reset on each open
      setEmail(""); setEmailError(""); setSubmitted(false);
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // 제출 없이 닫힐 때만 발화. submitted 상태(감사 화면) 에서의 close 는 dismiss 가 아님.
  const dismiss = useCallback((closed_via) => {
    if (!submitted) {
      const dwell_ms = Date.now() - (openedAtRef.current || Date.now());
      track("Beta Form Dismissed", {
        plan_intent: plan,
        source,
        dwell_ms,
        closed_via,
        had_email: !!email.trim(),
      });
    }
    onClose();
  }, [submitted, plan, source, email, onClose]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") dismiss("esc"); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, dismiss]);

  if (!open) return null;

  const handleSubmit = (e) => {
    e.preventDefault();
    const cleanEmail = email.trim().toLowerCase();
    if (!EMAIL_RE.test(cleanEmail)) {
      setEmailError("이메일 형식을 다시 확인해주세요.");
      return;
    }
    const time_to_submit_ms = Date.now() - (openedAtRef.current || Date.now());

    const payload = {
      plan_intent: plan,
      source,
      email: cleanEmail,
      time_to_submit_ms,
    };
    track("Beta Interest Submitted", payload);

    // localStorage 백업 (시트 / 백엔드 도달 실패에 대비 — 사용자가 잃지 않도록)
    try {
      const k = "__beta_signups";
      const all = JSON.parse(localStorage.getItem(k) || "[]");
      all.push({ ...payload, submitted_at: new Date().toISOString() });
      localStorage.setItem(k, JSON.stringify(all));
    } catch (_) {}

    // Google Sheets Web App 자동 연동.
    // URL 비어있으면 skip (데모 모드). 설정 방법은 docs/analytics.md §8.
    try {
      const meta = document.querySelector('meta[name="sheets-webhook-url"]');
      const url = ((meta && meta.getAttribute("content")) || "").trim();
      if (url && !/^(YOUR_|{{|undefined|null)/i.test(url)) {
        // tracking.jsx superProps 를 마지막 이벤트의 props 에서 추출 (visitor_id / persona / utm 등)
        const evs = window.__events || [];
        const ctx = evs.length ? evs[evs.length - 1].props : {};
        const sheetRow = {
          submitted_at: new Date().toISOString(),
          email: cleanEmail,
          plan_intent: plan,
          source,
          time_to_submit_ms,
          persona: ctx.persona || null,
          default_solution: ctx.default_solution || null,
          device: ctx.device || null,
          visitor_id: ctx.visitor_id || null,
          session_id: ctx.session_id || null,
          utm_source: ctx.utm_source || null,
          utm_medium: ctx.utm_medium || null,
          utm_campaign: ctx.utm_campaign || null,
          utm_content: ctx.utm_content || null,
          utm_term: ctx.utm_term || null,
          landing_path: ctx.landing_path || null,
          referrer: ctx.referrer || null,
        };
        // text/plain 으로 보내면 CORS preflight 가 발생하지 않아 Apps Script Web App 과 잘 맞음.
        // no-cors 모드라 응답은 못 읽지만 요청은 도달. 실패해도 localStorage 백업과 Amplitude 로그가 남음.
        fetch(url, {
          method: "POST",
          mode: "no-cors",
          headers: { "Content-Type": "text/plain;charset=utf-8" },
          body: JSON.stringify(sheetRow),
          keepalive: true,
        }).catch(() => {});
      }
    } catch (_) {}

    setSubmitted(true);
  };

  const submitLabel = betaSignup.submitLabel;

  // ── Thank-you state ──
  if (submitted) {
    return (
      <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains("modal-backdrop")) onClose(); }}>
        <div className="modal modal--beta modal--beta-done" role="dialog" aria-modal="true">
          <button
            data-track="beta_form_close_done"
            className="modal__close modal__close--floating"
            onClick={onClose}
            aria-label="닫기"
          >
            <Icon name="x" size={18} />
          </button>
          <div className="beta-done">
            <div className="beta-done__icon"><Icon name="check" size={32} stroke={3} /></div>
            <h3 className="beta-done__title">사전등록 완료!</h3>
            <p className="beta-done__sub">
              <strong>{email}</strong> 로 출시 소식을 보내드릴게요.<br/>
              {betaSignup.thankYouSub}
            </p>
            <div className="beta-reward beta-reward--done">
              <div className="beta-reward__items">
                {betaSignup.rewards.map((r, i) => (
                  <div key={i} className="beta-reward__item">
                    <span className="beta-reward__ic" aria-hidden="true">{r.icon}</span>
                    <span className="beta-reward__body">
                      <span className="beta-reward__name">{r.title}</span>
                      {r.desc && <span className="beta-reward__desc">{r.desc}</span>}
                    </span>
                  </div>
                ))}
              </div>
            </div>
            <button
              data-track="beta_form_close_after_submit"
              className="btn btn--primary btn--block"
              onClick={onClose}
            >
              닫기
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ── Form state ──
  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains("modal-backdrop")) dismiss("backdrop"); }}>
      <div className="modal modal--beta" role="dialog" aria-modal="true" aria-labelledby="beta-title">
        <div className="modal__head">
          <div>
            <div className="beta-eyebrow">Comming Soon</div>
            <h3 className="modal__title" id="beta-title"> 모아링을 가장 먼저 사용해보세요! </h3>
            <p className="modal__sub">
              정식 출시되면 가장 먼저 알려드릴게요.<br/>
              이메일만 남겨주시면 됩니다.
            </p>
          </div>
          <button data-track="beta_form_close" className="modal__close" onClick={() => dismiss("x_button")} aria-label="닫기">
            <Icon name="x" size={18} />
          </button>
        </div>

        <div className="beta-reward">
          <div className="beta-reward__title">📮 {betaSignup.bannerTitle}</div>
          <div className="beta-reward__items">
            {betaSignup.rewards.map((r, i) => (
              <div key={i} className="beta-reward__item">
                <span className="beta-reward__ic" aria-hidden="true">{r.icon}</span>
                <span className="beta-reward__body">
                  <span className="beta-reward__name">{r.title}</span>
                  {r.desc && <span className="beta-reward__desc">{r.desc}</span>}
                </span>
              </div>
            ))}
          </div>
        </div>

        <form onSubmit={handleSubmit} className="beta-form">
          {/* ① 이메일 — 유일한 필수 입력 */}
          <div className="beta-field">
            <label className="beta-field__label" htmlFor="beta-email">
              이메일 <span className="beta-field__req">*</span>
              <span className="beta-field__hint">필수</span>
            </label>
            <input
              id="beta-email"
              type="email"
              className={"beta-input" + (emailError ? " beta-input--error" : "")}
              placeholder="hello@example.com"
              value={email}
              onChange={(e) => { setEmail(e.target.value); if (emailError) setEmailError(""); }}
              required
              autoComplete="email"
            />
            {emailError && <div className="beta-field__error">{emailError}</div>}
          </div>

          {/* ② 액션 — 제출은 큰 단일 CTA, 취소는 보조 텍스트 링크 */}
          <div className="beta-form__actions">
            <button
              type="submit"
              data-track="beta_form_submit"
              className="btn btn--primary btn--lg btn--block"
            >
              {submitLabel}
              <Icon name="arrow-right" size={18} />
            </button>
            <button
              type="button"
              data-track="beta_form_cancel"
              className="beta-form__cancel"
              onClick={() => dismiss("cancel_link")}
            >
              돌아가기
            </button>
          </div>

          <div className="beta-form__privacy">{betaSignup.privacy}</div>
        </form>
      </div>
    </div>
  );
};

Object.assign(window, { BetaSignupModal });