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

"use client";

import { useState, useEffect, useCallback, useMemo, 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";

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;
const MENTION_REGEX = /@([a-z0-9_-]{3,30})/gi;

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);

  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("");
      onSubmit();
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="space-y-2">
      <Textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder={placeholder ?? t("commentPlaceholder")}
        rows={2}
        disabled={submitting}
      />
      <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>
  );
}