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={{
        backgroundImage:
          "linear-gradient(180deg, rgba(46, 27, 61, 0.92) 0%, rgba(35, 24, 62, 0.94) 100%), linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)",
        backgroundOrigin: "border-box",
        backgroundClip: "padding-box, border-box",
        border: "0.5px solid transparent",
        boxShadow:
          "0 -7px 20px rgba(7, 0, 18, 0.46), 0 6px 14px rgba(5, 2, 12, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(12, 7, 27, 0.66)",
        backdropFilter: "blur(14px)",
        WebkitBackdropFilter: "blur(14px)",
      }}
    >
      <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(145deg, #A873FF 0%, #8A52EE 55%, #6637CC 100%)",
            boxShadow: "0 4px 12px rgba(155,108,241,0.45)",
          }}
        >
          <Mic className="w-5 h-5 text-white" />
        </div>
        <div>
          <h3 className="text-base font-bold text-[#FBE7F5]">{label}</h3>
          <p className="text-sm text-[#EED3EC]/85">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(216, 180, 254, 0.52)",
          }}
        >
          <div
            className="w-16 h-16 rounded-full flex items-center justify-center"
            style={{
              background: "linear-gradient(135deg, rgba(168,115,255,0.25) 0%, rgba(138,82,238,0.25) 100%)",
            }}
          >
            <Upload className="h-8 w-8 text-[#D8B4FE]" />
          </div>
          <div className="text-center">
            <p className="text-base font-bold text-[#FBE7F5]">آپلود فایل صوتی</p>
            <p className="mt-1 text-sm text-[#EED3EC]/80">برای انتخاب فایل کلیک کنید</p>
          </div>
        </motion.button>
      ) : (
        <div
          className="relative rounded-2xl p-4"
          style={{
            background: "rgba(26, 18, 54, 0.6)",
            border: "1px solid rgba(216, 180, 254, 0.45)",
          }}
        >
          <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(145deg, #A873FF 0%, #8A52EE 55%, #6637CC 100%)",
                boxShadow: "0 4px 12px rgba(155,108,241,0.45)",
              }}
            >
              <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>
  );
}
