'use client';

import { useState, useEffect, useRef } from 'react';
import { Volume2, VolumeX, Play, Pause } from 'lucide-react';

interface Props {}

export default function BackgroundMusicPlayer({}: Props) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(0.5);
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    audio.volume = volume;
  }, [volume]);

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    const handleCanPlay = () => {
      setIsLoaded(true);
      setError(null);
    };

    const handleError = () => {
      setError('Failed to load audio');
      setIsPlaying(false);
    };

    const handleEnded = () => {
      audio.currentTime = 0;
      audio.play().catch(() => {
        setIsPlaying(false);
      });
    };

    audio.addEventListener('canplay', handleCanPlay);
    audio.addEventListener('error', handleError);
    audio.addEventListener('ended', handleEnded);

    return () => {
      audio.removeEventListener('canplay', handleCanPlay);
      audio.removeEventListener('error', handleError);
      audio.removeEventListener('ended', handleEnded);
    };
  }, []);

  const togglePlayPause = async () => {
    const audio = audioRef.current;
    if (!audio) return;

    try {
      if (isPlaying) {
        audio.pause();
        setIsPlaying(false);
      } else {
        await audio.play();
        setIsPlaying(true);
      }
    } catch (err) {
      setError('Autoplay policy prevented playback');
      setIsPlaying(false);
    }
  };

  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = parseFloat(e.target.value);
    setVolume(newVolume);
  };

  return (
    <div className="fixed bottom-6 right-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg shadow-2xl p-4 w-80 border border-slate-700">
      <audio
        ref={audioRef}
        src="https://www.freepik.com/audio/tune/static"
        loop
        crossOrigin="anonymous"
      />

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold text-white">Background Music</h3>
          <div className="text-xs text-slate-400">
            {isLoaded ? 'Ready' : 'Loading...'}
          </div>
        </div>

        {error && (
          <div className="text-xs text-red-400 bg-red-950 bg-opacity-50 rounded px-2 py-1">
            {error}
          </div>
        )}

        <div className="flex items-center gap-3">
          <button
            onClick={togglePlayPause}
            disabled={!isLoaded}
            className="flex-shrink-0 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-full p-2 transition-colors duration-200"
            aria-label={isPlaying ? 'Pause' : 'Play'}
          >
            {isPlaying ? (
              <Pause size={20} fill="currentColor" />
            ) : (
              <Play size={20} fill="currentColor" />
            )}
          </button>

          <div className="flex-1 flex items-center gap-2">
            {volume === 0 ? (
              <VolumeX size={18} className="text-slate-400 flex-shrink-0" />
            ) : (
              <Volume2 size={18} className="text-slate-400 flex-shrink-0" />
            )}
            <input
              type="range"
              min="0"
              max="1"
              step="0.05"
              value={volume}
              onChange={handleVolumeChange}
              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
              aria-label="Volume"
            />
            <span className="text-xs text-slate-400 w-8 text-right">
              {Math.round(volume * 100)}%
            </span>
          </div>
        </div>

        <div className="text-xs text-slate-500 text-center">
          {isPlaying ? 'Now playing' : 'Paused'}
        </div>
      </div>
    </div>
  );
}