feat(blog): wire comment moderation and writers

src/components/BlogPostInteractions.tsx

@@ -1,15 +1,36 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { Loader2, MessageSquare, Reply, Send, Trash2 } from "lucide-react";
+import {
+  Check,
+  Edit3,
+  Eye,
+  EyeOff,
+  Loader2,
+  MessageSquare,
+  Reply,
+  Send,
+  Trash2,
+  X,
+} from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { Link } from "@/lib/router";
-import { formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { cn, formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
@@ -25,11 +46,15 @@ function avatarInitial(author: Types.CommentSchema["author"]) {
   return displayName(author).trim()[0] || "ک";
 }
 
-function countComments(comments: Types.CommentSchema[]) {
-  return comments.reduce(
-    (total, comment) => total + 1 + countComments(comment.replies || []),
-    0,
-  );
+function visibleCommentCount(comments: Types.CommentSchema[]) {
+  return comments.reduce((total, comment) => {
+    if (comment.is_deleted || comment.is_hidden) return total;
+    return total + 1 + visibleCommentCount(comment.replies || []);
+  }, 0);
+}
+
+function allDescendants(comment: Types.CommentSchema): Types.CommentSchema[] {
+  return (comment.replies || []).flatMap((reply) => [reply, ...allDescendants(reply)]);
 }
 
 function findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
@@ -52,8 +77,14 @@ export default function BlogPostInteractions({
   const [commentCount, setCommentCount] = useState(initialComments);
   const [content, setContent] = useState("");
   const [replyTo, setReplyTo] = useState<number | null>(null);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState("");
+  const [expandedReplies, setExpandedReplies] = useState<Set<number>>(new Set());
+  const [deleteTarget, setDeleteTarget] = useState<Types.CommentSchema | null>(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [moderatingId, setModeratingId] = useState<number | null>(null);
 
   const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);
 
@@ -65,7 +96,7 @@ export default function BlogPostInteractions({
   const loadComments = async () => {
     const data = await api.getComments(slug);
     setComments(data);
-    setCommentCount(countComments(data));
+    setCommentCount(visibleCommentCount(data));
   };
 
   useEffect(() => {
@@ -74,7 +105,7 @@ export default function BlogPostInteractions({
       .then((data) => {
         if (!mounted) return;
         setComments(data);
-        setCommentCount(countComments(data));
+        setCommentCount(visibleCommentCount(data));
       })
       .finally(() => {
         if (mounted) setLoading(false);
@@ -107,125 +138,331 @@ export default function BlogPostInteractions({
 
   const hideComment = async (commentId: number) => {
     try {
+      setModeratingId(commentId);
       await api.hideComment(commentId);
       await loadComments();
       toast({ title: "کامنت مخفی شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "مخفی کردن کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
+
+  const unhideComment = async (commentId: number) => {
+    try {
+      setModeratingId(commentId);
+      await api.unhideComment(commentId);
+      await loadComments();
+      toast({ title: "کامنت دوباره نمایش داده شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "نمایش دوباره کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setModeratingId(null);
+    }
+  };
+
+  const deleteComment = async () => {
+    if (!deleteTarget) return;
+    try {
+      setModeratingId(deleteTarget.id);
+      await api.deleteComment(deleteTarget.id);
+      setDeleteTarget(null);
+      await loadComments();
+      toast({ title: "کامنت حذف شد", variant: "success" });
     } catch (error) {
       toast({
         title: "حذف کامنت ناموفق بود",
         description: resolveErrorMessage(error, "دوباره تلاش کنید"),
         variant: "destructive",
       });
+    } finally {
+      setModeratingId(null);
     }
   };
 
-  const renderComment = (comment: Types.CommentSchema, nested = false) => (
-    <div
-      key={comment.id}
-      className={nested ? "relative mr-7 border-r-2 border-primary/20 pr-5" : ""}
-    >
-      <div className="flex items-start gap-3 text-right">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-lg font-black text-primary shadow-inner">
-          {avatarInitial(comment.author)}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm">
-            <span className="font-semibold">{displayName(comment.author)}</span>
-            <span className="text-xs text-muted-foreground">{formatJalaliDate(comment.created_at)}</span>
-          </div>
-          <div className="rounded-bl-3xl rounded-br-md rounded-tl-3xl rounded-tr-3xl border border-border/70 bg-muted/35 px-4 py-3 shadow-sm">
-            <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
-          </div>
-          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-            {isAuthenticated ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 gap-1 rounded-full px-3 text-xs"
-                onClick={() => setReplyTo(comment.id)}
-              >
-                <Reply className="h-3.5 w-3.5" />
-                پاسخ
-              </Button>
-            ) : null}
-            {canModerate ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
-                onClick={() => hideComment(comment.id)}
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-                مخفی‌کردن
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      </div>
-      {comment.replies?.length ? (
-        <div className="mt-4 space-y-4">
-          {comment.replies.map((reply) => renderComment(reply, true))}
-        </div>
-      ) : null}
-    </div>
-  );
+  const startEdit = (comment: Types.CommentSchema) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+    setReplyTo(null);
+  };
 
-  return (
-    <Card className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
-      <CardHeader className="text-right">
-        <CardTitle className="flex items-center justify-end gap-2 text-2xl">
-          کامنت‌ها
-          <MessageSquare className="h-5 w-5 text-primary" />
-        </CardTitle>
-        <CardDescription>
-          {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        {!isAuthenticated ? (
-          <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
-            برای ثبت کامنت باید وارد حساب کاربری شوید.
-            <Button asChild className="mr-3" size="sm">
-              <Link to="/auth">ورود / ثبت‌نام</Link>
-            </Button>
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditContent("");
+  };
+
+  const saveEdit = async () => {
+    const trimmed = editContent.trim();
+    if (!editingId || !trimmed) return;
+    try {
+      setSavingEdit(true);
+      await api.updateComment(editingId, { content: trimmed });
+      await loadComments();
+      cancelEdit();
+      toast({ title: "کامنت ویرایش شد", variant: "success" });
+    } catch (error) {
+      toast({
+        title: "ویرایش کامنت ناموفق بود",
+        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
+        variant: "destructive",
+      });
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const toggleExpandedReplies = (commentId: number) => {
+    setExpandedReplies((current) => {
+      const next = new Set(current);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+      } else {
+        next.add(commentId);
+      }
+      return next;
+    });
+  };
+
+  const renderComment = (comment: Types.CommentSchema, nested = false, compact = false, parentHidden = false) => {
+    const isOwnComment = Boolean(user?.id === comment.author.id);
+    const isEditing = editingId === comment.id;
+    const hidden = parentHidden || Boolean(comment.is_hidden);
+    const deeperReplies = nested ? allDescendants(comment) : [];
+    const showDeeperReplies = expandedReplies.has(comment.id);
+
+    return (
+      <div
+        key={comment.id}
+        className={cn(
+          "relative",
+          nested && "mr-6 border-r border-primary/20 pr-4",
+          compact && "rounded-2xl bg-muted/25 p-3",
+        )}
+      >
+        <div className={cn("flex items-start gap-3 text-right", hidden && "opacity-75")}>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/12 text-base font-black text-primary shadow-inner">
+            {avatarInitial(comment.author)}
           </div>
-        ) : (
-          <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
-            {replyTarget ? (
-              <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
-                <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
-                  لغو پاسخ
-                </Button>
-                <span>پاسخ به {displayName(replyTarget.author)}</span>
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 flex flex-wrap items-center justify-start gap-2 text-sm">
+              <span className="font-semibold">{displayName(comment.author)}</span>
+              <time className="text-xs text-muted-foreground" dateTime={comment.created_at}>
+                {formatJalaliDate(comment.created_at)}
+              </time>
+              {hidden ? (
+                <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600 dark:text-amber-300">
+                  مخفی شده
+                </span>
+              ) : null}
+            </div>
+            <div>
+              {isEditing ? (
+                <div className="space-y-3">
+                  <Textarea
+                    value={editContent}
+                    onChange={(event) => setEditContent(event.target.value)}
+                    className="min-h-24 rounded-2xl bg-background text-right"
+                  />
+                  <div className="flex flex-wrap justify-start gap-2">
+                    <Button type="button" size="sm" variant="ghost" className="gap-1 rounded-full" onClick={cancelEdit}>
+                      <X className="h-3.5 w-3.5" />
+                      لغو
+                    </Button>
+                    <Button type="button" size="sm" className="gap-1 rounded-full" onClick={saveEdit} disabled={savingEdit || !editContent.trim()}>
+                      {savingEdit ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+                      ذخیره
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
+              )}
+            </div>
+            {!isEditing ? (
+              <div className="mt-2 flex flex-wrap items-center justify-start gap-2 text-xs text-muted-foreground">
+                {isAuthenticated && !hidden && !compact ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => setReplyTo(comment.id)}
+                  >
+                    <Reply className="h-3.5 w-3.5" />
+                    پاسخ
+                  </Button>
+                ) : null}
+                {isOwnComment && !hidden ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 gap-1 rounded-full px-3 text-xs"
+                    onClick={() => startEdit(comment)}
+                  >
+                    <Edit3 className="h-3.5 w-3.5" />
+                    ویرایش
+                  </Button>
+                ) : null}
+                {canModerate ? (
+                  <>
+                    {hidden ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs text-primary"
+                        onClick={() => unhideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Eye className="h-3.5 w-3.5" />}
+                        نمایش مجدد
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 rounded-full px-3 text-xs"
+                        onClick={() => hideComment(comment.id)}
+                        disabled={moderatingId === comment.id}
+                      >
+                        {moderatingId === comment.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <EyeOff className="h-3.5 w-3.5" />}
+                        مخفی کردن
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
+                      onClick={() => setDeleteTarget(comment)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                      حذف
+                    </Button>
+                  </>
+                ) : null}
               </div>
             ) : null}
-            <Textarea
-              value={content}
-              onChange={(event) => setContent(event.target.value)}
-              placeholder="کامنت خود را بنویسید..."
-              className="min-h-28 rounded-2xl bg-background text-right"
-            />
-            <div className="mt-3 flex justify-end">
-              <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
-                {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
-                ثبت کامنت
+          </div>
+        </div>
+        {!compact && !nested && comment.replies?.length ? (
+          <div className="mt-4 space-y-4">
+                {comment.replies.map((reply) => renderComment(reply, true, false, hidden))}
+          </div>
+        ) : null}
+        {!compact && nested && deeperReplies.length ? (
+          <div className="mt-3 mr-6">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="rounded-full text-xs"
+              onClick={() => toggleExpandedReplies(comment.id)}
+            >
+              {showDeeperReplies ? "بستن پاسخ‌های بیشتر" : `نمایش ${toPersianDigits(deeperReplies.length)} پاسخ بیشتر`}
+            </Button>
+            {showDeeperReplies ? (
+              <div className="mt-3 space-y-3">
+                {deeperReplies.map((reply) => renderComment(reply, false, true, hidden))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  const deleteReplyCount = deleteTarget ? allDescendants(deleteTarget).length : 0;
+
+  return (
+    <>
+      <Card className="mt-10 overflow-hidden rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
+        <CardHeader className="border-b border-border/60 bg-muted/20 text-right">
+          <CardTitle className="flex items-center justify-start gap-2 text-2xl">
+            <MessageSquare className="h-5 w-5 text-primary" />
+            کامنت‌ها
+          </CardTitle>
+          <CardDescription>
+            {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6 p-4 md:p-6">
+          {!isAuthenticated ? (
+            <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
+              برای ثبت کامنت باید وارد حساب کاربری شوید.
+              <Button asChild className="mr-3" size="sm">
+                <Link to="/auth">ورود / ثبت‌نام</Link>
               </Button>
             </div>
-          </div>
-        )}
+          ) : (
+            <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
+              {replyTarget ? (
+                <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
+                  <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
+                    لغو پاسخ
+                  </Button>
+                  <span>پاسخ به {displayName(replyTarget.author)}</span>
+                </div>
+              ) : null}
+              <Textarea
+                value={content}
+                onChange={(event) => setContent(event.target.value)}
+                placeholder="کامنت خود را بنویسید..."
+                className="min-h-32 rounded-2xl bg-background text-right"
+              />
+              <div className="mt-3 flex justify-start">
+                <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
+                  {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                  ثبت کامنت
+                </Button>
+              </div>
+            </div>
+          )}
 
-        {loading ? (
-          <div className="flex justify-center py-8 text-muted-foreground">
-            <Loader2 className="h-5 w-5 animate-spin" />
-          </div>
-        ) : comments.length ? (
-          <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
-        ) : (
-          <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
-            هنوز کامنتی ثبت نشده است.
-          </div>
-        )}
-      </CardContent>
-    </Card>
+          {loading ? (
+            <div className="flex justify-center py-8 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : comments.length ? (
+            <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
+          ) : (
+            <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
+              هنوز کامنتی ثبت نشده است.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent dir="rtl" className="text-right">
+          <AlertDialogHeader>
+            <AlertDialogTitle>حذف کامنت</AlertDialogTitle>
+            <AlertDialogDescription className="leading-7">
+              این عملیات کامنت را به‌صورت نرم حذف می‌کند و دیگر در سایت نمایش داده نمی‌شود.
+              {deleteReplyCount ? (
+                <span className="mt-2 block font-medium text-destructive">
+                  {toPersianDigits(deleteReplyCount)} پاسخ وابسته به این کامنت هم حذف می‌شود.
+                </span>
+              ) : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:justify-start">
+            <AlertDialogCancel>انصراف</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={deleteComment}
+            >
+              حذف کامنت
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }