"use client";

import { useEffect, useState, useRef } from "react";
import Pusher from "pusher-js";
import { cn } from "@/lib/utils";
import { ProductProps } from '@/app/(root)/order/[orderId]/_components/ProductInfo';

export type Chat = {
  id: number;
  userId: string;
  img: string;
  msg: string | null;
  order?: Omit<ProductProps, 'id'|'quantity'>;
  date: string;
};

interface ChatBubbleProps {
  initialData: {
    message: string;
    id: string;
    User: {
      name: string | null;
      image: string | null;
      id: string | null;
    };
    chat: Chat;
  }[];
}

export const dynamic = "force-dynamic";

function ChatBubble({ initialData }: ChatBubbleProps) {
  const [totalComments, setTotalComments] = useState(initialData);
  const messageEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY as string, {
      cluster: "us2",
    });
    const channel = pusher.subscribe("chat");

    const handleMessage = (data: any) => {
      try {
        const parsedComments = JSON.parse(data.message);
        if (Array.isArray(parsedComments)) {
          setTotalComments((prev) => [...prev, ...parsedComments]);
        } else {
          setTotalComments((prev) => [...prev, parsedComments]);
        }
      } catch (error) {
        console.error("Failed to parse message:", error);
      }
    };

    channel.bind("message", handleMessage);

    return () => {
      channel.unbind("message", handleMessage);
      pusher.unsubscribe("chat");
    };
  }, []);

  const scrollToBottom = () => {
    messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [totalComments]);

  return (
    <div>
      {totalComments.map((chat, index) => (
        <div
          key={index}
          className={`flex items-end ${
            chat.User.id === chat.User.id
              ? "justify-start flex-row-reverse"
              : "justify-start"
          } mb-3`}
        >
          <div className="mb-1">
            <img
              src={chat.User.image as string}
              alt="user"
              width={40}
              height={40}
              className="w-10 h-10 rounded-full mx-2"
            />
          </div>
          <div
            className={cn(
              "px-2 py-1 rounded-md",
              chat.User.id === chat.User.id ? "bg-[#3d42ce]" : "bg-white/30"
            )}
          >
            <div className="text-white">{chat.message}</div>
          </div>
          {chat.chat && chat.chat.order && (
            <div className="flex flex-col justify-center mt-1 bg-black px-4 py-2 mb-2 rounded-md max-w-[442px]">
              <div className="py-2 border-b border-white/10 flex gap-4 items-center">
                <div>
                  <img
                    src={chat.chat.order.img as string}
                    alt="order"
                    className="w-10 h-10 rounded-md border border-white/10"
                  />
                </div>
                <div className="text-white">
                  <span className="text-base">{chat.chat.order.game_title}</span>
                  <div className="flex items-center gap-1">
                    <span className="text-sm">{chat.chat.order.price}</span>
                    <span className="text-sm text-opacity-70 text-white">EUR</span>
                  </div>
                </div>
              </div>
              <div className="flex flex-col py-2">
                <div className="flex items-center gap-2">
                  <span className="text-white/60 text-xs">Description:</span>
                  <p className="text-white text-xs text-nowrap overflow-hidden overflow-ellipsis">{chat.chat.order.desc}</p>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-white/60 text-xs">Type:</span>
                  <p className="text-white text-xs">{chat.chat.order.type}</p>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-white/60 text-xs">Game:</span>
                  <p className="text-white text-xs">{chat.chat.order.game}</p>
                </div>
              </div>
            </div>
          )}
        </div>
      ))}
      <div ref={messageEndRef}></div>
    </div>
  );
}

export { ChatBubble };