App.tsx

import { Switch, Route } from "wouter";
import { useEffect, useState, useRef } from "react";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";

import Loader from "@/pages/Loader";
import NotFound from "@/pages/not-found";
import Home from "@/pages/Home";
import SportsList from "@/pages/SportsList";
import SportDetails from "@/pages/SportDetails";
import Rules from "@/pages/Rules";
import AdminDashboard from "@/pages/Admin";
import Staff from "@/pages/Staff";
import GCPoints from "@/pages/GCPoints";

// Import the new Navigation Component
import { BottomNav } from "@/components/Navigation";

// Import SSE Listener
import { LiveScoreListener } from "@/components/LiveScoreListener";

// Import music
import backgroundMusic from "./assets/music.mp3"; 

function Router() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/sports" component={SportsList} />
      <Route path="/sports/:id" component={SportDetails} />
      <Route path="/gc-points" component={GCPoints} />
      <Route path="/staff" component={Staff} />
      <Route path="/rules" component={Rules} />
      <Route path="/admin" component={AdminDashboard} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  const [loading, setLoading] = useState(true);
  const audioRef = useRef<HTMLAudioElement>(null);

  // 1. Loader Timer
  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 8000); 

    return () => clearTimeout(timer);
  }, []);

  // 2. Music Logic
  useEffect(() => {
    if (loading) return; 

    const playMusic = () => {
      if (audioRef.current) {
        audioRef.current.volume = 0.5;
        const playPromise = audioRef.current.play();

        if (playPromise !== undefined) {
          playPromise
            .then(() => {
              console.log("🎵 Music started successfully!");
              window.removeEventListener("click", playMusic);
              window.removeEventListener("keydown", playMusic);
              window.removeEventListener("touchstart", playMusic);
            })
            .catch((error) => {
              console.log("⚠️ Autoplay blocked. Waiting for user to click Home page.");
            });
        }
      }
    };

    playMusic();
    window.addEventListener("click", playMusic);
    window.addEventListener("keydown", playMusic);
    window.addEventListener("touchstart", playMusic);

    return () => {
      window.removeEventListener("click", playMusic);
      window.removeEventListener("keydown", playMusic);
      window.removeEventListener("touchstart", playMusic);
    };
  }, [loading]);

  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <Toaster />
        <LiveScoreListener />

        {/* Music Player */}
        <audio 
          ref={audioRef} 
          src={backgroundMusic} 
          loop 
          hidden 
        />

        {loading ? (
          <Loader />
        ) : (
          <>
            {/* Render Router for page content */}
            <Router />
            
            {/* Render BottomNav on top of content */}
            <BottomNav />
          </>
        )}

      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;