import React, { useRef, useState, useEffect } from 'react';
import { playBeep, formatTime } from '../utils/audioUtils';

const CustomAudioPlayer = ({
  src,
  onPlay,
  fileName,
  onEnded,
  isPlaying,
  setIsPlaying,
  onNext,
  onPrev,
  onLoadedMetadata
}: any) => {
  const audioRef = useRef(null);
  const progressRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);

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

  useEffect(() => {
    if (isPlaying) {
      audioRef.current.play();
    } else {
      audioRef.current.pause();
    }
  }, [isPlaying]);

  const handleTimeUpdate = () => {
    const current = audioRef.current.currentTime;
    const duration = audioRef.current.duration;
    setCurrentTime(current);
    setProgress((current / duration) * 100);
  };

  const handleLoadedMetadata = () => {
    const duration = audioRef.current.duration;
    setDuration(duration);
    if (onLoadedMetadata) {
      onLoadedMetadata(duration);
    }
  };

  const handleSeek = (e) => {
    const progressBar = progressRef.current;
    const clickPosition = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.offsetWidth;
    const newTime = clickPosition * audioRef.current.duration;
    audioRef.current.currentTime = newTime;
    setProgress(clickPosition * 100);
  };

  const handleEnded = () => {
    setIsPlaying(false);
    if (onEnded) {
      onEnded();
    }
  };

  return (
    <div className="custom-audio-player">
      <button onClick={() => {
        playBeep();
        onPrev();
      }} className="control-btn prev-btn" title="Previous">
        ⏮
      </button>
      <button onClick={() => {
        playBeep();
        togglePlay();
      }} className="control-btn play-pause-btn">
        {isPlaying ? '❚❚' : '▶'}
      </button>
      <button onClick={() => {
        playBeep();
        onNext();
      }} className="control-btn next-btn" title="Next">
        ⏭
      </button>
      <div className="progress-bar-wrapper" ref={progressRef} onClick={handleSeek}>
        <div className="progress-bar" style={{ width: `${progress}%` }}></div>
      </div>
      <div className="time-display">
        {formatTime(currentTime)} / {formatTime(duration)}
      </div>
      <a href={src} download={fileName} className="download-btn" title="Download">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
      </a>
      <audio
        ref={audioRef}
        src={src}
        onTimeUpdate={handleTimeUpdate}
        onLoadedMetadata={handleLoadedMetadata}
        onEnded={handleEnded}
      />
    </div>
  );
};

export default CustomAudioPlayer;