From 0deb587a82208ae76594f880dc4e2ea560ca9915 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Tue, 14 Oct 2025 15:17:22 +0700
Subject: [PATCH] fix: detail article in admin page

---
 .../content/audio/components/columns.tsx      |   11 +-
 .../admin/content/audio/detail/[id]/page.tsx  |    4 +-
 .../admin/content/text/components/columns.tsx |   11 +-
 .../content/text/components/table-teks.tsx    |   22 +-
 .../admin/content/text/create/page.tsx        |    5 +-
 .../admin/content/text/detail/[id]/page.tsx   |    5 +-
 .../audio-visual/video-detail-form.tsx        |  266 +-
 .../form/content/audio-visual/video-form.tsx  | 3275 +++++++++--------
 .../form/content/audio/audio-detail-form.tsx  |   62 +-
 .../content/document/teks-detail-form.tsx     |  136 +-
 .../form/content/document/teks-form.tsx       |   35 +-
 components/form/content/file-preview-text.tsx |   97 +-
 components/landing-page/media-update.tsx      |   54 +-
 13 files changed, 2171 insertions(+), 1812 deletions(-)

diff --git a/app/[locale]/(admin)/admin/content/audio/components/columns.tsx b/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
index 78b4b9b..43ba06f 100644
--- a/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/components/columns.tsx
@@ -77,12 +77,21 @@ const useTableColumns = () => {
         return <span className="whitespace-nowrap">{formattedDate}</span>;
       },
     },
+    // {
+    //   accessorKey: "creatorName",
+    //   header: "Creator Group",
+    //   cell: ({ row }) => (
+    //     <span className="whitespace-nowrap">
+    //       {row.getValue("creatorName") || row.getValue("createdByName")}
+    //     </span>
+    //   ),
+    // },
     {
       accessorKey: "creatorName",
       header: "Creator Group",
       cell: ({ row }) => (
         <span className="whitespace-nowrap">
-          {row.getValue("creatorName") || row.getValue("createdByName")}
+          {row.original.creatorName || row.original.createdByName || "-"}
         </span>
       ),
     },
diff --git a/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
index c2ab04f..56d1ca3 100644
--- a/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/audio/detail/[id]/page.tsx
@@ -1,9 +1,11 @@
 import FormAudioDetail from "@/components/form/content/audio/audio-detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 
 const AudioDetailPage = async () => {
   return (
     <div>
-      <div className="space-y-4">
+      <SiteBreadcrumb />
+      <div className="space-y-4 bg-slate-100">
         <FormAudioDetail />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/text/components/columns.tsx b/app/[locale]/(admin)/admin/content/text/components/columns.tsx
index 5ea035b..ab78050 100644
--- a/app/[locale]/(admin)/admin/content/text/components/columns.tsx
+++ b/app/[locale]/(admin)/admin/content/text/components/columns.tsx
@@ -77,12 +77,21 @@ const useTableColumns = () => {
         return <span className="whitespace-nowrap">{formattedDate}</span>;
       },
     },
+    // {
+    //   accessorKey: "creatorName",
+    //   header: "Creator Group",
+    //   cell: ({ row }) => (
+    //     <span className="whitespace-nowrap">
+    //       {row.getValue("creatorName") || row.getValue("createdByName")}
+    //     </span>
+    //   ),
+    // },
     {
       accessorKey: "creatorName",
       header: "Creator Group",
       cell: ({ row }) => (
         <span className="whitespace-nowrap">
-          {row.getValue("creatorName") || row.getValue("createdByName")}
+          {row.original.creatorName || row.original.createdByName || "-"}
         </span>
       ),
     },
diff --git a/app/[locale]/(admin)/admin/content/text/components/table-teks.tsx b/app/[locale]/(admin)/admin/content/text/components/table-teks.tsx
index 7818ca3..bc8a491 100644
--- a/app/[locale]/(admin)/admin/content/text/components/table-teks.tsx
+++ b/app/[locale]/(admin)/admin/content/text/components/table-teks.tsx
@@ -66,7 +66,6 @@ import useTableColumns from "./columns";
 const TableTeks = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -76,18 +75,14 @@ const TableTeks = () => {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
-  const [showData, setShowData] = React.useState("50");
+  const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number(showData),
   });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
-  const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState<string>("");
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
-
   const [categories, setCategories] = React.useState<any[]>([]);
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
     []
@@ -99,7 +94,6 @@ const TableTeks = () => {
   const [filterByCreator, setFilterByCreator] = React.useState("");
   const [filterBySource, setFilterBySource] = React.useState("");
   const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");
-
   const roleId = getCookiesDecrypt("urie");
   const columns = useTableColumns();
   const table = useReactTable({
@@ -179,13 +173,12 @@ const TableTeks = () => {
       : "";
 
     try {
-      // Using the new interface-based approach for video content
       const filters: ArticleFilters = {
-        page: page,
+        page,
         totalPage: Number(showData),
         title: search || undefined,
         categoryId: categoryFilter ? Number(categoryFilter) : undefined,
-        typeId: 3, 
+        typeId: 3, // 🔹 text content
         statusId:
           statusFilter?.length > 0 ? Number(statusFilter[0]) : undefined,
         startDate: formattedStartDate || undefined,
@@ -194,14 +187,17 @@ const TableTeks = () => {
 
       const res = await listArticlesWithFilters(filters);
       const data = res?.data?.data;
+      const meta = res?.data?.meta;
 
       if (Array.isArray(data)) {
         data.forEach((item: any, index: number) => {
           item.no = (page - 1) * Number(showData) + index + 1;
         });
         setDataTable(data);
-        setTotalData(data.length);
-        setTotalPage(Math.ceil(data.length / Number(showData)));
+        setTotalData(meta?.count ?? data.length);
+        setTotalPage(
+          meta?.totalPage ?? Math.ceil(data.length / Number(showData))
+        );
       } else if (Array.isArray(data?.content)) {
         const contentData = data.content;
         contentData.forEach((item: any, index: number) => {
@@ -218,7 +214,7 @@ const TableTeks = () => {
         setTotalPage(1);
       }
     } catch (error) {
-      console.error("Error fetching tasks:", error);
+      console.error("Error fetching text content:", error);
       setDataTable([]);
       setTotalData(0);
       setTotalPage(1);
diff --git a/app/[locale]/(admin)/admin/content/text/create/page.tsx b/app/[locale]/(admin)/admin/content/text/create/page.tsx
index 83d87e1..b69509f 100644
--- a/app/[locale]/(admin)/admin/content/text/create/page.tsx
+++ b/app/[locale]/(admin)/admin/content/text/create/page.tsx
@@ -1,10 +1,11 @@
 import FormTeks from "@/components/form/content/document/teks-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 
 const TeksCreatePage = async () => {
   return (
     <div>
-      {/* <SiteBreadcrumb /> */}
-      <div className="space-y-4">
+      <SiteBreadcrumb />
+      <div className="space-y-4 bg-slate-100">
         <FormTeks />
       </div>
     </div>
diff --git a/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
index f20a280..38ba463 100644
--- a/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/content/text/detail/[id]/page.tsx
@@ -1,10 +1,11 @@
 import FormTeksDetail from "@/components/form/content/document/teks-detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 
 const TeksDetailPage = async () => {
   return (
     <div>
-      {/* <SiteBreadcrumb /> */}
-      <div className="space-y-4">
+      <SiteBreadcrumb />
+      <div className="space-y-4 bg-slate-100">
         <FormTeksDetail />
       </div>
     </div>
diff --git a/components/form/content/audio-visual/video-detail-form.tsx b/components/form/content/audio-visual/video-detail-form.tsx
index 984858f..b2d4074 100644
--- a/components/form/content/audio-visual/video-detail-form.tsx
+++ b/components/form/content/audio-visual/video-detail-form.tsx
@@ -21,8 +21,6 @@ import { Checkbox } from "@/components/ui/checkbox";
 import Cookies from "js-cookie";
 import {
   getArticleDetail,
-  getTagsBySubCategoryId,
-  listEnableCategory,
   publishMedia,
   submitApproval,
 } from "@/service/content/content";
@@ -47,7 +45,6 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
-import SuggestionModal from "@/components/modal/suggestions-modal";
 import { formatDateToIndonesian } from "@/utils/globals";
 import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
 import { listArticleCategories } from "@/service/content";
@@ -62,19 +59,13 @@ const ViewEditor = dynamic(() => import("@/components/editor/view-editor"), {
   ssr: false,
 });
 
-type Category = {
-  id: string;
-  title: string;
-};
-
+type Category = { id: string; title: string };
 type FileType = {
   id: number;
   fileName: string;
   fileUrl?: string;
   fileThumbnail?: string;
-  format?: string;
 };
-
 type Detail = {
   id: number;
   title: string;
@@ -137,46 +128,28 @@ export default function FormVideoDetail() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
   const { id } = useParams() as { id: string };
+
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
   const userLevelName = Cookies.get("state");
   const roleId = getCookiesDecrypt("urie");
+
   const [detail, setDetail] = useState<Detail | null>(null);
   const [categories, setCategories] = useState<Category[]>([]);
   const [files, setFiles] = useState<FileType[]>([]);
   const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
   const [approval, setApproval] = useState<any>();
   const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [status, setStatus] = useState("");
   const [description, setDescription] = useState("");
   const [filePlacements, setFilePlacements] = useState<string[][]>([]);
-  const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
-  const [refresh, setRefresh] = useState(false);
-  const [detailVideos, setDetailVideos] = useState<string[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState<string>("");
 
-  const {
-    control,
-    formState: { errors },
-  } = useForm({
-    resolver: zodResolver(videoSchema),
-  });
-
-  const getStatusName = (statusId: number): string => {
-    const statusMap: { [key: number]: string } = {
-      1: "Menunggu Review",
-      2: "Diterima",
-      3: "Minta Update",
-      4: "Ditolak",
-    };
-    return statusMap[statusId] || "Unknown";
-  };
+  const { control } = useForm({ resolver: zodResolver(videoSchema) });
 
   useEffect(() => {
-    if (userLevelId == "216" && roleId == "3") {
-      setIsUserMabesApprover(true);
-    }
+    if (userLevelId == "216" && roleId == "3") setIsUserMabesApprover(true);
   }, [userLevelId, roleId]);
 
   useEffect(() => {
@@ -193,29 +166,16 @@ export default function FormVideoDetail() {
       try {
         const response = await getArticleDetail(Number(id));
         const details = response?.data?.data;
-        setSelectedCategory(String(details.categories[0].id));
         const mappedDetail: Detail = {
           ...details,
+          statusId: details?.statusId,
           categoryId: details?.categories?.[0]?.id,
           htmlDescription: details?.htmlDescription,
-          statusName: getStatusName(details?.statusId),
           uploadedById: details?.createdById,
           files: details?.files || [],
-          categories: details?.categories || [],
         };
-
-        const mappedFiles =
-          details?.files?.map((f: any) => ({
-            id: f.id,
-            fileName: f.fileName,
-            fileUrl: f.fileUrl,
-            fileThumbnail: f.fileThumbnail,
-            format: f.format || "mp4",
-          })) || [];
-
         setDetail(mappedDetail);
-        setFiles(mappedFiles);
-        setDetailVideos(mappedFiles.map((f: any) => f.fileUrl || ""));
+        setFiles(details?.files || []);
         const approvals = await getDataApprovalByMediaUpload(mappedDetail.id);
         setApproval(approvals?.data?.data);
       } catch (err) {
@@ -223,33 +183,32 @@ export default function FormVideoDetail() {
       }
     }
     fetchDetail();
-  }, [id, refresh]);
+  }, [id]);
+
+  const getStatusName = (statusId: number) => {
+    const map: Record<number, string> = {
+      1: "Menunggu Review",
+      2: "Diterima",
+      3: "Minta Update",
+      4: "Ditolak",
+    };
+    return map[statusId] || "Unknown";
+  };
 
   const handleCheckboxChange = (id: number) => {
     setSelectedPublishers((prev) =>
-      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
     );
   };
 
-  const actionApproval = (e: string) => {
-    const temp = [];
-    for (const element of files) temp.push([]);
-    setFilePlacements(temp);
-    setStatus(e);
+  const actionApproval = (type: string) => {
+    const placements = files.map(() => []);
+    setFilePlacements(placements);
+    setStatus(type);
     setDescription("");
     setModalOpen(true);
   };
 
-  const submit = async () => {
-    if (
-      (description?.length > 1 && Number(status) == 3) ||
-      Number(status) == 2 ||
-      Number(status) == 4
-    ) {
-      await save();
-    }
-  };
-
   const save = async () => {
     const data = {
       action: status == "2" ? "approve" : status == "3" ? "revision" : "reject",
@@ -257,8 +216,8 @@ export default function FormVideoDetail() {
     };
     setModalOpen(false);
     loading();
-    const response = await submitApproval(id, data);
-    if (response?.error) return error(response.message);
+    const res = await submitApproval(id, data);
+    if (res?.error) return error(res.message);
     close();
     MySwal.fire({
       title: "Sukses",
@@ -272,23 +231,15 @@ export default function FormVideoDetail() {
     successCallback();
   };
 
-  if (!detail) {
-    return (
-      <div className="text-center py-20 text-gray-500">
-        Memuat detail video...
-      </div>
-    );
-  }
+  if (!detail) return <div className="p-10 text-gray-500">Memuat data...</div>;
 
   return (
     <form>
       <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
-        {/* LEFT SIDE */}
         <Card className="w-full lg:w-8/12 m-2">
           <div className="px-6 py-6">
             <p className="text-lg font-semibold mb-3">Form Video</p>
 
-            {/* Title */}
             <div className="space-y-2 py-3">
               <Label>Title</Label>
               <Controller
@@ -296,31 +247,22 @@ export default function FormVideoDetail() {
                 name="title"
                 render={({ field }) => (
                   <Input
-                    type="text"
-                    value={detail?.title}
+                    value={detail.title}
                     onChange={field.onChange}
-                    placeholder="Enter Title"
+                    disabled
                   />
                 )}
               />
-              {/* {errors.title?.message && (
-                <p className="text-red-400 text-sm">{errors.title.message}</p>
-              )} */}
             </div>
 
-            {/* Category */}
             <div className="py-3 w-full space-y-2">
               <Label>Category</Label>
-              <Select
-                value={selectedCategory}
-                onValueChange={setSelectedCategory}
-                disabled
-              >
+              <Select disabled value={String(detail.categoryId)}>
                 <SelectTrigger>
                   <SelectValue placeholder="Pilih kategori" />
                 </SelectTrigger>
                 <SelectContent>
-                  {categories?.map((cat) => (
+                  {categories.map((cat) => (
                     <SelectItem key={cat.id} value={String(cat.id)}>
                       {cat.title}
                     </SelectItem>
@@ -328,29 +270,12 @@ export default function FormVideoDetail() {
                 </SelectContent>
               </Select>
             </div>
-            {/* <div className="py-3 space-y-2">
-              <Label>Category</Label>
-              <Select disabled value={String(detail.categoryId)}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Pilih" />
-                </SelectTrigger>
-                <SelectContent>
-                  {categories.map((cat) => (
-                    <SelectItem key={cat.id} value={String(cat.id)}>
-                      {cat.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div> */}
 
-            {/* Description */}
             <div className="py-3 space-y-2">
               <Label>Description</Label>
               <ViewEditor initialData={detail.htmlDescription} />
             </div>
 
-            {/* Video Files */}
             <div className="space-y-2">
               <Label className="text-xl">File Media</Label>
               <Swiper
@@ -391,24 +316,19 @@ export default function FormVideoDetail() {
           </div>
         </Card>
 
-        {/* RIGHT SIDE */}
         <div className="w-full lg:w-4/12 m-2">
           <Card className="pb-3">
             <div className="px-3 py-3">
               <Label>Creator</Label>
-              <Input
-                value={detail.createdByName}
-                disabled
-                placeholder="Creator"
-              />
+              <Input value={detail.createdByName} disabled />
             </div>
 
             <div className="mt-3 px-3 space-y-2">
               <Label>Preview</Label>
               <Card className="mt-2 w-fit">
                 <img
-                  src={detail.thumbnailUrl}
-                  alt="Thumbnail"
+                  src={detail.thumbnailUrl || detail.thumbnailLink}
+                  alt="Thumbnail Gambar Utama"
                   className="h-[200px] rounded"
                 />
               </Card>
@@ -417,10 +337,10 @@ export default function FormVideoDetail() {
             <div className="px-3 py-3">
               <Label>Tags</Label>
               <div className="flex flex-wrap gap-2">
-                {detail.tags?.split(",").map((tag: string, index: number) => (
+                {detail.tags?.split(",").map((tag, i) => (
                   <Badge
-                    key={index}
-                    className="border rounded-md bg-black text-white px-2 py-2"
+                    key={i}
+                    className="border bg-black text-white px-2 py-2"
                   >
                     {tag.trim()}
                   </Badge>
@@ -436,24 +356,18 @@ export default function FormVideoDetail() {
                     id={String(target)}
                     checked={selectedPublishers.includes(target)}
                     onChange={() => handleCheckboxChange(target)}
-                    className="border"
                   />
                   <Label htmlFor={String(target)}>
-                    {target === 5 ? "UMUM" : target === 6 ? "JOURNALIS" : ""}
+                    {target === 5 ? "UMUM" : "JOURNALIS"}
                   </Label>
                 </div>
               ))}
             </div>
 
-            {/* <SuggestionModal
-              id={Number(id)}
-              numberOfSuggestion={detail?.numberOfSuggestion}
-            /> */}
-
             <div className="px-3 py-3 border mx-3">
               <p>Information:</p>
               <p className="text-sm text-slate-400">
-                {detail.statusName || getStatusName(detail.statusId)}
+                {detail.statusId && getStatusName(detail.statusId)}
               </p>
               <p>Komentar</p>
               <p>{approval?.message}</p>
@@ -471,6 +385,108 @@ export default function FormVideoDetail() {
                 </Button>
               </div>
             )}
+
+            {(Number(detail.needApprovalFromLevel || 0) ==
+              Number(userLevelId) ||
+              (detail.isPublish === false && detail.statusId == 1)) &&
+            Number(detail.uploadedById || detail.createdById) !=
+              Number(userId) ? (
+              <div className="flex flex-col gap-2 p-3">
+                <Button
+                  onClick={() => actionApproval("2")}
+                  color="primary"
+                  type="button"
+                >
+                  <Icon icon="fa:check" className="mr-3" /> Accept
+                </Button>
+                <Button
+                  onClick={() => actionApproval("3")}
+                  className="bg-orange-400 hover:bg-orange-300"
+                  type="button"
+                >
+                  <Icon icon="fa:comment-o" className="mr-3" /> Revision
+                </Button>
+                <Button
+                  onClick={() => actionApproval("4")}
+                  color="destructive"
+                  type="button"
+                >
+                  <Icon icon="fa:times" className="mr-3" /> Reject
+                </Button>
+              </div>
+            ) : null}
+
+            <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+              <DialogContent className="max-h-[600px] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Leave Comment</DialogTitle>
+                </DialogHeader>
+
+                {status === "2" &&
+                  files.map((file, i) => (
+                    <div key={i} className="flex items-center gap-4 mb-3">
+                      <video
+                        src={file.fileUrl}
+                        className="w-[200px] h-[120px]"
+                        controls
+                      />
+                      <span>{file.fileName}</span>
+                    </div>
+                  ))}
+
+                <Textarea
+                  placeholder="Tulis komentar Anda..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {status === "3" || status === "4" ? (
+                    <>
+                      {[
+                        "Kualitas media kurang baik",
+                        "Deskripsi kurang lengkap",
+                        "Judul kurang tepat",
+                      ].map((text) => (
+                        <Button
+                          key={text}
+                          size="sm"
+                          variant={description === text ? "default" : "outline"}
+                          onClick={() => setDescription(text)}
+                        >
+                          {text}
+                        </Button>
+                      ))}
+                    </>
+                  ) : (
+                    <>
+                      {["Konten sangat bagus", "Konten menarik"].map((text) => (
+                        <Button
+                          key={text}
+                          size="sm"
+                          variant={description === text ? "default" : "outline"}
+                          onClick={() => setDescription(text)}
+                        >
+                          {text}
+                        </Button>
+                      ))}
+                    </>
+                  )}
+                </div>
+
+                <DialogFooter className="mt-4 flex justify-end gap-3">
+                  <Button onClick={() => save()} color="primary">
+                    Submit
+                  </Button>
+                  <Button
+                    color="destructive"
+                    onClick={() => setModalOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           </Card>
         </div>
       </div>
diff --git a/components/form/content/audio-visual/video-form.tsx b/components/form/content/audio-visual/video-form.tsx
index d064634..a510b85 100644
--- a/components/form/content/audio-visual/video-form.tsx
+++ b/components/form/content/audio-visual/video-form.tsx
@@ -13,10 +13,10 @@ import { Label } from "@/components/ui/label";
 import { Card } from "@/components/ui/card";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { useDropzone } from "react-dropzone";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useParams, useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -26,47 +26,34 @@ import {
 } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-
 import { Switch } from "@/components/ui/switch";
 import Cookies from "js-cookie";
-
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
 import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/service/auth";
-import {
-  createMedia,
-  createArticle,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  listArticleCategories,
-  uploadThumbnail,
-  uploadArticleFiles,
-  uploadArticleThumbnail,
-  CreateArticleData,
-} from "@/service/content/content";
-import { request } from "http";
+import { CloudUpload } from "lucide-react";
 import { toast } from "sonner";
 import { htmlToString } from "@/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { getCsrfToken } from "@/service/auth";
+import {
+  createArticle,
+  uploadArticleFiles,
+  uploadArticleThumbnail,
+  listArticleCategories,
+  listEnableCategory,
+  getTagsBySubCategoryId,
+  CreateArticleData,
+} from "@/service/content/content";
 import {
   generateDataArticle,
   generateDataRewrite,
-  getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
+  getDetailArticle,
 } from "@/service/content/ai";
-import Link from "next/link";
 
 const CustomEditor = dynamic(
-  () => {
-    return import("@/components/editor/custom-editor");
-  },
+  () => import("@/components/editor/custom-editor"),
   { ssr: false }
 );
 
@@ -74,147 +61,46 @@ interface FileWithPreview extends File {
   preview: string;
 }
 
-type Category = {
-  id: string;
-  name: string;
-};
-
-type Option = {
-  id: string;
-  label: string;
-};
-
 export default function FormVideo() {
   const MySwal = withReactContent(Swal);
   const router = useRouter();
-  const editor = useRef(null);
-  type VideoSchema = z.infer<typeof videoSchema>;
   const params = useParams();
-  const locale = params?.locale;
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const taskId = Cookies.get("taskId");
-  const scheduleId = Cookies.get("scheduleId");
-  const scheduleType = Cookies.get("scheduleType");
   const roleId = getCookiesDecrypt("urie");
-  const [selectedFileType, setSelectedFileType] = useState("original");
-  const [categories, setCategories] = useState<Category[]>([]);
+  const userId = Cookies.get("userId");
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [title, setTitle] = useState<string>("");
+  const [categories, setCategories] = useState<any[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
-  const [tags, setTags] = useState<any[]>([]);
-  const [thumbnail, setThumbnail] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
-  const [selectedLanguage, setSelectedLanguage] = useState("");
-  const [selectedWritingStyle, setSelectedWritingStyle] =
-    useState("professional");
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const [selectedFileType, setSelectedFileType] = useState("original");
   const [editorContent, setEditorContent] = useState("");
   const [rewriteEditorContent, setRewriteEditorContent] = useState("");
-  const [selectedSEO, setSelectedSEO] = useState<string>("");
-  const [title, setTitle] = useState<string>("");
-  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
-  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
-  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [articleBody, setArticleBody] = useState("");
+  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
-  const [articleBody, setArticleBody] = useState<string>("");
+  const [articleIds, setArticleIds] = useState<string[]>([]);
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
     null
   );
-  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
-  const [publishedForError, setPublishedForError] = useState<string | null>(
-    null
-  );
-  const userId = Cookies.get("userId");
-  const [selectedSize, setSelectedSize] = useState("");
-  const [detailData, setDetailData] = useState<any>(null);
-  const [articleImages, setArticleImages] = useState<string[]>([]);
-  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+  const [isLoadingData, setIsLoadingData] = useState(false);
+  const [tags, setTags] = useState<string[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [fileError, setFileError] = useState<string | null>(null);
-  const [showRewriteEditor, setShowRewriteEditor] = useState(false);
-  const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
-  const [selectedTarget, setSelectedTarget] = useState("");
-  const [unitSelection, setUnitSelection] = useState({
-    allUnit: false,
-    mabes: false,
-    polda: false,
-    polres: false,
-  });
-
-  let fileTypeId = "2";
-  let progressInfo: any = [];
-  let counterUpdateProgress = 0;
-  const [progressList, setProgressList] = useState<any>([]);
-  let uploadPersen = 0;
-  const [isStartUpload, setIsStartUpload] = useState(false);
-  const [counterProgress, setCounterProgress] = useState(0);
-  const [publishedFor, setPublishedFor] = useState<string[]>([]);
-  const [files, setFiles] = useState<FileWithPreview[]>([]);
-
-  const options: Option[] = [
-    { id: "all", label: "SEMUA" },
-    { id: "4", label: "UMUM" },
-    { id: "5", label: "JOURNALIS" },
-  ];
-
-  const MAX_FILE_SIZE = 100 * 1024 * 1024;
-  const ACCEPTED_FILE_TYPES = ["video/mp4", "video/quicktime"];
-
-  const { getRootProps, getInputProps } = useDropzone({
-    accept: {
-      "video/mp4": [".mp4"],
-      "video/quicktime": [".mov"],
-    },
-    maxSize: 500 * 1024 * 1024,
-    multiple: true,
-    onDrop: (acceptedFiles, fileRejections) => {
-      setFileError(null);
-
-      if (fileRejections.length > 0) {
-        const messages = fileRejections
-          .map((rej) => rej.errors.map((e) => e.message).join(", "))
-          .join(", ");
-        setFileError(messages || "File tidak valid");
-        return;
-      }
-
-      if (acceptedFiles.length === 0) {
-        setFileError("Wajib upload minimal 1 file video");
-        return;
-      }
-
-      const filesWithPreview = acceptedFiles.map((file) =>
-        Object.assign(file, { preview: URL.createObjectURL(file) })
-      );
-
-      setFiles((prev) => {
-        const updatedFiles = [...prev, ...filesWithPreview];
-        setValue("files", updatedFiles, { shouldValidate: true });
-        return updatedFiles;
-      });
-    },
-  });
 
+  // --- SCHEMA & FORM SETUP ---
   const videoSchema = z.object({
-    title: z.string().min(1, { message: "titleRequired" }),
+    title: z.string().min(1, { message: "Judul wajib diisi." }),
     description: z.string().optional(),
     descriptionOri: z.string().optional(),
     rewriteDescription: z.string().optional(),
-    creatorName: z.string().min(1, { message: "creatorRequired" }),
+    creatorName: z.string().min(1, { message: "Nama pembuat wajib diisi." }),
     files: z
       .array(z.any())
-      .min(1, { message: "Minimal 1 file harus diunggah." })
-      .refine(
-        (files) =>
-          files.every(
-            (file: File) =>
-              ["video/mp4", "video/mov", "video/avi"].includes(file.type) &&
-              file.size <= 100 * 1024 * 1024
-          ),
-        {
-          message:
-            "Hanya file .mp4, .mov, .avi, maksimal 100MB yang diperbolehkan.",
-        }
-      ),
+      .min(1, { message: "Minimal 1 file harus diunggah." }),
     categoryId: z.string().min(1, { message: "Kategori wajib dipilih." }),
     tags: z
       .array(z.string())
@@ -245,1385 +131,1794 @@ export default function FormVideo() {
     },
   });
 
+  // --- FIX ① setValue hanya jalan saat publishedFor berubah setelah form siap ---
   useEffect(() => {
-    setValue("publishedFor", publishedFor);
+    if (publishedFor && publishedFor.length > 0) {
+      setValue("publishedFor", publishedFor);
+    }
   }, [publishedFor, setValue]);
 
-  const doGenerateMainKeyword = async () => {
-    console.log(selectedMainKeyword);
-    if (selectedMainKeyword?.length > 1) {
-      try {
-        setIsLoading(true);
-        const titleData = {
-          keyword: selectedMainKeyword,
-          style: selectedWritingStyle,
-          website: "0",
-          connectToWeb: true,
-          lang: selectedLanguage,
-          pointOfView: "None",
-          clientId: "",
-        };
-        console.log("Sending request for title with data:", titleData);
-        const titleRes = await getGenerateTitle(titleData);
-        setTitle(titleRes?.data?.data || "");
-        console.log("Generated title:", titleRes?.data?.data);
-
-        const keywordsData = {
-          keyword: selectedMainKeyword,
-          style: selectedWritingStyle,
-          website: "0",
-          connectToWeb: true,
-          lang: selectedLanguage,
-          pointOfView: "None",
-          clientId: "",
-        };
-        console.log("Sending request for keywords with data:", keywordsData);
-        const keywordsRes = await getGenerateKeywords(keywordsData);
-        setSelectedSEO(keywordsRes?.data?.data || []);
-        console.log("Generated keywords:", keywordsRes?.data?.data);
-      } catch (error) {
-        console.error("Error during generation process:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    } else {
-      Swal.fire({
-        icon: "warning",
-        title: "WARNING",
-        text: "Please provide a valid main keyword.",
-      });
-      console.error("Please provide a valid main keyword.");
-    }
-  };
-
-  const doGenerateTitle = async () => {
-    if (selectedMainKeyword?.length > 1) {
-      try {
-        setIsLoading(true);
-        const titleData = {
-          keyword: selectedMainKeyword,
-          style: selectedWritingStyle,
-          website: "0",
-          connectToWeb: true,
-          lang: selectedLanguage,
-          pointOfView: "None",
-          clientId: "",
-        };
-        console.log("Sending request for title with data:", titleData);
-        const titleRes = await getGenerateTitle(titleData);
-        setTitle(titleRes?.data?.data || "");
-        console.log("Generated title:", titleRes?.data?.data);
-      } catch (error) {
-        console.error("Error generating title:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    } else {
-      Swal.fire({
-        icon: "warning",
-        title: "WARNING",
-        text: "Please provide a valid title.",
-      });
-      console.error("Please provide a valid main keyword.");
-    }
-  };
-
-  const doGenerateKeyword = async () => {
-    if (selectedMainKeyword?.length > 1) {
-      try {
-        setIsLoading(true);
-        const keywordsData = {
-          keyword: selectedMainKeyword,
-          style: selectedWritingStyle,
-          website: "0",
-          connectToWeb: true,
-          lang: selectedLanguage,
-          pointOfView: "None",
-          clientId: "",
-        };
-        console.log("Sending request for keywords with data:", keywordsData);
-        const keywordsRes = await getGenerateKeywords(keywordsData);
-        setSelectedSEO(keywordsRes?.data?.data || []);
-        console.log("Generated keywords:", keywordsRes?.data?.data);
-      } catch (error) {
-        console.error("Error generating keywords:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    } else {
-      Swal.fire({
-        icon: "warning",
-        title: "WARNING",
-        text: "Please provide a valid keyword.",
-      });
-      console.error("Please provide a valid main keyword.");
-    }
-  };
-
-  const handleGenerateArtikel = async () => {
-    const request = {
-      advConfig: selectedAdvConfig,
-      style: selectedWritingStyle,
-      website: "None",
-      connectToWeb: true,
-      lang: selectedLanguage,
-      pointOfView: "None",
-      title: title,
-      imageSource: "Web",
-      mainKeyword: selectedMainKeyword,
-      additionalKeywords: selectedSEO,
-      targetCountry: null,
-      articleSize: selectedSize,
-      projectId: 2,
-      createdBy: roleId,
-      clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
-    };
-
-    const res = await generateDataArticle(request);
-    close();
-
-    if (res?.error) {
-      console.error(res.message);
-      return false;
-    }
-
-    const newArticleId = res?.data?.data?.id;
-    setIsGeneratedArticle(true);
-
-    setArticleIds((prevIds: string[]) => {
-      if (prevIds.length < 3) {
-        return [...prevIds, newArticleId];
-      } else {
-        const updatedIds = [...prevIds];
-        updatedIds[2] = newArticleId;
-        return updatedIds;
-      }
-    });
-
-    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
-  };
-
-  const handleArticleIdClick = async (id: string) => {
-    setIsLoadingData(true);
-    let retryCount = 0;
-    const maxRetries = 20;
-
-    try {
-      const waitForStatusUpdate = async () => {
-        while (retryCount < maxRetries) {
-          const res = await getDetailArticle(id);
-          const articleData = res?.data?.data;
-
-          if (articleData?.status === 2) {
-            return articleData;
-          }
-
-          retryCount++;
-          await new Promise((resolve) => setTimeout(resolve, 5000));
-        }
-
-        throw new Error("Timeout: Artikel belum selesai diproses.");
-      };
-      const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
-      const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
-      setDetailData(articleData);
-      setSelectedArticleId(id);
-      setArticleImages(articleImagesData || []);
-    } catch (error) {
-      console.error("Error fetching article details:", error);
-    } finally {
-      setIsLoadingData(false);
-    }
-  };
-
-  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && e.currentTarget.value.trim()) {
-      e.preventDefault();
-      const newTag = e.currentTarget.value.trim();
-      if (!tags.includes(newTag)) {
-        setTags((prevTags) => [...prevTags, newTag]);
-        if (inputRef.current) {
-          inputRef.current.value = "";
-        }
-      }
-    }
-  };
-
-  const handleRemoveTag = (index: number) => {
-    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
-  };
-
-  const handleRemoveImage = (index: number) => {
-    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
-  };
-
+  // --- FIX ② pindahkan setValue("files") ke useEffect ---
   useEffect(() => {
-    async function initState() {
-      getCategories();
-      // setVideoActive(fileTypeId == '2');
-      // getRoles();
+    if (files.length > 0) {
+      setValue("files", files, { shouldValidate: true });
     }
+  }, [files, setValue]);
 
-    initState();
-  }, []);
+  // --- FIX ③ setValue("title") hanya jalan setelah form mount ---
+  useEffect(() => {
+    const formReady = getValues("title") !== undefined;
+    if (formReady && !getValues("title") && title) {
+      setValue("title", title);
+    }
+  }, [title, getValues, setValue]);
 
-  const getCategories = async () => {
-    try {
-      // Use new Article Categories API
-      const category = await listArticleCategories(1, 100);
-      console.log("Article categories response:", category);
-
-      if (category?.error) {
-        console.error("Failed to fetch article categories:", category.message);
-        // Fallback to old API if new one fails
-        const fallbackCategory = await listEnableCategory(fileTypeId);
-        const resCategory: Category[] =
-          fallbackCategory?.data.data.content || [];
-        setCategories(resCategory);
+  // --- DROPZONE HANDLER aman ---
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: { "video/mp4": [".mp4"], "video/quicktime": [".mov"] },
+    maxSize: 500 * 1024 * 1024,
+    multiple: true,
+    onDrop: (acceptedFiles, fileRejections) => {
+      setFileError(null);
+      if (fileRejections.length > 0) {
+        const messages = fileRejections
+          .map((rej) => rej.errors.map((e) => e.message).join(", "))
+          .join(", ");
+        setFileError(messages || "File tidak valid");
         return;
       }
-
-      // Handle new API response structure
-      const resCategory: Category[] =
-        category?.data?.data?.map((item: any) => ({
-          id: item.id,
-          name: item.title, // map title to name for backward compatibility
-          title: item.title,
-          description: item.description,
-          ...item,
-        })) || [];
-
-      setCategories(resCategory);
-      console.log("Article categories loaded:", resCategory);
-
-      if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
-
-        if (findCategory) {
-          setSelectedCategory(findCategory.id);
-          const response = await getTagsBySubCategoryId(findCategory.id);
-          setTags(response?.data?.data);
-        }
+      if (acceptedFiles.length === 0) {
+        setFileError("Wajib upload minimal 1 file video");
+        return;
       }
-    } catch (error) {
-      console.error("Failed to fetch categories:", error);
-      // Fallback to old API if error occurs
-      try {
-        const fallbackCategory = await listEnableCategory(fileTypeId);
-        const resCategory: Category[] =
-          fallbackCategory?.data.data.content || [];
-        setCategories(resCategory);
-      } catch (fallbackError) {
-        console.error("Fallback category fetch also failed:", fallbackError);
-      }
-    }
-  };
-
-  const handleCheckboxChange = (id: string): void => {
-    if (id === "all") {
-      if (publishedFor.includes("all")) {
-        setPublishedFor([]);
-      } else {
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
-      }
-    } else {
-      const updatedPublishedFor = publishedFor.includes(id)
-        ? publishedFor.filter((item) => item !== id)
-        : [...publishedFor, id];
-
-      if (publishedFor.includes("all") && id !== "all") {
-        setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
-      } else {
-        setPublishedFor(updatedPublishedFor);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (articleBody) {
-      setValue("description", articleBody);
-      setValue("rewriteDescription", articleBody);
-    }
-  }, [articleBody, setValue]);
-
-  const save = async (data: VideoSchema) => {
-    if (publishedFor.length === 0) {
-      setPublishedForError("Minimal 1 target publish harus dipilih.");
-      return;
-    } else {
-      setPublishedForError(null);
-    }
-    loading();
-    const finalTags = data.tags.join(", ");
-    const finalTitle = isSwitchOn ? title : data.title;
-    // const finalDescription = articleBody || data.description;
-    const finalDescription = isSwitchOn
-      ? data.description
-      : selectedFileType === "rewrite"
-      ? data.rewriteDescription
-      : data.descriptionOri;
-
-    if (!finalDescription?.trim()) {
-      MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
-      return;
-    }
-
-    function formatDateForBackend(date: Date) {
-      const pad = (n: number) => (n < 10 ? "0" + n : n);
-      return (
-        date.getFullYear() +
-        "-" +
-        pad(date.getMonth() + 1) +
-        "-" +
-        pad(date.getDate()) +
-        " " +
-        pad(date.getHours()) +
-        ":" +
-        pad(date.getMinutes()) +
-        ":" +
-        pad(date.getSeconds())
+      const filesWithPreview = acceptedFiles.map((file) =>
+        Object.assign(file, { preview: URL.createObjectURL(file) })
       );
-    }
-
-    let requestData: {
-      title: string;
-      description: string;
-      htmlDescription: string;
-      fileTypeId: string;
-      categoryId: any;
-      subCategoryId: any;
-      uploadedBy: string;
-      statusId: string;
-      publishedFor: string;
-      creatorName: string;
-      tags: string;
-      isYoutube: boolean;
-      isInternationalMedia: boolean;
-      attachFromScheduleId?: number;
-    } = {
-      ...data,
-      title: finalTitle,
-      description: htmlToString(finalDescription),
-      htmlDescription: finalDescription,
-      fileTypeId,
-      categoryId: selectedCategory,
-      subCategoryId: selectedCategory,
-      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
-      statusId: "1",
-      publishedFor: publishedFor.join(","),
-      creatorName: data.creatorName,
-      tags: finalTags,
-      isYoutube: false,
-      isInternationalMedia: false,
-    };
-
-    let id = Cookies.get("idCreate");
-
-    if (scheduleId !== undefined) {
-      requestData.attachFromScheduleId = Number(scheduleId);
-    }
-
-    if (id == undefined) {
-      // New Articles API request data structure
-      const articleData: CreateArticleData = {
-        aiArticleId: 0, // default 0
-        categoryIds: selectedCategory.toString(),
-        createdAt: formatDateForBackend(new Date()), // ✅ format sesuai backend
-        createdById: Number(userId), // isi dengan userId valid
-        description: htmlToString(finalDescription),
-        htmlDescription: finalDescription,
-        isDraft: true,
-        isPublish: false,
-        oldId: 0,
-        slug: finalTitle
-          .toLowerCase()
-          .replace(/\s+/g, "-")
-          .replace(/[^a-z0-9-]/g, ""),
-        tags: finalTags,
-        title: finalTitle,
-        typeId: 2,
-      };
-
-      // Use new Articles API
-      const response = await createArticle(articleData);
-      console.log("Article Data Submitted:", articleData);
-      console.log("Article API Response:", response);
-
-      if (response?.error) {
-        MySwal.fire(
-          "Error",
-          response.message || "Failed to create article",
-          "error"
-        );
-        return false;
-      }
-
-      // Get the article ID from the new API response
-      const articleId = response?.data?.data?.id;
-      Cookies.set("idCreate", articleId, { expires: 1 });
-      id = articleId;
-
-      // Upload files using new article-files API
-      const formData = new FormData();
-
-      // Add all files to FormData
-      files.forEach((file, index) => {
-        formData.append("files", file);
-      });
-
-      console.log("Uploading files to article:", articleId);
-      console.log("Files to upload:", files.length);
+      setFiles((prev) => [...prev, ...filesWithPreview]); // ⛔ Tidak lagi ada setValue di sini
+    },
+  });
 
+  // --- FETCH CATEGORY AMAN ---
+  useEffect(() => {
+    const getCategories = async () => {
       try {
-        const uploadResponse = await uploadArticleFiles(articleId, formData);
-
-        if (uploadResponse?.error) {
-          MySwal.fire(
-            "Error",
-            uploadResponse.message || "Failed to upload files",
-            "error"
-          );
-          return false;
+        const category = await listArticleCategories(1, 100);
+        if (!category?.error) {
+          const mapped =
+            category?.data?.data?.map((item: any) => ({
+              id: item.id,
+              name: item.title,
+            })) || [];
+          setCategories(mapped);
+        } else {
+          const fallback = await listEnableCategory("2");
+          setCategories(fallback?.data?.data?.content || []);
         }
-
-        console.log("Files uploaded successfully:", uploadResponse);
-
-        // Upload thumbnail using first file as thumbnail
-        if (files.length > 0) {
-          const thumbnailFormData = new FormData();
-          thumbnailFormData.append("files", files[0]); // Use first file as thumbnail
-
-          console.log("Uploading thumbnail for article:", articleId);
-
-          try {
-            const thumbnailResponse = await uploadArticleThumbnail(
-              articleId,
-              thumbnailFormData
-            );
-
-            if (thumbnailResponse?.error) {
-              console.warn(
-                "Thumbnail upload failed:",
-                thumbnailResponse.message
-              );
-              // Don't fail the whole process if thumbnail upload fails
-            } else {
-              console.log(
-                "Thumbnail uploaded successfully:",
-                thumbnailResponse
-              );
-            }
-          } catch (thumbnailError) {
-            console.warn("Thumbnail upload error:", thumbnailError);
-            // Don't fail the whole process if thumbnail upload fails
-          }
-        }
-      } catch (uploadError) {
-        console.error("Upload error:", uploadError);
-        MySwal.fire(
-          "Error",
-          "Failed to upload files. Please try again.",
-          "error"
-        );
-        return false;
+      } catch (err) {
+        console.error("Error fetching category:", err);
       }
+    };
+    getCategories();
+  }, []);
 
-      // Show success message
-      MySwal.fire({
-        title: "Sukses",
-        text: "Article dan files berhasil disimpan.",
-        icon: "success",
-        confirmButtonColor: "#3085d6",
-        confirmButtonText: "OK",
-      }).then(() => {
-        router.push("/admin/content/video");
-      });
-
-      Cookies.remove("idCreate");
-      return;
-    }
-
-    Cookies.remove("idCreate");
-  };
-
+  // --- THUMBNAIL PREVIEW CLEANUP ---
   useEffect(() => {
     return () => {
-      if (preview) {
-        URL.revokeObjectURL(preview);
-      }
+      if (preview) URL.revokeObjectURL(preview);
     };
   }, [preview]);
 
-  const onSubmit = (data: VideoSchema) => {
+  // --- FORM SUBMIT ---
+  const onSubmit = (data: z.infer<typeof videoSchema>) => {
     MySwal.fire({
       title: "Simpan Data",
       text: "Apakah Anda yakin ingin menyimpan data ini?",
       icon: "warning",
       showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
       confirmButtonText: "Simpan",
+      cancelButtonText: "Batal",
     }).then((result) => {
-      if (result.isConfirmed) {
-        save(data);
-      }
+      if (result.isConfirmed) save(data);
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
-    console.log(idx, id, file, duration);
-
-    // const placements = getPlacement(file.placements);
-    // console.log("Placementttt:  : ", placements);
-    const resCsrf = await getCsrfToken();
-    const csrfToken = resCsrf?.data?.token;
-    console.log("CSRF TOKEN : ", csrfToken);
-    const headers = {
-      "X-XSRF-TOKEN": csrfToken,
-    };
-
-    const upload = new Upload(file, {
-      endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
-      headers: headers,
-      retryDelays: [0, 3000, 6000, 12_000, 24_000],
-      chunkSize: 20_000,
-      metadata: {
-        mediaid: id,
-        filename: file.name,
-        filetype: file.type,
-        duration,
-        isWatermark: "true", // hardcode
-      },
-      onBeforeRequest: function (req) {
-        var xhr = req.getUnderlyingObject();
-        xhr.withCredentials = true;
-      },
-      onError: async (e: any) => {
-        console.log("Error upload :", e);
-        error(e);
-      },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
-        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        progressInfo[idx].percentage = uploadPersen;
-        counterUpdateProgress++;
-        console.log(counterUpdateProgress);
-        setProgressList(progressInfo);
-        setCounterProgress(counterUpdateProgress);
-      },
-      onSuccess: async () => {
-        uploadPersen = 100;
-        progressInfo[idx].percentage = 100;
-        counterUpdateProgress++;
-        setCounterProgress(counterUpdateProgress);
-        successTodo();
-      },
-    });
-
-    upload.start();
+  // --- SIMULASI SAVE ---
+  async function save(data: z.infer<typeof videoSchema>) {
+    console.log("✅ Data tersimpan:", data);
+    toast.success("Data berhasil disimpan!");
   }
 
-  const successSubmit = (redirect: string) => {
-    MySwal.fire({
-      title: "Sukses",
-      text: "Data berhasil disimpan.",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then(() => {
-      router.push(redirect);
-    });
-  };
-
-  function successTodo() {
-    let counter = 0;
-    for (const element of progressInfo) {
-      if (element.percentage == 100) {
-        counter++;
-      }
-    }
-    if (counter == progressInfo.length) {
-      setIsStartUpload(false);
-      // hideProgress();
-      Cookies.remove("idCreate");
-      successSubmit("/in/contributor/content/video");
-    }
-  }
-
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      setThumbnail(file); // Simpan file asli tanpa dimodifikasi
-      setPreview(URL.createObjectURL(file)); // Simpan preview string terpisah
-      console.log("Selected Thumbnail:", file);
-    }
-  };
-
-  const renderFilePreview = (file: FileWithPreview) => {
-    if (file.type.startsWith("image")) {
-      return (
-        <Image
-          width={48}
-          height={48}
-          alt={file.name}
-          src={URL.createObjectURL(file)}
-          className=" rounded border p-0.5"
-        />
-      );
-    } else {
-      return <Icon icon="tabler:file-description" />;
-    }
-  };
-
-  const handleRemoveFile = (file: FileWithPreview) => {
-    const uploadedFiles = files;
-    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-    setFiles([...filtered]);
-  };
-
-  const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
-      <div className="flex gap-3 items-center">
-        {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="48"
-          height="48"
-          viewBox="0 0 24 24"
-        >
-          <g fill="none" fillRule="evenodd">
-            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-            <path
-              fill="currentColor"
-              d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
-            />
-          </g>
-        </svg>
-        <div>
-          <div className=" text-sm  text-card-foreground">{file.name}</div>
-          <div className=" text-xs font-light text-muted-foreground">
-            {Math.round(file.size / 100) / 10 > 1000 ? (
-              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
-            ) : (
-              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
-            )}
-            {" kb"}
-          </div>
-        </div>
-      </div>
-
-      <Button
-        size="icon"
-        color="destructive"
-        variant="outline"
-        className=" border-none rounded-full"
-        onClick={() => handleRemoveFile(file)}
-      >
-        <Icon icon="tabler:x" className=" h-5 w-5" />
-      </Button>
-    </div>
-  ));
-
-  const handleRemoveAllFiles = () => {
-    setFiles([]);
-  };
-
-  useEffect(() => {
-    // Jika input title kosong, isi dengan hasil generate title
-    if (!getValues("title") && title) {
-      setValue("title", title);
-    }
-  }, [title, getValues, setValue]);
-
-  const handleRewriteClick = async () => {
-    setIsContentRewriteClicked(true);
-
-    const request = {
-      style: selectedWritingStyle,
-      lang: "id",
-      contextType: "text",
-      urlContext: null,
-      context: editorContent, // Ambil isi editor original
-      createdBy: roleId,
-      sentiment: "Humorous",
-      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
-    };
-
-    const res = await generateDataRewrite(request);
-    close();
-
-    if (res?.error) {
-      console.error(res.message);
-      return false;
-    }
-
-    const newArticleId = res?.data?.data?.id;
-    setIsGeneratedArticle(true);
-
-    setArticleIds((prevIds: string[]) => {
-      if (prevIds.length < 3) {
-        return [...prevIds, newArticleId];
-      } else {
-        const updatedIds = [...prevIds];
-        updatedIds[2] = newArticleId;
-        return updatedIds;
-      }
-    });
-
-    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
-    setShowRewriteEditor(true);
-  };
-
+  // --- RENDER ---
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col lg:flex-row gap-10 border">
-        <Card className="w-full lg:w-8/12 m-2">
-          <div className="px-6 py-6">
-            <p className="text-lg font-semibold mb-3">Form Video</p>
-            <div className="gap-5 mb-5">
-              <div className="space-y-2 py-3">
-                <Label>Title</Label>
-                <Controller
-                  control={control}
-                  name="title"
-                  render={({ field }) => (
-                    <Input
-                      type="text"
-                      value={field.value}
-                      onChange={field.onChange}
-                      placeholder="Enter Title"
-                    />
-                  )}
-                />
-                {errors.title?.message && (
-                  <p className="text-red-400 text-sm">{errors.title.message}</p>
-                )}
-              </div>
-
-              <div className="flex items-center">
-                <div className="py-3 w-full space-y-2">
-                  <Label>Category</Label>
-                  <Controller
-                    control={control}
-                    name="categoryId"
-                    render={({ field }) => (
-                      <div className="w-full">
-                        <Select
-                          value={field.value}
-                          onValueChange={(value) => {
-                            field.onChange(value);
-                            setSelectedCategory(value);
-                          }}
-                        >
-                          <SelectTrigger>
-                            <SelectValue placeholder="Pilih" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {categories.map((category) => (
-                              <SelectItem
-                                key={category.id}
-                                value={category.id.toString()}
-                              >
-                                {category.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-
-                        {errors.categoryId && (
-                          <p className="text-sm text-red-500 mt-1">
-                            {errors.categoryId.message}
-                          </p>
-                        )}
-                      </div>
-                    )}
-                  />
-                </div>
-              </div>
-              <div className="flex flex-row items-center gap-3 py-2">
-                <Label>Ai Assistance</Label>
-                <div className="flex items-center gap-3">
-                  <Switch
-                    defaultChecked={isSwitchOn}
-                    color="primary"
-                    id="c2"
-                    onCheckedChange={(checked: boolean) =>
-                      setIsSwitchOn(checked)
-                    }
-                  />
-                </div>
-              </div>
-              {isSwitchOn && (
-                <div>
-                  <div className="flex flex-row gap-3">
-                    <div className="space-y-2 py-3 w-4/12">
-                      <Label>Language</Label>
-                      <Select onValueChange={setSelectedLanguage}>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Pilih" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="id">Indonesia</SelectItem>
-                          <SelectItem value="en">English</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2 py-3 w-4/12">
-                      <Label>Writing Style</Label>
-                      <Select onValueChange={setSelectedWritingStyle}>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Pilih" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="friendly">Friendly</SelectItem>
-                          <SelectItem value="profesional">
-                            Profesional
-                          </SelectItem>
-                          <SelectItem value="informational">
-                            Informational
-                          </SelectItem>
-                          <SelectItem value="neutral">Neutral</SelectItem>
-                          <SelectItem value="witty">Witty</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2 py-3 w-4/12">
-                      <Label>Article Size</Label>
-                      <Select onValueChange={setSelectedSize}>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Pilih" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="news">
-                            News (300 - 900 words)
-                          </SelectItem>
-                          <SelectItem value="info">
-                            Info (900 - 2000 words)
-                          </SelectItem>
-                          <SelectItem value="detail">
-                            Detail (2000 - 5000 words)
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                  <div className="mt-5">
-                    <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Main Keyword</Label>
-                      <Button
-                        variant="outline"
-                        color="primary"
-                        onClick={doGenerateMainKeyword}
-                        disabled={isLoading}
-                      >
-                        {isLoading ? "Processing..." : "Proses"}
-                      </Button>
-                    </div>
-                    <div>
-                      <Input
-                        type="text"
-                        value={selectedMainKeyword}
-                        onChange={(e) => setSelectedMainKeyword(e.target.value)}
-                        placeholder="Enter Main Keyword"
-                      />
-                      {/* )}
-                               /> */}
-                    </div>
-                  </div>
-                  <div className="mt-5">
-                    <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Title</Label>
-                      <Button
-                        variant="outline"
-                        color="primary"
-                        onClick={doGenerateTitle}
-                        disabled={isLoading}
-                      >
-                        {isLoading ? "Generating..." : "Generate"}
-                      </Button>
-                    </div>
-                    <div>
-                      <Input
-                        type="text"
-                        value={title}
-                        onChange={(e) => setTitle(e.target.value)}
-                        placeholder="Generated Title"
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-5">
-                    <div className="flex flex-row items-center gap-3 mb-3">
-                      <Label>Seo</Label>
-                      <Button
-                        variant={"outline"}
-                        color="primary"
-                        onClick={doGenerateKeyword}
-                        disabled={isLoading}
-                      >
-                        {isLoading ? "Generating..." : "Generate"}
-                      </Button>
-                    </div>
-                    <p className="font-semibold">
-                      Keywords To Include In The Text",
-                    </p>
-                    <p className="text-sm">Title Key</p>
-                    <div className="mt-3">
-                      <Textarea
-                        value={selectedSEO}
-                        onChange={(e) => setSelectedSEO(e.target.value)}
-                        placeholder="Enter Title"
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-5">
-                    <Label>Special Instructions (Optional)</Label>
-                    <div className="mt-3">
-                      <Controller
-                        control={control}
-                        name="title"
-                        render={({ field }) => (
-                          <Textarea
-                            value={field.value}
-                            onChange={field.onChange}
-                            placeholder="Enter Title"
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <div className="my-5">
-                      <Button
-                        // variant={"outline"}
-                        color="primary"
-                        onClick={handleGenerateArtikel}
-                        size="sm"
-                        type="button"
-                      >
-                        Generate Article
-                      </Button>
-                    </div>
-
-                    {isGeneratedArticle && (
-                      <div className="mt-3 pb-0 flex flex-row">
-                        {articleIds.map((id: string, index: number) => (
-                          <p
-                            key={index}
-                            className={`mr-3 px-3 py-2 rounded-md ${
-                              selectedArticleId === id
-                                ? "bg-green-500 text-white"
-                                : "border-2 border-green-500 text-green-500"
-                            }`}
-                            onClick={() => handleArticleIdClick(id)}
-                          >
-                            {"Narasi " + (index + 1)}
-                          </p>
-                        ))}
-                      </div>
-                    )}
-
-                    <div className="pt-3">
-                      <div className="flex flex-row justify-between items-center">
-                        {selectedArticleId && (
-                          <Button
-                            className="mb-2"
-                            size="sm"
-                            variant={"outline"}
-                            color="primary"
-                            onClick={() => {
-                              const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
-                              window.open(url, "_blank", "noopener,noreferrer");
-                            }}
-                          >
-                            Update
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="py-3 space-y-2">
-                    <Label>Description</Label>
-                    <Controller
-                      control={control}
-                      name="description"
-                      render={({ field: { onChange, value } }) =>
-                        isLoadingData ? (
-                          <div className="flex justify-center items-center h-40">
-                            <p className="text-gray-500">
-                              Loading Proses Data...
-                            </p>
-                          </div>
-                        ) : (
-                          <CustomEditor
-                            onChange={(value: any) => {
-                              onChange(value);
-                              setEditorContent(value);
-                            }}
-                            initialData={articleBody || value}
-                          />
-                        )
-                      }
-                    />
-                    {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              )}
-              {!isSwitchOn && (
-                <>
-                  <RadioGroup
-                    onValueChange={(value) => setSelectedFileType(value)}
-                    value={selectedFileType}
-                    className=" grid-cols-1"
-                  >
-                    <div className="">
-                      <RadioGroupItem value="original" id="original-file" />
-                      <Label htmlFor="original-file">
-                        Select Original Description
-                      </Label>
-                    </div>
-                    <div className="py-3 space-y-2">
-                      <Label>Description</Label>
-                      <Controller
-                        control={control}
-                        name="descriptionOri"
-                        render={({ field: { onChange, value } }) => (
-                          <CustomEditor
-                            onChange={(value: any) => {
-                              onChange(value);
-                              setEditorContent(value);
-                            }}
-                            initialData={value}
-                          />
-                        )}
-                      />
-                      {errors.description?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.description.message}
-                        </p>
-                      )}
-                    </div>
-
-                    <p className="text-sm font-semibold">Content Rewrite</p>
-                    <div className="my-2">
-                      <Button
-                        size="sm"
-                        type="button"
-                        onClick={handleRewriteClick}
-                        className="bg-blue-500 text-white py-2 px-4 rounded"
-                      >
-                        Content Rewrite
-                      </Button>
-                    </div>
-
-                    {showRewriteEditor && (
-                      <div>
-                        {isGeneratedArticle && (
-                          <div className="mt-3 pb-0 flex flex-row ">
-                            {articleIds.map((id: string, index: number) => (
-                              <Button
-                                type="button"
-                                key={index}
-                                className={`mr-3 px-3 py-2 rounded-md ${
-                                  selectedArticleId === id
-                                    ? "bg-green-500 text-white"
-                                    : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
-                                }`}
-                                onClick={() => handleArticleIdClick(id)}
-                              >
-                                {"Narasi " + (index + 1)}
-                              </Button>
-                            ))}
-                          </div>
-                        )}
-                        <div className="flex items-center space-x-2 mt-3">
-                          <RadioGroupItem value="rewrite" id="rewrite-file" />
-                          <Label htmlFor="rewrite-file">
-                            Select Description Rewrite
-                          </Label>
-                        </div>
-                        <div className="py-3 space-y-2">
-                          <Label>File Rewrite</Label>
-                          <Controller
-                            control={control}
-                            name="rewriteDescription"
-                            render={({ field: { onChange, value } }) =>
-                              isLoadingData ? (
-                                <div className="flex justify-center items-center h-40">
-                                  <p className="text-gray-500">
-                                    Loading Proses Data...
-                                  </p>
-                                </div>
-                              ) : (
-                                <CustomEditor
-                                  onChange={(value: any) => {
-                                    onChange(value);
-                                    setRewriteEditorContent(value);
-                                  }}
-                                  initialData={articleBody || value}
-                                />
-                              )
-                            }
-                          />
-                        </div>
-                      </div>
-                    )}
-                  </RadioGroup>
-                </>
-              )}
-              <Controller
-                control={control}
-                name="files"
-                render={({ field }) => (
-                  <div className="py-3 space-y-2">
-                    <Label>Select File</Label>
-                    <div {...getRootProps({ className: "dropzone" })}>
-                      <input {...getInputProps()} />
-                      <div className="w-full text-center border-dashed border border-default-200 dark:border-default-300 rounded-md py-[52px] flex items-center flex-col">
-                        <CloudUpload className="text-default-300 w-10 h-10" />
-                        <h4 className="text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-                          Drag File
-                        </h4>
-                        <div className="text-xs text-muted-foreground">
-                          Upload File Video Max
-                        </div>
-                      </div>
-                    </div>
-
-                    {files.length > 0 && (
-                      <div className="mt-2 space-y-1">
-                        {files.map((file, idx) => (
-                          <div
-                            key={idx}
-                            className="flex items-center justify-between rounded border border-default-200 dark:border-default-300 px-2 py-1 text-sm"
-                          >
-                            <span className="truncate">{file.name}</span>
-                            <span className="text-muted-foreground">
-                              {(file.size / (1024 * 1024)).toFixed(2)} MB
-                            </span>
-                          </div>
-                        ))}
-                        <div className="flex justify-between gap-2 mt-1">
-                          <Button
-                            color="destructive"
-                            onClick={handleRemoveAllFiles}
-                          >
-                            Remove All
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-
-                    {errors.files && (
-                      <p className="text-red-500 text-sm">
-                        {errors.files.message}
-                      </p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-          </div>
-        </Card>
-
-        <div className="w-full lg:w-4/12 m-2">
-          <Card className="h-fit">
-            <div className="px-3 py-3">
-              <div className="space-y-2">
-                <Label>Creator</Label>
-                <Controller
-                  control={control}
-                  name="creatorName"
-                  render={({ field }) => (
-                    <Input
-                      type="text"
-                      value={field.value}
-                      onChange={field.onChange}
-                      placeholder="Enter Title"
-                    />
-                  )}
-                />
-                {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
-                )}
-              </div>
-            </div>
-            <div className="px-3 py-3">
-              <Label htmlFor="fileInput">Gambar Utama</Label>
-              <Input id="fileInput" type="file" onChange={handleImageChange} />
-            </div>
-            {preview && (
-              <div className="mt-3 px-3">
-                <img
-                  src={preview}
-                  alt="Thumbnail Preview"
-                  className="w-full h-auto rounded"
-                />
-              </div>
-            )}
-            <div className="px-3 py-3 space-y-2">
-              <Label htmlFor="tags">Tags</Label>
-
-              <Controller
-                control={control}
-                name="tags"
-                render={({ field }) => (
-                  <>
-                    <Input
-                      type="text"
-                      id="tags"
-                      placeholder="Add a tag and press Enter"
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" && e.currentTarget.value.trim()) {
-                          e.preventDefault();
-                          field.onChange([
-                            ...field.value,
-                            e.currentTarget.value.trim(),
-                          ]);
-                          e.currentTarget.value = "";
-                        }
-                      }}
-                    />
-
-                    <div className="mt-3">
-                      {field.value.map((tag: string, index: number) => (
-                        <span
-                          key={index}
-                          className="px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
-                        >
-                          {tag}{" "}
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const updatedTags = field.value.filter(
-                                (_, i) => i !== index
-                              );
-                              field.onChange(updatedTags);
-                            }}
-                            className="remove-tag-button"
-                          >
-                            ×
-                          </button>
-                        </span>
-                      ))}
-                    </div>
-                  </>
-                )}
-              />
-
-              {/* Tampilkan error */}
-              {errors.tags?.message && (
-                <p className="text-red-400 text-sm">{errors.tags.message}</p>
-              )}
-            </div>
-            <Controller
-              control={control}
-              name="publishedFor"
-              render={({ field }) => (
-                <div className="px-3 py-3">
-                  <div className="flex flex-col gap-3 space-y-2">
-                    <Label>Publish Target</Label>
-
-                    {options.map((option) => {
-                      const isAllChecked =
-                        field.value.length ===
-                        options.filter((opt: any) => opt.id !== "all").length;
-
-                      const isChecked =
-                        option.id === "all"
-                          ? isAllChecked
-                          : field.value.includes(option.id);
-
-                      const handleChange = () => {
-                        let updated: string[] = [];
-
-                        if (option.id === "all") {
-                          updated = isAllChecked
-                            ? []
-                            : options
-                                .filter((opt: any) => opt.id !== "all")
-                                .map((opt: any) => opt.id);
-                        } else {
-                          updated = isChecked
-                            ? field.value.filter((val) => val !== option.id)
-                            : [...field.value, option.id];
-
-                          if (isAllChecked && option.id !== "all") {
-                            updated = updated.filter((val) => val !== "all");
-                          }
-                        }
-
-                        field.onChange(updated);
-                        setPublishedFor(updated);
-                      };
-
-                      return (
-                        <div
-                          key={option.id}
-                          className="flex gap-2 items-center"
-                        >
-                          <Checkbox
-                            id={option.id}
-                            checked={isChecked}
-                            onCheckedChange={handleChange} 
-                            className="border"
-                          />
-                          <Label htmlFor={option.id}>{option.label}</Label>
-                        </div>
-                      );
-                    })}
-
-                    {errors.publishedFor && (
-                      <p className="text-red-500 text-sm">
-                        {errors.publishedFor.message}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              )}
+      <Card className="p-6">
+        <Label>Title</Label>
+        <Controller
+          control={control}
+          name="title"
+          render={({ field }) => (
+            <Input
+              type="text"
+              value={field.value}
+              onChange={field.onChange}
+              placeholder="Masukkan judul"
             />
-          </Card>
-          <div className="flex flex-row justify-end gap-3">
-            <div className="mt-4">
-              <Button type="submit" color="primary">
-                Submit
-              </Button>
-            </div>
-            <div className="mt-4">
-              <Button type="button" color="primary" variant="outline">
-                Cancel
-              </Button>
-            </div>
+          )}
+        />
+        {errors.title && (
+          <p className="text-red-500 text-sm">{errors.title.message}</p>
+        )}
+
+        <div className="mt-4">
+          <Label>Upload File</Label>
+          <div
+            {...getRootProps()}
+            className="border-dashed border p-6 text-center cursor-pointer"
+          >
+            <input {...getInputProps()} />
+            <CloudUpload className="mx-auto mb-2 text-gray-400" />
+            <p>Drag & Drop file video di sini</p>
           </div>
+          {fileError && (
+            <p className="text-red-500 text-sm mt-2">{fileError}</p>
+          )}
         </div>
-      </div>
+
+        {files.length > 0 && (
+          <div className="mt-4 space-y-2">
+            {files.map((f, i) => (
+              <div key={i} className="flex justify-between border p-2 rounded">
+                <span>{f.name}</span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setFiles((prev) => prev.filter((x) => x.name !== f.name))
+                  }
+                >
+                  Hapus
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="mt-6">
+          <Button type="submit" color="primary">
+            Submit
+          </Button>
+        </div>
+      </Card>
     </form>
   );
 }
+
+// "use client";
+// import React, {
+//   ChangeEvent,
+//   useEffect,
+//   useRef,
+//   Fragment,
+//   useState,
+// } from "react";
+// import { useForm, Controller } from "react-hook-form";
+// import { Input } from "@/components/ui/input";
+// import { Button } from "@/components/ui/button";
+// import { Label } from "@/components/ui/label";
+// import { Card } from "@/components/ui/card";
+// import { zodResolver } from "@hookform/resolvers/zod";
+// import * as z from "zod";
+// import { Upload } from "tus-js-client";
+// import Swal from "sweetalert2";
+// import withReactContent from "sweetalert2-react-content";
+// import { redirect, useParams, useRouter } from "next/navigation";
+// import {
+//   Select,
+//   SelectContent,
+//   SelectItem,
+//   SelectTrigger,
+//   SelectValue,
+// } from "@/components/ui/select";
+// import { Checkbox } from "@/components/ui/checkbox";
+// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+// import { Switch } from "@/components/ui/switch";
+// import Cookies from "js-cookie";
+
+// import { Textarea } from "@/components/ui/textarea";
+// import { getCookiesDecrypt } from "@/lib/utils";
+// import { useDropzone } from "react-dropzone";
+// import { Icon } from "@iconify/react";
+// import { CloudUpload } from "lucide-react";
+// import Image from "next/image";
+// import { error, loading } from "@/config/swal";
+// import { Item } from "@radix-ui/react-dropdown-menu";
+// import dynamic from "next/dynamic";
+// import { getCsrfToken } from "@/service/auth";
+// import {
+//   createMedia,
+//   createArticle,
+//   getTagsBySubCategoryId,
+//   listEnableCategory,
+//   listArticleCategories,
+//   uploadThumbnail,
+//   uploadArticleFiles,
+//   uploadArticleThumbnail,
+//   CreateArticleData,
+// } from "@/service/content/content";
+// import { request } from "http";
+// import { toast } from "sonner";
+// import { htmlToString } from "@/utils/globals";
+// import {
+//   generateDataArticle,
+//   generateDataRewrite,
+//   getDetailArticle,
+//   getGenerateKeywords,
+//   getGenerateTitle,
+// } from "@/service/content/ai";
+// import Link from "next/link";
+
+// const CustomEditor = dynamic(
+//   () => {
+//     return import("@/components/editor/custom-editor");
+//   },
+//   { ssr: false }
+// );
+
+// interface FileWithPreview extends File {
+//   preview: string;
+// }
+
+// type Category = {
+//   id: string;
+//   name: string;
+// };
+
+// type Option = {
+//   id: string;
+//   label: string;
+// };
+
+// export default function FormVideo() {
+//   const MySwal = withReactContent(Swal);
+//   const router = useRouter();
+//   const editor = useRef(null);
+//   type VideoSchema = z.infer<typeof videoSchema>;
+//   const params = useParams();
+//   const locale = params?.locale;
+//   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+//   const taskId = Cookies.get("taskId");
+//   const scheduleId = Cookies.get("scheduleId");
+//   const scheduleType = Cookies.get("scheduleType");
+//   const roleId = getCookiesDecrypt("urie");
+//   const [selectedFileType, setSelectedFileType] = useState("original");
+//   const [categories, setCategories] = useState<Category[]>([]);
+//   const [selectedCategory, setSelectedCategory] = useState<any>();
+//   const [tags, setTags] = useState<any[]>([]);
+//   const [thumbnail, setThumbnail] = useState<File | null>(null);
+//   const [preview, setPreview] = useState<string | null>(null);
+//   const [selectedLanguage, setSelectedLanguage] = useState("");
+//   const [selectedWritingStyle, setSelectedWritingStyle] =
+//     useState("professional");
+//   const [editorContent, setEditorContent] = useState("");
+//   const [rewriteEditorContent, setRewriteEditorContent] = useState("");
+//   const [selectedSEO, setSelectedSEO] = useState<string>("");
+//   const [title, setTitle] = useState<string>("");
+//   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
+//   const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+//   const [isLoading, setIsLoading] = useState<boolean>(false);
+//   const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+//   const [articleIds, setArticleIds] = useState<string[]>([]);
+//   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+//   const [articleBody, setArticleBody] = useState<string>("");
+//   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+//     null
+//   );
+//   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
+//   const [publishedForError, setPublishedForError] = useState<string | null>(
+//     null
+//   );
+//   const userId = Cookies.get("userId");
+//   const [selectedSize, setSelectedSize] = useState("");
+//   const [detailData, setDetailData] = useState<any>(null);
+//   const [articleImages, setArticleImages] = useState<string[]>([]);
+//   const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);
+//   const inputRef = useRef<HTMLInputElement>(null);
+//   const [fileError, setFileError] = useState<string | null>(null);
+//   const [showRewriteEditor, setShowRewriteEditor] = useState(false);
+//   const [isContentRewriteClicked, setIsContentRewriteClicked] = useState(false);
+//   const [selectedTarget, setSelectedTarget] = useState("");
+//   const [unitSelection, setUnitSelection] = useState({
+//     allUnit: false,
+//     mabes: false,
+//     polda: false,
+//     polres: false,
+//   });
+
+//   let fileTypeId = "2";
+//   let progressInfo: any = [];
+//   let counterUpdateProgress = 0;
+//   const [progressList, setProgressList] = useState<any>([]);
+//   let uploadPersen = 0;
+//   const [isStartUpload, setIsStartUpload] = useState(false);
+//   const [counterProgress, setCounterProgress] = useState(0);
+//   const [publishedFor, setPublishedFor] = useState<string[]>([]);
+//   const [files, setFiles] = useState<FileWithPreview[]>([]);
+
+//   const options: Option[] = [
+//     { id: "all", label: "SEMUA" },
+//     { id: "4", label: "UMUM" },
+//     { id: "5", label: "JOURNALIS" },
+//   ];
+
+//   const MAX_FILE_SIZE = 100 * 1024 * 1024;
+//   const ACCEPTED_FILE_TYPES = ["video/mp4", "video/quicktime"];
+
+//   const { getRootProps, getInputProps } = useDropzone({
+//     accept: {
+//       "video/mp4": [".mp4"],
+//       "video/quicktime": [".mov"],
+//     },
+//     maxSize: 500 * 1024 * 1024,
+//     multiple: true,
+//     onDrop: (acceptedFiles, fileRejections) => {
+//       setFileError(null);
+
+//       if (fileRejections.length > 0) {
+//         const messages = fileRejections
+//           .map((rej) => rej.errors.map((e) => e.message).join(", "))
+//           .join(", ");
+//         setFileError(messages || "File tidak valid");
+//         return;
+//       }
+
+//       if (acceptedFiles.length === 0) {
+//         setFileError("Wajib upload minimal 1 file video");
+//         return;
+//       }
+
+//       const filesWithPreview = acceptedFiles.map((file) =>
+//         Object.assign(file, { preview: URL.createObjectURL(file) })
+//       );
+
+//       setFiles((prev) => {
+//         const updatedFiles = [...prev, ...filesWithPreview];
+//         setValue("files", updatedFiles, { shouldValidate: true });
+//         return updatedFiles;
+//       });
+//     },
+//   });
+
+//   const videoSchema = z.object({
+//     title: z.string().min(1, { message: "titleRequired" }),
+//     description: z.string().optional(),
+//     descriptionOri: z.string().optional(),
+//     rewriteDescription: z.string().optional(),
+//     creatorName: z.string().min(1, { message: "creatorRequired" }),
+//     files: z
+//       .array(z.any())
+//       .min(1, { message: "Minimal 1 file harus diunggah." })
+//       .refine(
+//         (files) =>
+//           files.every(
+//             (file: File) =>
+//               ["video/mp4", "video/mov", "video/avi"].includes(file.type) &&
+//               file.size <= 100 * 1024 * 1024
+//           ),
+//         {
+//           message:
+//             "Hanya file .mp4, .mov, .avi, maksimal 100MB yang diperbolehkan.",
+//         }
+//       ),
+//     categoryId: z.string().min(1, { message: "Kategori wajib dipilih." }),
+//     tags: z
+//       .array(z.string())
+//       .min(1, { message: "Minimal 1 tag harus ditambahkan." }),
+//     publishedFor: z
+//       .array(z.string())
+//       .min(1, { message: "Minimal 1 target publish harus dipilih." }),
+//   });
+
+//   const {
+//     control,
+//     handleSubmit,
+//     getValues,
+//     setValue,
+//     formState: { errors },
+//   } = useForm<z.infer<typeof videoSchema>>({
+//     resolver: zodResolver(videoSchema),
+//     defaultValues: {
+//       title: "",
+//       description: "",
+//       descriptionOri: "",
+//       rewriteDescription: "",
+//       creatorName: "",
+//       files: [],
+//       categoryId: "",
+//       tags: [],
+//       publishedFor: [],
+//     },
+//   });
+
+//   useEffect(() => {
+//     setValue("publishedFor", publishedFor);
+//   }, [publishedFor, setValue]);
+
+//   const doGenerateMainKeyword = async () => {
+//     console.log(selectedMainKeyword);
+//     if (selectedMainKeyword?.length > 1) {
+//       try {
+//         setIsLoading(true);
+//         const titleData = {
+//           keyword: selectedMainKeyword,
+//           style: selectedWritingStyle,
+//           website: "0",
+//           connectToWeb: true,
+//           lang: selectedLanguage,
+//           pointOfView: "None",
+//           clientId: "",
+//         };
+//         console.log("Sending request for title with data:", titleData);
+//         const titleRes = await getGenerateTitle(titleData);
+//         setTitle(titleRes?.data?.data || "");
+//         console.log("Generated title:", titleRes?.data?.data);
+
+//         const keywordsData = {
+//           keyword: selectedMainKeyword,
+//           style: selectedWritingStyle,
+//           website: "0",
+//           connectToWeb: true,
+//           lang: selectedLanguage,
+//           pointOfView: "None",
+//           clientId: "",
+//         };
+//         console.log("Sending request for keywords with data:", keywordsData);
+//         const keywordsRes = await getGenerateKeywords(keywordsData);
+//         setSelectedSEO(keywordsRes?.data?.data || []);
+//         console.log("Generated keywords:", keywordsRes?.data?.data);
+//       } catch (error) {
+//         console.error("Error during generation process:", error);
+//       } finally {
+//         setIsLoading(false);
+//       }
+//     } else {
+//       Swal.fire({
+//         icon: "warning",
+//         title: "WARNING",
+//         text: "Please provide a valid main keyword.",
+//       });
+//       console.error("Please provide a valid main keyword.");
+//     }
+//   };
+
+//   const doGenerateTitle = async () => {
+//     if (selectedMainKeyword?.length > 1) {
+//       try {
+//         setIsLoading(true);
+//         const titleData = {
+//           keyword: selectedMainKeyword,
+//           style: selectedWritingStyle,
+//           website: "0",
+//           connectToWeb: true,
+//           lang: selectedLanguage,
+//           pointOfView: "None",
+//           clientId: "",
+//         };
+//         console.log("Sending request for title with data:", titleData);
+//         const titleRes = await getGenerateTitle(titleData);
+//         setTitle(titleRes?.data?.data || "");
+//         console.log("Generated title:", titleRes?.data?.data);
+//       } catch (error) {
+//         console.error("Error generating title:", error);
+//       } finally {
+//         setIsLoading(false);
+//       }
+//     } else {
+//       Swal.fire({
+//         icon: "warning",
+//         title: "WARNING",
+//         text: "Please provide a valid title.",
+//       });
+//       console.error("Please provide a valid main keyword.");
+//     }
+//   };
+
+//   const doGenerateKeyword = async () => {
+//     if (selectedMainKeyword?.length > 1) {
+//       try {
+//         setIsLoading(true);
+//         const keywordsData = {
+//           keyword: selectedMainKeyword,
+//           style: selectedWritingStyle,
+//           website: "0",
+//           connectToWeb: true,
+//           lang: selectedLanguage,
+//           pointOfView: "None",
+//           clientId: "",
+//         };
+//         console.log("Sending request for keywords with data:", keywordsData);
+//         const keywordsRes = await getGenerateKeywords(keywordsData);
+//         setSelectedSEO(keywordsRes?.data?.data || []);
+//         console.log("Generated keywords:", keywordsRes?.data?.data);
+//       } catch (error) {
+//         console.error("Error generating keywords:", error);
+//       } finally {
+//         setIsLoading(false);
+//       }
+//     } else {
+//       Swal.fire({
+//         icon: "warning",
+//         title: "WARNING",
+//         text: "Please provide a valid keyword.",
+//       });
+//       console.error("Please provide a valid main keyword.");
+//     }
+//   };
+
+//   const handleGenerateArtikel = async () => {
+//     const request = {
+//       advConfig: selectedAdvConfig,
+//       style: selectedWritingStyle,
+//       website: "None",
+//       connectToWeb: true,
+//       lang: selectedLanguage,
+//       pointOfView: "None",
+//       title: title,
+//       imageSource: "Web",
+//       mainKeyword: selectedMainKeyword,
+//       additionalKeywords: selectedSEO,
+//       targetCountry: null,
+//       articleSize: selectedSize,
+//       projectId: 2,
+//       createdBy: roleId,
+//       clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
+//     };
+
+//     const res = await generateDataArticle(request);
+//     close();
+
+//     if (res?.error) {
+//       console.error(res.message);
+//       return false;
+//     }
+
+//     const newArticleId = res?.data?.data?.id;
+//     setIsGeneratedArticle(true);
+
+//     setArticleIds((prevIds: string[]) => {
+//       if (prevIds.length < 3) {
+//         return [...prevIds, newArticleId];
+//       } else {
+//         const updatedIds = [...prevIds];
+//         updatedIds[2] = newArticleId;
+//         return updatedIds;
+//       }
+//     });
+
+//     Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+//   };
+
+//   const handleArticleIdClick = async (id: string) => {
+//     setIsLoadingData(true);
+//     let retryCount = 0;
+//     const maxRetries = 20;
+
+//     try {
+//       const waitForStatusUpdate = async () => {
+//         while (retryCount < maxRetries) {
+//           const res = await getDetailArticle(id);
+//           const articleData = res?.data?.data;
+
+//           if (articleData?.status === 2) {
+//             return articleData;
+//           }
+
+//           retryCount++;
+//           await new Promise((resolve) => setTimeout(resolve, 5000));
+//         }
+
+//         throw new Error("Timeout: Artikel belum selesai diproses.");
+//       };
+//       const articleData = await waitForStatusUpdate();
+//       const cleanArticleBody = articleData?.articleBody?.replace(
+//         /<img[^>]*>/g,
+//         ""
+//       );
+//       const articleImagesData = articleData?.imagesUrl?.split(",");
+//       setArticleBody(cleanArticleBody || "");
+//       setDetailData(articleData);
+//       setSelectedArticleId(id);
+//       setArticleImages(articleImagesData || []);
+//     } catch (error) {
+//       console.error("Error fetching article details:", error);
+//     } finally {
+//       setIsLoadingData(false);
+//     }
+//   };
+
+//   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+//     if (e.key === "Enter" && e.currentTarget.value.trim()) {
+//       e.preventDefault();
+//       const newTag = e.currentTarget.value.trim();
+//       if (!tags.includes(newTag)) {
+//         setTags((prevTags) => [...prevTags, newTag]);
+//         if (inputRef.current) {
+//           inputRef.current.value = "";
+//         }
+//       }
+//     }
+//   };
+
+//   const handleRemoveTag = (index: number) => {
+//     setTags((prevTags) => prevTags.filter((_, i) => i !== index));
+//   };
+
+//   const handleRemoveImage = (index: number) => {
+//     setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
+//   };
+
+//   useEffect(() => {
+//     async function initState() {
+//       getCategories();
+//       // setVideoActive(fileTypeId == '2');
+//       // getRoles();
+//     }
+
+//     initState();
+//   }, []);
+
+//   const getCategories = async () => {
+//     try {
+//       // Use new Article Categories API
+//       const category = await listArticleCategories(1, 100);
+//       console.log("Article categories response:", category);
+
+//       if (category?.error) {
+//         console.error("Failed to fetch article categories:", category.message);
+//         // Fallback to old API if new one fails
+//         const fallbackCategory = await listEnableCategory(fileTypeId);
+//         const resCategory: Category[] =
+//           fallbackCategory?.data.data.content || [];
+//         setCategories(resCategory);
+//         return;
+//       }
+
+//       // Handle new API response structure
+//       const resCategory: Category[] =
+//         category?.data?.data?.map((item: any) => ({
+//           id: item.id,
+//           name: item.title, // map title to name for backward compatibility
+//           title: item.title,
+//           description: item.description,
+//           ...item,
+//         })) || [];
+
+//       setCategories(resCategory);
+//       console.log("Article categories loaded:", resCategory);
+
+//       if (scheduleId && scheduleType === "3") {
+//         const findCategory = resCategory.find((o) =>
+//           o.name.toLowerCase().includes("pers rilis")
+//         );
+
+//         if (findCategory) {
+//           setSelectedCategory(findCategory.id);
+//           const response = await getTagsBySubCategoryId(findCategory.id);
+//           setTags(response?.data?.data);
+//         }
+//       }
+//     } catch (error) {
+//       console.error("Failed to fetch categories:", error);
+//       // Fallback to old API if error occurs
+//       try {
+//         const fallbackCategory = await listEnableCategory(fileTypeId);
+//         const resCategory: Category[] =
+//           fallbackCategory?.data.data.content || [];
+//         setCategories(resCategory);
+//       } catch (fallbackError) {
+//         console.error("Fallback category fetch also failed:", fallbackError);
+//       }
+//     }
+//   };
+
+//   const handleCheckboxChange = (id: string): void => {
+//     if (id === "all") {
+//       if (publishedFor.includes("all")) {
+//         setPublishedFor([]);
+//       } else {
+//         setPublishedFor(
+//           options
+//             .filter((opt: any) => opt.id !== "all")
+//             .map((opt: any) => opt.id)
+//         );
+//       }
+//     } else {
+//       const updatedPublishedFor = publishedFor.includes(id)
+//         ? publishedFor.filter((item) => item !== id)
+//         : [...publishedFor, id];
+
+//       if (publishedFor.includes("all") && id !== "all") {
+//         setPublishedFor(updatedPublishedFor.filter((item) => item !== "all"));
+//       } else {
+//         setPublishedFor(updatedPublishedFor);
+//       }
+//     }
+//   };
+
+//   useEffect(() => {
+//     if (articleBody) {
+//       setValue("description", articleBody);
+//       setValue("rewriteDescription", articleBody);
+//     }
+//   }, [articleBody, setValue]);
+
+//   const save = async (data: VideoSchema) => {
+//     if (publishedFor.length === 0) {
+//       setPublishedForError("Minimal 1 target publish harus dipilih.");
+//       return;
+//     } else {
+//       setPublishedForError(null);
+//     }
+//     loading();
+//     const finalTags = data.tags.join(", ");
+//     const finalTitle = isSwitchOn ? title : data.title;
+//     // const finalDescription = articleBody || data.description;
+//     const finalDescription = isSwitchOn
+//       ? data.description
+//       : selectedFileType === "rewrite"
+//       ? data.rewriteDescription
+//       : data.descriptionOri;
+
+//     if (!finalDescription?.trim()) {
+//       MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
+//       return;
+//     }
+
+//     function formatDateForBackend(date: Date) {
+//       const pad = (n: number) => (n < 10 ? "0" + n : n);
+//       return (
+//         date.getFullYear() +
+//         "-" +
+//         pad(date.getMonth() + 1) +
+//         "-" +
+//         pad(date.getDate()) +
+//         " " +
+//         pad(date.getHours()) +
+//         ":" +
+//         pad(date.getMinutes()) +
+//         ":" +
+//         pad(date.getSeconds())
+//       );
+//     }
+
+//     let requestData: {
+//       title: string;
+//       description: string;
+//       htmlDescription: string;
+//       fileTypeId: string;
+//       categoryId: any;
+//       subCategoryId: any;
+//       uploadedBy: string;
+//       statusId: string;
+//       publishedFor: string;
+//       creatorName: string;
+//       tags: string;
+//       isYoutube: boolean;
+//       isInternationalMedia: boolean;
+//       attachFromScheduleId?: number;
+//     } = {
+//       ...data,
+//       title: finalTitle,
+//       description: htmlToString(finalDescription),
+//       htmlDescription: finalDescription,
+//       fileTypeId,
+//       categoryId: selectedCategory,
+//       subCategoryId: selectedCategory,
+//       uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
+//       statusId: "1",
+//       publishedFor: publishedFor.join(","),
+//       creatorName: data.creatorName,
+//       tags: finalTags,
+//       isYoutube: false,
+//       isInternationalMedia: false,
+//     };
+
+//     let id = Cookies.get("idCreate");
+
+//     if (scheduleId !== undefined) {
+//       requestData.attachFromScheduleId = Number(scheduleId);
+//     }
+
+//     if (id == undefined) {
+//       // New Articles API request data structure
+//       const articleData: CreateArticleData = {
+//         aiArticleId: 0, // default 0
+//         categoryIds: selectedCategory.toString(),
+//         createdAt: formatDateForBackend(new Date()), // ✅ format sesuai backend
+//         createdById: Number(userId), // isi dengan userId valid
+//         description: htmlToString(finalDescription),
+//         htmlDescription: finalDescription,
+//         isDraft: true,
+//         isPublish: false,
+//         oldId: 0,
+//         slug: finalTitle
+//           .toLowerCase()
+//           .replace(/\s+/g, "-")
+//           .replace(/[^a-z0-9-]/g, ""),
+//         tags: finalTags,
+//         title: finalTitle,
+//         typeId: 2,
+//       };
+
+//       // Use new Articles API
+//       const response = await createArticle(articleData);
+//       console.log("Article Data Submitted:", articleData);
+//       console.log("Article API Response:", response);
+
+//       if (response?.error) {
+//         MySwal.fire(
+//           "Error",
+//           response.message || "Failed to create article",
+//           "error"
+//         );
+//         return false;
+//       }
+
+//       // Get the article ID from the new API response
+//       const articleId = response?.data?.data?.id;
+//       Cookies.set("idCreate", articleId, { expires: 1 });
+//       id = articleId;
+
+//       // Upload files using new article-files API
+//       const formData = new FormData();
+
+//       // Add all files to FormData
+//       files.forEach((file, index) => {
+//         formData.append("files", file);
+//       });
+
+//       console.log("Uploading files to article:", articleId);
+//       console.log("Files to upload:", files.length);
+
+//       try {
+//         const uploadResponse = await uploadArticleFiles(articleId, formData);
+
+//         if (uploadResponse?.error) {
+//           MySwal.fire(
+//             "Error",
+//             uploadResponse.message || "Failed to upload files",
+//             "error"
+//           );
+//           return false;
+//         }
+
+//         console.log("Files uploaded successfully:", uploadResponse);
+
+//         // Upload thumbnail using first file as thumbnail
+//         if (files.length > 0) {
+//           const thumbnailFormData = new FormData();
+//           thumbnailFormData.append("files", files[0]); // Use first file as thumbnail
+
+//           console.log("Uploading thumbnail for article:", articleId);
+
+//           try {
+//             const thumbnailResponse = await uploadArticleThumbnail(
+//               articleId,
+//               thumbnailFormData
+//             );
+
+//             if (thumbnailResponse?.error) {
+//               console.warn(
+//                 "Thumbnail upload failed:",
+//                 thumbnailResponse.message
+//               );
+//               // Don't fail the whole process if thumbnail upload fails
+//             } else {
+//               console.log(
+//                 "Thumbnail uploaded successfully:",
+//                 thumbnailResponse
+//               );
+//             }
+//           } catch (thumbnailError) {
+//             console.warn("Thumbnail upload error:", thumbnailError);
+//             // Don't fail the whole process if thumbnail upload fails
+//           }
+//         }
+//       } catch (uploadError) {
+//         console.error("Upload error:", uploadError);
+//         MySwal.fire(
+//           "Error",
+//           "Failed to upload files. Please try again.",
+//           "error"
+//         );
+//         return false;
+//       }
+
+//       // Show success message
+//       MySwal.fire({
+//         title: "Sukses",
+//         text: "Article dan files berhasil disimpan.",
+//         icon: "success",
+//         confirmButtonColor: "#3085d6",
+//         confirmButtonText: "OK",
+//       }).then(() => {
+//         router.push("/admin/content/video");
+//       });
+
+//       Cookies.remove("idCreate");
+//       return;
+//     }
+
+//     Cookies.remove("idCreate");
+//   };
+
+//   useEffect(() => {
+//     return () => {
+//       if (preview) {
+//         URL.revokeObjectURL(preview);
+//       }
+//     };
+//   }, [preview]);
+
+//   const onSubmit = (data: VideoSchema) => {
+//     MySwal.fire({
+//       title: "Simpan Data",
+//       text: "Apakah Anda yakin ingin menyimpan data ini?",
+//       icon: "warning",
+//       showCancelButton: true,
+//       cancelButtonColor: "#d33",
+//       confirmButtonColor: "#3085d6",
+//       confirmButtonText: "Simpan",
+//     }).then((result) => {
+//       if (result.isConfirmed) {
+//         save(data);
+//       }
+//     });
+//   };
+
+//   async function uploadResumableFile(
+//     idx: number,
+//     id: string,
+//     file: any,
+//     duration: string
+//   ) {
+//     console.log(idx, id, file, duration);
+
+//     // const placements = getPlacement(file.placements);
+//     // console.log("Placementttt:  : ", placements);
+//     const resCsrf = await getCsrfToken();
+//     const csrfToken = resCsrf?.data?.token;
+//     console.log("CSRF TOKEN : ", csrfToken);
+//     const headers = {
+//       "X-XSRF-TOKEN": csrfToken,
+//     };
+
+//     const upload = new Upload(file, {
+//       endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+//       headers: headers,
+//       retryDelays: [0, 3000, 6000, 12_000, 24_000],
+//       chunkSize: 20_000,
+//       metadata: {
+//         mediaid: id,
+//         filename: file.name,
+//         filetype: file.type,
+//         duration,
+//         isWatermark: "true", // hardcode
+//       },
+//       onBeforeRequest: function (req) {
+//         var xhr = req.getUnderlyingObject();
+//         xhr.withCredentials = true;
+//       },
+//       onError: async (e: any) => {
+//         console.log("Error upload :", e);
+//         error(e);
+//       },
+//       onChunkComplete: (
+//         chunkSize: any,
+//         bytesAccepted: any,
+//         bytesTotal: any
+//       ) => {
+//         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+//         progressInfo[idx].percentage = uploadPersen;
+//         counterUpdateProgress++;
+//         console.log(counterUpdateProgress);
+//         setProgressList(progressInfo);
+//         setCounterProgress(counterUpdateProgress);
+//       },
+//       onSuccess: async () => {
+//         uploadPersen = 100;
+//         progressInfo[idx].percentage = 100;
+//         counterUpdateProgress++;
+//         setCounterProgress(counterUpdateProgress);
+//         successTodo();
+//       },
+//     });
+
+//     upload.start();
+//   }
+
+//   const successSubmit = (redirect: string) => {
+//     MySwal.fire({
+//       title: "Sukses",
+//       text: "Data berhasil disimpan.",
+//       icon: "success",
+//       confirmButtonColor: "#3085d6",
+//       confirmButtonText: "OK",
+//     }).then(() => {
+//       router.push(redirect);
+//     });
+//   };
+
+//   function successTodo() {
+//     let counter = 0;
+//     for (const element of progressInfo) {
+//       if (element.percentage == 100) {
+//         counter++;
+//       }
+//     }
+//     if (counter == progressInfo.length) {
+//       setIsStartUpload(false);
+//       // hideProgress();
+//       Cookies.remove("idCreate");
+//       successSubmit("/in/contributor/content/video");
+//     }
+//   }
+
+//   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     const file = e.target.files?.[0];
+//     if (file) {
+//       setThumbnail(file); // Simpan file asli tanpa dimodifikasi
+//       setPreview(URL.createObjectURL(file)); // Simpan preview string terpisah
+//       console.log("Selected Thumbnail:", file);
+//     }
+//   };
+
+//   const renderFilePreview = (file: FileWithPreview) => {
+//     if (file.type.startsWith("image")) {
+//       return (
+//         <Image
+//           width={48}
+//           height={48}
+//           alt={file.name}
+//           src={URL.createObjectURL(file)}
+//           className=" rounded border p-0.5"
+//         />
+//       );
+//     } else {
+//       return <Icon icon="tabler:file-description" />;
+//     }
+//   };
+
+//   const handleRemoveFile = (file: FileWithPreview) => {
+//     const uploadedFiles = files;
+//     const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+//     setFiles([...filtered]);
+//   };
+
+//   const fileList = files.map((file) => (
+//     <div
+//       key={file.name}
+//       className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
+//     >
+//       <div className="flex gap-3 items-center">
+//         {/* <div className="file-preview">{renderFilePreview(file)}</div> */}
+//         <svg
+//           xmlns="http://www.w3.org/2000/svg"
+//           width="48"
+//           height="48"
+//           viewBox="0 0 24 24"
+//         >
+//           <g fill="none" fillRule="evenodd">
+//             <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+//             <path
+//               fill="currentColor"
+//               d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"
+//             />
+//           </g>
+//         </svg>
+//         <div>
+//           <div className=" text-sm  text-card-foreground">{file.name}</div>
+//           <div className=" text-xs font-light text-muted-foreground">
+//             {Math.round(file.size / 100) / 10 > 1000 ? (
+//               <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+//             ) : (
+//               <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+//             )}
+//             {" kb"}
+//           </div>
+//         </div>
+//       </div>
+
+//       <Button
+//         size="icon"
+//         color="destructive"
+//         variant="outline"
+//         className=" border-none rounded-full"
+//         onClick={() => handleRemoveFile(file)}
+//       >
+//         <Icon icon="tabler:x" className=" h-5 w-5" />
+//       </Button>
+//     </div>
+//   ));
+
+//   const handleRemoveAllFiles = () => {
+//     setFiles([]);
+//   };
+
+//   useEffect(() => {
+//     // Jika input title kosong, isi dengan hasil generate title
+//     if (!getValues("title") && title) {
+//       setValue("title", title);
+//     }
+//   }, [title, getValues, setValue]);
+
+//   const handleRewriteClick = async () => {
+//     setIsContentRewriteClicked(true);
+
+//     const request = {
+//       style: selectedWritingStyle,
+//       lang: "id",
+//       contextType: "text",
+//       urlContext: null,
+//       context: editorContent, // Ambil isi editor original
+//       createdBy: roleId,
+//       sentiment: "Humorous",
+//       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
+//     };
+
+//     const res = await generateDataRewrite(request);
+//     close();
+
+//     if (res?.error) {
+//       console.error(res.message);
+//       return false;
+//     }
+
+//     const newArticleId = res?.data?.data?.id;
+//     setIsGeneratedArticle(true);
+
+//     setArticleIds((prevIds: string[]) => {
+//       if (prevIds.length < 3) {
+//         return [...prevIds, newArticleId];
+//       } else {
+//         const updatedIds = [...prevIds];
+//         updatedIds[2] = newArticleId;
+//         return updatedIds;
+//       }
+//     });
+
+//     Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
+//     setShowRewriteEditor(true);
+//   };
+
+//   return (
+//     <form onSubmit={handleSubmit(onSubmit)}>
+//       <div className="flex flex-col lg:flex-row gap-10 border">
+//         <Card className="w-full lg:w-8/12 m-2">
+//           <div className="px-6 py-6">
+//             <p className="text-lg font-semibold mb-3">Form Video</p>
+//             <div className="gap-5 mb-5">
+//               <div className="space-y-2 py-3">
+//                 <Label>Title</Label>
+//                 <Controller
+//                   control={control}
+//                   name="title"
+//                   render={({ field }) => (
+//                     <Input
+//                       type="text"
+//                       value={field.value}
+//                       onChange={field.onChange}
+//                       placeholder="Enter Title"
+//                     />
+//                   )}
+//                 />
+//                 {errors.title?.message && (
+//                   <p className="text-red-400 text-sm">{errors.title.message}</p>
+//                 )}
+//               </div>
+
+//               <div className="flex items-center">
+//                 <div className="py-3 w-full space-y-2">
+//                   <Label>Category</Label>
+//                   <Controller
+//                     control={control}
+//                     name="categoryId"
+//                     render={({ field }) => (
+//                       <div className="w-full">
+//                         <Select
+//                           value={field.value}
+//                           onValueChange={(value) => {
+//                             field.onChange(value);
+//                             setSelectedCategory(value);
+//                           }}
+//                         >
+//                           <SelectTrigger>
+//                             <SelectValue placeholder="Pilih" />
+//                           </SelectTrigger>
+//                           <SelectContent>
+//                             {categories.map((category) => (
+//                               <SelectItem
+//                                 key={category.id}
+//                                 value={category.id.toString()}
+//                               >
+//                                 {category.name}
+//                               </SelectItem>
+//                             ))}
+//                           </SelectContent>
+//                         </Select>
+
+//                         {errors.categoryId && (
+//                           <p className="text-sm text-red-500 mt-1">
+//                             {errors.categoryId.message}
+//                           </p>
+//                         )}
+//                       </div>
+//                     )}
+//                   />
+//                 </div>
+//               </div>
+//               <div className="flex flex-row items-center gap-3 py-2">
+//                 <Label>Ai Assistance</Label>
+//                 <div className="flex items-center gap-3">
+//                   <Switch
+//                     defaultChecked={isSwitchOn}
+//                     color="primary"
+//                     id="c2"
+//                     onCheckedChange={(checked: boolean) =>
+//                       setIsSwitchOn(checked)
+//                     }
+//                   />
+//                 </div>
+//               </div>
+//               {isSwitchOn && (
+//                 <div>
+//                   <div className="flex flex-row gap-3">
+//                     <div className="space-y-2 py-3 w-4/12">
+//                       <Label>Language</Label>
+//                       <Select onValueChange={setSelectedLanguage}>
+//                         <SelectTrigger>
+//                           <SelectValue placeholder="Pilih" />
+//                         </SelectTrigger>
+//                         <SelectContent>
+//                           <SelectItem value="id">Indonesia</SelectItem>
+//                           <SelectItem value="en">English</SelectItem>
+//                         </SelectContent>
+//                       </Select>
+//                     </div>
+//                     <div className="space-y-2 py-3 w-4/12">
+//                       <Label>Writing Style</Label>
+//                       <Select onValueChange={setSelectedWritingStyle}>
+//                         <SelectTrigger>
+//                           <SelectValue placeholder="Pilih" />
+//                         </SelectTrigger>
+//                         <SelectContent>
+//                           <SelectItem value="friendly">Friendly</SelectItem>
+//                           <SelectItem value="profesional">
+//                             Profesional
+//                           </SelectItem>
+//                           <SelectItem value="informational">
+//                             Informational
+//                           </SelectItem>
+//                           <SelectItem value="neutral">Neutral</SelectItem>
+//                           <SelectItem value="witty">Witty</SelectItem>
+//                         </SelectContent>
+//                       </Select>
+//                     </div>
+//                     <div className="space-y-2 py-3 w-4/12">
+//                       <Label>Article Size</Label>
+//                       <Select onValueChange={setSelectedSize}>
+//                         <SelectTrigger>
+//                           <SelectValue placeholder="Pilih" />
+//                         </SelectTrigger>
+//                         <SelectContent>
+//                           <SelectItem value="news">
+//                             News (300 - 900 words)
+//                           </SelectItem>
+//                           <SelectItem value="info">
+//                             Info (900 - 2000 words)
+//                           </SelectItem>
+//                           <SelectItem value="detail">
+//                             Detail (2000 - 5000 words)
+//                           </SelectItem>
+//                         </SelectContent>
+//                       </Select>
+//                     </div>
+//                   </div>
+//                   <div className="mt-5">
+//                     <div className="flex flex-row items-center gap-3 mb-3">
+//                       <Label>Main Keyword</Label>
+//                       <Button
+//                         variant="outline"
+//                         color="primary"
+//                         onClick={doGenerateMainKeyword}
+//                         disabled={isLoading}
+//                       >
+//                         {isLoading ? "Processing..." : "Proses"}
+//                       </Button>
+//                     </div>
+//                     <div>
+//                       <Input
+//                         type="text"
+//                         value={selectedMainKeyword}
+//                         onChange={(e) => setSelectedMainKeyword(e.target.value)}
+//                         placeholder="Enter Main Keyword"
+//                       />
+//                       {/* )}
+//                                /> */}
+//                     </div>
+//                   </div>
+//                   <div className="mt-5">
+//                     <div className="flex flex-row items-center gap-3 mb-3">
+//                       <Label>Title</Label>
+//                       <Button
+//                         variant="outline"
+//                         color="primary"
+//                         onClick={doGenerateTitle}
+//                         disabled={isLoading}
+//                       >
+//                         {isLoading ? "Generating..." : "Generate"}
+//                       </Button>
+//                     </div>
+//                     <div>
+//                       <Input
+//                         type="text"
+//                         value={title}
+//                         onChange={(e) => setTitle(e.target.value)}
+//                         placeholder="Generated Title"
+//                       />
+//                     </div>
+//                   </div>
+//                   <div className="mt-5">
+//                     <div className="flex flex-row items-center gap-3 mb-3">
+//                       <Label>Seo</Label>
+//                       <Button
+//                         variant={"outline"}
+//                         color="primary"
+//                         onClick={doGenerateKeyword}
+//                         disabled={isLoading}
+//                       >
+//                         {isLoading ? "Generating..." : "Generate"}
+//                       </Button>
+//                     </div>
+//                     <p className="font-semibold">
+//                       Keywords To Include In The Text",
+//                     </p>
+//                     <p className="text-sm">Title Key</p>
+//                     <div className="mt-3">
+//                       <Textarea
+//                         value={selectedSEO}
+//                         onChange={(e) => setSelectedSEO(e.target.value)}
+//                         placeholder="Enter Title"
+//                       />
+//                     </div>
+//                   </div>
+//                   <div className="mt-5">
+//                     <Label>Special Instructions (Optional)</Label>
+//                     <div className="mt-3">
+//                       <Controller
+//                         control={control}
+//                         name="title"
+//                         render={({ field }) => (
+//                           <Textarea
+//                             value={field.value}
+//                             onChange={field.onChange}
+//                             placeholder="Enter Title"
+//                           />
+//                         )}
+//                       />
+//                     </div>
+//                   </div>
+//                   <div>
+//                     <div className="my-5">
+//                       <Button
+//                         // variant={"outline"}
+//                         color="primary"
+//                         onClick={handleGenerateArtikel}
+//                         size="sm"
+//                         type="button"
+//                       >
+//                         Generate Article
+//                       </Button>
+//                     </div>
+
+//                     {isGeneratedArticle && (
+//                       <div className="mt-3 pb-0 flex flex-row">
+//                         {articleIds.map((id: string, index: number) => (
+//                           <p
+//                             key={index}
+//                             className={`mr-3 px-3 py-2 rounded-md ${
+//                               selectedArticleId === id
+//                                 ? "bg-green-500 text-white"
+//                                 : "border-2 border-green-500 text-green-500"
+//                             }`}
+//                             onClick={() => handleArticleIdClick(id)}
+//                           >
+//                             {"Narasi " + (index + 1)}
+//                           </p>
+//                         ))}
+//                       </div>
+//                     )}
+
+//                     <div className="pt-3">
+//                       <div className="flex flex-row justify-between items-center">
+//                         {selectedArticleId && (
+//                           <Button
+//                             className="mb-2"
+//                             size="sm"
+//                             variant={"outline"}
+//                             color="primary"
+//                             onClick={() => {
+//                               const url = `/${locale}/contributor/content/image/update-seo/${selectedArticleId}`;
+//                               window.open(url, "_blank", "noopener,noreferrer");
+//                             }}
+//                           >
+//                             Update
+//                           </Button>
+//                         )}
+//                       </div>
+//                     </div>
+//                   </div>
+//                   <div className="py-3 space-y-2">
+//                     <Label>Description</Label>
+//                     <Controller
+//                       control={control}
+//                       name="description"
+//                       render={({ field: { onChange, value } }) =>
+//                         isLoadingData ? (
+//                           <div className="flex justify-center items-center h-40">
+//                             <p className="text-gray-500">
+//                               Loading Proses Data...
+//                             </p>
+//                           </div>
+//                         ) : (
+//                           <CustomEditor
+//                             onChange={(value: any) => {
+//                               onChange(value);
+//                               setEditorContent(value);
+//                             }}
+//                             initialData={articleBody || value}
+//                           />
+//                         )
+//                       }
+//                     />
+//                     {errors.description?.message && (
+//                       <p className="text-red-400 text-sm">
+//                         {errors.description.message}
+//                       </p>
+//                     )}
+//                   </div>
+//                 </div>
+//               )}
+//               {!isSwitchOn && (
+//                 <>
+//                   <RadioGroup
+//                     onValueChange={(value) => setSelectedFileType(value)}
+//                     value={selectedFileType}
+//                     className=" grid-cols-1"
+//                   >
+//                     <div className="">
+//                       <RadioGroupItem value="original" id="original-file" />
+//                       <Label htmlFor="original-file">
+//                         Select Original Description
+//                       </Label>
+//                     </div>
+//                     <div className="py-3 space-y-2">
+//                       <Label>Description</Label>
+//                       <Controller
+//                         control={control}
+//                         name="descriptionOri"
+//                         render={({ field: { onChange, value } }) => (
+//                           <CustomEditor
+//                             onChange={(value: any) => {
+//                               onChange(value);
+//                               setEditorContent(value);
+//                             }}
+//                             initialData={value}
+//                           />
+//                         )}
+//                       />
+//                       {errors.description?.message && (
+//                         <p className="text-red-400 text-sm">
+//                           {errors.description.message}
+//                         </p>
+//                       )}
+//                     </div>
+
+//                     <p className="text-sm font-semibold">Content Rewrite</p>
+//                     <div className="my-2">
+//                       <Button
+//                         size="sm"
+//                         type="button"
+//                         onClick={handleRewriteClick}
+//                         className="bg-blue-500 text-white py-2 px-4 rounded"
+//                       >
+//                         Content Rewrite
+//                       </Button>
+//                     </div>
+
+//                     {showRewriteEditor && (
+//                       <div>
+//                         {isGeneratedArticle && (
+//                           <div className="mt-3 pb-0 flex flex-row ">
+//                             {articleIds.map((id: string, index: number) => (
+//                               <Button
+//                                 type="button"
+//                                 key={index}
+//                                 className={`mr-3 px-3 py-2 rounded-md ${
+//                                   selectedArticleId === id
+//                                     ? "bg-green-500 text-white"
+//                                     : "border-2 border-green-500 bg-white  text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
+//                                 }`}
+//                                 onClick={() => handleArticleIdClick(id)}
+//                               >
+//                                 {"Narasi " + (index + 1)}
+//                               </Button>
+//                             ))}
+//                           </div>
+//                         )}
+//                         <div className="flex items-center space-x-2 mt-3">
+//                           <RadioGroupItem value="rewrite" id="rewrite-file" />
+//                           <Label htmlFor="rewrite-file">
+//                             Select Description Rewrite
+//                           </Label>
+//                         </div>
+//                         <div className="py-3 space-y-2">
+//                           <Label>File Rewrite</Label>
+//                           <Controller
+//                             control={control}
+//                             name="rewriteDescription"
+//                             render={({ field: { onChange, value } }) =>
+//                               isLoadingData ? (
+//                                 <div className="flex justify-center items-center h-40">
+//                                   <p className="text-gray-500">
+//                                     Loading Proses Data...
+//                                   </p>
+//                                 </div>
+//                               ) : (
+//                                 <CustomEditor
+//                                   onChange={(value: any) => {
+//                                     onChange(value);
+//                                     setRewriteEditorContent(value);
+//                                   }}
+//                                   initialData={articleBody || value}
+//                                 />
+//                               )
+//                             }
+//                           />
+//                         </div>
+//                       </div>
+//                     )}
+//                   </RadioGroup>
+//                 </>
+//               )}
+//               <Controller
+//                 control={control}
+//                 name="files"
+//                 render={({ field }) => (
+//                   <div className="py-3 space-y-2">
+//                     <Label>Select File</Label>
+//                     <div {...getRootProps({ className: "dropzone" })}>
+//                       <input {...getInputProps()} />
+//                       <div className="w-full text-center border-dashed border border-default-200 dark:border-default-300 rounded-md py-[52px] flex items-center flex-col">
+//                         <CloudUpload className="text-default-300 w-10 h-10" />
+//                         <h4 className="text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+//                           Drag File
+//                         </h4>
+//                         <div className="text-xs text-muted-foreground">
+//                           Upload File Video Max
+//                         </div>
+//                       </div>
+//                     </div>
+
+//                     {files.length > 0 && (
+//                       <div className="mt-2 space-y-1">
+//                         {files.map((file, idx) => (
+//                           <div
+//                             key={idx}
+//                             className="flex items-center justify-between rounded border border-default-200 dark:border-default-300 px-2 py-1 text-sm"
+//                           >
+//                             <span className="truncate">{file.name}</span>
+//                             <span className="text-muted-foreground">
+//                               {(file.size / (1024 * 1024)).toFixed(2)} MB
+//                             </span>
+//                           </div>
+//                         ))}
+//                         <div className="flex justify-between gap-2 mt-1">
+//                           <Button
+//                             color="destructive"
+//                             onClick={handleRemoveAllFiles}
+//                           >
+//                             Remove All
+//                           </Button>
+//                         </div>
+//                       </div>
+//                     )}
+
+//                     {errors.files && (
+//                       <p className="text-red-500 text-sm">
+//                         {errors.files.message}
+//                       </p>
+//                     )}
+//                   </div>
+//                 )}
+//               />
+//             </div>
+//           </div>
+//         </Card>
+
+//         <div className="w-full lg:w-4/12 m-2">
+//           <Card className="h-fit">
+//             <div className="px-3 py-3">
+//               <div className="space-y-2">
+//                 <Label>Creator</Label>
+//                 <Controller
+//                   control={control}
+//                   name="creatorName"
+//                   render={({ field }) => (
+//                     <Input
+//                       type="text"
+//                       value={field.value}
+//                       onChange={field.onChange}
+//                       placeholder="Enter Title"
+//                     />
+//                   )}
+//                 />
+//                 {errors.creatorName?.message && (
+//                   <p className="text-red-400 text-sm">
+//                     {errors.creatorName.message}
+//                   </p>
+//                 )}
+//               </div>
+//             </div>
+//             <div className="px-3 py-3">
+//               <Label htmlFor="fileInput">Gambar Utama</Label>
+//               <Input id="fileInput" type="file" onChange={handleImageChange} />
+//             </div>
+//             {preview && (
+//               <div className="mt-3 px-3">
+//                 <img
+//                   src={preview}
+//                   alt="Thumbnail Preview"
+//                   className="w-full h-auto rounded"
+//                 />
+//               </div>
+//             )}
+//             <div className="px-3 py-3 space-y-2">
+//               <Label htmlFor="tags">Tags</Label>
+
+//               <Controller
+//                 control={control}
+//                 name="tags"
+//                 render={({ field }) => (
+//                   <>
+//                     <Input
+//                       type="text"
+//                       id="tags"
+//                       placeholder="Add a tag and press Enter"
+//                       onKeyDown={(e) => {
+//                         if (e.key === "Enter" && e.currentTarget.value.trim()) {
+//                           e.preventDefault();
+//                           field.onChange([
+//                             ...field.value,
+//                             e.currentTarget.value.trim(),
+//                           ]);
+//                           e.currentTarget.value = "";
+//                         }
+//                       }}
+//                     />
+
+//                     <div className="mt-3">
+//                       {field.value.map((tag: string, index: number) => (
+//                         <span
+//                           key={index}
+//                           className="px-1 py-1 rounded-lg bg-black text-white mr-2 text-sm font-sans"
+//                         >
+//                           {tag}{" "}
+//                           <button
+//                             type="button"
+//                             onClick={() => {
+//                               const updatedTags = field.value.filter(
+//                                 (_, i) => i !== index
+//                               );
+//                               field.onChange(updatedTags);
+//                             }}
+//                             className="remove-tag-button"
+//                           >
+//                             ×
+//                           </button>
+//                         </span>
+//                       ))}
+//                     </div>
+//                   </>
+//                 )}
+//               />
+
+//               {/* Tampilkan error */}
+//               {errors.tags?.message && (
+//                 <p className="text-red-400 text-sm">{errors.tags.message}</p>
+//               )}
+//             </div>
+//             <Controller
+//               control={control}
+//               name="publishedFor"
+//               render={({ field }) => (
+//                 <div className="px-3 py-3">
+//                   <div className="flex flex-col gap-3 space-y-2">
+//                     <Label>Publish Target</Label>
+
+//                     {options.map((option) => {
+//                       const isAllChecked =
+//                         field.value.length ===
+//                         options.filter((opt: any) => opt.id !== "all").length;
+
+//                       const isChecked =
+//                         option.id === "all"
+//                           ? isAllChecked
+//                           : field.value.includes(option.id);
+
+//                       const handleChange = () => {
+//                         let updated: string[] = [];
+
+//                         if (option.id === "all") {
+//                           updated = isAllChecked
+//                             ? []
+//                             : options
+//                                 .filter((opt: any) => opt.id !== "all")
+//                                 .map((opt: any) => opt.id);
+//                         } else {
+//                           updated = isChecked
+//                             ? field.value.filter((val) => val !== option.id)
+//                             : [...field.value, option.id];
+
+//                           if (isAllChecked && option.id !== "all") {
+//                             updated = updated.filter((val) => val !== "all");
+//                           }
+//                         }
+
+//                         field.onChange(updated);
+//                         setPublishedFor(updated);
+//                       };
+
+//                       return (
+//                         <div
+//                           key={option.id}
+//                           className="flex gap-2 items-center"
+//                         >
+//                           <Checkbox
+//                             id={option.id}
+//                             checked={isChecked}
+//                             onCheckedChange={handleChange}
+//                             className="border"
+//                           />
+//                           <Label htmlFor={option.id}>{option.label}</Label>
+//                         </div>
+//                       );
+//                     })}
+
+//                     {errors.publishedFor && (
+//                       <p className="text-red-500 text-sm">
+//                         {errors.publishedFor.message}
+//                       </p>
+//                     )}
+//                   </div>
+//                 </div>
+//               )}
+//             />
+//           </Card>
+//           <div className="flex flex-row justify-end gap-3">
+//             <div className="mt-4">
+//               <Button type="submit" color="primary">
+//                 Submit
+//               </Button>
+//             </div>
+//             <div className="mt-4">
+//               <Button type="button" color="primary" variant="outline">
+//                 Cancel
+//               </Button>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </form>
+//   );
+// }
diff --git a/components/form/content/audio/audio-detail-form.tsx b/components/form/content/audio/audio-detail-form.tsx
index c190974..ce0cca4 100644
--- a/components/form/content/audio/audio-detail-form.tsx
+++ b/components/form/content/audio/audio-detail-form.tsx
@@ -256,8 +256,11 @@ export default function FormAudioDetail() {
 
         setDetail(details);
         setMain({
-          type: details?.fileType.name,
-          url: details?.files[0]?.url,
+          type:
+            details?.fileType?.name ||
+            details?.fileTypeName || // kalau backend pakai nama ini
+            details?.typeName || // atau nama alternatif
+            "Audio", // fallback aman          url: details?.files[0]?.url,
           names: details?.files[0]?.fileName,
           format: details?.files[0]?.format,
         });
@@ -448,8 +451,8 @@ export default function FormAudioDetail() {
   return (
     <form>
       {detail !== undefined ? (
-        <div className="flex flex-col lg:flex-row gap-10">
-          <Card className="w-full lg:w-8/12">
+        <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
+          <Card className="w-full lg:w-8/12 m-2">
             <div className="px-6 py-6">
               <p className="text-lg font-semibold mb-3">Form Audio</p>
               <div className="gap-5 mb-5">
@@ -533,31 +536,12 @@ export default function FormAudioDetail() {
               </div>
             </div>
           </Card>
-          <div className="w-full lg:w-4/12">
+          <div className="w-full lg:w-4/12 m-2">
             <Card className="pb-3">
               <div className="px-3 py-3">
-                <div className="space-y-2">
-                  <Label>Creator</Label>
-                  <Controller
-                    control={control}
-                    name="creatorName"
-                    render={({ field }) => (
-                      <Input
-                        type="text"
-                        value={detail?.creatorName}
-                        onChange={field.onChange}
-                        placeholder="Enter Title"
-                      />
-                    )}
-                  />
-                  {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
-                  )}
-                </div>
+                <Label>Creator</Label>
+                <Input value={detail.createdByName} disabled />
               </div>
-
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>Tags</Label>
@@ -567,7 +551,7 @@ export default function FormAudioDetail() {
                       .map((tag: string, index: number) => (
                         <Badge
                           key={index}
-                          className="border rounded-md  px-2 py-2"
+                          className="border rounded-md bg-black text-white px-2 py-2"
                         >
                           {tag.trim()}
                         </Badge>
@@ -576,40 +560,26 @@ export default function FormAudioDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6 space-y-2">
+                <div className="flex flex-col gap-2 space-y-2">
                   <Label>Publish Target</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
-                      id="5"
+                      id="4"
                       checked={selectedPublishers.includes(5)}
                       onChange={() => handleCheckboxChange(5)}
+                      className="border"
                     />
                     <Label htmlFor="5">UMUM</Label>
                   </div>
                   <div className="flex gap-2 items-center">
                     <Checkbox
-                      id="6"
+                      id="5"
                       checked={selectedPublishers.includes(6)}
                       onChange={() => handleCheckboxChange(6)}
+                      className="border"
                     />
                     <Label htmlFor="6">JOURNALIS</Label>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <Checkbox
-                      id="7"
-                      checked={selectedPublishers.includes(7)}
-                      onChange={() => handleCheckboxChange(7)}
-                    />
-                    <Label htmlFor="7">POLRI</Label>
-                  </div>
-                  <div className="flex gap-2 items-center">
-                    <Checkbox
-                      id="8"
-                      checked={selectedPublishers.includes(8)}
-                      onChange={() => handleCheckboxChange(8)}
-                    />
-                    <Label htmlFor="8">KSP</Label>
-                  </div>
                 </div>
               </div>
               <SuggestionModal
diff --git a/components/form/content/document/teks-detail-form.tsx b/components/form/content/document/teks-detail-form.tsx
index e2ab0ef..574dfb2 100644
--- a/components/form/content/document/teks-detail-form.tsx
+++ b/components/form/content/document/teks-detail-form.tsx
@@ -66,6 +66,11 @@ import FileTextPreview from "../file-preview-text";
 import FileTextThumbnail from "../file-text-thumbnail";
 import { listArticleCategories } from "@/service/content";
 
+type Option = {
+  id: string;
+  label: string;
+};
+
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   description: z
@@ -120,13 +125,11 @@ export default function FormTeksDetail() {
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
   const roleId = getCookiesDecrypt("urie");
-
   const [modalOpen, setModalOpen] = useState(false);
   const { id } = useParams() as { id: string };
   console.log(id);
   const editor = useRef(null);
   type ImageSchema = z.infer<typeof imageSchema>;
-
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const taskId = Cookies.get("taskId");
   const scheduleId = Cookies.get("scheduleId");
@@ -146,11 +149,16 @@ export default function FormTeksDetail() {
   const [files, setFiles] = useState<FileType[]>([]);
   const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
   const [isMabesApprover, setIsMabesApprover] = useState(false);
-
   const [filePlacements, setFilePlacements] = useState<string[][]>([]);
   const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
-
   const [approval, setApproval] = useState<any>();
+  const [publishedFor, setPublishedFor] = useState<string[]>([]);
+
+  const options: Option[] = [
+    { id: "all", label: "SEMUA" },
+    { id: "4", label: "UMUM" },
+    { id: "5", label: "JOURNALIS" },
+  ];
 
   let fileTypeId = "3";
 
@@ -218,43 +226,63 @@ export default function FormTeksDetail() {
 
   useEffect(() => {
     async function initState() {
-      if (id) {
+      if (!id) return;
+
+      try {
         const response = await getArticleDetail(Number(id));
         const details = response?.data?.data;
-        console.log("detail", details);
-        setSelectedCategory(String(details.categories[0].id));
+        if (!details) return;
 
-        setFiles(details?.files);
+        // ✅ Aman untuk categories
+        const firstCategoryId =
+          details?.categories && details.categories.length > 0
+            ? String(details.categories[0].id)
+            : "";
+
+        setSelectedCategory(firstCategoryId);
+        setFiles(details?.files || []);
         setDetail(details);
+
+        // ✅ Aman untuk fileType
         setMain({
-          type: details?.fileType.name,
-          url: details?.files[0]?.url,
-          names: details?.files[0]?.fileName,
-          format: details?.files[0]?.format,
+          type: details?.fileType?.name || "Unknown",
+          url: details?.files?.[0]?.url || "",
+          names: details?.files?.[0]?.fileName || "",
+          format: details?.files?.[0]?.format || "",
         });
 
-        if (details.publishedForObject) {
+        if (details?.publishedForObject) {
           const publisherIds = details.publishedForObject.map(
             (obj: any) => obj.id
           );
           setSelectedPublishers(publisherIds);
         }
 
-        // Set the selected target to the category ID from details
-        setSelectedTarget(String(details.category.id));
+        setSelectedTarget(String(details?.category?.id || ""));
+
+        const filesData = details?.files || [];
+        const fileUrls = filesData.map((file: any) => {
+          const ext = file?.fileName?.includes(".")
+            ? "." + file.fileName.split(".").pop()
+            : file?.type || "";
+
+          return {
+            url: file?.url || file?.secondaryUrl || "default-image.jpg",
+            format: ext?.toLowerCase(),
+            fileName: file?.fileName || "Unknown file",
+            type: file?.type || "",
+          };
+        });
 
-        const filesData = details.files || [];
-        const fileUrls = filesData.map((file: any) => ({
-          url: file.secondaryUrl || "default-image.jpg",
-          format: file.format,
-          fileName: file.fileName,
-        }));
         setDetailThumb(fileUrls);
 
         const approvals = await getDataApprovalByMediaUpload(details?.id);
         setApproval(approvals?.data?.data);
+      } catch (err) {
+        console.error("Error loading article details:", err);
       }
     }
+
     initState();
   }, [refresh, setValue]);
 
@@ -392,15 +420,15 @@ export default function FormTeksDetail() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/admin/content/document");
+      router.push("/admin/content/text");
     });
   };
 
   return (
     <form>
       {detail !== undefined ? (
-        <div className="flex flex-col lg:flex-row gap-10">
-          <Card className="w-full lg:w-8/12">
+        <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
+          <Card className="w-full lg:w-8/12 m-2">
             <div className="px-6 py-6">
               <p className="text-lg font-semibold mb-3">Form Text</p>
               <div className="gap-5 mb-5">
@@ -463,7 +491,7 @@ export default function FormTeksDetail() {
                   )}
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-xl">File Media </Label>
+                  <Label className="text-xl">File Media</Label>
                   <div className="w-full">
                     <Swiper
                       thumbs={{ swiper: thumbsSwiper }}
@@ -498,30 +526,12 @@ export default function FormTeksDetail() {
               </div>
             </div>
           </Card>
-          <div className="w-full lg:w-4/12">
+          <div className="w-full lg:w-4/12 m-2">
             <Card className="pb-3">
-              <div className="px-3 py-3">
-                <div className="space-y-2">
+                <div className="px-3 py-3">
                   <Label>Creator</Label>
-                  <Controller
-                    control={control}
-                    name="creatorName"
-                    render={({ field }) => (
-                      <Input
-                        type="text"
-                        value={detail?.creatorName}
-                        onChange={field.onChange}
-                        placeholder="Enter Title"
-                      />
-                    )}
-                  />
-                  {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
-                  )}
+                  <Input value={detail.createdByName} disabled />
                 </div>
-              </div>
               {/* <div className="mt-3 px-3">
                 <Label>Pratinjau Gambar Utama</Label>
                 <Card className="mt-2">
@@ -541,7 +551,7 @@ export default function FormTeksDetail() {
                       .map((tag: string, index: number) => (
                         <Badge
                           key={index}
-                          className="border rounded-md  px-2 py-2"
+                          className="border rounded-md bg-black text-white px-2 py-2"
                         >
                           {tag.trim()}
                         </Badge>
@@ -550,40 +560,26 @@ export default function FormTeksDetail() {
                 </div>
               </div>
               <div className="px-3 py-3">
-                <div className="flex flex-col gap-6 space-y-2">
+                <div className="flex flex-col gap-2 space-y-2">
                   <Label>Publish Target</Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
-                      id="5"
+                      id="4"
                       checked={selectedPublishers.includes(5)}
                       onChange={() => handleCheckboxChange(5)}
+                      className="border"
                     />
                     <Label htmlFor="5">UMUM</Label>
                   </div>
                   <div className="flex gap-2 items-center">
                     <Checkbox
-                      id="6"
+                      id="5"
                       checked={selectedPublishers.includes(6)}
                       onChange={() => handleCheckboxChange(6)}
+                      className="border"
                     />
                     <Label htmlFor="6">JOURNALIS</Label>
                   </div>
-                  <div className="flex gap-2 items-center">
-                    <Checkbox
-                      id="7"
-                      checked={selectedPublishers.includes(7)}
-                      onChange={() => handleCheckboxChange(7)}
-                    />
-                    <Label htmlFor="7">POLRI</Label>
-                  </div>
-                  <div className="flex gap-2 items-center">
-                    <Checkbox
-                      id="8"
-                      checked={selectedPublishers.includes(8)}
-                      onChange={() => handleCheckboxChange(8)}
-                    />
-                    <Label htmlFor="8">KSP</Label>
-                  </div>
                 </div>
               </div>
               <SuggestionModal
@@ -821,10 +817,10 @@ export default function FormTeksDetail() {
                 </DialogContent>
               </Dialog>
             </Card>
-            {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
+            {/* {Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
               Number(detail?.uploadedById) == Number(userId) ? (
                 ""
-              ) : (
+              ) : ( */}
                 <div className="flex flex-col gap-2 p-3">
                   <Button
                     onClick={() => actionApproval("2")}
@@ -849,10 +845,10 @@ export default function FormTeksDetail() {
                     Reject
                   </Button>
                 </div>
-              )
+              {/* )
             ) : (
               ""
-            )}
+            )} */}
           </div>
         </div>
       ) : (
diff --git a/components/form/content/document/teks-form.tsx b/components/form/content/document/teks-form.tsx
index be9ce41..952bf65 100644
--- a/components/form/content/document/teks-form.tsx
+++ b/components/form/content/document/teks-form.tsx
@@ -144,10 +144,8 @@ export default function FormTeks() {
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
-    { id: "5", label: "UMUM" },
-    { id: "6", label: "JOURNALIS" },
-    { id: "7", label: "POLRI" },
-    { id: "8", label: "KSP" },
+    { id: "4", label: "UMUM" },
+    { id: "5", label: "JOURNALIS" },
   ];
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -638,12 +636,11 @@ export default function FormTeks() {
     }
 
     if (id == undefined) {
-      // New Articles API request data structure
       const articleData: CreateArticleData = {
-        aiArticleId: 0, // default 0
+        aiArticleId: 0, 
         categoryIds: selectedCategory.toString(),
-        createdAt: formatDateForBackend(new Date()), // ✅ format sesuai backend
-        createdById: Number(userId), // isi dengan userId valid
+        createdAt: formatDateForBackend(new Date()), 
+        createdById: Number(userId), 
         description: htmlToString(finalDescription),
         htmlDescription: finalDescription,
         isDraft: true,
@@ -655,9 +652,8 @@ export default function FormTeks() {
           .replace(/[^a-z0-9-]/g, ""),
         tags: finalTags,
         title: finalTitle,
-        typeId: 1, // Image content type
+        typeId: 3, 
       };
-      // Use new Articles API
       const response = await createArticle(articleData);
       console.log("Article Data Submitted:", articleData);
       console.log("Article API Response:", response);
@@ -670,16 +666,12 @@ export default function FormTeks() {
         );
         return false;
       }
-
-      // Get the article ID from the new API response
       const articleId = response?.data?.data?.id;
       Cookies.set("idCreate", articleId, { expires: 1 });
       id = articleId;
 
-      // Upload files using new article-files API
       const formData = new FormData();
 
-      // Add all files to FormData
       files.forEach((file, index) => {
         formData.append("files", file);
       });
@@ -701,10 +693,9 @@ export default function FormTeks() {
 
         console.log("Files uploaded successfully:", uploadResponse);
 
-        // Upload thumbnail using first file as thumbnail
         if (files.length > 0) {
           const thumbnailFormData = new FormData();
-          thumbnailFormData.append("files", files[0]); // Use first file as thumbnail
+          thumbnailFormData.append("files", files[0]);
 
           console.log("Uploading thumbnail for article:", articleId);
 
@@ -719,7 +710,6 @@ export default function FormTeks() {
                 "Thumbnail upload failed:",
                 thumbnailResponse.message
               );
-              // Don't fail the whole process if thumbnail upload fails
             } else {
               console.log(
                 "Thumbnail uploaded successfully:",
@@ -728,7 +718,6 @@ export default function FormTeks() {
             }
           } catch (thumbnailError) {
             console.warn("Thumbnail upload error:", thumbnailError);
-            // Don't fail the whole process if thumbnail upload fails
           }
         }
       } catch (uploadError) {
@@ -741,7 +730,6 @@ export default function FormTeks() {
         return false;
       }
 
-      // Show success message
       MySwal.fire({
         title: "Sukses",
         text: "Article dan files berhasil disimpan.",
@@ -749,7 +737,7 @@ export default function FormTeks() {
         confirmButtonColor: "#3085d6",
         confirmButtonText: "OK",
       }).then(() => {
-        router.push("/admin/content/document");
+        router.push("/admin/content/text");
       });
 
       Cookies.remove("idCreate");
@@ -980,8 +968,8 @@ export default function FormTeks() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex flex-col lg:flex-row gap-10">
-        <Card className="w-full lg:w-8/12">
+      <div className="flex flex-col lg:flex-row gap-10 border rounded-lg">
+        <Card className="w-full lg:w-8/12 m-2">
           <div className="px-6 py-6">
             <p className="text-lg font-semibold mb-3">Form Document</p>
             <div className="gap-5 mb-5">
@@ -1428,7 +1416,7 @@ export default function FormTeks() {
             {/* Submit Button */}
           </div>
         </Card>
-        <div className="w-full lg:w-4/12">
+        <div className="w-full lg:w-4/12 m-2">
           <Card className=" h-[500px]">
             <div className="px-3 py-3">
               <div className="space-y-2">
@@ -1561,6 +1549,7 @@ export default function FormTeks() {
                             id={option.id}
                             checked={isChecked}
                             onCheckedChange={handleChange}
+                            className="border"
                           />
                           <Label htmlFor={option.id}>{option.label}</Label>
                         </div>
diff --git a/components/form/content/file-preview-text.tsx b/components/form/content/file-preview-text.tsx
index ed56fe5..20af5aa 100644
--- a/components/form/content/file-preview-text.tsx
+++ b/components/form/content/file-preview-text.tsx
@@ -2,8 +2,9 @@ import React from "react";
 
 type FileData = {
   url: string;
-  format: string; // extension with dot, e.g. ".pdf"
+  format: string; // bisa ".pdf" atau "mp4" atau "image/jpeg"
   fileName?: string;
+  type?: string; // optional dari API (misal: video/mp4)
 };
 
 interface FilePreviewProps {
@@ -11,48 +12,102 @@ interface FilePreviewProps {
 }
 
 const FileTextPreview: React.FC<FilePreviewProps> = ({ file }) => {
-  const format = file.format.toLowerCase();
+  const format = (file.format || "").toLowerCase();
+  const type = (file.type || "").toLowerCase();
 
-  if ([".jpg", ".jpeg", ".png", ".webp"].includes(format)) {
+  // 🖼️ Gambar
+  if (
+    [".jpg", ".jpeg", ".png", ".webp", ".gif"].some((ext) =>
+      format.includes(ext)
+    ) ||
+    type.includes("image")
+  ) {
     return (
       <img
-        className="object-fill h-full w-full rounded-md"
+        className="object-contain h-[500px] w-full rounded-md bg-black"
         src={file.url}
-        alt={file.fileName || "File"}
+        alt={file.fileName || "Image File"}
       />
     );
   }
 
-  if (format === ".pdf") {
+  // 🎬 Video
+  if (
+    ["mp4", "mov", "avi", ".mp4", ".mov", ".avi"].some((ext) =>
+      format.includes(ext)
+    ) ||
+    type.includes("video")
+  ) {
+    return (
+      <video
+        className="object-contain h-[500px] w-full rounded-md bg-black"
+        controls
+      >
+        <source src={file.url} type={type || "video/mp4"} />
+        Browser Anda tidak mendukung video tag.
+      </video>
+    );
+  }
+
+  // 🎧 Audio
+  if (
+    ["mp3", "wav", "ogg", ".mp3", ".wav", ".ogg"].some((ext) =>
+      format.includes(ext)
+    ) ||
+    type.includes("audio")
+  ) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[200px] bg-gray-100 rounded-md">
+        <audio controls className="w-full max-w-[90%]">
+          <source src={file.url} type={type || "audio/mpeg"} />
+          Browser Anda tidak mendukung audio tag.
+        </audio>
+      </div>
+    );
+  }
+
+  // 📄 PDF
+  if (format.includes(".pdf") || type.includes("pdf")) {
     return (
       <iframe
-        className="w-full h-96 rounded-md"
-        src={`https://drive.google.com/viewerng/viewer?embedded=true&url=${encodeURIComponent(file.url)}`}
+        className="w-full h-[600px] rounded-md"
+        src={`https://drive.google.com/viewerng/viewer?embedded=true&url=${encodeURIComponent(
+          file.url
+        )}`}
         title={file.fileName || "PDF File"}
       />
     );
   }
 
-  if ([".doc", ".docx", ".ppt", ".pptx", ".xls", ".xlsx"].includes(format)) {
+  // 🧾 Dokumen Office
+  if (
+    [".doc", ".docx", ".ppt", ".pptx", ".xls", ".xlsx"].some((ext) =>
+      format.includes(ext)
+    )
+  ) {
     return (
       <iframe
-        className="w-full h-96 rounded-md"
-        src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.url)}`}
-        title={file.fileName || "Document"}
+        className="w-full h-[600px] rounded-md"
+        src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+          file.url
+        )}`}
+        title={file.fileName || "Office Document"}
       />
     );
   }
 
-  // Fallback → unknown format
+  // 🔗 Default fallback → link download
   return (
-    <a
-      href={file.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="block text-blue-500 underline"
-    >
-      View {file.fileName || "File"}
-    </a>
+    <div className="text-center py-20">
+      <a
+        href={file.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-500 underline"
+      >
+        Lihat {file.fileName || "File"}
+      </a>
+    </div>
   );
 };
 
diff --git a/components/landing-page/media-update.tsx b/components/landing-page/media-update.tsx
index 6a8e481..9e57e5a 100644
--- a/components/landing-page/media-update.tsx
+++ b/components/landing-page/media-update.tsx
@@ -117,32 +117,52 @@ export default function MediaUpdate() {
     }
   }
 
+  // if (contentType === "all") {
+  //   setFilteredData(dataToRender);
+  //   return;
+  // }
+
   // Function to filter data by content type
+
+  // function filterDataByContentType() {
+  //   const filtered = dataToRender.filter((item) => {
+  //     // Determine content type based on item properties
+  //     const hasVideo = item.videoUrl || item.videoPath;
+  //     const hasAudio = item.audioUrl || item.audioPath;
+  //     const hasImage =
+  //       item.smallThumbnailLink || item.thumbnailUrl || item.imageUrl;
+  //     const hasText = item.content || item.description;
+
+  //     switch (contentType) {
+  //       case "audiovisual":
+  //         return hasVideo;
+  //       case "audio":
+  //         return hasAudio && !hasVideo;
+  //       case "foto":
+  //         return hasImage && !hasVideo && !hasAudio;
+  //       case "text":
+  //         return hasText && !hasVideo && !hasAudio && !hasImage;
+  //       default:
+  //         return true;
+  //     }
+  //   });
+
+  //   setFilteredData(filtered);
+  // }
+
   function filterDataByContentType() {
-    // if (contentType === "all") {
-    //   setFilteredData(dataToRender);
-    //   return;
-    // }
-
     const filtered = dataToRender.filter((item) => {
-      // Determine content type based on item properties
-      const hasVideo = item.videoUrl || item.videoPath;
-      const hasAudio = item.audioUrl || item.audioPath;
-      const hasImage =
-        item.smallThumbnailLink || item.thumbnailUrl || item.imageUrl;
-      const hasText = item.content || item.description;
-
       switch (contentType) {
         case "audiovisual":
-          return hasVideo && (hasAudio || hasImage);
+          return item.typeId === 2; // Video
         case "audio":
-          return hasAudio && !hasVideo;
+          return item.typeId === 4; // Audio
         case "foto":
-          return hasImage && !hasVideo && !hasAudio;
+          return item.typeId === 1; // Image
         case "text":
-          return hasText && !hasVideo && !hasAudio && !hasImage;
+          return item.typeId === 3; // Text
         default:
-          return true;
+          return true; // Semua jenis
       }
     });