src/App.jsx

import React, { useState, useRef, useEffect } from 'react';
import logo from './assets/logo.jpg';
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);

  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)
            });
            console.log("History auto-recovered from browser cache.");
          } catch (err) {
            console.error("Failed to read magic backup", 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));
              console.log("Session auto-saved to browser cache.");
            }
          })
          .catch(err => console.error("Auto-save failed", err));
      }
    };
    videoManagerRef.current = new VideoManagerLocal(callbacks);

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

  const handleAvatarClick = () => {
    setActiveTab('home');
  };

  return (
    <div className="app-container">

      <nav id="top-menu">

        <div className="avatar-container" onClick={handleAvatarClick} title="Back to Home">

          <div className="avatar-circle user" style={{ backgroundColor: 'transparent', border: 'none' }}>

            <img 

              src={logo} 

              alt="FocusGuard Logo" 

              style={{ width: '100%', height: '100%', objectFit: 'contain' }} 

            />

          </div>

        </div>



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

          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 setActiveTab={setActiveTab} setIsTutorialActive={setIsTutorialActive} />}



      <FocusPageLocal

        videoManager={videoManagerRef.current}

        sessionResult={sessionResult}

        setSessionResult={setSessionResult}

        isActive={activeTab === 'focus'}

        isTutorialActive={isTutorialActive}

        setIsTutorialActive={setIsTutorialActive}

      />

      {activeTab === 'achievement' && <Achievement />}

      {activeTab === 'records' && <Records />}

      {activeTab === 'help' && <Help />}

    </div>
  );
}

export default App;