import { motion, AnimatePresence } from "motion/react";
import chatbotAvatarIcon from "../../../assets/chatbot-bot-avatar.png";

interface ChatTypingIndicatorProps {
  isTyping: boolean;
  typingText: string;
}

// Shared bubble styles matching bot messages
const bubbleBaseStyle = {
  background: "linear-gradient(145deg, rgba(52, 34, 76, 0.94) 0%, rgba(35, 24, 62, 0.94) 100%)",
  boxShadow: "0 0 24px rgba(152,104,235,0.24), 0 12px 28px rgba(12, 8, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12)",
  border: "1px solid rgba(186, 145, 235, 0.4)",
};

export function ChatTypingIndicator({ isTyping, typingText }: ChatTypingIndicatorProps) {
  return (
    <AnimatePresence mode="wait">
      {isTyping && (
        <motion.div
          key="typing-indicator"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 10 }}
          transition={{ duration: 0.2 }}
          className="flex justify-end items-start gap-2"
          role="status"
          aria-live="polite"
          aria-label={typingText ? "در حال نوشتن پاسخ" : "در حال تایپ"}
        >
          {/* Message bubble */}
          <div className="rounded-3xl px-5 py-3 min-h-[44px] flex items-center" style={bubbleBaseStyle}>
            {typingText ? (
              // Typing text with cursor
              <p className="text-white text-sm leading-relaxed whitespace-pre-line" style={{ minHeight: "1.25rem" }}>
                {typingText}
                <span
                  className="inline-block w-0.5 h-4 bg-white/70 animate-pulse ml-0.5"
                  style={{ verticalAlign: "text-bottom" }}
                />
              </p>
            ) : (
              // Typing dots
              <div className="flex gap-1">
                <div className="w-2 h-2 rounded-full bg-white/60 chat-typing-dot" style={{ animationDelay: "0s" }} />
                <div className="w-2 h-2 rounded-full bg-white/60 chat-typing-dot" style={{ animationDelay: "0.2s" }} />
                <div className="w-2 h-2 rounded-full bg-white/60 chat-typing-dot" style={{ animationDelay: "0.4s" }} />
              </div>
            )}
          </div>

          {/* Bot Avatar */}
          <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>
      )}
    </AnimatePresence>
  );
}
