"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 JoditEditor from "jodit-react";
import { register } from "module";
import { Switch } from "@/components/ui/switch";
import Cookies from "js-cookie";
import { createTask } from "@/config/api";
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";

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

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

export default function FormImage() {
  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 = "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 handleKeyDown = (e: any) => {
  //   const newTag = e.target.value.trim(); // Ambil nilai input
  //   if (e.key === "Enter" && newTag) {
  //     e.preventDefault(); // Hentikan submit form
  //     if (!tags.includes(newTag)) {
  //       setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
  //       setValue("tags", ""); // Kosongkan input
  //     }
  //   }
  // };

  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) {
          // 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) => {
    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">
                <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}
                      >
                        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="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>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>
  );
}