gymflow/App.tsx

import React, { useState, useEffect } from 'react';
import Navbar from './components/Navbar';
import Tracker from './components/Tracker';
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 { TabView, WorkoutSession, WorkoutSet, WorkoutPlan, User, Language } from './types';
import { getSessions, saveSession, deleteSession } from './services/storage';
import { getCurrentUserProfile } from './services/auth';
import { getSystemLanguage } from './services/i18n';

function App() {
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [currentTab, setCurrentTab] = useState<TabView>('TRACK');
  const [language, setLanguage] = useState<Language>('en');

  const [sessions, setSessions] = useState<WorkoutSession[]>([]);
  const [activeSession, setActiveSession] = useState<WorkoutSession | null>(null);
  const [activePlan, setActivePlan] = useState<WorkoutPlan | null>(null);

  useEffect(() => {
    // Set initial language
    setLanguage(getSystemLanguage());
  }, []);

  useEffect(() => {
    const loadSessions = async () => {
      if (currentUser) {
        const s = await getSessions(currentUser.id);
        setSessions(s);
        // Profile fetch is skipped for now as it returns undefined
      } else {
        setSessions([]);
      }
    };
    loadSessions();
  }, [currentUser]);

  const handleLogin = (user: User) => {
    setCurrentUser(user);
    setCurrentTab('TRACK');
  };

  const handleLogout = () => {
    setCurrentUser(null);
    setActiveSession(null);
    setActivePlan(null);
  };

  const handleLanguageChange = (lang: Language) => {
    setLanguage(lang);
  };

  const handleStartSession = (plan?: WorkoutPlan) => {
    if (!currentUser) return;

    // Get latest weight from profile or default
    const profile = getCurrentUserProfile(currentUser.id);
    const currentWeight = profile?.weight || 70;

    const newSession: WorkoutSession = {
      id: crypto.randomUUID(),
      startTime: Date.now(),
      userBodyWeight: currentWeight,
      sets: [],
      planId: plan?.id,
      planName: plan?.name
    };
    setActivePlan(plan || null);
    setActiveSession(newSession);
    setCurrentTab('TRACK');
  };

  const handleEndSession = () => {
    if (activeSession && currentUser) {
      const finishedSession = { ...activeSession, endTime: Date.now() };
      saveSession(currentUser.id, finishedSession);
      setSessions(prev => [finishedSession, ...prev]);
      setActiveSession(null);
      setActivePlan(null);
    }
  };

  const handleAddSet = (set: WorkoutSet) => {
    if (activeSession) {
      setActiveSession(prev => {
        if (!prev) return null;
        return {
          ...prev,
          sets: [...prev.sets, set]
        };
      });
    }
  };

  const handleRemoveSetFromActive = (setId: string) => {
    if (activeSession) {
      setActiveSession(prev => {
        if (!prev) return null;
        return {
          ...prev,
          sets: prev.sets.filter(s => s.id !== setId)
        };
      });
    }
  };

  const handleUpdateSession = (updatedSession: WorkoutSession) => {
    if (!currentUser) return;
    saveSession(currentUser.id, updatedSession);
    setSessions(prev => prev.map(s => s.id === updatedSession.id ? updatedSession : s));
  };

  const handleDeleteSession = (sessionId: string) => {
    if (!currentUser) return;
    deleteSession(currentUser.id, sessionId);
    setSessions(prev => prev.filter(s => s.id !== sessionId));
  };

  if (!currentUser) {
    return <Login onLogin={handleLogin} language={language} onLanguageChange={handleLanguageChange} />;
  }

  return (
    <div className="h-screen w-screen bg-surface text-on-surface font-sans flex flex-col md:flex-row overflow-hidden">

      {/* Desktop Navigation Rail (Left) */}
      <Navbar currentTab={currentTab} onTabChange={setCurrentTab} 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">
          {currentTab === 'TRACK' && (
            <Tracker
              userId={currentUser.id}
              activeSession={activeSession}
              activePlan={activePlan}
              onSessionStart={handleStartSession}
              onSessionEnd={handleEndSession}
              onSetAdded={handleAddSet}
              onRemoveSet={handleRemoveSetFromActive}
              lang={language}
            />
          )}
          {currentTab === 'PLANS' && (
            <Plans userId={currentUser.id} onStartPlan={handleStartSession} lang={language} />
          )}
          {currentTab === 'HISTORY' && (
            <History
              sessions={sessions}
              onUpdateSession={handleUpdateSession}
              onDeleteSession={handleDeleteSession}
              lang={language}
            />
          )}
          {currentTab === 'STATS' && <Stats sessions={sessions} lang={language} />}
          {currentTab === 'AI_COACH' && <AICoach history={sessions} lang={language} />}
          {currentTab === 'PROFILE' && (
            <Profile
              user={currentUser}
              onLogout={handleLogout}
              lang={language}
              onLanguageChange={handleLanguageChange}
            />
          )}
        </div>
      </main>

      {/* Mobile Navigation (rendered inside Navbar component, fixed to bottom) */}
    </div>
  );
}

export default App;