// App.js
import React, { useState } from 'react';
import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import SessionExpiredHandler from './components/SessionExpiredHandler.js';
import GettingStarted from './components/GettingStarted.js';
import SignIn from './components/SignIn.js';
import SignUp from './components/SignUp.js';
import InterestInventory from './components/InterestInventory.js';
import Dashboard from './components/Dashboard.js';
import UserProfile from './components/UserProfile.js';
import FinancialProfileForm from './components/FinancialProfileForm.js';
import MilestoneTracker from "./components/MilestoneTracker.js";
import Paywall from "./components/Paywall.js";
import OnboardingContainer from './components/PremiumOnboarding/OnboardingContainer.js';

import './App.css';

function App() {
  const navigate = useNavigate();
  const location = useLocation();

  const [isAuthenticated, setIsAuthenticated] = useState(() => !!localStorage.getItem('token'));

  const premiumPaths = ['/milestone-tracker', '/paywall', '/financial-profile'];

  const showPremiumCTA = !premiumPaths.includes(location.pathname);

  return (
    <div className="App">
      <header className="app-header">
        <h1>AptivaAI - Career Guidance Platform (beta)</h1>
        {showPremiumCTA && (
          <button
            className="premium-cta"
            onClick={() => navigate('/paywall')}
          >
            Upgrade to Premium
          </button>
        )}
      </header>

      <Routes>
        <Route path="/" element={<Navigate to="/signin" />} />
        <Route path="/signin" element={<SignIn setIsAuthenticated={setIsAuthenticated} />} />
        <Route path="/signup" element={<SignUp />} />
        <Route path="/paywall" element={<Paywall />} />

        {isAuthenticated && (
          <>
            <Route path="/getting-started" element={<GettingStarted />} />
            <Route path="/interest-inventory" element={<InterestInventory />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/profile" element={<UserProfile />} />
            <Route path="/milestone-tracker" element={<MilestoneTracker />} />
            <Route path="/financial-profile" element={<FinancialProfileForm />} />
            <Route path="/premium-onboarding" element={<OnboardingContainer />} />

          </>
        )}

        <Route path="*" element={<Navigate to="/signin" />} />
      </Routes>
      <SessionExpiredHandler />
    </div>
  );
}

export default App;