import { motion } from "motion/react";
import { Mic, Trash2, Music, Upload } from "lucide-react";
import { useRef } from "react";

interface AudioUploadBoxProps {
  uploadedAudio: string | null;
  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onRemove: () => void;
  label?: string;
}

export function AudioUploadBox({
  uploadedAudio,
  onUpload,
  onRemove,
  label = "پادکست صوتی",
}: AudioUploadBoxProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  return (
    <div
      className="relative overflow-hidden rounded-3xl p-6"
      style={{
        background: "linear-gradient(135deg, rgba(138, 206, 224, 0.15) 0%, rgba(128, 208, 224, 0.15) 100%)",
        border: "2px solid rgba(138, 206, 224, 0.3)",
        boxShadow: "0 8px 24px rgba(138, 206, 224, 0.2)",
      }}
    >
      <div className="flex items-center gap-3 mb-4">
        <div
          className="w-10 h-10 rounded-full flex items-center justify-center"
          style={{
            background: "linear-gradient(135deg, #8ACEE0 0%, #80D0E0 100%)",
            boxShadow: "0 4px 12px rgba(138, 206, 224, 0.4)",
          }}
        >
          <Mic className="w-5 h-5 text-white" />
        </div>
        <div>
          <h3 className="text-white font-bold text-base">{label}</h3>
          <p className="text-white/70 text-sm">MP3, WAV, M4A</p>
        </div>
      </div>

      {!uploadedAudio ? (
        <motion.button
          whileTap={{ scale: 0.98 }}
          onClick={() => fileInputRef.current?.click()}
          className="w-full py-8 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-3 transition-all hover:bg-white/5"
          style={{
            borderColor: "rgba(138, 206, 224, 0.4)",
          }}
        >
          <div
            className="w-16 h-16 rounded-full flex items-center justify-center"
            style={{
              background: "linear-gradient(135deg, rgba(138, 206, 224, 0.3) 0%, rgba(128, 208, 224, 0.3) 100%)",
            }}
          >
            <Upload className="w-8 h-8 text-[#8ACEE0]" />
          </div>
          <div className="text-center">
            <p className="text-white font-bold text-base">آپلود فایل صوتی</p>
            <p className="text-white/60 text-sm mt-1">برای انتخاب فایل کلیک کنید</p>
          </div>
        </motion.button>
      ) : (
        <div
          className="relative rounded-2xl p-4"
          style={{
            background: "rgba(10, 20, 35, 0.6)",
            border: "2px solid rgba(138, 206, 224, 0.4)",
          }}
        >
          <div className="flex items-center gap-4">
            {/* Audio Icon */}
            <div
              className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0"
              style={{
                background: "linear-gradient(135deg, #8ACEE0 0%, #80D0E0 100%)",
                boxShadow: "0 4px 12px rgba(138, 206, 224, 0.4)",
              }}
            >
              <Music className="w-7 h-7 text-white" />
            </div>

            {/* Audio Player */}
            <div className="flex-1 min-w-0">
              <audio controls className="w-full" style={{ maxHeight: "40px" }}>
                <source src={uploadedAudio} />
                مرورگر شما از پخش صوت پشتیبانی نمی‌کند.
              </audio>
            </div>
          </div>

          {/* Remove Button */}
          <motion.button
            whileTap={{ scale: 0.9 }}
            onClick={onRemove}
            className="absolute -top-3 -left-3 w-10 h-10 rounded-full flex items-center justify-center"
            style={{
              background: "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
              boxShadow: "0 4px 12px rgba(239, 68, 68, 0.4)",
            }}
          >
            <Trash2 className="w-5 h-5 text-white" />
          </motion.button>
        </div>
      )}

      <input
        ref={fileInputRef}
        type="file"
        accept="audio/*,.mp3,.wav,.m4a"
        onChange={onUpload}
        className="hidden"
      />
    </div>
  );
}
