import React, { useState } from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';
import { User } from './types';
import { MOCK_USER } from './services/mockData';

// Layout
import Navbar from './components/Navbar';
import Footer from './components/Footer';

// Pages
import HomePage from './pages/HomePage';
import DirectoryPage from './pages/DirectoryPage';
import BlogPage from './pages/BlogPage';
import BlogPostPage from './pages/BlogPostPage';
import BusinessDetailPage from './pages/BusinessDetailPage';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import AfroLifePage from './pages/AfroLifePage';
import InterviewDetailPage from './pages/InterviewDetailPage';
import SubscriptionPage from './pages/SubscriptionPage';

const App = () => {
  const [user, setUser] = useState<User | null>(null);

  const handleLogin = () => {
      setUser(MOCK_USER);
  };

  const handleLogout = () => {
      setUser(null);
      // Redirect handled by rendering logic
      window.location.hash = '/';
  };

  return (
    <HashRouter>
      <div className="min-h-screen flex flex-col bg-gray-50 font-sans">
        <Navbar user={user} onLogout={handleLogout} />
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/directory" element={<DirectoryPage />} />
            <Route path="/directory/:id" element={<BusinessDetailPage />} />
            <Route path="/blog" element={<BlogPage />} />
            <Route path="/blog/:id" element={<BlogPostPage />} />
            <Route path="/afrolife" element={<AfroLifePage />} />
            <Route path="/afrolife/:id" element={<InterviewDetailPage />} />
            <Route path="/subscription" element={<SubscriptionPage />} />
            <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />
            <Route path="/dashboard" element={user ? <DashboardPage user={user} onLogout={handleLogout} /> : <LoginPage onLogin={handleLogin} />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </HashRouter>
  );
};

export default App;