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 {
  generateDataArticle,
  generateDataRewrite,
  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 Cookies from "js-cookie";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";

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 CustomEditor = dynamic(
  () => {
    return import("@/components/editor/custom-editor");
  },
  { ssr: false }
);

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("profesional");
  const [selectedContextType, setSelectedContextType] = useState("article");
  const [selectedLanguage, setSelectedLanguage] = useState("id");
  const [selectedTitle, setSelectedTitle] = useState("");
  const [selectedSize, setSelectedSize] = useState("news");
  const [detailArticle, setDetailArticle] = useState<any>(null);
  const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
  const [detailData, setDetailData] = useState<any>(null);
  const [articleImages, setArticleImages] = useState<string[]>([]);
  const t = useTranslations("LandingPage");

  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"),
    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() {
      loading();
      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("description", response?.data?.data?.htmlDescription);
        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();
        close();
      }

      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 = {
      style: "Professional",
      lang: "id",
      contextType: "text",
      urlContext: null,
      context: content?.description,
      createdBy: roleId,
      sentiment: "Humorous",
      clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
    };
    console.log("Request", request);
    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: any) => {
      if (prevIds.length < 3) {
        return [...prevIds, newArticleId];
      } else {
        const updatedIds = [...prevIds];
        updatedIds[2] = 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", articleData);
      const articleImagesData = articleData?.imagesUrl?.split(",");
      setValue("description", cleanArticleBody || "");
      setArticleBody(cleanArticleBody || "");
      setDetailArticle(articleData);
      // setSelectedArticleId(id);
      console.log("idnya", 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">{t("content", { defaultValue: "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">{t("language", { defaultValue: "Language" })}</p>
                        <Select
                          value={selectedLanguage}
                          onValueChange={setSelectedLanguage}
                        >
                          <SelectTrigger className="w-full lg:w-[180px]">
                            <SelectValue placeholder={t("selectLanguage", { defaultValue: "Select Language" })} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>{t("selectLanguage", { defaultValue: "Select Language" })}</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">{t("contextType", { defaultValue: "Context Type" })}</p>
                        <Select
                          value={selectedContextType}
                          onValueChange={setSelectedContextType}
                        >
                          <SelectTrigger className="w-full lg:w-[180px]">
                            <SelectValue placeholder={t("selectContext", { defaultValue: "Select Context" })} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>{t("selectContext", { defaultValue: "Select Context" })}</SelectLabel>
                              <SelectItem value="text">{t("text", { defaultValue: "Text" })}</SelectItem>
                              <SelectItem value="article">
                                {t("article", { defaultValue: "Article" })}
                              </SelectItem>
                              <SelectItem value="transcript">
                                {t("transcript", { defaultValue: "Transcript" })}
                              </SelectItem>
                              <SelectItem value="url">URL</SelectItem>
                            </SelectGroup>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="gap-1 flex flex-col mb-3">
                        <p className="font-semibold">{t("writingStyle", { defaultValue: "Writing Style" })}</p>
                        <Select
                          value={selectedWritingStyle}
                          onValueChange={setSelectedWritingStyle}
                        >
                          <SelectTrigger className="w-full lg:w-[180px]">
                            <SelectValue placeholder={t("selectWriting", { defaultValue: "Select Writing" })} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>{t("selectWriting", { defaultValue: "Select Writing" })}</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">{t("articleSize", { defaultValue: "Article Size" })}</p>
                        <Select
                          value={selectedSize}
                          onValueChange={setSelectedSize}
                        >
                          <SelectTrigger className="w-full lg:w-[180px]">
                            <SelectValue placeholder={t("selectSize", { defaultValue: "Select Size" })} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>{t("selectSize", { defaultValue: "Select 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">{t("title", { defaultValue: "Title" })}</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">{t("mainKeyword", { defaultValue: "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">Deskripsi</p>
                      <Controller
                        control={control}
                        name="description"
                        render={({ field: { onChange, value } }) => (
                          // <Textarea
                          //   className="py-20"
                          //   id="description"
                          //   placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
                          //   {...register("description")}
                          //   onChange={onChange}
                          //   value={value}
                          // />
                          <CustomEditor
                            onChange={onChange}
                            initialData={content?.htmlDescription}
                          />
                        )}
                      />
                    </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 pb-0 flex flex-row gap-3">
                          {articleIds.map((id: any, index: any) => (
                            <p
                              key={index}
                              className={` w-fit rounded-md p-3 mt-2 ${
                                Number(selectedArticleId) === Number(id)
                                  ? "text-white w-fit p-3 hover:text-white cursor-pointer bg-[#31ce36]  border-[#31ce36]"
                                  : "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border  border-[#48abf7]"
                              }`}
                              onClick={() => {
                                handleArticleIdClick(id);
                                setSelectedArticleId(Number(id));
                              }}
                            >
                              Article {index + 1}
                            </p>
                          ))}
                        </div>
                      )}
                    </div>

                    <div className=" mb-3">
                      <p className="font-semibold">{t("newDescription", { defaultValue: "New Description" })}</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"
                      >
                        {t("back", { defaultValue: "Back" })}
                      </Button>
                      <Button
                        type="submit"
                        className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white"
                      >
                        {t("save", { defaultValue: "Save" })}
                      </Button>
                    </div>
                  </div>
                )}
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;