src/App.jsx

import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import { VideoManagerLocal } from './utils/VideoManagerLocal';

import Home from './components/Home';
import FocusPageLocal from './components/FocusPageLocal';
import Achievement from './components/Achievement';
import Records from './components/Records';
import Help from './components/Help';

function App() {
  const [activeTab, setActiveTab] = useState('home');
  const videoManagerRef = useRef(null);
  const [isSessionActive, setIsSessionActive] = useState(false);
  const [sessionResult, setSessionResult] = useState(null); 
  const [isTutorialActive, setIsTutorialActive] = useState(false);
  const [hasSeenTutorial, setHasSeenTutorial] = useState(false);

  useEffect(() => {
    fetch('/api/history', { method: 'DELETE' })
      .then(() => {
        const backup = localStorage.getItem('focus_magic_backup');
        if (backup) {
          try {
            const sessions = JSON.parse(backup);
            fetch('/api/import', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(sessions)
            });
          } catch (err) {
            console.error(err);
          }
        }
      })
      .catch(err => console.error(err));

    const callbacks = {
      onSessionStart: () => {
        setIsSessionActive(true);
        setSessionResult(null);
      },
      onSessionEnd: (summary) => {
        setIsSessionActive(false);
        if (summary) setSessionResult(summary);
        
        fetch('/api/sessions?filter=all')
          .then(res => res.json())
          .then(data => {
            if (data && Array.isArray(data)) {
              localStorage.setItem('focus_magic_backup', JSON.stringify(data));
            }
          })
          .catch(err => console.error(err));
      }
    };
    videoManagerRef.current = new VideoManagerLocal(callbacks);

    return () => {
      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
    };
  }, []);

  const handleStartFocus = () => {
    if (!hasSeenTutorial) {
      setIsTutorialActive(true);
    }
    setActiveTab('focus');
  };

  const handleStartTutorial = () => {
    setIsTutorialActive(true);
    setActiveTab('focus');
  };

  return (
    <div className="app-container">
      <nav id="top-menu">
        <button 
          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`} 
          onClick={() => setActiveTab('home')}
        >
          Home
        </button>
        <div className="separator"></div>

        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={handleStartFocus}>
          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
        </button>
        <div className="separator"></div>

        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
          My Achievement
        </button>
        <div className="separator"></div>

        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
          My Records
        </button>
        <div className="separator"></div>

        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
          Help
        </button>
      </nav>

      {activeTab === 'home' && <Home onStartFocus={handleStartFocus} onStartTutorial={handleStartTutorial} />}

      <FocusPageLocal
        videoManager={videoManagerRef.current}
        sessionResult={sessionResult}
        setSessionResult={setSessionResult}
        isActive={activeTab === 'focus'}
        isTutorialActive={isTutorialActive}
        setIsTutorialActive={setIsTutorialActive}
        setHasSeenTutorial={setHasSeenTutorial}
      />
      {activeTab === 'achievement' && <Achievement />}
      {activeTab === 'records' && <Records />}
      {activeTab === 'help' && <Help />}
    </div>
  );
}

export default App;