"use client";

import { Star1 } from "iconsax-react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { ReviewThread, buildThreadMessages, formatReviewMessageTime } from "../utils/reviewHelpers";

type Props = {
  thread: ReviewThread;
};

function ReviewChatThread({ thread }: Props) {
  const { t } = useTranslation("rating");

  const messages = useMemo(() => buildThreadMessages(thread), [thread]);

  const getTranslationKey = (point: string, isPositive: boolean): string => {
    const basePath = isPositive ? "Tabs.Strengths.Options" : "Tabs.Weeknesses.Options";
    return `${basePath}.${point}`;
  };

  return (
    <article className="py-4 border-b border-border/60 last:border-b-0">
      <ul className="flex flex-col gap-4">
        {messages.map((message) => {
          const isAdmin = message.type === "admin";

          return (
            <li key={message.id} className={`flex w-full ${isAdmin ? "justify-start" : "justify-end"}`}>
              <div
                className={`w-full max-w-[min(420px,85%)] rounded-[24px] px-5 py-4 ${
                  isAdmin ? "bg-[#F6F7FA] dark:bg-gray-700 rounded-tr-none" : "bg-[#EBEDF5] dark:bg-gray-600 rounded-tl-none"
                }`}
              >
                <h6 className="text-xs font-medium text-gray-700 dark:text-gray-200 mb-2">{message.senderName}</h6>

                {message.parentMessage && (
                  <div className="mb-3 rounded-xl border-r-2 border-primary/50 bg-white/70 dark:bg-black/10 px-3 py-2">
                    <p className="text-[11px] font-medium text-gray-600 dark:text-gray-300">{message.parentMessage.senderName}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-3 whitespace-pre-wrap break-words">
                      {message.parentMessage.content}
                    </p>
                  </div>
                )}

                {!isAdmin && message.rating !== undefined && message.rating > 0 && (
                  <div className="flex items-center gap-1.5 mb-2">
                    <Star1 size={16} color="#FFB800" variant="Bold" />
                    <span className="text-sm font-medium">{message.rating}</span>
                    <span className="text-xs text-gray-500 dark:text-gray-400">از ۵</span>
                  </div>
                )}

                <p className="text-sm leading-7 text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">{message.content}</p>

                {!isAdmin && message.positivePoints && message.positivePoints.length > 0 && (
                  <div className="flex flex-wrap gap-2 mt-3">
                    {message.positivePoints.map((point, index) => (
                      <span
                        key={index}
                        className="px-3 py-1 border border-green-500 text-green-600 dark:text-green-400 rounded-xl text-xs bg-white dark:bg-transparent"
                      >
                        {t(getTranslationKey(point, true))}
                      </span>
                    ))}
                  </div>
                )}

                {!isAdmin && message.negativePoints && message.negativePoints.length > 0 && (
                  <div className="flex flex-wrap gap-2 mt-2">
                    {message.negativePoints.map((point, index) => (
                      <span
                        key={index}
                        className="px-3 py-1 border border-red-500 text-red-600 dark:text-red-400 rounded-xl text-xs bg-white dark:bg-transparent"
                      >
                        {t(getTranslationKey(point, false))}
                      </span>
                    ))}
                  </div>
                )}

                {message.createdAt && (
                  <div className="mt-3 flex justify-end">
                    <span dir="ltr" className="text-[11px] text-gray-400 dark:text-gray-500">
                      {formatReviewMessageTime(message.createdAt)}
                    </span>
                  </div>
                )}
              </div>
            </li>
          );
        })}
      </ul>
    </article>
  );
}

export default ReviewChatThread;