import MarkdownRenderer from "app/components/MarkdownRenderer";
import { Message } from "app/types/global-types";
import styles from "./chat-message.module.css";

interface ChatMessageProps {
  message: Message;
}

function formatTime(date: Date): string {
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const ampm = hours >= 12 ? "pm" : "am";
  const formattedHours = hours % 12 || 12;
  const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
  return `${formattedHours}:${formattedMinutes} ${ampm}`;
}

export default function ChatMessage({ message }: ChatMessageProps) {
  const isAgent = message.sender === "agent";
  const timestamp = formatTime(message.timestamp);

  return (
    <div className={isAgent ? styles.messageContainerAgent : styles.messageContainerUser}>
      <div className={isAgent ? styles.messageBubbleAgent : styles.messageBubbleUser}>
        <MarkdownRenderer content={message.text} />
      </div>
      {message.products && message.products.length > 0 && (
        <div className={styles.productsContainer}>
          {message.products.map((product) => (
            <div key={product.product_id} className={styles.productCard}>
              <img src={product.image_url} alt={product.title} className={styles.productImage} />
              <div className={styles.productInfo}>
                <h4 className={styles.productTitle}>{product.title}</h4>
                <p className={styles.productPrice}>{product.currency} {product.price}</p>
                <a href={product.url} target="_blank" rel="noopener noreferrer" className={styles.productLink}>View Product</a>
              </div>
            </div>
          ))}
        </div>
      )}
      <span className={styles.timestamp}>{timestamp}</span>
    </div>
  );
}