import React, { useState, useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import Navbar from './components/Navbar';
import Tracker from './components/Tracker/index';
import History from './components/History';
import Stats from './components/Stats';
import AICoach from './components/AICoach';
import Plans from './components/Plans';
import Login from './components/Login';
import Profile from './components/Profile';
import { Language, User } from './types'; // Removed unused imports
import { getSystemLanguage } from './services/i18n';
import { useAuth } from './context/AuthContext';
import { useData } from './context/DataContext';

function App() {
  const { currentUser, updateUser, logout } = useAuth();
  const {
    sessions,
    plans,
    activeSession,
    activePlan,
    startSession,
    endSession,
    quitSession,
    addSet,
    removeSet,
    updateSet,
    updateSession,
    deleteSessionById
  } = useData();

  const [language, setLanguage] = useState<Language>('en');
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    setLanguage(getSystemLanguage());
  }, []);

  const handleLogin = (user: User) => {
    updateUser(user);
    navigate('/');
  };

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  if (!currentUser && location.pathname !== '/login') {
    return <Navigate to="/login" />;
  }

  return (
    <div className="h-screen w-screen bg-surface text-on-surface font-sans flex flex-col md:flex-row overflow-hidden">
      {currentUser && (
        <Navbar lang={language} />
      )}

      {/* Main Content Area */}
      <main className="flex-1 h-full relative w-full max-w-5xl mx-auto md:px-4">
        <div className="h-full w-full pb-20 md:pb-0 bg-surface">
          <Routes>
            <Route path="/login" element={
              !currentUser ? (
                <Login onLogin={handleLogin} language={language} onLanguageChange={setLanguage} />
              ) : (
                <Navigate to="/" />
              )
            } />
            <Route path="/" element={
              <Tracker
                userId={currentUser?.id || ''}
                userWeight={currentUser?.profile?.weight}
                activeSession={activeSession}
                activePlan={activePlan}
                onSessionStart={startSession}
                onSessionEnd={endSession}
                onSessionQuit={quitSession}
                onSetAdded={addSet}
                onRemoveSet={removeSet}
                onUpdateSet={updateSet}
                lang={language}
              />
            } />
            <Route path="/plans" element={
              <Plans userId={currentUser?.id || ''} onStartPlan={startSession} lang={language} />
            } />
            <Route path="/history" element={
              <History
                sessions={sessions}
                onUpdateSession={updateSession}
                onDeleteSession={deleteSessionById}
                lang={language}
              />
            } />
            <Route path="/stats" element={
              <Stats sessions={sessions} lang={language} />
            } />
            <Route path="/coach" element={
              <AICoach history={sessions} userProfile={currentUser?.profile} plans={plans} lang={language} />
            } />
            <Route path="/profile" element={
              <Profile
                user={currentUser}
                onLogout={handleLogout}
                lang={language}
                onLanguageChange={setLanguage}
                onUserUpdate={updateUser}
              />
            } />
            <Route path="*" element={<Navigate to="/" />} />
          </Routes>
        </div>
      </main>
    </div>
  );
}

export default App;