import { motion } from "motion/react";
import { Paperclip } from "lucide-react";
import { ChatFlowMessage } from "../../../hooks/useChatFlow";
import { extractTime, formatTimestamp } from "../../../utils/chatDateUtils";
import { AudioPlayer } from "../AudioPlayer";
import { VideoPlayer } from "../VideoPlayer";
import chatbotAvatarIcon from "figma:asset/c11973053d8410ffeb3c76aa4d1da6991076e7e1.png";

interface ChatMessageItemProps {
  message: ChatFlowMessage;
  animationDelay: number;
  onButtonClick: (buttonId: string, action: string) => void;
}

export function ChatMessageItem({ message, animationDelay, onButtonClick }: ChatMessageItemProps) {
  const isBot = message.type === "bot";
  const timeDisplay = extractTime(message.datetime1, message.timestamp);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: animationDelay }}
      className={`flex ${isBot ? "justify-end" : "justify-start"} items-start gap-2`}
    >
      {/* Message Bubble */}
      <div className={`max-w-[75%] ${isBot ? "ml-0" : "mr-0"}`}>
        {/* Text Message */}
        {message.mediaType === "text" && (
          <div
            className="rounded-3xl px-5 py-3"
            style={{
              background: isBot
                ? "linear-gradient(135deg, rgba(100, 200, 255, 0.9) 0%, rgba(50, 150, 220, 0.9) 100%)"
                : "linear-gradient(135deg, rgba(150, 100, 200, 0.85) 0%, rgba(100, 60, 150, 0.85) 100%)",
              boxShadow: isBot
                ? "0 4px 16px rgba(100, 200, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3)"
                : "0 4px 16px rgba(150, 100, 200, 0.4), inset 0 1px 2px rgba(200, 150, 255, 0.3)",
              border: isBot ? "1.5px solid rgba(150, 220, 255, 0.4)" : "1.5px solid rgba(180, 130, 230, 0.4)",
            }}
          >
            <p className="text-white text-sm leading-relaxed whitespace-pre-line">{message.content}</p>
          </div>
        )}

        {/* Image Message */}
        {message.mediaType === "image" && message.content && (
          <div
            className="rounded-2xl p-3"
            style={{
              background: "linear-gradient(135deg, rgba(100, 200, 255, 0.9) 0%, rgba(50, 150, 220, 0.9) 100%)",
              border: "1.5px solid rgba(150, 220, 255, 0.4)",
              boxShadow: "0 4px 16px rgba(100, 200, 255, 0.4)",
            }}
          >
            <div
              className="rounded-xl overflow-hidden"
              style={{
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
              }}
            >
              <img src={message.content} alt="تصویر" className="w-full h-auto max-h-64 object-cover" />
            </div>
          </div>
        )}

        {/* Audio Message */}
        {message.mediaType === "audio" && message.mediaUrl && (
          <AudioPlayer duration={message.duration || "0:00"} audioUrl={message.mediaUrl} />
        )}

        {/* Video Message */}
        {message.mediaType === "video" && message.content && message.mediaUrl && (
          <VideoPlayer thumbnailUrl={message.content} duration={message.duration || "0:00"} videoUrl={message.mediaUrl} />
        )}

        {/* File Message */}
        {message.mediaType === "file" && message.mediaUrl && (
          <div
            className="rounded-3xl px-5 py-4 flex items-center gap-3"
            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)",
            }}
          >
            <div
              className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
              style={{
                background: "linear-gradient(135deg, #FFD700 0%, #FFA500 100%)",
                boxShadow: "0 2px 8px rgba(255, 215, 0, 0.4)",
              }}
            >
              <Paperclip className="w-5 h-5 text-white" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-white text-sm font-bold truncate">{message.mediaUrl}</p>
              <p className="text-white/70 text-xs">فایل</p>
            </div>
            <button
              className="text-white hover:text-white/80 text-xs font-bold px-3 py-1 rounded-lg transition-all"
              style={{
                background: "rgba(255, 255, 255, 0.2)",
              }}
              aria-label="دانلود فایل"
            >
              دانلود
            </button>
          </div>
        )}

        {/* Action Buttons */}
        {message.buttons && message.buttons.length > 0 && (
          <div className="mt-3 space-y-2">
            {message.buttons.map((button) => (
              <motion.button
                key={button.id}
                whileTap={{ scale: 0.95 }}
                onClick={() => onButtonClick(button.id, button.action)}
                className="w-full px-4 py-3 rounded-2xl text-white text-sm font-bold text-center transition-all"
                style={{
                  background: "linear-gradient(135deg, rgba(255, 183, 0, 0.9) 0%, rgba(255, 140, 0, 0.9) 100%)",
                  boxShadow: "0 4px 16px rgba(255, 183, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3)",
                  border: "1.5px solid rgba(255, 200, 50, 0.5)",
                }}
                aria-label={button.label}
              >
                {button.label}
              </motion.button>
            ))}
          </div>
        )}

        {/* Timestamp */}
        <div className={`mt-1 text-xs ${isBot ? "text-left" : "text-right"}`} style={{ color: "rgba(255, 255, 255, 0.5)" }}>
          {timeDisplay}
        </div>
      </div>

      {/* Bot Avatar */}
      {isBot && (
        <div className="flex-shrink-0">
          <img
            src={chatbotAvatarIcon}
            alt="چت‌بات"
            className="w-12 h-12 rounded-full object-contain"
            style={{
              filter: "drop-shadow(0 2px 8px rgba(138, 206, 224, 0.5))",
            }}
          />
        </div>
      )}
    </motion.div>
  );
}
