mediahub-fe/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx

"use client";

import HeaderManagement from "@/components/landing-page/header-management";
import SidebarManagement from "@/components/landing-page/sidebar-management";
import { useRouter } from "@/i18n/routing";
import { getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils";
import { useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Controller, useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import CustomEditor from "@/components/editor/custom-editor";
import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
import { Button } from "@/components/ui/button";
import { error, loading } from "@/config/swal";
import { saveContentRewrite } from "@/service/content/content";
import { getPublicSuggestionList } from "@/service/landing/landing";
import { getDetail } from "@/service/detail/detail";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import { htmlToString } from "@/utils/globals";
import Cookies from "js-cookie";

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" }),
});

const page = (props: { states?: any }) => {
  const { states } = props;
  const [profile, setProfile] = useState();
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const [, setLoadingState] = useState(false);
  const searchParams = useSearchParams();
  const id: any = searchParams?.get("title");
  const [content, setContent] = useState<any>([]);
  const [isFromSPIT, setIsFromSPIT] = useState(false);
  const [listSuggestion, setListSuggestion] = useState();
  const [main, setMain] = useState<any>();
  const userId = getCookiesDecrypt("uie");
  const userRoleId = getCookiesDecrypt("urie");
  const [articleIds, setArticleIds] = useState<any>([]);
  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
  const [selectedArticleId, setSelectedArticleId] = useState<any>(null);
  const [articleBody, setArticleBody] = useState("");
  const [selectedAdvConfig, setSelectedAdvConfig] = useState("");
  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
  const [selectedContextType, setSelectedContextType] = useState("");
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [selectedTitle, setSelectedTitle] = useState("");
  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
  const [selectedSEO, setSelectedSEO] = useState("");
  const [selectedSize, setSelectedSize] = useState("");
  const [detailArticle, setDetailArticle] = useState<any>(null);
  const [contentType, setContentType] = useState("all");
  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
  const [detailData, setDetailData] = useState<any>(null);
  const [articleImages, setArticleImages] = useState<string[]>([]);

  const userLevelId = getCookiesDecrypt("ulie");
  const roleId = getCookiesDecrypt("urie");
  type ImageSchema = z.infer<typeof imageSchema>;

  const validationSchema = Yup.object().shape({
    title: Yup.string().required("Judul tidak boleh kosong"),
  });

  let componentMounted = true;

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

  const formOptions = {
    resolver: yupResolver(validationSchema),
  };

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
    setValue,
  } = useForm(formOptions);

  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 save = async (data: any) => {
    const request = {
      title: data.title,
      articleId: detailArticle?.id,
      mediaUploadId: id.split("-")?.[0],
      articleBody: detailArticle?.articleBody,
      metaTitle: detailArticle?.metaTitle,
      metaDescription: detailArticle?.metaDescription,
      mainKeyword: detailArticle?.mainKeyword,
      additionalKeyword: detailArticle?.additionalKeyword,
      articleSize: detailArticle?.articleSize,
      style: detailArticle?.style,
      website: detailArticle?.website,
      imageUrl: detailArticle?.imageUrl,
    };
    loading();
    const res = await saveContentRewrite(request);
    if (res?.error) {
      error(res?.message);
      return false;
    }
    successSubmit();
  };

  function successSubmit() {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/content-management/rewrite");
      }
    });
  }

  function onSubmit(data: any) {
    MySwal.fire({
      title: "Simpan Data",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  }
  useEffect(() => {
    async function initState() {
      setLoadingState(true);
      const response = await getDetail(id, states == "polda" ? "polda" : "mabes");
      console.log("Detail dataaaa ::", response);
      if (response?.data?.data?.isActive == false) {
        window.location.replace("/");
      }
      const responseGet = await getPublicSuggestionList(id?.split("-")?.[0]);

      // close();
      if (componentMounted) {
        setContent(response?.data.data);
        setIsFromSPIT(response?.data.data?.isFromSPIT);
        setListSuggestion(responseGet?.data?.data);
        console.log("data list file", response?.data.data?.files);
        // const mainUrl = response?.data.data?.files[0]?.url;
        // const ticket = response?.data.data?.files[0]?.ticket;
        // const urlBlob = await getBlobContent(mainUrl, ticket);
        setMain({
          id: response?.data.data?.files[0]?.id,
          type: response?.data.data?.fileType.name,
          url: Number(response?.data.data?.fileType?.id) == 4 ? response?.data.data?.files[0]?.secondaryUrl : response?.data.data?.files[0]?.url,
          thumbnailFileUrl: response?.data.data?.files[0]?.thumbnailFileUrl,
          names: response?.data.data?.files[0]?.fileName,
          format: response?.data.data?.files[0]?.format,
          widthPixel: response?.data.data?.files[0]?.widthPixel,
          heightPixel: response?.data.data?.files[0]?.heightPixel,
          size: response?.data.data?.files[0]?.size,
          caption: response?.data.data?.files[0]?.caption,
        });

        // Send Meta Data
        const metaData = {
          title: response?.data.data?.title,
          image: response?.data.data?.thumbnailLink,
        };

        setCookiesEncrypt("meta_data", metaData);
        setLoadingState(false); // (2) write some value to state
        // await new Promise(resolve => setTimeout(resolve, 1000)); // 2 sec
        // setIdm();
      }

      return () => {
        // This code runs when component is unmounted
        componentMounted = false; // (4) set it to false if we leave the page
      };
    }

    initState();
  }, [id]);

  const handleGenerateArtikel = async () => {
    loading();
    const request = {
      advConfig: selectedAdvConfig,
      style: selectedWritingStyle,
      website: "None",
      connectToWeb: true,
      lang: selectedLanguage,
      pointOfView: "None",
      title: content?.title,
      imageSource: "Web",
      mainKeyword: content?.title,
      additionalKeywords: content?.htmlDescription,
      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: any) => {
      if (prevIds.length < 5) {
        return [...prevIds, newArticleId];
      } else {
        const updatedIds = [...prevIds];
        updatedIds[4] = newArticleId;
        return updatedIds;
      }
    });

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

  const handleArticleClick = async (id: any) => {
    const res = await getDetailArticle(id);
    const articleData = res?.data?.data;
    const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");

    const articleImagesData = articleData?.imagesUrl?.split(","); // Split URLs into an array

    setArticleBody(cleanArticleBody || ""); // Set articleBody for CKEditor
    setDetailArticle(articleData);
    setSelectedArticleId(id);
    // setArticleImages(articleImagesData || []); // Set images array in state
  };

  return (
    <>
      <HeaderManagement />

      <div className="flex flex-row">
        <SidebarManagement />
        <div className="w-2/3 p-12">
          <div className="flex flex-col">
            <div className="text-xl font-bold mb-5">Content Rewrite</div>
            <div className="p-8 border border-black rounded-lg">
              <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                {/* {content && ( */}
                <div className="flex flex-col gap-2 ">
                  <div className="flex flex-row gap-2">
                    <div className="gap-1 flex flex-col mb-3">
                      <p className="font-semibold">Bahasa</p>
                      <Select value={selectedLanguage} onValueChange={(e: any) => setSelectedLanguage(e.target.value)}>
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Pilih Bahasa" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>Pilih Bahasa</SelectLabel>
                            <SelectItem value="indonesia">Indonesia</SelectItem>
                            <SelectItem value="english">English</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="gap-1 flex flex-col mb-3">
                      <p className="font-semibold">Context Type</p>
                      <Select value={selectedContextType} onValueChange={(e: any) => setSelectedContextType(e.target.value)}>
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Select Context" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>Select Context Type</SelectLabel>
                            <SelectItem value="text">Text</SelectItem>
                            <SelectItem value="article">Article</SelectItem>
                            <SelectItem value="transcript">Transcript</SelectItem>
                            <SelectItem value="url">URL</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="gap-1 flex flex-col mb-3">
                      <p className="font-semibold">Writing Style</p>
                      <Select value={selectedWritingStyle} onValueChange={(e: any) => setSelectedWritingStyle(e.target.value)}>
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Select Writing" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>Select Writing Style</SelectLabel>
                            <SelectItem value="firendly">Friendly</SelectItem>
                            <SelectItem value="profesional">Profesional</SelectItem>
                            <SelectItem value="informational">Informational</SelectItem>
                            <SelectItem value="neutral">Neutral</SelectItem>
                            <SelectItem value="witty">Witty</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="gap-1 flex flex-col mb-3">
                      <p className="font-semibold">Article Size</p>
                      <Select value={selectedSize} onValueChange={(e: any) => setSelectedSize(e.target.value)}>
                        <SelectTrigger className="w-[180px]">
                          <SelectValue placeholder="Select Size" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>Select Article Size</SelectLabel>
                            <SelectItem value="news">News (300 - 900 words)</SelectItem>
                            <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
                            <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="mb-3">
                    <p className="font-semibold">Judul</p>
                    <input
                      type="text"
                      // className="w-full border py-3 rounded-lg"
                      className={`w-full border py-3 rounded-lg ${errors.title ? "is-invalid" : ""}`}
                      {...register("title", {
                        value: content?.title,
                      })}
                      id="title"
                      defaultValue={content?.title}
                      // onChange={(e) => setSelectedTitle(e.target.value)}
                    />
                  </div>
                  <div className="mb-3">
                    <p className="font-semibold">Main Keyword</p>
                    <input
                      type="text"
                      className="w-full border py-3 rounded-lg mb-4"
                      id="mainKeyword"
                      name="mainKeyword"
                      // onChange={(e) =>
                      //   setSelectedMainKeyword(e.target.value)
                      // }
                      placeholder="Masukan Main Keyword disini!"
                      defaultValue={content?.title}
                    />
                  </div>
                  <div className="mb-3">
                    <p className="font-semibold">SEO</p>
                    <textarea
                      className="border py-15 w-full rounded-lg"
                      id="seo"
                      name="seo"
                      placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
                      // value={selectedSEO}
                      // onChange={(e) => setSelectedSEO(e.target.value)}
                      defaultValue={htmlToString(content?.htmlDescription)}
                    />
                  </div>
                  <div className="mb-4">
                    <a onClick={handleGenerateArtikel} className="text-blue-500 hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2">
                      Generate Artikel
                    </a>
                    {isGeneratedArticle && (
                      <div className="mt-3 ml-2 pb-0">
                        {articleIds.map((id: any, index: any) => (
                          <p key={index} className={`text-black m-1 ${selectedArticleId === id ? "bg-[#31ce36] border border-[#31ce36]" : "bg-[#48abf7] border border-[#48abf7]"}`} onClick={() => handleArticleClick(id)}>
                            {id}
                          </p>
                        ))}
                      </div>
                    )}
                  </div>
                  <div className=" mb-3">
                    <p className="font-semibold">Deskripsi Baru</p>
                    <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={(event: any) => setArticleBody(event.editor.getData())} initialData={articleBody || value} />
                        )
                      }
                    />
                    {articleBody === null || articleBody === "" ? <div className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</div> : ""}
                  </div>
                  <div className="flex flex-row gap-3">
                    <Button
                      onClick={(e) => {
                        e.preventDefault();
                        window.close();
                      }}
                      className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400"
                    >
                      Batal
                    </Button>
                    <Button type="submit" className="border border-blue-500 bg-blue-500  text-white">
                      Simpan
                    </Button>
                  </div>
                </div>

                {/* )} */}
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;