"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import {
  deleteKnowledgeBase,
  getKnowledgeBaseCategoryList,
  getKnowledgeBaseList,
  saveKnowledgeBase,
  saveKnowledgeBaseCategory,
} from "@/service/master/knowledge-base";
import React, { useEffect, useState } from "react";
import { Edit2Icon, Plus, Trash, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import CreateCategory from "./create-category";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { deleteMedia } from "@/service/content/content";
import { error } from "@/lib/swal";
import { close, loading } from "@/config/swal";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { toast } from "@/components/ui/use-toast";
import { Textarea } from "@/components/ui/textarea";
import { Link, useRouter } from "@/i18n/routing";

const FormSchema = z.object({
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
});

const FormSchemaCreate = z.object({
  title: z.string().min(2, {
    message: "Judul minimal 2 karakter.",
  }),
  question: z.string().min(2, {
    message: "Pertanyaan minimal 2 karakter.",
  }),
  answer: z.string().min(2, {
    message: "Jawaban minimal 2 karakter.",
  }),
});

const KnowledgeBase = () => {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const [categories, setCategories] = useState<any>([]);
  const [questions, setQuestions] = useState<any>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState(0);
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
  const [viewCreate, setViewCreate] = useState(false);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      name: "",
    },
  });

  const formCreate = useForm<z.infer<typeof FormSchemaCreate>>({
    resolver: zodResolver(FormSchemaCreate),
    defaultValues: {
      title: "",
      question: "",
      answer: "",
    },
  });
  React.useEffect(() => {
    fetchCategoryList();
  }, []);

  async function fetchCategoryList() {
    const response = await getKnowledgeBaseCategoryList();
    const data = response?.data?.data;
    if (data) {
      setCategories(data);
      fetchQuestions(
        selectedCategoryId === 0 ? data[0]?.id : selectedCategoryId
      );
    }
  }

  const fetchQuestions = async (id: number) => {
    const response = await getKnowledgeBaseList(id);
    const data = response?.data?.data;
    if (data) {
      setQuestions(data);
    }
  };

  async function doDelete(id: any) {
    loading();
    const data = {
      id,
    };

    const response = await deleteKnowledgeBase(id);

    if (response?.error) {
      error(response.message);
      return false;
    }
    close();
    success();
  }

  function success() {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        fetchQuestions(selectedCategoryId);
      }
    });
  }

  const handleDeleteKnowlagde = (id: any) => {
    MySwal.fire({
      title: "Hapus Data",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#3085d6",
      confirmButtonColor: "#d33",
      confirmButtonText: "Hapus",
    }).then((result) => {
      if (result.isConfirmed) {
        doDelete(id);
      }
    });
  };

  function onSubmit(data: z.infer<typeof FormSchema>) {
    save(data);
    setIsDialogOpen(false);
  }

  useEffect(() => {
    formCreate.reset();
  }, [viewCreate]);

  async function save(data: any) {
    loading();
    const reqData = {
      id: selectedCategoryId,
      name: data.name,
    };
    const response = await saveKnowledgeBaseCategory(reqData);
    if (response?.error) {
      return false;
    }
    close();
    toast({
      title: "Task created successfully.",
    });
    fetchCategoryList();
  }

  async function onSubmitCreate(data: z.infer<typeof FormSchemaCreate>) {
    const reqData = {
      title: data.title,
      categoryId:
        selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId,
      question: data.question,
      answer: data.answer,
    };
    const response = await saveKnowledgeBase(reqData);
    if (response?.error) {
      error(response.message);
      return false;
    }
    fetchQuestions(
      selectedCategoryId === 0 ? categories[0]?.id : selectedCategoryId
    );
  }

  return (
    <div>
      <SiteBreadcrumb />
      <Tabs defaultValue={`category-0`}>
        <div className="grid grid-cols-12 gap-6">
          <Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
            <CardContent className=" p-6">
              <TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
                <CreateCategory onSuccess={fetchCategoryList} />
                {categories?.map((category: any, index: number) => (
                  <TabsTrigger
                    key={index}
                    value={`category-${index}`}
                    onClick={() => {
                      fetchQuestions(category?.id);
                      setSelectedCategoryId(category?.id);
                    }}
                    className="group data-[state=active]:bg-secondary data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-between flex items-center"
                  >
                    {category?.name}
                    <div
                      className="right-2 top-2 hidden group-hover:inline-flex"
                      // onClick={() => deleteCategory(category?.id)}
                    >
                      <div className="flex flex-row gap-2 items-center">
                        <Dialog
                          open={isDialogOpen}
                          onOpenChange={setIsDialogOpen}
                        >
                          <DialogTrigger asChild>
                            <a
                              className="dark:bg-background dark:text-foreground"
                              onClick={() =>
                                form.setValue("name", category.name)
                              }
                            >
                              <Edit2Icon size={18} />
                            </a>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader className="mb-4">
                              <DialogTitle>Edit Category</DialogTitle>
                            </DialogHeader>
                            <Form {...form}>
                              <form
                                onSubmit={form.handleSubmit(onSubmit)}
                                className="space-y-4"
                              >
                                <FormField
                                  control={form.control}
                                  name="name"
                                  render={({ field }) => (
                                    <FormItem>
                                      <FormLabel className="text-default-700">
                                        Name
                                      </FormLabel>
                                      <FormControl>
                                        <Input
                                          placeholder="Enter Title"
                                          {...field}
                                        />
                                      </FormControl>
                                      <FormMessage />
                                    </FormItem>
                                  )}
                                />
                                <div className="flex justify-end">
                                  <Button type="submit">Submit</Button>
                                </div>
                              </form>
                            </Form>
                          </DialogContent>
                        </Dialog>
                        <Trash size={20} className="text-red-500" />
                      </div>
                    </div>
                  </TabsTrigger>
                ))}
              </TabsList>
            </CardContent>
          </Card>
          <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
            {categories?.map((cateogry: any, index: number) => (
              <TabsContent
                key={index}
                value={`category-${index}`}
                className="mt-0"
              >
                <Accordion type="single" collapsible className="w-full">
                  {questions?.map((question: any) => (
                    <AccordionItem
                      key={question.id}
                      className="dark:bg-secondary bg-white"
                      value={question.id}
                    >
                      <AccordionTrigger className="flex items-center justify-between gap-4 dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
                        <div className="flex items-center justify-between w-full gap-4">
                          <span
                            dangerouslySetInnerHTML={{
                              __html: question.question,
                            }}
                            className="text-left"
                          />

                          <Trash
                            size={20}
                            className="text-red-500 hover:cursor-pointer"
                            onClick={() => handleDeleteKnowlagde(question.id)}
                          />
                        </div>
                      </AccordionTrigger>
                      <AccordionContent className="dark:bg-secondary bg-white">
                        {question.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
                <div className="flex gap-3">
                  <Link className="w-full" href="/supervisor/knowledge-base/import">
                    <Button fullWidth size="md" variant="outline">
                      <Plus className="w-6 h-6 me-1.5" />
                      Import
                    </Button>
                  </Link>
                  <Button
                    fullWidth
                    size="md"
                    onClick={() => setViewCreate(!viewCreate)}
                    className="hover:bg-white hover:text-black"
                  >
                    <Plus className="w-6 h-6 me-1.5" />
                    Add Question
                  </Button>
                </div>
                {viewCreate && (
                  <div className="flex flex-col gap-2 py-6">
                    <Form {...formCreate}>
                      <form
                        onSubmit={formCreate.handleSubmit(onSubmitCreate)}
                        className="space-y-4"
                      >
                        <FormField
                          control={formCreate.control}
                          name="title"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-default-700">
                                Judul
                              </FormLabel>
                              <FormControl>
                                <Input
                                  placeholder="Masukkan Judul"
                                  {...field}
                                />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={formCreate.control}
                          name="question"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-default-700">
                                Pertanyaan
                              </FormLabel>
                              <FormControl>
                                <Textarea
                                  placeholder="Masukkan Pertanyaan"
                                  {...field}
                                />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={formCreate.control}
                          name="answer"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-default-700">
                                Jawaban
                              </FormLabel>
                              <FormControl>
                                <Textarea
                                  placeholder="Masukkan Jawaban"
                                  {...field}
                                />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <div className="flex justify-end">
                          <Button type="submit">Submit</Button>
                        </div>
                      </form>
                    </Form>
                  </div>
                )}
              </TabsContent>
            ))}
          </div>
        </div>
      </Tabs>
    </div>
  );
};

export default KnowledgeBase;