"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, 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 JoditEditor from "jodit-react";
import { register } from "module";
import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie";
import {
  createMedia,
  getTagsBySubCategoryId,
  listEnableCategory,
  uploadThumbnail,
} from "@/service/content/content";
import { uploadThumbnailBlog } from "@/service/blog/blog";
import { Textarea } from "@/components/ui/textarea";
import {
  generateDataArticle,
  getDetailArticle,
  getGenerateKeywords,
  getGenerateTitle,
} from "@/service/content/ai";
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";

const imageSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  description: z
    .string()
    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
  creatorName: z.string().min(1, { message: "Creator diperlukan" }),
  // tags: z.string().min(1, { message: "Judul diperlukan" }),
});

interface FileWithPreview extends File {
  preview: string;
}

type Category = {
  id: string;
  name: string;
};

export default function FormTeks() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  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");
  const scheduleType = Cookies.get("scheduleType");
  const roleId = getCookiesDecrypt("urie");

  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 [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 [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 [selectedWritingStyle, setSelectedWritingStyle] = useState("");
  const [selectedSize, setSelectedSize] = useState("");
  const [detailData, setDetailData] = useState<any>(null);
  const [articleImages, setArticleImages] = useState<string[]>([]);
  const [isSwitchOn, setIsSwitchOn] = useState<boolean>(false);

  const [selectedTarget, setSelectedTarget] = useState("");
  const [unitSelection, setUnitSelection] = useState({
    allUnit: false,
    mabes: false,
    polda: false,
    polres: false,
  });

  let fileTypeId = "3";
  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 [files, setFiles] = useState<FileWithPreview[]>([]);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map((file) => Object.assign(file)));
    },
  });

  const {
    control,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm<ImageSchema>({
    resolver: zodResolver(imageSchema),
  });

  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 {
      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 {
      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 {
      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 < 5) {
        return [...prevIds, newArticleId];
      } else {
        const updatedIds = [...prevIds];
        updatedIds[4] = newArticleId;
        return updatedIds;
      }
    });

    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
  };

  const handleArticleIdClick = async (id: string) => {
    const res = await getDetailArticle(id);
    const articleData = res?.data?.data;

    const cleanArticleBody = articleData?.articleBody?.replace(
      /<img[^>]*>/g,
      ""
    );
    const articleImagesData = articleData?.imagesUrl?.split(",");

    setArticleBody(cleanArticleBody || "");
    setDetailData(articleData);
    setSelectedArticleId(id);
    setArticleImages(articleImagesData || []);
  };

  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]); // Add new tag
        // setValue("tags", ""); // Clear input field
      }
    }
  };

  const handleRemoveTag = (index: number) => {
    setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // Remove tag
  };

  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 {
      const category = await listEnableCategory(fileTypeId);
      const resCategory: Category[] = category.data.data.content;

      setCategories(resCategory);
      console.log("data category", resCategory);

      if (scheduleId && scheduleType === "3") {
        const findCategory = resCategory.find((o) =>
          o.name.toLowerCase().includes("pers rilis")
        );

        if (findCategory) {
          // setValue("categoryId", findCategory.id);
          setSelectedCategory(findCategory.id); // Set the selected category
          const response = await getTagsBySubCategoryId(findCategory.id);
          setTags(response?.data.data);
        }
      }
    } catch (error) {
      console.error("Failed to fetch categories:", error);
    }
  };

  const save = async (data: ImageSchema) => {
    loading();
    const finalTags = tags.join(", ");
    const finalTitle = isSwitchOn ? title : data.title;
    const requestData = {
      ...data,
      title: finalTitle,
      description: data.description,
      htmlDescription: data.description,
      fileTypeId,
      categoryId: selectedCategory,
      subCategoryId: selectedCategory,
      uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
      statusId: "1",
      publishedFor: "6",
      creatorName: data.creatorName,
      tags: finalTags,
      isYoutube: false,
      isInternationalMedia: false,
    };

    let id = Cookies.get("idCreate");

    if (id == undefined) {
      const response = await createMedia(requestData);
      console.log("Form Data Submitted:", requestData);

      if (response?.error) {
        MySwal.fire("Error", response?.message, "error");
        return;
      }
      Cookies.set("idCreate", response?.data.data, { expires: 1 });
      id = response?.data?.data;

      // Upload Thumbnail
      const formMedia = new FormData();
      console.log("Thumbnail : ", files[0]);
      formMedia.append("file", files[0]);
      const responseThumbnail = await uploadThumbnail(id, formMedia);
      if (responseThumbnail?.error == true) {
        error(responseThumbnail?.message);
        return false;
      }
    }

    // Upload File
    const progressInfoArr = [];
    for (const item of files) {
      progressInfoArr.push({ percentage: 0, fileName: item.name });
    }
    progressInfo = progressInfoArr;
    setIsStartUpload(true);
    setProgressList(progressInfoArr);

    close();
    // showProgress();
    files.map(async (item: any, index: number) => {
      await uploadResumableFile(
        index,
        String(id),
        item,
        fileTypeId == "2" || fileTypeId == "4" ? item.duration : "0"
      );
    });

    Cookies.remove("idCreate");

    // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
  };

  const onSubmit = (data: ImageSchema) => {
    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 upload = new Upload(file, {
      endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
      retryDelays: [0, 3000, 6000, 12_000, 24_000],
      chunkSize: 20_000,
      metadata: {
        mediaid: id,
        filename: file.name,
        filetype: file.type,
        duration,
        isWatermark: "true", // hardcode
      },
      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/image/");
    }
  }

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setThumbnail(file);
      console.log("Selected Thumbnail:", file);
    }
    if (file) {
      setPreview(URL.createObjectURL(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>
        <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([]);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex lg:flex-row gap-10">
        <Card className="w-full lg:w-8/12">
          <div className="px-6 py-6">
            <p className="text-lg font-semibold mb-3">Form Konten Teks</p>
            <div className="gap-5 mb-5">
              {/* Input Title */}
              <div className="space-y-2 py-3">
                <Label>Judul</Label>
                <Controller
                  control={control}
                  name="title"
                  render={({ field }) => (
                    <Input
                      size="md"
                      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">
                  <Label>Kategori</Label>
                  <Select
                    value={selectedCategory} // Ensure selectedTarget is updated correctly
                    onValueChange={(id) => {
                      console.log("Selected Category ID:", id);
                      setSelectedCategory(id);
                    }}
                  >
                    <SelectTrigger size="md">
                      <SelectValue placeholder="Pilih" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem
                          key={category.id}
                          value={category.id.toString()}
                        >
                          {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="flex flex-row items-center gap-3 py-2">
                <Label>Bantuan AI</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>Bahasa</Label>
                      <Select onValueChange={setSelectedLanguage}>
                        <SelectTrigger size="md">
                          <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 size="md">
                          <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 size="md">
                          <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
                        size="md"
                        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>Judul</Label>
                      <Button
                        variant="outline"
                        color="primary"
                        onClick={doGenerateTitle}
                        disabled={isLoading}
                      >
                        {isLoading ? "Generating..." : "Generate"}
                      </Button>
                    </div>
                    <div>
                      <Input
                        size="md"
                        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">
                      Kata kunci untuk disertakan dalam teks
                    </p>
                    <p className="text-sm">
                      JIka Anda tidak Memberikan kata kunci, kami akan secara
                      otomatis membuat kata kunci yang relevan dari kata kunci
                      utama untuk setiap bagian dan menggunakannya untuk membuat
                      artikel. Untuk menambahkan kata kunci baru, ketik &apos;,
                      + kata kunci&apos;.
                    </p>
                    <div className="mt-3">
                      <Textarea
                        value={selectedSEO}
                        onChange={(e) => setSelectedSEO(e.target.value)}
                        placeholder="Enter Title"
                      />
                    </div>
                  </div>
                  <div className="mt-5">
                    <Label>Instruksi Khusus (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"
                      >
                        Generate Article
                      </Button>
                    </div>

                    {isGeneratedArticle && (
                      <div className="mt-3 pb-0 flex flex-row ">
                        {articleIds.map((id: string, index: number) => (
                          <p
                            key={index}
                            className={`btn mr-3 ${
                              selectedArticleId === id
                                ? "bg-green-500 text-white px-3 py-2 rounded-md"
                                : "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
                            }`}
                            onClick={() => handleArticleIdClick(id)}
                          >
                            {id}
                          </p>
                        ))}
                      </div>
                    )}

                    <div className="pt-3">
                      <div className="flex flex-row justify-between items-center">
                        {selectedArticleId && (
                          <a
                            href={`/admin/media/${
                              fileTypeId === "1"
                                ? "image"
                                : fileTypeId === "2"
                                ? "video"
                                : fileTypeId === "3"
                                ? "text"
                                : "audio"
                            }/update-new/${selectedArticleId}`}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <Button
                              className="mb-2"
                              size="sm"
                              variant={"outline"}
                              color="primary"
                            >
                              Edit
                            </Button>
                          </a>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              )}
              <div className="">
                <Label>Deskripsi</Label>
                <Controller
                  control={control}
                  name="description"
                  render={({ field: { onChange, value } }) => (
                    <JoditEditor
                      ref={editor}
                      value={articleBody || value}
                      onChange={onChange}
                      className="dark:text-black"
                    />
                  )}
                />
                {errors.description?.message && (
                  <p className="text-red-400 text-sm">
                    {errors.description.message}
                  </p>
                )}
              </div>
              <div className="py-3">
                <Label>Pilih File</Label>
                {/* <Input
                  id="fileInput"
                  type="file"
                  onChange={handleImageChange}
                /> */}
                <Fragment>
                  <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">
                        {/* Drop files here or click to upload. */}
                        Tarik file disini atau klik untuk upload.
                      </h4>
                      <div className=" text-xs text-muted-foreground">
                        ( Upload file dengan format .doc, .docx, .pdf, .ppt,
                        atau .pptx Ukuran maksimal 100mb.)
                      </div>
                    </div>
                  </div>
                  {files.length ? (
                    <Fragment>
                      <div>{fileList}</div>
                      <div className=" flex justify-between gap-2">
                        <div className="flex flex-row items-center gap-3 py-3">
                          <Label>Gunakan Watermark</Label>
                          <div className="flex items-center gap-3">
                            <Switch defaultChecked color="primary" id="c2" />
                          </div>
                        </div>
                        <Button
                          color="destructive"
                          onClick={handleRemoveAllFiles}
                        >
                          Remove All
                        </Button>
                      </div>
                    </Fragment>
                  ) : null}
                </Fragment>
              </div>
            </div>

            {/* Submit Button */}
          </div>
        </Card>
        <div className="w-4/12">
          <Card className=" h-[500px]">
            <div className="px-3 py-3">
              <div className="space-y-2">
                <Label>Kreator</Label>
                <Controller
                  control={control}
                  name="creatorName"
                  render={({ field }) => (
                    <Input
                      size="md"
                      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="tags">Tags</Label>

              <Input
                type="text"
                id="tags"
                placeholder="Add a tag and press Enter"
                onKeyDown={handleAddTag}
              />
              <div className="mt-3 ">
                {tags.map((tag, index) => (
                  <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={() => handleRemoveTag(index)}
                      className="remove-tag-button"
                    >
                      ×
                    </button>
                  </span>
                ))}
              </div>
            </div>
            <div className="px-3 py-3">
              <div className="flex flex-col gap-6">
                <Label>Target Publish</Label>
                <div className="flex gap-2 items-center">
                  <Checkbox id="all" />
                  <Label htmlFor="all">SEMUA</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="umum" />
                  <Label htmlFor="umum">UMUM</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="journalist" />
                  <Label htmlFor="journalist">JOURNALIS</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="polri" />
                  <Label htmlFor="polri">POLRI</Label>
                </div>
                <div className="flex gap-2 items-center">
                  <Checkbox id="ksp" />
                  <Label htmlFor="ksp">KSP</Label>
                </div>
              </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="submit" color="primary" variant="outline">
                Cancel
              </Button>
            </div>
          </div>
        </div>
      </div>
    </form>
  );
}