'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 {getKnowledgeBaseCategoryList, getKnowledgeBaseList} from "@/service/master/knowledge-base";
import React from "react";
import {Plus, Trash2} from "lucide-react";
import {Button} from "@/components/ui/button";
import CreateCategory from "./create-category";

const KnowledgeBase = () => {
  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);
    }
  }

  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="data-[state=active]:bg-secondary  data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
                      >
                        {category?.name}
                        <div
                            className="absolute right-2 top-2 hidden group-hover:inline-flex"
                            // onClick={() => deleteCategory(category?.id)}
                        >
                          <Trash2 className="w-3.5 h-3.5  me-1" />
                        </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="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
                              {question.question}
                            </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;