"use client";

import { useEffect } from "react";
import clsx from "clsx";

import type { IChatMessage } from "@/entities/chats/types";
import { useShowRefillModal } from "@/hooks/refill/useShowRefillModal";
import { useChat } from "@/providers/chat-provider";
import { formatTime } from "@/shared/utils/date";

import MessageBubble from "./MessageBubble/MessageBubble";
import MessageMeta from "./MessageMeta/MessageMeta";
import MessageStatus from "./MessageStatus/MessageStatus";
import MessageText from "./MessageText/MessageText";
import MessageTyping from "./MessageTyping/MessageTyping";

import styles from "./ChatMessage.module.scss";

export interface ChatMessageProps {
  // message: {
  //   id: string;
  //   type: "text" | "image" | "voice" | "typing";
  //   text?: string;
  //   imageUrl?: string;
  //   audioUrl?: string;
  //   duration?: number;
  //   time: string | null;
  //   isOwn: boolean;
  //   isRead?: boolean;
  // };
  message: IChatMessage;
}

export default function ChatMessage({ message }: ChatMessageProps) {
  const { isConnected, read, balance } = useChat();
  const { showRefillModal } = useShowRefillModal();
  const isOwn = message.role === "user";

  // Применяем блюр к ОТВЕТАМ АССИСТЕНТА если они были отправлены при нулевом балансе И текущий баланс все еще нулевой
  const shouldBlur =
    !isOwn && // Блюрим только сообщения ассистента (НЕ пользователя)
    message.sentWithZeroBalance === true &&
    (balance?.balance ?? 0) <= 0;

  const handleBlurClick = () => {
    if (message.chatId) {
      showRefillModal(message.chatId);
    }
  };

  useEffect(() => {
    if (
      !!message.id &&
      !message.isRead &&
      message.id !== "typing" &&
      !message.id.startsWith("sending-message") &&
      isConnected
    ) {
      read([message.id]);
    }
  }, [message.id, message.isRead, read, isConnected]);

  return (
    <div className={clsx(styles.message, isOwn && styles.own)}>
      <MessageBubble isOwn={isOwn}>
        {message.type === "text" && message.id !== "typing" && (
          <MessageText
            text={message.text}
            isOwn={isOwn}
            isBlurred={shouldBlur}
            onBlurClick={handleBlurClick}
          />
        )}

        {message.id === "typing" && <MessageTyping />}

        {/* {message.type === "image" && (
          <>
            <MessageImage src={message.imageUrl || ""} />
            {message.text && <MessageText text={message.text} isOwn={isOwn} />}
          </>
        )}

        {message.type === "voice" && (
          <>
            <MessageAudio
              src={message.audioUrl || ""}
              duration={message.duration}
            />
            {message.text && <MessageText text={message.text} isOwn={isOwn} />}
          </>
        )} */}
      </MessageBubble>
      <MessageMeta time={formatTime(message.createdDate)}>
        {isOwn && <MessageStatus isRead={message.isRead} />}
      </MessageMeta>
    </div>
  );
}
