import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { useState, useEffect, useRef } from 'react';
import { Volume2, VolumeX } from 'lucide-react';
import Home from './pages/Home';
import FormPage from './pages/FormPage';
import SelectCourse from './pages/SelectCourse';
import QuizPage from './pages/QuizPage';
import ResultPage from './pages/ResultPage';
import AdminPage from './pages/AdminPage';
import './index.css';

function App() {
  const audioRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [hasInteracted, setHasInteracted] = useState(false);

  // Play audio on first user interaction
  useEffect(() => {
    const handleFirstInteraction = () => {
      if (!hasInteracted && audioRef.current) {
        audioRef.current.volume = 0.3; // 30% volume
        audioRef.current.play().then(() => {
          setIsPlaying(true);
          setHasInteracted(true);
        }).catch(err => console.log("Autoplay blocked:", err));
      }
      document.removeEventListener('click', handleFirstInteraction);
    };

    document.addEventListener('click', handleFirstInteraction);
    return () => document.removeEventListener('click', handleFirstInteraction);
  }, [hasInteracted]);

  const toggleMusic = () => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  return (
    <Router>
      <div className="container" style={{ position: 'relative' }}>
        <audio ref={audioRef} src="./musica.mp3" loop />
        
        {/* Botão flutuante de Música */}
        <button 
          onClick={toggleMusic}
          style={{
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            background: 'var(--primary-color)',
            border: 'none',
            borderRadius: '50%',
            width: '60px',
            height: '60px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            cursor: 'pointer',
            zIndex: 9999,
            boxShadow: '0 4px 15px rgba(0,0,0,0.5)'
          }}
        >
          {isPlaying ? <Volume2 size={30} /> : <VolumeX size={30} />}
        </button>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/cadastro" element={<FormPage />} />
          <Route path="/curso" element={<SelectCourse />} />
          <Route path="/quiz" element={<QuizPage />} />
          <Route path="/resultado" element={<ResultPage />} />
          <Route path="/admin" element={<AdminPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;
