import React, { useCallback, useState } from "react"
import styles from '../styles/Background.module.css';
import Tower from "./Tower";
import Army from "./Army";
import MarchingBand from "./MarchingBand";
import MusicPlayer from "./MusicPlayer";
import Leaderboard from "./Leaderboard";
import { usePlayer } from "../providers/PlayerProvider";

const Scene = () => {
  const { isRegistered } = usePlayer();
  const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false);

  const handleMusicReady = useCallback((unmute: () => void) => {
    if (isRegistered) {
      unmute();
    }
  }, [isRegistered]);

  return <div className={styles.frame}>
    <div className={`${styles.air} ${styles.background_asset}`} />
    <div className={`${styles.clouds_small} ${styles.background_asset}`} />
    <div className={`${styles.clouds_large} ${styles.background_asset}`} />
    <Tower />
    <div className={`${styles.mountains} ${styles.background_asset}`} />
    <div className={`${styles.village} ${styles.background_asset}`} />
    <MarchingBand />
    <div className={`${styles.bonfire} ${styles.background_asset}`} />
    <Army />
    <MusicPlayer onReady={handleMusicReady} />
    <button 
      onClick={() => setIsLeaderboardOpen(true)} 
      className={styles.leaderboardButton}
      title="Leaderboard"
    >
      📜
    </button>
    {isLeaderboardOpen && (
      <div className={styles.leaderboardOverlay}>
        <div className={styles.leaderboardContent}>
          <button 
            className={styles.closeButton} 
            onClick={() => setIsLeaderboardOpen(false)}
          >
            ×
          </button>
          <Leaderboard />
        </div>
      </div>
    )}
  </div>
}

export default Scene
