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 Customise from './components/Customise';
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 [role, setRole] = useState('user'); 

  // 刚进网页时，静默清空数据库，不弹窗！
  useEffect(() => {
    fetch('/api/history', { method: 'DELETE' }).catch(err => console.error(err));

    const callbacks = {
      onSessionStart: () => {
        setIsSessionActive(true);
        setSessionResult(null);
      },
      onSessionEnd: (summary) => {
        setIsSessionActive(false);
        if (summary) setSessionResult(summary);
      }
    };
    videoManagerRef.current = new VideoManagerLocal(callbacks);

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

  // 点击头像，直接跳转到首页(Home)
  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 ${role}`}>
            {role === 'admin' ? 'A' : 'U'}
          </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 === 'customise' ? 'active' : ''}`} onClick={() => setActiveTab('customise')}>
          Customise
        </button>
        <div className="separator"></div>

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

      {/* 把核心状态传给 Home 组件 */}
      {activeTab === 'home' && <Home setActiveTab={setActiveTab} role={role} setRole={setRole} />}
      
      <FocusPageLocal
        videoManager={videoManagerRef.current}
        sessionResult={sessionResult}
        setSessionResult={setSessionResult}
        isActive={activeTab === 'focus'}
      />
      {activeTab === 'achievement' && <Achievement />}
      {activeTab === 'records' && <Records />}
      {activeTab === 'customise' && <Customise />}
      {activeTab === 'help' && <Help />}
    </div>
  );
}

export default App;