"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 { useParams, 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 {
  convertSPIT,
  createMedia,
  detailSPIT,
  getTagsBySubCategoryId,
  listCategory,
  listEnableCategory,
} from "@/service/content/content";
import { detailMedia } from "@/service/curated-content/curated-content";
import { Badge } from "@/components/ui/badge";
import { MailIcon } from "lucide-react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import "swiper/css";
import "swiper/css/navigation";
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
import { request } from "http";
import { generateDataArticle, getDetailArticle } from "@/service/content/ai";
import { getCookiesDecrypt } from "@/lib/utils";

const imageSchema = z.object({
  contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
  contentDescription: z
    .string()
    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
  contentCreator: z.string().min(1, { message: "Creator diperlukan" }),
  // tags: z.string().min(1, { message: "Judul diperlukan" }),
  contentRewriteDescription: z
    .string()
    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
});

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

type Detail = {
  id: string;
  contentTitle: string;
  contentDescription: string;
  slug: string;
  content: {
    id: number;
    name: string;
  };
  contentCreator: string;
  creatorName: string;
  contentThumbnail: string;
  contentTag: string;
};

export default function FormConvertSPIT() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();

  const { id } = useParams() as { id: string };
  console.log(id);
  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 [categories, setCategories] = useState<Category[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
    null
  );
  const [tags, setTags] = useState<any[]>([]);
  const [detail, setDetail] = useState<Detail>();
  const [refresh, setRefresh] = useState(false);
  const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
  const [detailThumb, setDetailThumb] = useState<any>([]);
  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
  const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
  const [title, setTitle] = useState<string>("");
  const roleId = getCookiesDecrypt("urie");
  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 [selectedFileType, setSelectedFileType] = useState("original");

  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 handleRemoveTag = (index: any) => {
    setTags((prevTags) => prevTags.filter((_, i) => i !== index));
  };

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      const files = Array.from(event.target.files);
      setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
      console.log("DATAFILE::", selectedFiles);
    }
  };

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

  const handleCheckboxChange = (id: number) => {
    setSelectedPublishers((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  useEffect(() => {
    async function initState() {
      getCategories();
    }

    initState();
  }, []);

  const getCategories = async () => {
    try {
      const category = await listCategory(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);
          setSelectedCategoryId(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);
    }
  };

  useEffect(() => {
    async function initState() {
      if (id) {
        const response = await detailSPIT(id);
        const details = response.data?.data;

        setDetail(details);

        const filesData = details.contentList || [];
        const fileUrls = filesData.map((file: { contentFile: string }) =>
          file.contentFile ? file.contentFile : "default-image.jpg"
        );
        setDetailThumb(fileUrls);

        const matchingCategory = categories.find(
          (category) => category.id === details.categoryId
        );

        if (matchingCategory) {
          setSelectedTarget(matchingCategory.name);
        }

        // setSelectedTarget(details.categoryId); // Untuk dropdown
      }
    }
    initState();
  }, [refresh, setValue]);

  const [tempFile, setTempFile] = useState(
    detailThumb.map((data: any) => ({
      contentId: data.id,
      placement: [],
    }))
  );

  const handleCheckboxChangeFile = (mediaFileId: any, value: any) => {
    setTempFile((prev: any) =>
      prev.map((file: any) =>
        file.contentId === mediaFileId
          ? {
              ...file,
              placement: file.placement.includes(value)
                ? file.placement.filter((item: any) => item !== value) // Hapus jika sudah ada
                : [...file.placement, value], // Tambah jika belum ada
            }
          : file
      )
    );
  };

  const getPlacement = () => {
    return tempFile.map((file: any) => ({
      mediaFileId: Number(file.contentId),
      placements: file.placement.join(","),
    }));
  };

  const save = async (data: any) => {
    const description =
      selectedFileType === "original"
        ? data.contentDescription
        : data.contentRewriteDescription;
    const requestData = {
      spitId: id,
      title: data.contentTitle,
      description,
      htmlDescription: description,
      tags: "siap",
      categoryId: selectedCategoryId,
      publishedFor: "6",
      creator: data.contentCreator,
      files: getPlacement(),
    };

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

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

  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 [showRewriteEditor, setShowRewriteEditor] = useState(false);

  // const handleRewriteClick = () => {
  //   setShowRewriteEditor(true);
  // };

  const handleRewriteClick = async () => {
    const request = {
      advConfig: selectedAdvConfig,
      style: "friendly",
      website: "None",
      connectToWeb: true,
      lang: "id",
      pointOfView: "None",
      title: detail?.contentTitle,
      imageSource: "Web",
      mainKeyword: detail?.contentTitle,
      additionalKeywords: detail?.contentTitle,
      targetCountry: null,
      articleSize: "news",
      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));
    setShowRewriteEditor(true);
  };

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {detail !== undefined ? (
        <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="contentTitle"
                    render={({ field }) => (
                      <Input
                        size="md"
                        type="text"
                        defaultValue={detail?.contentTitle}
                        onChange={field.onChange}
                        placeholder="Enter contentTitle"
                      />
                    )}
                  />
                  {errors.contentTitle?.message && (
                    <p className="text-red-400 text-sm">
                      {errors.contentTitle.message}
                    </p>
                  )}
                </div>
                <div className="flex items-center">
                  <div className="py-3 w-full">
                    <Label>Kategori</Label>
                    <Select
                      defaultValue={detail?.content?.name}
                      onValueChange={(id) => {
                        console.log("Selected Category ID:", id);
                        setSelectedCategoryId(Number(id)); // Simpan ID kategori
                      }}
                    >
                      <SelectTrigger size="md">
                        <SelectValue placeholder="Pilih" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem
                            key={category.id}
                            value={category.id.toString()} // ID kategori dikirim sebagai value
                          >
                            {category?.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div>
                  <RadioGroup
                    onValueChange={(value) => setSelectedFileType(value)}
                    value={selectedFileType}
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="original" id="original-file" />
                      <Label htmlFor="original-file">
                        Select Original File
                      </Label>
                    </div>

                    <div>
                      <div className="py-3">
                        <Label>Deskripsi</Label>
                        <Controller
                          control={control}
                          name="contentDescription"
                          render={({ field: { onChange, value } }) => (
                            <JoditEditor
                              ref={editor}
                              value={detail?.contentDescription}
                              onChange={onChange}
                              className="dark:text-black"
                            />
                          )}
                        />
                        {errors.contentDescription?.message && (
                          <p className="text-red-400 text-sm">
                            {errors.contentDescription.message}
                          </p>
                        )}
                      </div>
                      <div className="my-2">
                        <Button
                          size="sm"
                          onClick={handleRewriteClick}
                          className="bg-blue-500 text-white py-2 px-4 rounded"
                        >
                          Content Rewrite
                        </Button>
                      </div>
                      {showRewriteEditor && (
                        <div>
                          {isGeneratedArticle && (
                            <div className="mt-3 pb-0 flex flex-row ">
                              {articleIds.map((id: string, index: number) => (
                                // <Button
                                //   key={index}
                                //   className={`btn mr-2 ${
                                //     selectedArticleId === id
                                //       ? "btn-warning"
                                //       : "btn-success"
                                //   }`}
                                //   onClick={() => handleArticleIdClick(id)}
                                //   variant={"outline"}
                                //   color="success"
                                // >
                                //   {id}
                                // </Button>
                                <p
                                  key={index}
                                  className={`btn mr-3 ${
                                    selectedArticleId === id
                                      ? "bg-green-500 text-white px-3 py-2 rounded-md"
                                      : "border-2 border-green-500 text-green-500 px-3 py-2 rounded-md"
                                  }`}
                                  onClick={() => handleArticleIdClick(id)}
                                >
                                  {id}
                                </p>
                              ))}
                            </div>
                          )}
                          <div className="flex items-center space-x-2 mt-3">
                            <RadioGroupItem value="rewrite" id="rewrite-file" />
                            <Label htmlFor="rewrite-file">
                              Select File Hasil Rewrite
                            </Label>
                          </div>
                          <div className="py-3">
                            <Label>File hasil Rewrite</Label>
                            <Controller
                              control={control}
                              name="contentRewriteDescription"
                              render={({ field: { onChange, value } }) => (
                                <JoditEditor
                                  ref={editor}
                                  value={articleBody || value}
                                  onChange={onChange}
                                  className="dark:text-black"
                                />
                              )}
                            />
                            {errors.contentRewriteDescription?.message && (
                              <p className="text-red-400 text-sm">
                                {errors.contentRewriteDescription.message}
                              </p>
                            )}
                          </div>
                        </div>
                      )}
                    </div>
                  </RadioGroup>
                </div>
                <div>
                  <Label className="text-xl text-black">File Media</Label>
                  <div className="w-full  ">
                    <Swiper
                      thumbs={{ swiper: thumbsSwiper }}
                      modules={[FreeMode, Navigation, Thumbs]}
                      navigation={false}
                      className="w-full"
                    >
                      {detailThumb?.map((data: any) => (
                        <SwiperSlide key={data.id}>
                          <img
                            className="object-fill h-full w-full"
                            src={data}
                            alt={` ${data.id}`}
                          />
                        </SwiperSlide>
                      ))}
                    </Swiper>
                    <div className=" mt-2 ">
                      <Swiper
                        onSwiper={setThumbsSwiper}
                        slidesPerView={6}
                        spaceBetween={8}
                        pagination={{
                          clickable: true,
                        }}
                        modules={[Pagination, Thumbs]}
                        // className="mySwiper2"
                      >
                        {detailThumb?.map((data: any) => (
                          <SwiperSlide key={data.id}>
                            <img
                              className="object-cover h-[60px] w-[80px]"
                              src={data}
                              alt={` ${data.id}`}
                            />
                          </SwiperSlide>
                        ))}
                      </Swiper>
                    </div>
                  </div>
                </div>
                <div className="mt-5">
                  <Label className="text-xl text-black">Penempatan File</Label>
                  {detailThumb.map((data: any) => (
                    <div key={data.id} className="flex items-center gap-3 mt-2">
                      <img
                        className="object-cover w-36 h-32"
                        src={data}
                        alt={`Thumbnail ${data.id}`}
                      />
                      <div className="flex flex-row gap-3 items-center">
                        {["all", "mabes", "polda", "internasional"].map(
                          (value) => (
                            <label
                              key={value}
                              className="text-blue-500 cursor-pointer flex items-center gap-1"
                            >
                              <input
                                type="checkbox"
                                name="placement"
                                value={value}
                                onChange={() =>
                                  handleCheckboxChangeFile(data.id, value)
                                }
                                checked={tempFile
                                  .find(
                                    (file: any) => file.contentId === data.id
                                  )
                                  ?.placement.includes(value)}
                              />
                              {value.charAt(0).toUpperCase() + value.slice(1)}
                            </label>
                          )
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Card>
          <div className="w-4/12">
            <Card className=" h-[800px]">
              <div className="px-3 py-3">
                <div className="space-y-2">
                  <Label>Kreator</Label>
                  <Controller
                    control={control}
                    name="contentCreator"
                    render={({ field }) => (
                      <Input
                        size="md"
                        type="text"
                        defaultValue={detail?.contentCreator}
                        onChange={field.onChange}
                        placeholder="Enter Title"
                      />
                    )}
                  />
                  {errors.contentCreator?.message && (
                    <p className="text-red-400 text-sm">
                      {errors.contentCreator.message}
                    </p>
                  )}
                </div>
              </div>
              <div className="mt-3 px-3">
                <Label>Pratinjau Gambar Utama</Label>
                <Card className="mt-2">
                  <img
                    src={detail.contentThumbnail}
                    alt="Thumbnail Gambar Utama"
                    className="w-full h-auto rounded"
                  />
                </Card>
              </div>
              <div className="px-3 py-3">
                <div className="space-y-2">
                  <Label>Tag</Label>
                  <div className="flex flex-wrap gap-2">
                    {detail?.contentTag?.split(",").map((tag, index) => (
                      <Badge
                        key={index}
                        className="border rounded-md  px-2 py-2"
                      >
                        {tag.trim()}
                      </Badge>
                    ))}
                  </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="5"
                      checked={selectedPublishers.includes(5)}
                      onChange={() => handleCheckboxChange(5)}
                    />
                    <Label htmlFor="5">UMUM</Label>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Checkbox
                      id="6"
                      checked={selectedPublishers.includes(6)}
                      onChange={() => handleCheckboxChange(6)}
                    />
                    <Label htmlFor="6">JOURNALIS</Label>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Checkbox
                      id="7"
                      checked={selectedPublishers.includes(7)}
                      onChange={() => handleCheckboxChange(7)}
                    />
                    <Label htmlFor="7">POLRI</Label>
                  </div>
                  <div className="flex gap-2 items-center">
                    <Checkbox
                      id="8"
                      checked={selectedPublishers.includes(8)}
                      onChange={() => handleCheckboxChange(8)}
                    />
                    <Label htmlFor="8">KSP</Label>
                  </div>
                </div>
              </div>
              <div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
                <MailIcon />
                <p className="">Kotak Saran (0)</p>
              </div>
              <div className="px-3 py-3">
                <p>Keterangan:</p>
                {/* <p>{detail?.status}</p> */}
              </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>
  );
}