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

function parsePersonaFromUrl() {
  try {
    const p = new URLSearchParams(window.location.search).get("persona");
    if (p && personas[p]) return p;
    const h = (window.location.hash || "").replace(/^#\/?/, "");
    if (h && personas[h]) return h;
  } catch (e) {}
  return "parent_app_zero";
}

function isDevMode() {
  try {
    return new URLSearchParams(window.location.search).get("dev") === "1";
  } catch (e) { return false; }
}

function App() {
  const [personaKey, setPersonaKey] = useState(parsePersonaFromUrl());
  const persona = personas[personaKey];

  const [activeSolution, setActiveSolution] = useState(persona.defaultSolution);
  const [betaForm, setBetaForm] = useState({ open: false, plan: null, source: null });
  const exploreCountRef = useRef(0);
  const pageStartRef = useRef(Date.now());
  const maxScrollRef = useRef(0);
  const solutionsExploredRef = useRef(new Set([persona.defaultSolution]));

  // When persona changes, reset everything that depends on it
  useEffect(() => {
    setActiveSolution(persona.defaultSolution);
    exploreCountRef.current = 0;
    solutionsExploredRef.current = new Set([persona.defaultSolution]);

    setSuperProps({ persona: persona.id, default_solution: persona.defaultSolution });

    track("Page Viewed", { persona: persona.id, default_solution: persona.defaultSolution, referrer: document.referrer || null });
    track("Default Animation Loaded", { solution: persona.defaultSolution });

    // sync URL only if persona already appears in URL (preserve user's format: query OR hash).
    // Avoids polluting bare "/" with the default persona key.
    try {
      const url = new URL(window.location.href);
      const hasQuery = url.searchParams.has("persona");
      const hashKey = (url.hash || "").replace(/^#\/?/, "");
      const hasHash = !!personas[hashKey];
      if (hasQuery) {
        url.searchParams.set("persona", personaKey);
        window.history.replaceState({}, "", url);
      } else if (hasHash) {
        url.hash = personaKey;
        window.history.replaceState({}, "", url);
      }
    } catch (e) {}
  }, [personaKey]);

  // Track scroll depth + exit
  useEffect(() => {
    const onScroll = () => {
      const docH = document.documentElement.scrollHeight - window.innerHeight;
      if (docH <= 0) return;
      const pct = Math.min(100, Math.round((window.scrollY / docH) * 100));
      if (pct > maxScrollRef.current) maxScrollRef.current = pct;
    };
    window.addEventListener("scroll", onScroll, { passive: true });

    // 한 세션(페이지 로드)당 1회만 발화. pagehide 와 visibilitychange 가 같은 이탈에서
    // 둘 다 터질 수 있어 가드한다 (먼저 잡힌 신호가 이김).
    let exited = false;
    const onExit = (reason) => {
      if (exited) return;
      exited = true;
      const evs = window.__events || [];
      const reached_solution_player = evs.some(
        (e) => e.event === "Section Viewed" && e.props.section === "solution_player"
      );
      // 마지막에 보고 있던 섹션 = 가장 최근 "Section Viewed".
      // Dwell 이벤트가 그 뒤에 찍혔어도 OK — entered_at 시점부터 지금까지를 머문 시간으로 본다.
      let last_section = null;
      let last_section_entered_at = null;
      for (let i = evs.length - 1; i >= 0; i--) {
        const e = evs[i];
        if (e.event === "Section Viewed") {
          last_section = e.props.section;
          last_section_entered_at = e.props._ts;
          break;
        }
      }
      track("Page Exited", {
        max_scroll_pct: maxScrollRef.current,
        reached_solution_player,
        solutions_explored: Array.from(solutionsExploredRef.current),
        total_time_ms: Date.now() - pageStartRef.current,
        last_section,
        last_section_dwell_ms: last_section_entered_at
          ? Date.now() - last_section_entered_at
          : null,
        exit_reason: reason,
      });
    };
    // pagehide: 데스크탑/일부 브라우저에서 잘 터짐.
    // visibilitychange(hidden): 모바일·iOS 인앱 브라우저 등 pagehide 가 안 터지는 환경 커버.
    // → 둘 다 걸어 전 플랫폼(mobile/desktop·iOS/Android)에서 이탈 시 total_time_ms 가 항상 남도록.
    const onPageHide = () => onExit("pagehide");
    const onVisibility = () => { if (document.visibilityState === "hidden") onExit("visibility_hidden"); };
    window.addEventListener("pagehide", onPageHide);
    document.addEventListener("visibilitychange", onVisibility);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("pagehide", onPageHide);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, []);

  const switchToSolution = useCallback((key, trigger) => {
    if (key !== activeSolution) {
      solutionsExploredRef.current.add(key);
      exploreCountRef.current = (exploreCountRef.current || 0) + 1;
      track("Solution Explore Clicked", {
        solution: key,
        from_solution: activeSolution,
        trigger,
        switch_index: exploreCountRef.current,
      });
      setActiveSolution(key);
    }
  }, [activeSolution]);

  // 요금제(FREE/PRO) 선택 단계는 제거됨 — CTA 를 누르면 바로 이메일 사전등록 폼을 띄운다.
  // 함수명은 기존 호출부(Hero/Player/FinalCTA) 호환을 위해 openCheckout 유지.
  const openCheckout = useCallback((source) => {
    track("Start Free Clicked", {
      source,
      active_solution: activeSolution,
      time_on_page_ms: Date.now() - pageStartRef.current,
    });
    setBetaForm({ open: true, plan: null, source });
  }, [activeSolution]);

  const closeBetaForm = useCallback(() => setBetaForm((b) => ({ ...b, open: false })), []);

  // Key prop on whole layout forces re-mount (and reveal animation replay) when persona changes
  return (
    <React.Fragment>
      {/*
        PersonaBar(상단 페르소나 전환 바)는 광고 유입 화면에서 다른 랜딩페이지가
        보이지 않도록 의도적으로 숨겨져 있습니다.
        - 각 페르소나는 URL로만 접근합니다 (docs/landing.md 참고).
        - 개발/QA 시 ?dev=1 을 붙이면 다시 노출됩니다.
        - 완전히 다시 켜려면 아래 한 줄의 주석을 풀면 됩니다.
      */}
      {isDevMode() && (
        <PersonaBar active={personaKey} onChange={setPersonaKey} personaId={persona.id} />
      )}

      <main key={personaKey}>
        <HeroSection persona={persona} openCheckout={openCheckout} />
        <EmpathySection persona={persona} />
        <PlayerSection
          persona={persona}
          activeKey={activeSolution}
          openCheckout={openCheckout}
        />
        <CardsSection
          switchToSolution={switchToSolution}
          activeKey={activeSolution}
        />
        <FinalCtaSection persona={persona} openCheckout={openCheckout} />
      </main>

      <footer className="foot">
        <div className="container foot__inner">
          <div>© 2026 · 학원관리 솔루션 (작업 중)</div>
          <div>이 페이지는 동일 템플릿 + <code>personaData</code> 슬롯 주입 구조입니다.</div>
        </div>
      </footer>

      <BetaSignupModal
        open={betaForm.open}
        plan={betaForm.plan}
        source={betaForm.source}
        onClose={closeBetaForm}
      />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);