import { motion } from "motion/react";
import { Upload, X, Play, Video, ImageIcon } from "lucide-react";

interface MediaUploadBoxProps {
  type: "image" | "video";
  uploadedFile: string | null;
  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onRemove: () => void;
  fileName?: string;
  label?: string;
  required?: boolean;
}

const inputStyle = {
  background: "linear-gradient(135deg, rgba(50, 107, 118, 0.6) 0%, rgba(32, 76, 106, 0.6) 100%)",
  border: "1.5px solid rgba(138, 206, 224, 0.3)",
  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
};

export function MediaUploadBox({
  type,
  uploadedFile,
  onUpload,
  onRemove,
  fileName,
  label,
  required,
}: MediaUploadBoxProps) {
  const isVideo = type === "video";
  const borderStyle = uploadedFile
    ? "1.5px solid rgba(138, 206, 224, 0.5)"
    : required
    ? "1.5px dashed rgba(255, 184, 0, 0.6)"
    : "1.5px dashed rgba(138, 206, 224, 0.5)";

  return (
    <div>
      {label && (
        <label className="block text-white text-sm font-bold mb-3">
          {label}
          {required && (
            <span
              className="mr-2 text-xs font-normal px-2 py-0.5 rounded-full"
              style={{
                background: "rgba(255, 184, 0, 0.2)",
                color: "#FFB800",
                border: "1px solid rgba(255, 184, 0, 0.4)",
              }}
            >
              الزامی
            </span>
          )}
        </label>
      )}

      <div
        className="relative rounded-2xl overflow-hidden"
        style={{ ...inputStyle, border: borderStyle }}
      >
        {uploadedFile ? (
          <div className="relative">
            {isVideo ? (
              <>
                <video
                  src={uploadedFile}
                  className="w-full h-48 object-cover"
                  controls={false}
                  muted
                />
                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                  <div
                    className="w-14 h-14 rounded-full flex items-center justify-center"
                    style={{
                      background: "rgba(0,0,0,0.5)",
                      border: "2px solid rgba(255,255,255,0.6)",
                    }}
                  >
                    <Play className="w-6 h-6 text-white fill-white ml-1" />
                  </div>
                </div>
                {fileName && (
                  <div
                    className="absolute bottom-0 left-0 right-0 px-3 py-2"
                    style={{ background: "rgba(0,0,0,0.55)" }}
                  >
                    <p className="text-white text-xs truncate">{fileName}</p>
                  </div>
                )}
              </>
            ) : (
              <img src={uploadedFile} alt="آپلود شده" className="w-full h-48 object-cover" />
            )}

            <motion.button
              whileTap={{ scale: 0.9 }}
              onClick={onRemove}
              className="absolute top-2 left-2 w-8 h-8 rounded-full flex items-center justify-center"
              style={{
                background: "linear-gradient(135deg, rgba(220, 38, 38, 0.9) 0%, rgba(185, 28, 28, 0.9) 100%)",
                boxShadow: "0 4px 12px rgba(220, 38, 38, 0.4)",
              }}
            >
              <X className="w-4 h-4 text-white" />
            </motion.button>
          </div>
        ) : (
          <label className="flex flex-col items-center justify-center h-48 cursor-pointer">
            {required ? (
              <div
                className="w-12 h-12 rounded-full flex items-center justify-center mb-2"
                style={{
                  background: "linear-gradient(135deg, rgba(255, 184, 0, 0.3) 0%, rgba(255, 140, 0, 0.3) 100%)",
                  border: "1.5px solid rgba(255, 184, 0, 0.5)",
                }}
              >
                <ImageIcon className="w-6 h-6 text-yellow-400" />
              </div>
            ) : isVideo ? (
              <Video className="w-12 h-12 text-white/70 mb-2" />
            ) : (
              <Upload className="w-12 h-12 text-white/70 mb-2" />
            )}
            <span className={`text-sm ${required ? "text-white/80" : "text-white/70"}`}>
              {isVideo
                ? required
                  ? "انتخاب کاور برای ویدیو"
                  : "کلیک کنید برای آپلود ویدیو"
                : "کلیک کنید برای آپلود تصویر"}
            </span>
            {isVideo && !required && (
              <span className="text-white/40 text-xs mt-1">MP4، MOV، AVI پشتیبانی می‌شود</span>
            )}
            {required && (
              <span className="text-white/40 text-xs mt-1">تصویری که نمایش داده می‌شود</span>
            )}
            <input
              type="file"
              accept={isVideo ? "video/*" : "image/*"}
              onChange={onUpload}
              className="hidden"
            />
          </label>
        )}
      </div>
    </div>
  );
}
