Epicure/apps/web/components/social/comments-section.tsx

"use client";

import { useState, useEffect, useCallback, useMemo, useRef, Fragment } from "react";
import Link from "next/link";
import { MessageCircle, Reply, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { CommentReactions } from "@/components/social/comment-reactions";
import { ReportButton } from "@/components/social/report-button";
import { cn } from "@/lib/utils";
import { MENTION_REGEX } from "@/lib/mentions";

type MentionCandidate = { id: string; name: string; username: string | null; avatarUrl: string | null };

// Matches an in-progress "@partial" token ending at the cursor — e.g. typing
// "hey @al" mid-comment matches "@al", but "hey @al there" (cursor after
// "there") doesn't, since the mention token no longer ends at the cursor.
const MENTION_TRIGGER_REGEX = /@([a-z0-9_-]{0,20})$/i;

type Comment = {
  id: string;
  content: string;
  parentId: string | null;
  createdAt: string;
  userId: string;
  userName: string;
  userUsername: string | null;
  userAvatarUrl: string | null;
};

const COMMENTS_PAGE_SIZE = 20;

type CommentsResponse = {
  data: Comment[];
  total: number;
  limit: number;
  offset: number;
};

const MAX_VISUAL_INDENT = 4;

function renderContentWithMentions(content: string) {
  const parts = content.split(MENTION_REGEX);
  // split() with a capturing group interleaves [text, username, text, username, ...text]
  return parts.map((part, i) =>
    i % 2 === 1 ? (
      <Link
        key={i}
        href={`/u/${part.toLowerCase()}`}
        className="text-primary font-medium hover:underline"
      >
        @{part}
      </Link>
    ) : (
      <Fragment key={i}>{part}</Fragment>
    )
  );
}

function timeAgo(dateStr: string, t: ReturnType<typeof useTranslations>) {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return t("justNow");
  if (mins < 60) return t("minutesAgo", { mins });
  const hours = Math.floor(mins / 60);
  if (hours < 24) return t("hoursAgo", { hours });
  return t("daysAgo", { days: Math.floor(hours / 24) });
}

function CommentForm({
  recipeId,
  parentId,
  onSubmit,
  placeholder,
  onCancel,
}: {
  recipeId: string;
  parentId?: string;
  onSubmit: () => void;
  placeholder?: string;
  onCancel?: () => void;
}) {
  const t = useTranslations("social");
  const tCommon = useTranslations("common");
  const [content, setContent] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const mentionDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  // Where the "@" of the mention currently being typed sits in `content` —
  // needed to splice in the chosen username without disturbing the rest of
  // the text, since the cursor may have moved by the time a fetch resolves.
  const mentionStartRef = useRef<number | null>(null);
  const [mentionCandidates, setMentionCandidates] = useState<MentionCandidate[]>([]);
  const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
  const mentionOpen = mentionCandidates.length > 0;

  async function submit() {
    if (!content.trim()) return;
    setSubmitting(true);
    try {
      const res = await fetch(`/api/v1/recipes/${recipeId}/comments`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: content.trim(), parentId }),
      });
      if (!res.ok) { toast.error(t("commentFailed")); return; }
      setContent("");
      closeMentions();
      onSubmit();
    } finally {
      setSubmitting(false);
    }
  }

  function closeMentions() {
    setMentionCandidates([]);
    setMentionActiveIndex(0);
    mentionStartRef.current = null;
    if (mentionDebounceRef.current) clearTimeout(mentionDebounceRef.current);
  }

  function handleContentChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    const value = e.target.value;
    const cursor = e.target.selectionStart;
    setContent(value);

    const beforeCursor = value.slice(0, cursor);
    const match = MENTION_TRIGGER_REGEX.exec(beforeCursor);
    if (!match) {
      closeMentions();
      return;
    }

    const partial = match[1] ?? "";
    mentionStartRef.current = cursor - match[0].length;
    if (mentionDebounceRef.current) clearTimeout(mentionDebounceRef.current);
    if (partial.length < 2) {
      setMentionCandidates([]);
      return;
    }
    mentionDebounceRef.current = setTimeout(async () => {
      try {
        const res = await fetch(`/api/v1/users/search?q=${encodeURIComponent(partial)}`);
        if (!res.ok) return;
        const data = (await res.json()) as { users: MentionCandidate[] };
        setMentionCandidates(data.users);
        setMentionActiveIndex(0);
      } catch {
        // Silently drop — a failed autocomplete fetch shouldn't interrupt typing.
      }
    }, 250);
  }

  function selectMention(candidate: MentionCandidate) {
    const start = mentionStartRef.current;
    const textarea = textareaRef.current;
    if (start === null || !candidate.username || !textarea) { closeMentions(); return; }

    const cursor = textarea.selectionStart;
    const next = `${content.slice(0, start)}@${candidate.username} ${content.slice(cursor)}`;
    setContent(next);
    closeMentions();

    const caretPos = start + candidate.username.length + 2;
    requestAnimationFrame(() => {
      textarea.focus();
      textarea.setSelectionRange(caretPos, caretPos);
    });
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
    if (!mentionOpen) return;
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setMentionActiveIndex((i) => (i + 1) % mentionCandidates.length);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setMentionActiveIndex((i) => (i - 1 + mentionCandidates.length) % mentionCandidates.length);
    } else if (e.key === "Enter" || e.key === "Tab") {
      e.preventDefault();
      selectMention(mentionCandidates[mentionActiveIndex]!);
    } else if (e.key === "Escape") {
      e.preventDefault();
      closeMentions();
    }
  }

  return (
    <div className="space-y-2">
      <div className="relative">
        <Textarea
          ref={textareaRef}
          value={content}
          onChange={handleContentChange}
          onKeyDown={handleKeyDown}
          onBlur={() => setTimeout(closeMentions, 150)}
          placeholder={placeholder ?? t("commentPlaceholder")}
          rows={2}
          disabled={submitting}
        />
        {mentionOpen && (
          <div className="absolute z-20 top-full left-0 mt-1 w-64 max-h-56 overflow-y-auto rounded-lg border bg-popover shadow-lg py-1">
            {mentionCandidates.map((candidate, i) => (
              <button
                key={candidate.id}
                type="button"
                onMouseDown={(e) => { e.preventDefault(); selectMention(candidate); }}
                className={cn(
                  "w-full flex items-center gap-2 px-3 py-1.5 text-left text-sm",
                  i === mentionActiveIndex ? "bg-accent" : "hover:bg-accent/50"
                )}
              >
                <Avatar className="h-6 w-6 shrink-0">
                  {candidate.avatarUrl && <AvatarImage src={candidate.avatarUrl} alt={candidate.name} />}
                  <AvatarFallback className="text-xs">{candidate.name.slice(0, 2).toUpperCase()}</AvatarFallback>
                </Avatar>
                <span className="truncate">{candidate.name}</span>
                <span className="text-xs text-muted-foreground truncate">@{candidate.username}</span>
              </button>
            ))}
          </div>
        )}
      </div>
      <div className="flex gap-2">
        <Button size="sm" onClick={submit} disabled={!content.trim() || submitting}>
          {submitting ? t("postingButton") : t("postButton")}
        </Button>
        {onCancel && <Button size="sm" variant="ghost" onClick={onCancel}>{tCommon("cancel")}</Button>}
      </div>
    </div>
  );
}

function CommentItem({
  comment,
  childrenByParent,
  depth,
  currentUserId,
  recipeId,
  onRefresh,
}: {
  comment: Comment;
  childrenByParent: Map<string, Comment[]>;
  depth: number;
  currentUserId?: string;
  recipeId: string;
  onRefresh: () => void;
}) {
  const [showReply, setShowReply] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const isOwn = comment.userId === currentUserId;
  const t = useTranslations("social");
  const tCommon = useTranslations("common");
  const replies = childrenByParent.get(comment.id) ?? [];
  const indented = depth > 0 && depth <= MAX_VISUAL_INDENT;

  async function deleteComment() {
    const res = await fetch(`/api/v1/comments/${comment.id}`, { method: "DELETE" });
    if (res.ok) { toast.success(tCommon("deleted")); onRefresh(); }
    else toast.error(tCommon("deleteFailed"));
  }

  return (
    <div className={cn("space-y-3", indented && "ml-10 border-l pl-4")}>
      <div className="flex gap-3">
        <Avatar className={cn("shrink-0 mt-0.5", depth === 0 ? "h-7 w-7" : "h-6 w-6")}>
          <AvatarImage src={comment.userAvatarUrl ?? ""} alt={comment.userName} />
          <AvatarFallback className="text-xs">{comment.userName.slice(0, 2).toUpperCase()}</AvatarFallback>
        </Avatar>
        <div className="flex-1 min-w-0 space-y-1">
          <div className="flex items-baseline gap-2">
            <span className="font-medium text-sm">{comment.userName}</span>
            <span className="text-xs text-muted-foreground">{timeAgo(comment.createdAt, t)}</span>
          </div>
          <p className="text-sm leading-relaxed whitespace-pre-wrap">{renderContentWithMentions(comment.content)}</p>
          <CommentReactions recipeId={recipeId} commentId={comment.id} initialCounts={{}} initialUserReactions={[]} />
          <div className="flex items-center gap-2">
            {currentUserId && (
              <button
                onClick={() => setShowReply(!showReply)}
                className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
              >
                <Reply className="h-3 w-3" /> {t("replyButton")}
              </button>
            )}
            {currentUserId && !isOwn && (
              <ReportButton targetType="comment" targetId={comment.id} />
            )}
            {isOwn && (
              <button
                onClick={() => setConfirmOpen(true)}
                className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
              >
                <Trash2 className="h-3 w-3" /> {tCommon("delete")}
              </button>
            )}
          </div>
          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>{t("deleteCommentTitle")}</AlertDialogTitle>
                <AlertDialogDescription>{t("deleteCommentDescription")}</AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => { void deleteComment(); }}
                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                >
                  {tCommon("delete")}
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
          {showReply && (
            <CommentForm
              recipeId={recipeId}
              parentId={comment.id}
              onSubmit={() => { setShowReply(false); onRefresh(); }}
              placeholder={t("replyPlaceholder")}
              onCancel={() => setShowReply(false)}
            />
          )}
        </div>
      </div>

      {replies.length > 0 && (
        <div className="space-y-3">
          {replies.map((reply) => (
            <CommentItem
              key={reply.id}
              comment={reply}
              childrenByParent={childrenByParent}
              depth={depth + 1}
              currentUserId={currentUserId}
              recipeId={recipeId}
              onRefresh={onRefresh}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export function CommentsSection({
  recipeId,
  currentUserId,
}: {
  recipeId: string;
  currentUserId?: string;
}) {
  const [comments, setComments] = useState<Comment[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [topLevelOffset, setTopLevelOffset] = useState(0);
  const [topLevelTotal, setTopLevelTotal] = useState(0);
  const t = useTranslations("social");
  const tCommon = useTranslations("common");

  // Full reload from the first page — used on mount and after any mutation (post/reply/delete)
  // so the thread stays consistent rather than trying to patch pagination state in place.
  const load = useCallback(async () => {
    const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=0`);
    if (res.ok) {
      const json = await res.json() as CommentsResponse;
      setComments(json.data);
      setTopLevelTotal(json.total);
      setTopLevelOffset(json.data.filter((c) => !c.parentId).length);
    }
    setLoading(false);
  }, [recipeId]);

  const loadMore = useCallback(async () => {
    setLoadingMore(true);
    try {
      const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=${topLevelOffset}`);
      if (res.ok) {
        const json = await res.json() as CommentsResponse;
        setComments((prev) => [...prev, ...json.data]);
        setTopLevelTotal(json.total);
        setTopLevelOffset((prev) => prev + json.data.filter((c) => !c.parentId).length);
      }
    } finally {
      setLoadingMore(false);
    }
  }, [recipeId, topLevelOffset]);

  useEffect(() => { void load(); }, [load]);

  const { topLevel, childrenByParent } = useMemo(() => {
    const byParent = new Map<string, Comment[]>();
    const top: Comment[] = [];
    for (const c of comments) {
      if (!c.parentId) {
        top.push(c);
        continue;
      }
      const siblings = byParent.get(c.parentId) ?? [];
      siblings.push(c);
      byParent.set(c.parentId, siblings);
    }
    return { topLevel: top, childrenByParent: byParent };
  }, [comments]);

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2">
        <MessageCircle className="h-5 w-5" />
        <h2 className="text-xl font-semibold">{t("commentsTitle")}</h2>
        {!loading && <span className="text-muted-foreground text-sm">({comments.length})</span>}
      </div>

      {currentUserId && (
        <CommentForm recipeId={recipeId} onSubmit={load} placeholder={t("commentPlaceholder")} />
      )}

      {loading ? (
        <p className="text-sm text-muted-foreground">{tCommon("loading")}</p>
      ) : topLevel.length === 0 ? (
        <p className="text-sm text-muted-foreground">{t("noCommentsYet")}</p>
      ) : (
        <div className="space-y-6">
          {topLevel.map((comment, i) => (
            <div key={comment.id}>
              {i > 0 && <Separator className="mb-6" />}
              <CommentItem
                comment={comment}
                childrenByParent={childrenByParent}
                depth={0}
                currentUserId={currentUserId}
                recipeId={recipeId}
                onRefresh={load}
              />
            </div>
          ))}
          {topLevelOffset < topLevelTotal && (
            <div className="flex justify-center pt-2">
              <Button size="sm" variant="outline" onClick={() => void loadMore()} disabled={loadingMore}>
                {loadingMore ? t("loadingMoreComments") : t("loadMoreComments")}
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}