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 = {
  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)",
};

export function MediaUploadBox({
  type,
  uploadedFile,
  onUpload,
  onRemove,
  fileName,
  label,
  required,
}: MediaUploadBoxProps) {
  const isVideo = type === "video";
  const isImage = type === "image";
  const isImageEmptyState = isImage && !uploadedFile && !required;
  const borderStyle = uploadedFile
    ? "0.5px solid transparent"
    : required
    ? "1px dashed rgba(250, 204, 21, 0.7)"
    : "1px dashed rgba(216, 180, 254, 0.65)";

  return (
    <div>
      {label && (
        <label className="mb-3 block text-sm font-bold text-[#FBE7F5]">
          {label}
          {required && (
            <span
              className="mr-2 text-xs font-normal px-2 py-0.5 rounded-full"
              style={{
                background: "rgba(250, 204, 21, 0.22)",
                color: "#FDE68A",
                border: "1px solid rgba(250, 204, 21, 0.5)",
              }}
            >
              الزامی
            </span>
          )}
        </label>
      )}

      <div
        className="relative rounded-2xl overflow-hidden"
        style={
          isImageEmptyState
            ? {
                background:
                  "linear-gradient(135deg, rgba(168,115,255,0.28) 0%, rgba(138,82,238,0.24) 100%)",
                border: borderStyle,
                boxShadow: "none",
              }
            : { ...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(145deg, 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 h-48 cursor-pointer flex-col items-center justify-center">
            {required ? (
              <div
                className="w-12 h-12 rounded-full flex items-center justify-center mb-2"
                style={{
                  background: "linear-gradient(135deg, rgba(250, 204, 21, 0.26) 0%, rgba(249, 115, 22, 0.24) 100%)",
                  border: "1px solid rgba(250, 204, 21, 0.5)",
                }}
              >
                <ImageIcon className="w-6 h-6 text-white" />
              </div>
            ) : isVideo ? (
              <Video className="mb-2 h-12 w-12 text-white" />
            ) : (
              <Upload className="mb-2 h-12 w-12 text-[#F6D8F0]" />
            )}
            <span className={`text-sm ${isImageEmptyState ? "text-[#F6D8F0]" : "text-white"}`}>
              {isVideo
                ? required
                  ? "انتخاب کاور برای ویدیو"
                  : "کلیک کنید برای آپلود ویدیو"
                : "کلیک کنید برای آپلود تصویر"}
            </span>
            {isVideo && !required && (
              <span className="mt-1 text-xs text-white">MP4، MOV، AVI پشتیبانی می‌شود</span>
            )}
            {required && (
              <span className="mt-1 text-xs text-[#F6D8F0]">تصویری که نمایش داده می‌شود</span>
            )}
            <input
              type="file"
              accept={isVideo ? "video/*" : "image/*"}
              onChange={onUpload}
              className="hidden"
            />
          </label>
        )}
      </div>
    </div>
  );
}
