import { motion } from "motion/react";
import React from "react";
import { TypingText } from "./TypingText";

export interface ChatMessage {
  id: string;
  type: "user" | "other" | "loading";
  content: string;
  author?: string;
  timestamp: string;
  isTyping?: boolean;
}

interface ChatMessagesProps {
  messages: ChatMessage[];
  containerRef: React.RefObject<HTMLDivElement>;
  endRef: React.RefObject<HTMLDivElement>;
  onTyping?: () => void;
}

const messageStyles = {
  user: {
    background:
      "linear-gradient(135deg, rgba(138, 206, 224, 0.9) 0%, rgba(76, 127, 137, 0.9) 100%)",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
    border: "1.5px solid rgba(138, 206, 224, 0.5)",
  },
  other: {
    background:
      "linear-gradient(135deg, rgba(32, 76, 106, 0.8) 0%, rgba(20, 40, 60, 0.8) 100%)",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
    border: "1.5px solid rgba(138, 206, 224, 0.3)",
  },
};

export function ChatMessages({
  messages,
  containerRef,
  endRef,
  onTyping,
}: ChatMessagesProps) {
  return (
    <div
      ref={containerRef}
      className="flex-1 overflow-y-auto px-4 pb-20"
      dir="rtl"
    >
      <div className="space-y-3">
        {messages.map((message) => {
          const isUser = message.type === "user";
          const isLoading = message.type === "loading";

          return (
            <motion.div
              key={message.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className={`flex ${isUser ? "justify-start" : "justify-end"}`}
            >
              <div
                className="max-w-[75%] rounded-2xl px-4 py-3"
                style={isUser ? messageStyles.user : messageStyles.other}
              >
                {message.author && (
                  <p
                    className="text-xs font-bold mb-1"
                    style={{ color: "#8ACEE0" }}
                  >
                    {message.author}
                  </p>
                )}

                {isLoading ? (
                  <div className="flex items-center gap-1">
                    <motion.span
                      className="w-2 h-2 rounded-full bg-white"
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 1.5, repeat: Infinity, delay: 0 }}
                    />
                    <motion.span
                      className="w-2 h-2 rounded-full bg-white"
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 1.5, repeat: Infinity, delay: 0.2 }}
                    />
                    <motion.span
                      className="w-2 h-2 rounded-full bg-white"
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 1.5, repeat: Infinity, delay: 0.4 }}
                    />
                  </div>
                ) : message.type === "other" && message.isTyping ? (
                  <TypingText text={message.content} speed={30} onTyping={onTyping} />
                ) : (
                  <p className="text-white text-sm break-words whitespace-pre-wrap">
                    {message.content}
                  </p>
                )}

                <p className="text-white/60 text-xs mt-1 text-left">
                  {message.timestamp}
                </p>
              </div>
            </motion.div>
          );
        })}

        <div ref={endRef} />
      </div>
    </div>
  );
}