App.tsx

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { 
  AppSettings, 
  OrnamentConfig 
} from './types';
import { 
  BG_MUSIC_TRACK, 
  BG_MUSIC_FILENAME,
  GITHUB_API_CONTENTS_URL,
  GITHUB_USER,
  GITHUB_REPO,
  GITHUB_BRANCH,
  ORNAMENT_POSITIONS, 
  ORNAMENT_COLORS 
} from './constants';
import { audioService } from './services/audioService';
import Ornament from './components/Ornament';
import SettingsMenu from './components/SettingsMenu';
import ChristmasTree from './components/ChristmasTree';
import IntroAnimation from './components/IntroAnimation';
import BackgroundSlider from './components/BackgroundSlider';

const App: React.FC = () => {
  const [hasStarted, setHasStarted] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [settings, setSettings] = useState<AppSettings>({
    bgVolume: 0.3,
    sfxVolume: 0.8,
    isLooping: false,
  });
  const [ornaments, setOrnaments] = useState<OrnamentConfig[]>([]);
  const [introTarget, setIntroTarget] = useState<OrnamentConfig | null>(null);
  const [audioLevel, setAudioLevel] = useState(0);
  const [bgImage, setBgImage] = useState<string | null>(null);
  const [soundPool, setSoundPool] = useState<string[]>([]);
  const [isLoadingSounds, setIsLoadingSounds] = useState(true);
  
  const animationRef = useRef<number>(0);

  // Fetch sounds from GitHub API with Fallback
  useEffect(() => {
    const fetchSounds = async () => {
      try {
        const response = await fetch(GITHUB_API_CONTENTS_URL);
        
        const data = await response.json();
        
        // GitHub API returns an object (with message) on error/rate-limit, array on success
        if (!Array.isArray(data)) {
           throw new Error("GitHub API response is not an array (likely rate limit)");
        }
        
        // Filter for mp3s, exclude directory entries, and exclude the specific background track
        const mp3Urls = data
          .filter((item: any) => 
            item.type === 'file' && 
            item.name.toLowerCase().endsWith('.mp3') && 
            item.name !== BG_MUSIC_FILENAME
          )
          .map((item: any) => item.download_url); // GitHub API returns a 'download_url' which is the raw link

        if (mp3Urls.length === 0) throw new Error("No MP3s found via API");

        console.log(`Found ${mp3Urls.length} sound effects.`);
        setSoundPool(mp3Urls);
      } catch (error) {
        console.warn("Error fetching sounds from GitHub, using fallback filenames:", error);
        // Fallback: Construct URLs for 1.mp3 to 8.mp3 assuming they exist
        const fallbackUrls = Array.from({length: 8}, (_, i) => 
             `https://raw.githubusercontent.com/${GITHUB_USER}/${GITHUB_REPO}/${GITHUB_BRANCH}/${i+1}.mp3`
        );
        setSoundPool(fallbackUrls);
      } finally {
        setIsLoadingSounds(false);
      }
    };

    fetchSounds();
  }, []);

  // Initialize/Shuffle Ornaments
  const initOrnaments = useCallback(() => {
    // Shuffle the sound pool if we have sounds
    const availableSounds = soundPool.length > 0 ? soundPool : [];
    const shuffledSounds = [...availableSounds].sort(() => 0.5 - Math.random());

    const newOrnaments: OrnamentConfig[] = ORNAMENT_POSITIONS.map((pos, idx) => {
      // Cycle through shuffled sounds, or use empty string if none available
      const soundUrl = shuffledSounds.length > 0 
        ? shuffledSounds[idx % shuffledSounds.length] 
        : '';
      
      return {
        id: `ornament-${idx}`,
        x: pos.x,
        y: pos.y,
        scale: pos.scale,
        color: ORNAMENT_COLORS[idx % ORNAMENT_COLORS.length],
        soundUrl: soundUrl
      };
    });
    setOrnaments(newOrnaments);
  }, [soundPool]);

  // Re-initialize ornaments whenever the sound pool is ready or updated
  useEffect(() => {
    if (!isLoadingSounds) {
      initOrnaments();
    }
  }, [isLoadingSounds, soundPool, initOrnaments]);

  // Audio Loop for Visualization
  const updateAudioAnalysis = () => {
    if (audioService.analyser) {
      const dataArray = new Uint8Array(audioService.analyser.frequencyBinCount);
      audioService.getByteFrequencyData(dataArray);
      // Calculate average volume
      let sum = 0;
      for (let i = 0; i < dataArray.length; i++) {
        sum += dataArray[i];
      }
      const avg = sum / dataArray.length;
      setAudioLevel(avg);
    }
    animationRef.current = requestAnimationFrame(updateAudioAnalysis);
  };

  // Handle Start (User Interaction required for AudioContext)
  const handleStart = async () => {
    await audioService.playBackground(BG_MUSIC_TRACK, settings.bgVolume);
    setHasStarted(true);
    updateAudioAnalysis();
    // intro animation triggered by useEffect below
  };

  // Handle Intro Complete (Stable reference)
  const handleIntroComplete = useCallback(() => {
    setIntroTarget(null);
  }, []);

  // Trigger Animation Logic
  const triggerIntro = useCallback(() => {
    if (ornaments.length > 0) {
      const randomIdx = Math.floor(Math.random() * ornaments.length);
      setIntroTarget(ornaments[randomIdx]);
    }
  }, [ornaments]);

  // Watch for Menu Close or Start to trigger animation
  useEffect(() => {
    if (hasStarted && !isMenuOpen) {
      // Delay slightly to allow menu transition or startup fade
      const timer = setTimeout(() => {
        triggerIntro();
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [isMenuOpen, hasStarted, triggerIntro]);

  // Update Volumes
  useEffect(() => {
    audioService.setBgVolume(settings.bgVolume);
    audioService.setSfxVolume(settings.sfxVolume);
  }, [settings.bgVolume, settings.sfxVolume]);

  // Cleanup
  useEffect(() => {
    return () => {
      cancelAnimationFrame(animationRef.current);
    };
  }, []);

  return (
    <div 
      className="relative w-full h-screen overflow-hidden bg-black transition-all duration-1000"
    >
      {/* Background Layer: Slider OR Static Generated Image */}
      {bgImage ? (
        <div 
           className="absolute inset-0 bg-cover bg-center transition-opacity duration-1000"
           style={{ backgroundImage: `url(${bgImage})` }}
        />
      ) : (
        <BackgroundSlider />
      )}
      
      {/* Radial Gradient Overlay for depth (always present) */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(15,23,42,0.5)_100%)] pointer-events-none"></div>

      {/* Snow/Sparkle overlay */}
      <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-30 pointer-events-none mix-blend-screen"></div>

      {/* Start Screen Overlay */}
      {!hasStarted && (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <button 
            onClick={handleStart}
            disabled={isLoadingSounds}
            className="group relative px-8 py-4 bg-red-600 hover:bg-red-500 disabled:bg-gray-600 text-white font-christmas text-3xl rounded-full shadow-[0_0_30px_rgba(220,38,38,0.6)] transition-all hover:scale-105"
          >
            <span className="relative z-10">
              {isLoadingSounds ? "Loading Magic..." : "Open Christmas Card"}
            </span>
            {!isLoadingSounds && <div className="absolute inset-0 rounded-full border-2 border-white animate-ping opacity-50"></div>}
          </button>
        </div>
      )}

      {/* Main Content */}
      <div className={`relative w-full h-full flex flex-col justify-end items-center pb-4 transition-opacity duration-1000 ${hasStarted ? 'opacity-100' : 'opacity-0'}`}>
        
        {/* UNIFIED SCENE CONTAINER
            This container holds both the Tree and the Ornaments.
            It enforces an aspect ratio matching the SVG (100:130 -> ~0.77).
            It uses min() to ensuring it fits within both Width and Height constraints.
            - 85vw: Fits width on mobile portrait
            - 70vh * 0.77: Fits height on landscape (maintaining ratio)
        */}
        <div 
          className="relative mx-auto mb-4 pointer-events-none"
          style={{
             width: 'min(85vw, 70vh * 0.77)',
             aspectRatio: '100 / 130',
             // Ensure it never exceeds reasonable height
             maxHeight: '80vh' 
          }}
        >
            {/* 1. The Tree Background */}
            <ChristmasTree audioLevel={audioLevel} />

            {/* 2. The Interactive Ornaments Layer */}
            <div className="absolute inset-0 pointer-events-auto">
              {ornaments.map((ornament) => (
                <Ornament 
                  key={ornament.id} 
                  config={ornament} 
                  settings={settings} 
                  audioLevel={audioLevel}
                />
              ))}
            </div>

            {/* 3. Intro Animation Layer (Relative to tree coords) */}
            {introTarget && (
              <IntroAnimation 
                target={introTarget}
                settings={settings}
                onComplete={handleIntroComplete}
              />
            )}
        </div>

        {/* Text Greeting */}
        <div className="w-full text-center pointer-events-none z-30 mb-2">
          <h1 className="font-christmas text-3xl md:text-5xl text-yellow-100 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] animate-pulse">
            Lieve kerstgroeten van <br className="md:hidden" /> Jeroen en Lyda
          </h1>
        </div>

        {/* Settings Menu */}
        <SettingsMenu 
          isOpen={isMenuOpen}
          setIsOpen={setIsMenuOpen}
          settings={settings}
          onUpdateSettings={setSettings}
          onReloadSounds={initOrnaments}
          onUpdateBackground={setBgImage}
          currentBgImage={bgImage || undefined}
        />
      </div>
    </div>
  );
};

export default App;