uldp.edu.vn/app/blog/[slug]/components/CommentsSection.tsx

"use client";

import type { BlogComment } from "@/types/blog";
import { useMemo, useState } from "react";
import CommentForm from "./CommentForm";
import { formatLongDate } from "@/utils";

interface CommentsSectionProps {
  slug: string;
  comments: BlogComment[];
}

export default function CommentsSection({ slug, comments }: CommentsSectionProps) {
  const [replyTarget, setReplyTarget] = useState<{
    // Root comment id to store as parentId (keeps 1-level threading on backend)
    parentId: string;
    // The author we are replying to (used for @mention UI)
    replyToName: string;
    // Which item in the UI is showing the reply form under it
    anchorId: string;
  } | null>(null);

  const { parents, repliesByParent } = useMemo(() => {
    const parentsLocal = (comments || []).filter((c) => !c.parentId);
    const replies = (comments || []).filter((c) => !!c.parentId);
    const map = new Map<string, BlogComment[]>();
    for (const r of replies) {
      const pid = r.parentId as string;
      map.set(pid, [...(map.get(pid) || []), r]);
    }
    return { parents: parentsLocal, repliesByParent: map };
  }, [comments]);
  // Collect all author names to detect full @mentions (including multi-word names)
  const authorNames = useMemo(() => {
    return (comments || [])
      .map((c) => c.authorName)
      .filter((n): n is string => !!n)
      // Sort by length desc so we match the longest possible name first
      .sort((a, b) => b.length - a.length);
  }, [comments]);

  const renderContentWithMention = (text?: string) => {
    if (!text) return null;
    if (!text.startsWith("@")) return text;

    // Try to match an @mention that corresponds to a known author name.
    // This supports multi-word names like "@Bạn Cũng Thấy Thế Hà".
    const matchedName = authorNames.find((name) => {
      const candidate = `@${name}`;
      if (!text.startsWith(candidate)) return false;

      // Ensure the match ends at string end or is followed by a space
      const nextChar = text.charAt(candidate.length);
      return candidate.length === text.length || nextChar === " ";
    });

    if (!matchedName) {
      // Fallback: just return the original text if we can't confidently match a name
      return text;
    }

    const mention = `@${matchedName}`;
    const rest = text.slice(mention.length); // includes leading space if present

    return (
      <>
        <strong>{mention}</strong>
        {rest}
      </>
    );
  };

  return (
    <div className="comments-area">
      <div className="comments-heading">
        <h3>
          {(comments || []).length} {(comments || []).length === 1 ? "Comment" : "Comments"}
        </h3>
      </div>

      {parents.map((comment, index) => {
        const replies = comment._id ? repliesByParent.get(comment._id) || [] : [];
        const isReplyingHere = !!comment._id && replyTarget?.anchorId === comment._id;

        return (
          <div key={comment._id || index}>
            <div
              className={`news-single-comment ${index % 2 === 1 ? "style-2" : ""
                } d-flex gap-4 pt-4 pb-0`}
            >
              <div className="image">
                <img
                  src={
                    comment.authorAvatar ||
                    `/assets/img/inner-page/news-details/comment-${(index % 3) + 1}.png`
                  }
                  alt={comment.authorName}
                />
              </div>

              <div className="content">
                <div className="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
                  <div className="con">
                    <span>{formatLongDate(comment.createdAt)}</span>
                    <h4>{comment.authorName}</h4>
                  </div>

                  {comment._id && (
                    <button
                      type="button"
                      className="reply"
                      onClick={() =>
                        setReplyTarget({
                          parentId: comment._id!,
                          replyToName: comment.authorName,
                          anchorId: comment._id!,
                        })
                      }
                    >
                      Reply
                    </button>
                  )}
                </div>

                <p className="mt-30 mb-4">{renderContentWithMention(comment.content)}</p>

                {isReplyingHere && comment._id && (
                  <div className="mb-4">
                    <div className="d-flex justify-content-end mb-2">
                      <button
                        type="button"
                        className="btn btn-sm btn-outline-secondary"
                        onClick={() => setReplyTarget(null)}
                      >
                        Cancel
                      </button>
                    </div>
                    <CommentForm
                      slug={slug}
                      parentId={replyTarget?.parentId || comment._id}
                      replyToName={replyTarget?.replyToName || comment.authorName}
                      initialContent={`@${replyTarget?.replyToName || comment.authorName} `}
                      onSubmitted={() => setReplyTarget(null)}
                    />
                  </div>
                )}

                {/* Replies */}
                {replies.length > 0 && (
                  <div className="replies">
                    {replies.map((reply, replyIndex) => (
                      <div key={reply._id || replyIndex}>
                        <div
                          className="news-single-comment d-flex gap-4 pt-4 pb-0"
                        >
                          <div className="image">
                            <img
                              src={
                                reply.authorAvatar ||
                                `/assets/img/inner-page/news-details/comment-${(replyIndex % 3) + 1}.png`
                              }
                              alt={reply.authorName}
                            />
                          </div>
                          <div className="content">
                            <div className="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
                              <div className="con">
                              <span>{formatLongDate(reply.createdAt)}</span>
                                <h4>{reply.authorName}</h4>
                              </div>
                              {reply._id && comment._id && (
                                <button
                                  type="button"
                                  className="reply"
                                  onClick={() =>
                                    setReplyTarget({
                                      // Keep backend parentId as the root comment id (comment._id)
                                      parentId: comment._id!,
                                      // Mention the author we clicked reply on (child comment author)
                                      replyToName: reply.authorName,
                                      // Show form under this child comment
                                      anchorId: reply._id!,
                                    })
                                  }
                                >
                                  Reply
                                </button>
                              )}
                            </div>
                            <p className="mt-30 mb-4">{renderContentWithMention(reply.content)}</p>
                          </div>
                        </div>

                        {/* Reply form under child comment */}
                        {reply._id && replyTarget?.anchorId === reply._id && (
                          <div className="mb-4 mt-3">
                            <div className="d-flex justify-content-end mb-2">
                              <button
                                type="button"
                                className="btn btn-sm btn-outline-secondary"
                                onClick={() => setReplyTarget(null)}
                              >
                                Cancel
                              </button>
                            </div>
                            <CommentForm
                              slug={slug}
                              parentId={replyTarget.parentId}
                              replyToName={replyTarget.replyToName}
                              initialContent={`@${replyTarget.replyToName} `}
                              onSubmitted={() => setReplyTarget(null)}
                            />
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })}

      {/* New top-level comment */}
      <div className="mt-5">
        <CommentForm slug={slug} />
      </div>
    </div>
  );
}