import { useState, useRef } from "react";
import { Play, Pause } from "lucide-react";

interface AudioPlayerProps {
  duration: string;
  audioUrl?: string;
}

export function AudioPlayer({ duration, audioUrl }: AudioPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [progress, setProgress] = useState(0);

  const togglePlay = () => {
    // در یک پیاده‌سازی واقعی، اینجا باید audio element رو کنترل کنیم
    setIsPlaying(!isPlaying);
    
    // شبیه‌سازی پخش صدا
    if (!isPlaying) {
      // شروع پخش
      const timer = setInterval(() => {
        setProgress((prev) => {
          if (prev >= 100) {
            clearInterval(timer);
            setIsPlaying(false);
            return 0;
          }
          return prev + 1;
        });
      }, 100);
    }
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div
      className="rounded-2xl px-4 py-3 flex items-center gap-3 min-w-[240px]"
      style={{
        background: "linear-gradient(135deg, rgba(100, 200, 255, 0.9) 0%, rgba(50, 150, 220, 0.9) 100%)",
        boxShadow: "0 4px 16px rgba(100, 200, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3)",
        border: "1.5px solid rgba(150, 220, 255, 0.4)",
      }}
    >
      {/* Play/Pause Button - Telegram style */}
      <button
        onClick={togglePlay}
        className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 transition-all"
        style={{
          background: "rgba(255, 255, 255, 0.25)",
        }}
      >
        {isPlaying ? (
          <Pause className="w-5 h-5 text-white fill-white" />
        ) : (
          <Play className="w-5 h-5 text-white fill-white" style={{ marginLeft: "2px" }} />
        )}
      </button>

      {/* Waveform / Progress Bar */}
      <div className="flex-1 flex flex-col gap-1">
        {/* Progress bar */}
        <div className="h-1 rounded-full bg-white/20 overflow-hidden">
          <div
            className="h-full rounded-full transition-all duration-100"
            style={{
              width: `${progress}%`,
              background: "linear-gradient(90deg, #FFFFFF 0%, #E0F7FF 100%)",
            }}
          />
        </div>
        
        {/* Time */}
        <div className="flex justify-between items-center">
          <span className="text-white/80 text-xs">{duration}</span>
        </div>
      </div>
    </div>
  );
}
