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 { useParams, 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 { close, 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";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const imageSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  mainKeyword: z.string().min(1, { message: "Keyword diperlukan" }),
  seo: z.string().min(1, { message: "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" }),
  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: any) => {
  const { states } = props;
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const [, setLoadingState] = useState(false);
  const searchParams = useSearchParams();
  const getParams = useParams();
  const id: any = getParams?.id;
  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 [selectedSize, setSelectedSize] = useState("");
  const [detailArticle, setDetailArticle] = useState<any>(null);
  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"),
    mainKeyword: Yup.string().required("Keyword tidak boleh kosong"),
    seo: Yup.string().required("Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"),
    description: Yup.string().required("Narasi Penugasan harus lebih dari 2 karakter."),
  });

  let componentMounted = true;

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

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

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

  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) {
        setValue("title", response?.data?.data?.title);
        setValue("mainKeyword", response?.data?.data?.title);
        setValue("seo", response?.data?.data?.description);
        setContent(response?.data?.data);
        setIsFromSPIT(response?.data?.data?.isFromSPIT);
        setListSuggestion(responseGet?.data?.data);
        console.log("data list file", response?.data?.data);
        // 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: "",
      style: selectedWritingStyle,
      website: "None",
      connectToWeb: true,
      lang: selectedLanguage,
      pointOfView: "None",
      title: getValues("title"),
      imageSource: "Web",
      mainKeyword: getValues("mainKeyword"),
      additionalKeywords: getValues("seo"),
      targetCountry: null,
      articleSize: selectedSize,
      projectId: 2,
      createdBy: roleId,
      // clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
      clientId: "mediahubClientId",
    };
    console.log("Request", request);
    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 handleArticleIdClick = async (id: string) => {
    setIsLoadingData(true);
    let retryCount = 0;
    const maxRetries = 20;

    try {
      const waitForStatusUpdate: any = 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, "");
      console.log("lalalala", cleanArticleBody);
      const articleImagesData = articleData?.imagesUrl?.split(",");
      setValue("description", cleanArticleBody || "");
      setArticleBody(cleanArticleBody || "");
      setDetailArticle(articleData);
      setSelectedArticleId(id);
      setArticleImages(articleImagesData || []);
    } catch (error) {
      console.error("Error fetching article details:", error);
    } finally {
      setIsLoadingData(false);
    }
  };

  return (
    <>
      <HeaderManagement />
      <div className="flex flex-col lg:flex-row">
        <SidebarManagement />
        <div className="w-full lg:w-2/3 p-8 lg: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-col lg:flex-row gap-2">
                      <div className="gap-1 flex flex-col mb-3">
                        <p className="font-semibold">Bahasa</p>
                        <Select value={selectedLanguage} onValueChange={setSelectedLanguage}>
                          <SelectTrigger className="w-full lg:w-[180px]">
                            <SelectValue placeholder="Pilih Bahasa" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>Pilih Bahasa</SelectLabel>
                              <SelectItem value="id">Indonesia</SelectItem>
                              <SelectItem value="en">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={setSelectedContextType}>
                          <SelectTrigger className="w-full lg: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={setSelectedWritingStyle}>
                          <SelectTrigger className="w-full lg: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={setSelectedSize}>
                          <SelectTrigger className="w-full lg: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>
                      <Controller
                        control={control}
                        name="title"
                        render={({ field: { onChange, value } }) => <Input type="text" className={`w-full border py-3 rounded-lg ${errors.title ? "is-invalid" : ""}`} {...register("title")} id="title" value={value} onChange={onChange} />}
                      />
                    </div>
                    <div className="mb-3">
                      <p className="font-semibold">Main Keyword</p>
                      <Controller
                        control={control}
                        name="mainKeyword"
                        render={({ field: { onChange, value } }) => (
                          <Input type="text" className={`w-full border py-3 rounded-lg ${errors.mainKeyword ? "is-invalid" : ""}`} {...register("mainKeyword")} id="mainKeyword" value={value} onChange={onChange} />
                        )}
                      />
                    </div>
                    <div className="mb-3">
                      <p className="font-semibold">SEO</p>
                      <Controller
                        control={control}
                        name="seo"
                        render={({ field: { onChange, value } }) => (
                          <Textarea className="py-20" id="seo" placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" {...register("seo")} onChange={onChange} value={value} />
                        )}
                      />
                    </div>
                    <div className="mb-4">
                      <a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base">
                        Generate Artikel
                      </a>
                      {isGeneratedArticle && (
                        <div className="mt-3 ml-2 pb-0">
                          {articleIds.map((id: any, index: any) => (
                            <p
                              key={index}
                              className={`text-black border border-black w-fit rounded-md p-3 m-1 ${
                                selectedArticleId === id
                                  ? "text-[#31ce36] w-fit p-3 hover:bg-[#31ce36] hover:text-white cursor-pointer border border-[#31ce36]"
                                  : "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border border-[#48abf7]"
                              }`}
                              onClick={() => handleArticleIdClick(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={onChange} initialData={articleBody || value} />
                          )
                        }
                      />
                      {articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
                    </div>
                    <div className="flex flex-row gap-3">
                      <Button
                        type="button"
                        onClick={() => {
                          router.back();
                        }}
                        className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400 text-sm lg:text-base"
                      >
                        Kembali
                      </Button>
                      <Button type="submit" className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white">
                        Simpan
                      </Button>
                    </div>
                  </div>
                )}
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;