From eb28a00abdf13b5b3bf855960663d22794ab91c2 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 12 Jun 2026 21:35:29 +0330
Subject: [PATCH] feat(blog): add queued asset uploads

---
 src/lib/api.ts                |  46 +++++
 src/views/AdminBlogAssets.tsx | 339 +++++++++++++++++++++++++++-------
 2 files changed, 321 insertions(+), 64 deletions(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index c14a4d8..b585cae 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -562,6 +562,52 @@ class ApiClient {
     return response.json() as Promise<Types.PostAssetSchema>;
   }
 
+  uploadBlogPostAssetWithProgress(
+    postId: number,
+    file: File,
+    data: { title?: string; alt_text?: string; caption?: string } = {},
+    onProgress?: (progress: number) => void,
+  ) {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('title', data.title ?? '');
+    formData.append('alt_text', data.alt_text ?? '');
+    formData.append('caption', data.caption ?? '');
+
+    const token = this.getStorageValue('access_token');
+
+    return new Promise<Types.PostAssetSchema>((resolve, reject) => {
+      const request = new XMLHttpRequest();
+      request.open('POST', `${this.baseUrl}/api/blog/admin/posts/${postId}/assets`);
+      if (token) {
+        request.setRequestHeader('Authorization', `Bearer ${token}`);
+      }
+
+      request.upload.onprogress = (event) => {
+        if (!event.lengthComputable) return;
+        onProgress?.(Math.round((event.loaded / event.total) * 100));
+      };
+
+      request.onload = () => {
+        let body: (Types.PostAssetSchema & ApiErrorBody) | null = null;
+        try {
+          body = request.responseText ? JSON.parse(request.responseText) as Types.PostAssetSchema & ApiErrorBody : null;
+        } catch {
+          body = null;
+        }
+        if (request.status >= 200 && request.status < 300 && body) {
+          onProgress?.(100);
+          resolve(body);
+          return;
+        }
+        reject(new Error(body?.error || body?.detail || 'Asset upload failed'));
+      };
+
+      request.onerror = () => reject(new Error('Asset upload failed'));
+      request.send(formData);
+    });
+  }
+
   async deleteBlogPostAsset(postId: number, assetId: number) {
     return this.request<Types.MessageSchema>(`/api/blog/admin/posts/${postId}/assets/${assetId}`, {
       method: 'DELETE',
diff --git a/src/views/AdminBlogAssets.tsx b/src/views/AdminBlogAssets.tsx
index 099a73f..a828710 100644
--- a/src/views/AdminBlogAssets.tsx
+++ b/src/views/AdminBlogAssets.tsx
@@ -1,29 +1,95 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { ArrowRight, Copy, Loader2, Trash2, UploadCloud } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  AlertCircle,
+  ArrowRight,
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  File,
+  FileArchive,
+  FileText,
+  ImageIcon,
+  Loader2,
+  Trash2,
+  UploadCloud,
+  Video,
+  X,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Progress } from "@/components/ui/progress";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
-import { resolveErrorMessage } from "@/lib/utils";
+import { cn, resolveErrorMessage } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
 
 type Props = {
   postId: number;
 };
 
+type QueueStatus = "queued" | "uploading" | "uploaded" | "failed";
+
+type QueueItem = {
+  id: string;
+  file: File;
+  progress: number;
+  status: QueueStatus;
+  error?: string;
+};
+
+const formatSize = (size: number) => {
+  if (size < 1024 * 1024) return `${Math.ceil(size / 1024)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const fileKindFromAsset = (asset: Types.PostAssetSchema) => asset.file_type;
+
+const fileKindFromFile = (file: File): Types.PostAssetSchema["file_type"] => {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.includes("zip") || /\.(zip|rar|7z|tar|gz)$/i.test(file.name)) return "archive";
+  if (file.type || /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|md)$/i.test(file.name)) return "document";
+  return "other";
+};
+
+const iconForKind = (kind: Types.PostAssetSchema["file_type"]) => {
+  if (kind === "image") return ImageIcon;
+  if (kind === "video") return Video;
+  if (kind === "document") return FileText;
+  if (kind === "archive") return FileArchive;
+  return File;
+};
+
+const statusLabel: Record<QueueStatus, string> = {
+  queued: "در صف",
+  uploading: "در حال آپلود",
+  uploaded: "آپلود شد",
+  failed: "ناموفق",
+};
+
 export default function AdminBlogAssets({ postId }: Props) {
   const router = useRouter();
   const { toast } = useToast();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const processingRef = useRef(false);
   const [post, setPost] = useState<Types.PostDetailSchema | null>(null);
   const [assets, setAssets] = useState<Types.PostAssetSchema[]>([]);
+  const [queue, setQueue] = useState<QueueItem[]>([]);
   const [loading, setLoading] = useState(true);
-  const [uploading, setUploading] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [previewAsset, setPreviewAsset] = useState<Types.PostAssetSchema | null>(null);
+
+  const hasActiveUpload = queue.some((item) => item.status === "uploading");
+  const queueSummary = useMemo(() => {
+    const uploaded = queue.filter((item) => item.status === "uploaded").length;
+    const failed = queue.filter((item) => item.status === "failed").length;
+    return { uploaded, failed, total: queue.length };
+  }, [queue]);
 
   const loadData = async () => {
     if (!Number.isFinite(postId)) {
@@ -55,27 +121,71 @@ export default function AdminBlogAssets({ postId }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [postId]);
 
-  const uploadAsset = async (file: File) => {
-    setUploading(true);
-    try {
-      const asset = await api.uploadBlogPostAsset(postId, file, { title: file.name });
-      setAssets((prev) => [asset, ...prev]);
-      toast({ title: "فایل آپلود شد", variant: "success" });
-    } catch (error) {
-      toast({
-        title: "آپلود ناموفق بود",
-        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
-        variant: "destructive",
+  useEffect(() => {
+    const nextItem = queue.find((item) => item.status === "queued");
+    if (!nextItem || processingRef.current) return;
+
+    processingRef.current = true;
+    setQueue((current) =>
+      current.map((item) => (item.id === nextItem.id ? { ...item, status: "uploading", progress: 1 } : item)),
+    );
+
+    api.uploadBlogPostAssetWithProgress(
+      postId,
+      nextItem.file,
+      { title: nextItem.file.name },
+      (progress) => {
+        setQueue((current) =>
+          current.map((item) => (item.id === nextItem.id ? { ...item, progress: Math.max(progress, item.progress) } : item)),
+        );
+      },
+    )
+      .then((asset) => {
+        setAssets((current) => [asset, ...current]);
+        setQueue((current) =>
+          current.map((item) => (item.id === nextItem.id ? { ...item, status: "uploaded", progress: 100 } : item)),
+        );
+      })
+      .catch((error) => {
+        setQueue((current) =>
+          current.map((item) =>
+            item.id === nextItem.id
+              ? { ...item, status: "failed", error: resolveErrorMessage(error, "آپلود ناموفق بود") }
+              : item,
+          ),
+        );
+      })
+      .finally(() => {
+        processingRef.current = false;
+        setQueue((current) => [...current]);
       });
-    } finally {
-      setUploading(false);
-    }
+  }, [postId, queue]);
+
+  const addFilesToQueue = (files: FileList | File[]) => {
+    const nextFiles = Array.from(files);
+    if (!nextFiles.length) return;
+    setQueue((current) => [
+      ...current,
+      ...nextFiles.map((file) => ({
+        id: `${file.name}-${file.size}-${file.lastModified}-${crypto.randomUUID()}`,
+        file,
+        progress: 0,
+        status: "queued" as const,
+      })),
+    ]);
   };
 
   const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+    if (event.target.files) addFilesToQueue(event.target.files);
     event.currentTarget.value = "";
-    if (file) void uploadAsset(file);
+  };
+
+  const removeQueueItem = (itemId: string) => {
+    setQueue((current) => current.filter((item) => item.id !== itemId || item.status === "uploading"));
+  };
+
+  const clearFinishedQueue = () => {
+    setQueue((current) => current.filter((item) => item.status === "queued" || item.status === "uploading"));
   };
 
   const copySnippet = async (asset: Types.PostAssetSchema) => {
@@ -101,6 +211,15 @@ export default function AdminBlogAssets({ postId }: Props) {
     }
   };
 
+  const openAssetPreview = (asset: Types.PostAssetSchema) => {
+    const fileUrl = asset.absolute_file_url;
+    if (asset.file_type === "image" || asset.file_type === "video") {
+      setPreviewAsset(asset);
+      return;
+    }
+    if (fileUrl) window.open(fileUrl, "_blank", "noopener,noreferrer");
+  };
+
   if (loading) {
     return (
       <div className="flex min-h-[50vh] items-center justify-center" dir="rtl">
@@ -111,7 +230,7 @@ export default function AdminBlogAssets({ postId }: Props) {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col gap-4 md:flex-row-reverse md:items-center md:justify-between">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <div className="text-right">
           <h2 className="text-2xl font-bold">مرکز آپلود نوشته</h2>
           <p className="mt-1 text-sm text-muted-foreground">
@@ -124,56 +243,129 @@ export default function AdminBlogAssets({ postId }: Props) {
         </Button>
       </div>
 
-      <Card>
-        <CardHeader className="text-right">
-          <CardTitle>آپلود فایل</CardTitle>
-          <CardDescription>تصاویر، ویدئوها، اسناد و فایل‌های فشرده مجاز هستند. لینک مارک‌داون هر فایل بعد از آپلود قابل کپی است.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-5">
-          <input ref={fileInputRef} type="file" className="hidden" onChange={onFileChange} />
-          <Button variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
-            {uploading ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <UploadCloud className="ml-2 h-4 w-4" />}
-            آپلود فایل
-          </Button>
+      <Card className="overflow-hidden">
+        <CardContent className="space-y-5 p-4 md:p-6">
+          <input ref={fileInputRef} type="file" multiple className="hidden" onChange={onFileChange} />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="flex min-h-48 w-full flex-col items-center justify-center rounded-2xl border border-dashed bg-muted/20 p-6 text-center transition hover:bg-muted/40"
+          >
+            <UploadCloud className="mb-3 h-12 w-12 text-muted-foreground" />
+            <span className="font-semibold">افزودن فایل‌های بیشتر</span>
+            <span className="mt-1 text-sm text-muted-foreground">چند فایل را همزمان انتخاب کنید؛ فایل‌ها یکی‌یکی آپلود می‌شوند.</span>
+          </button>
 
-          {assets.length ? (
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {assets.map((asset) => (
-                <div key={asset.id} className="rounded-2xl border p-3">
-                  <div className="flex flex-row-reverse items-start justify-between gap-3">
-                    <div className="text-right">
-                      <div className="flex flex-wrap items-center justify-end gap-2">
-                        <Badge variant="secondary">{asset.file_type}</Badge>
-                        <p className="font-medium">{asset.title}</p>
-                      </div>
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {asset.mime_type || "file"} · {Math.ceil(asset.size / 1024)} KB
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 gap-1">
-                      <Button variant="ghost" size="icon" onClick={() => copySnippet(asset)}>
-                        <Copy className="h-4 w-4" />
-                      </Button>
+          {queue.length ? (
+            <div className="space-y-3">
+              <div className="flex flex-col gap-2 text-right text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+                <Button variant="outline" size="sm" onClick={clearFinishedQueue} disabled={hasActiveUpload}>
+                  پاکسازی فایل‌های تمام‌شده
+                </Button>
+                <span>
+                  {queueSummary.total} فایل · {queueSummary.uploaded} موفق · {queueSummary.failed} ناموفق
+                </span>
+              </div>
+              {queue.map((item) => {
+                const kind = fileKindFromFile(item.file);
+                const Icon = iconForKind(kind);
+                return (
+                  <div key={item.id} className="rounded-2xl border bg-background p-3">
+                    <div className="flex items-center gap-3">
                       <Button
+                        type="button"
                         variant="ghost"
                         size="icon"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => deleteAsset(asset.id)}
-                        disabled={deletingId === asset.id}
+                        className="h-8 w-8 shrink-0 text-muted-foreground"
+                        disabled={item.status === "uploading"}
+                        onClick={() => removeQueueItem(item.id)}
                       >
-                        {deletingId === asset.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                        <X className="h-4 w-4" />
                       </Button>
+                      <div className="min-w-0 flex-1 text-right">
+                        <p className="truncate text-sm font-medium">{item.file.name}</p>
+                        <p className="text-xs text-muted-foreground">{formatSize(item.file.size)}</p>
+                      </div>
+                      <Badge
+                        variant={item.status === "failed" ? "destructive" : item.status === "uploaded" ? "default" : "secondary"}
+                        className="shrink-0"
+                      >
+                        {statusLabel[item.status]}
+                      </Badge>
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted">
+                        <Icon className="h-5 w-5 text-muted-foreground" />
+                      </div>
+                    </div>
+                    <div className="mt-3 flex items-center gap-2">
+                      {item.status === "uploaded" ? <CheckCircle2 className="h-4 w-4 text-emerald-600" /> : null}
+                      {item.status === "failed" ? <AlertCircle className="h-4 w-4 text-destructive" /> : null}
+                      <Progress value={item.progress} className="h-2" />
+                    </div>
+                    {item.error ? <p className="mt-2 text-right text-xs text-destructive">{item.error}</p> : null}
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+
+          {assets.length ? (
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              {assets.map((asset) => {
+                const kind = fileKindFromAsset(asset);
+                const Icon = iconForKind(kind);
+                const previewUrl = asset.absolute_thumbnail_url || asset.absolute_preview_url || asset.absolute_file_url;
+                return (
+                  <div key={asset.id} className="rounded-2xl border bg-background p-3">
+                    <button
+                      type="button"
+                      onClick={() => openAssetPreview(asset)}
+                      className={cn(
+                        "flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-muted text-muted-foreground",
+                        asset.absolute_file_url ? "cursor-pointer hover:bg-muted/70" : "cursor-default",
+                      )}
+                    >
+                      {kind === "image" && previewUrl ? (
+                        <img src={previewUrl} alt={asset.alt_text || asset.title} className="h-full w-full object-cover" />
+                      ) : (
+                        <Icon className="h-10 w-10" />
+                      )}
+                    </button>
+                    <div className="mt-3 flex items-start gap-3">
+                      <div className="flex shrink-0 gap-1">
+                        <Button variant="ghost" size="icon" onClick={() => copySnippet(asset)} aria-label="کپی مارک‌داون">
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                        {asset.absolute_file_url ? (
+                          <Button variant="ghost" size="icon" asChild aria-label="باز کردن فایل">
+                            <a href={asset.absolute_file_url} target="_blank" rel="noreferrer">
+                              <ExternalLink className="h-4 w-4" />
+                            </a>
+                          </Button>
+                        ) : null}
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive hover:text-destructive"
+                          onClick={() => deleteAsset(asset.id)}
+                          disabled={deletingId === asset.id}
+                          aria-label="حذف فایل"
+                        >
+                          {deletingId === asset.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                        </Button>
+                      </div>
+                      <div className="min-w-0 flex-1 text-right">
+                        <div className="flex flex-wrap items-center justify-end gap-2">
+                          <Badge variant="secondary">{asset.file_type}</Badge>
+                          <p className="truncate font-medium">{asset.title}</p>
+                        </div>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          {asset.mime_type || "file"} · {formatSize(asset.size)}
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  {asset.absolute_preview_url ? (
-                    <img src={asset.absolute_preview_url} alt={asset.alt_text || asset.title} className="mt-3 aspect-video w-full rounded-xl object-cover" />
-                  ) : asset.absolute_file_url ? (
-                    <a className="mt-3 block truncate rounded-xl bg-muted px-3 py-2 text-left text-xs underline" href={asset.absolute_file_url} target="_blank" rel="noreferrer">
-                      {asset.absolute_file_url}
-                    </a>
-                  ) : null}
-                </div>
-              ))}
+                );
+              })}
             </div>
           ) : (
             <div className="rounded-2xl border border-dashed p-8 text-center text-sm text-muted-foreground">
@@ -182,6 +374,25 @@ export default function AdminBlogAssets({ postId }: Props) {
           )}
         </CardContent>
       </Card>
+
+      <Dialog open={Boolean(previewAsset)} onOpenChange={(open) => !open && setPreviewAsset(null)}>
+        <DialogContent className="max-w-4xl" dir="rtl">
+          <DialogHeader className="text-right">
+            <DialogTitle>{previewAsset?.title}</DialogTitle>
+            <DialogDescription>{previewAsset?.caption || previewAsset?.mime_type || "پیش‌نمایش فایل"}</DialogDescription>
+          </DialogHeader>
+          {previewAsset?.file_type === "image" ? (
+            <img
+              src={previewAsset.absolute_preview_url || previewAsset.absolute_file_url || ""}
+              alt={previewAsset.alt_text || previewAsset.title}
+              className="max-h-[75vh] w-full rounded-2xl object-contain"
+            />
+          ) : null}
+          {previewAsset?.file_type === "video" && previewAsset.absolute_file_url ? (
+            <video src={previewAsset.absolute_file_url} className="max-h-[75vh] w-full rounded-2xl" controls />
+          ) : null}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }