mediahub-fe/components/form/content/image-ai-form.tsx

"use client";
import React, { ChangeEvent, useEffect, useRef, 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 Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { 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 { 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 { loading } from "@/lib/swal";
import {
  generateDataArticle,
  getDetailArticle,
  getGenerateKeywords,
  getGenerateTitle,
} from "@/service/content/ai";
import { title } from "process";
import style from "styled-jsx/style";
import { getCookiesDecrypt } from "@/lib/utils";
import dynamic from "next/dynamic";

const CustomEditor = dynamic(
  () => {
    return import("@/components/editor/custom-editor");
  },
  { ssr: false }
);

const imageSchema = z.object({
  title: z.string().min(1, { message: "Judul diperlukan" }),
  mainKeyword: z.string().min(1, { message: "Judul diperlukan" }),
  seo: 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" }),
});

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

export default function FormImageAI() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const editor = useRef(null);
  type ImageSchema = z.infer<typeof imageSchema>;

  const userLevelId = getCookiesDecrypt("ulie");
  const roleId = getCookiesDecrypt("urie");

  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const taskId = Cookies.get("taskId");
  const scheduleId = Cookies.get("scheduleId");
  const scheduleType = Cookies.get("scheduleType");

  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 [selectedTitle, setSelectedTitle] = useState("");
  const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
  const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
  const [selectedSize, setSelectedSize] = useState("");
  const [selectedLanguage, setSelectedLanguage] = useState("");
  const [selectedContent, setSelectedContent] = useState("single-article");
  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 [detailData, setDetailData] = useState<any>(null);
  const [articleImages, setArticleImages] = useState<string[]>([]);

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

  let fileTypeId = "1";

  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 handleEditClick = () => {
    if (editingArticleId) {
      console.log("Editing article:", editingArticleId);
    }
  };

  const handleRemoveTag = (index: any) => {
    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
  };

  const handleRemoveImage = (index: number) => {
    setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
  };

  useEffect(() => {
    async function initState() {
      getCategories();
      // setVideoActive(fileTypeId == '2');
      // getRoles();
    }

    initState();
  }, []);

  const getCategories = async () => {
    try {
      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) {
          setSelectedCategory(findCategory.id);
          const response = await getTagsBySubCategoryId(findCategory.id);
          setTags(response?.data?.data);
        }
      }
    } catch (error) {
      console.error("Failed to fetch categories:", error);
    }
  };

  const save = async (data: ImageSchema) => {
    const requestData = {
      ...data,
      title: data.title,
      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: "siap",
      isYoutube: false,
      isInternationalMedia: false,
    };

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

    if (response?.error) {
      MySwal.fire("Error", response?.message, "error");
      return;
    }

    const imageId = response?.data?.data.id;
    if (imageId && thumbnail) {
      const formMedia = new FormData();
      formMedia.append("file", thumbnail);

      const responseThumbnail = await uploadThumbnail(imageId, formMedia);

      if (responseThumbnail?.error) {
        MySwal.fire("Error", responseThumbnail?.message, "error");
        return;
      }
    }

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

    MySwal.fire({
      title: "Sukses",
      text: "Data berhasil disimpan.",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then(() => {
      router.push("/en/contributor/content/image");
    });
  };

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

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

  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 Foto</p>
            <div className="gap-5 mb-5">
              {/* Input Title */}
              <div className="space-y-2 py-3 w-4/12">
                <Label>Select Content</Label>
                <Select onValueChange={setSelectedTarget}>
                  <SelectTrigger size="md">
                    <SelectValue placeholder="Pilih" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="single-article">
                      single Article
                    </SelectItem>
                    <SelectItem value="bulk-article">Bulk Article</SelectItem>
                    <SelectItem value="speech-text">Speech to Text</SelectItem>
                  </SelectContent>
                </Select>
              </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 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}
                  >
                    Generate Article
                  </Button>
                </div>

                {isGeneratedArticle && (
                  <div className="mt-3 pb-0">
                    {articleIds.map((id: string, index: number) => (
                      <Button
                        key={index}
                        className={`btn m-1 ${
                          selectedArticleId === id
                            ? "btn-warning"
                            : "btn-success"
                        }`}
                        onClick={() => handleArticleIdClick(id)}
                        variant={"outline"}
                        color="success"
                      >
                        {id}
                      </Button>
                    ))}
                  </div>
                )}

                <div className="py-3">
                  <div className="flex flex-row justify-between items-center">
                    <Label>Deskripsi</Label>
                    {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>

                  <Controller
                    control={control}
                    name="description"
                    render={({ field: { onChange, value } }) => (
                      <CustomEditor onChange={onChange} initialData={value} />
                    )}
                  />
                  {errors.description?.message && (
                    <p className="text-red-400 text-sm">
                      {errors.description.message}
                    </p>
                  )}
                </div>
              </div>
              <div className="py-3">
                <Label>Attachment</Label>

                <Input
                  id="fileInput"
                  type="file"
                  onChange={handleImageChange}
                />

                <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>
                {preview && (
                  <div className="mt-3 px-3">
                    <img
                      src={preview}
                      alt="Thumbnail Preview"
                      className="w-32 h-auto rounded"
                    />
                  </div>
                )}
              </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>Tags</Label>
              {/* <Controller
                control={control}
                name="tags"
                render={({ field }) => (
                  <Input
                    size="md"
                    type="text"
                    value={field.value}
                    onChange={field.onChange}
                    placeholder="Enter Title"
                    onKeyDown={handleKeyDown}
                  />
                )}
              /> */}
              <div className="text-sm text-red-500">
                {tags.length === 0 && "Please add at least one tag."}
              </div>
              <div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
                {tags.map((tag, index) => (
                  <div
                    key={index}
                    className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
                  >
                    <span>{tag}</span>
                    <button
                      className="text-blue-600 hover:text-blue-800 focus:outline-none"
                      onClick={() => handleRemoveTag(index)}
                    >
                      ×
                    </button>
                  </div>
                ))}
              </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>
  );
}