/* ──────────────────────────────────────────
   APP ROOT
────────────────────────────────────────── */
function App() {
  const [page, setPage] = useState('home');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  const [showLoginModal, setShowLoginModal] = useState(null); // 'login' | 'join' | null

  /* ── 앱 시작 시 기존 Supabase 세션 복원 ── */
  useEffect(() => {
    const sb = window.supabaseClient;

    // 현재 세션 확인
    sb.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        const name = session.user.user_metadata?.name || session.user.email.split('@')[0];
        setIsLoggedIn(true);
        setUser({ name, email: session.user.email, id: session.user.id });
      }
    });

    // 로그인/로그아웃 이벤트 구독
    const { data: { subscription } } = sb.auth.onAuthStateChange((_event, session) => {
      if (session) {
        const name = session.user.user_metadata?.name || session.user.email.split('@')[0];
        setIsLoggedIn(true);
        setUser({ name, email: session.user.email, id: session.user.id });
      } else {
        setIsLoggedIn(false);
        setUser(null);
      }
    });

    return () => subscription.unsubscribe();
  }, []);

  /* ── sessionStorage에 resume 파라미터 있으면 lectures 페이지로 ── */
  useEffect(() => {
    if (sessionStorage.getItem('resumeCourseId')) {
      setPage('lectures');
    }
  }, []);

  const handleLogin = (userData) => {
    setIsLoggedIn(true);
    setUser(userData);
  };

  const handleLogout = async () => {
    await window.supabaseClient.auth.signOut();
    // onAuthStateChange 가 state 자동 초기화하지만 즉각 반영을 위해 직접 set
    setIsLoggedIn(false);
    setUser(null);
    Swal.fire({
      icon: 'success',
      title: '로그아웃 되었습니다.',
      timer: 1500,
      showConfirmButton: false,
    });
  };

  return (
    <div className="min-h-screen bg-silver">
      <Navbar
        currentPage={page}
        setPage={setPage}
        isLoggedIn={isLoggedIn}
        setShowLoginModal={setShowLoginModal}
        handleLogout={handleLogout}
        user={user}
      />

      <main>
        {page === 'home'     && <HomePage setPage={setPage} />}
        {['about_overview','about_greeting','about_history','about_org','about_location'].includes(page) && (
          <AboutPage currentPage={page} setPage={setPage} />
        )}
        {page === 'notice'   && <NoticePage setPage={setPage} />}
        {page === 'archive'  && <WpArchivePage setPage={setPage} />}
        {page === 'research' && <ResearchPage setPage={setPage} />}
        {page === 'inquiry'  && <InquiryPage isLoggedIn={isLoggedIn} user={user} setPage={setPage} />}
        {page === 'lectures' && (
          <LecturesPage
            isLoggedIn={isLoggedIn}
            setShowLoginModal={setShowLoginModal}
            user={user}
            setPage={setPage}
          />
        )}
      </main>

      {showLoginModal && (
        <AuthModal
          mode={showLoginModal}
          onClose={() => setShowLoginModal(null)}
          onLogin={handleLogin}
        />
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <I18nProvider>
    <App />
  </I18nProvider>
);