"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,
} from "@/service/master/knowledge-base";
import React from "react";
import { 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";

const KnowledgeBase = () => {
  const MySwal = withReactContent(Swal);
  const [categories, setCategories] = React.useState<any>([]);
  const [questions, setQuestions] = React.useState<any>([]);

  React.useEffect(() => {
    fetchCategoryList();
  }, []);

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

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

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

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

  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);
                    }}
                    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)}
                    >
                      <Trash size={20} className="text-red-500" />
                    </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>
                {questions?.length > 0 && (
                  <div className="flex gap-3">
                    <Button fullWidth size="md" variant="outline">
                      <Plus className="w-6 h-6 me-1.5" />
                      Import
                    </Button>
                    <Button fullWidth size="md">
                      <Plus className="w-6 h-6 me-1.5" />
                      Add Question
                    </Button>
                  </div>
                )}
              </TabsContent>
            ))}
          </div>
        </div>
      </Tabs>
    </div>
  );
};

export default KnowledgeBase;