import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './pages/Home';
import Book from './pages/Book';
import Retreat from './pages/Retreat';
import Blog from './pages/Blog';
import Contact from './pages/Contact';
import BlogPost from './pages/BlogPost';
import Login from './pages/Login';
import Register from './pages/Register';
import RegisterSuccess from './pages/RegisterSuccess';
import Dashboard from './pages/Dashboard';
import { Page, BlogPost as BlogPostType } from './types';
import { supabase } from './supabaseClient';
import { Session } from '@supabase/supabase-js';

const App: React.FC = () => {
  const [currentPage, setCurrentPage] = useState<Page>(Page.HOME);
  const [selectedPost, setSelectedPost] = useState<BlogPostType | null>(null);
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
      if (session) {
        // Optional: Redirect to dashboard on login if desired, but might be annoying if just refreshing
        // if (currentPage === Page.LOGIN) setCurrentPage(Page.DASHBOARD);
      } else {
        if (currentPage === Page.DASHBOARD) setCurrentPage(Page.LOGIN);
      }
    });

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

  const handlePageChange = (page: Page) => {
    if (page === Page.DASHBOARD && !session) {
      setCurrentPage(Page.LOGIN);
      return;
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setCurrentPage(page);
  };

  const renderPage = () => {
    switch (currentPage) {
      case Page.HOME:
        return <Home setPage={handlePageChange} />;
      case Page.BOOK:
        return <Book />;
      case Page.RETREAT:
        return <Retreat />;
      case Page.BLOG:
        return <Blog setPage={handlePageChange} setSelectedPost={setSelectedPost} />;
      case Page.CONTACT:
        return <Contact />;
      case Page.BLOG_POST:
        return <BlogPost setPage={handlePageChange} post={selectedPost} />;
      case Page.LOGIN:
        return <Login setPage={handlePageChange} />;
      case Page.REGISTER:
        return <Register setPage={handlePageChange} />;
      case Page.REGISTER_SUCCESS:
        return <RegisterSuccess setPage={handlePageChange} />;
      case Page.DASHBOARD:
        return session ? <Dashboard setPage={handlePageChange} session={session} /> : <Login setPage={handlePageChange} />;
      default:
        return <Home setPage={handlePageChange} />;
    }
  };

  return (
    <div className="flex flex-col min-h-screen">
      <Navbar currentPage={currentPage} setPage={handlePageChange} session={session} />
      <main className="flex-grow">
        {renderPage()}
      </main>
      <Footer setPage={handlePageChange} />
    </div>
  );
};

export default App;