"use client"
import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import PageContainer from "../layout/page-container";
import NotesCard from "../common/card/notes-card";
import apis from "@/utils/apis";
import { useSearchParams } from "next/navigation";
import { useGlobalContext } from "@/context/Provider";
import gif from "@/assets/gif/check.gif"
import TextSkeleton from "../common/skeleton/typography";
import Loader from "../common/loader";
import EnhancedCard from "../common/card/enhanced-card";
import ReactQuill from "react-quill";




const TextAutomation = () => {

  const searchParams = useSearchParams();
  const queryParams = Object.fromEntries(searchParams.entries());
  const { Toast } = useGlobalContext()
  const [details, setDetails] = useState<any>({})
  const [automationData, setAutomationData] = useState<any>()
  const [isCopied, setIsCopied] = useState(false);
  const [loading, setLoading] = useState(false)
  const [loading2, setLoading2] = useState(false)
  const [enhancedData, setEnhancedData] = useState<any>(null)
  const jobType = queryParams?.type
  const dragItem = React.useRef<number | null>(null);
  const dragOverItem = React.useRef<number | null>(null);
  const [card, setCard] = useState<any>([])
  const [exportLoading, setExportLoading] = useState(false)
  const [_, setDragging] = useState(false);

  const dragStart = (e: any) => {
    dragItem.current = e;
    setDragging(true);
  }
  const dragEnter = (e: any) => {
    dragOverItem.current = e;
    setDragging(false);
  }

  const handleChange = (value: string) => {
    setAutomationData(value);
  };

  const drop = () => {
    const copyListItems = [...card];
    const dragItemContent = copyListItems[dragItem.current as number];
    copyListItems.splice(dragItem.current as number, 1);
    copyListItems.splice(dragOverItem.current as number, 0, dragItemContent);
    dragItem.current = null;
    dragOverItem.current = null;
    setCard([...copyListItems]);
    setDragging(false);
  }



  useEffect(() => {
    setCard([{ id: "enhancedCard", content: (index: number) => <EnhancedCard enhancedData={enhancedData} dragStart={dragStart} dragEnter={dragEnter} loading={loading2} /> }, { id: "notes", content: () => <NotesCard /> },])
  }, [enhancedData, loading2])





  // generate automation.....................
  const generateAutomation = async () => {
    try {
      let payload = {
        job_id: queryParams?.job_id
      }
      setLoading(true)
      const apiRes = await apis.Automation.generate(queryParams?.id as string, payload);
      const data = apiRes?.data?.replace(/^[\s\S]*?<html\b/, '<html').replace(/<\/html>[\s\S]*$/, '</html>');
      setAutomationData(data)
    } catch (error) {
      Toast.error(error)
    } finally {
      setLoading(false)
    }
  }




  //get details of automation and enhanced data..
  const fetchData = async () => {
    try {
      setLoading2(true);

      // get Automation Details.....
      const automationRes = await apis.Automation.details(queryParams?.id as string);
      setDetails(automationRes);

      // get enhanced details.....
      if (jobType === "jobListing") {
        const jobRes = await apis.Job.details(queryParams?.job_id);
        setEnhancedData(jobRes);
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading2(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);








  const handleCopyToClipboard = () => {
    const element: any = document.querySelector("[contentEditable]");

    if (element) {
      const textToCopy = element?.innerText;
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          setIsCopied(true);
          setTimeout(() => setIsCopied(false), 2000);
        })
        .catch((err) => {
          console.error("Failed to copy: ", err);
        });
    }
  };






  const handleExport = async () => {
    try {
      setExportLoading(true)
      const element: any = document.querySelector("[contentEditable]");
      let payload = {
        title: details?.name,
        content: automationData
      }
      const apiRes = await apis.Automation.export(payload)
      const url = `${apiRes?.data?.base_url}/uploads/documents/${apiRes?.data?.file_name}`
      window.open(url, "_blank")
    } catch (error) {
      Toast.error(error)
    } finally {
      setExportLoading(false)
    }
  }



  return (
    <PageContainer>
      <div className="mb-4">
        <div className={`${loading2 ? "mb-2" : ""}`}>
          <TextSkeleton loading={loading2} className={"text-2xl theme-color font-semibold"} skelCss="h-7 max-w-[300px]" text={`${details?.name ? details?.name : "N/A"}`} />
        </div>
        <TextSkeleton loading={loading2} className={"text-base text-gray font-normal"} skelCss="h-7 max-w-[500px]" text={`${details?.description ? details?.description : "N/A"}`} />
      </div>
      <div className="grid grid-cols-12 gap-4">
        {/* Email Generator Section */}
        <div className="col-span-12 md:col-span-12 lg:col-span-8">
          <Card className="p-6">
            <CardContent className="p-0">
              {
                automationData ?
                  <ReactQuill
                    value={automationData}
                    onChange={handleChange}
                  />
                  // <div contentEditable dangerouslySetInnerHTML={{ __html: content }} className="min-h-[200px] border p-2"></div>
                  :
                  <div className="min-h-[200px] border p-2 flex items-center justify-center text-center text-gray">
                    {`Click on the button below ${details?.name ? `to "${details?.name}"` : ""}`}
                  </div>
              }


              {
                automationData ? <div className="mt-4 flex justify-end gap-2">
                  <Button variant={"default"} className="text-[var(--primary-brand)] h-10 bg-primary" onClick={handleExport}><Loader color={" text-[var(--primary-brand)]"} loading={exportLoading} />Export</Button>
                  {isCopied ? (
                    <div className="flex items-center gap-2 px-4 py-2 bg-green-100 border border-green-300 rounded-md h-10">
                      <img src={gif.src} alt="Copied" className="w-4 h-4" />
                      <span className="text-green-600 text-sm font-medium">Copied</span>
                    </div>
                  ) : (
                    <Button className="theme-background h-10 text-white" onClick={handleCopyToClipboard}>Copy to Clipboard</Button>
                  )}
                </div>
                  :
                  <div className="mt-4 flex justify-end gap-2">
                    {

                    }
                    <Button className="theme-background inline-flex items-center h-10 text-white" onClick={generateAutomation} disabled={loading}> <Loader loading={loading} />{loading ? "Generating" : "Generate"}</Button>
                  </div>
              }

            </CardContent>
          </Card>
        </div>




        {/* AI Results and Notes Section */}
        {/* {
          jobType === "jobListing" && <div className="col-span-12 lg:col-span-4">
            <div className="space-y-4" >
              <EnhancedCard enhancedData={enhancedData} />
              <NotesCard />
            </div>
          </div>
        } */}


        {
          jobType === "jobListing" && <div className="col-span-12 lg:col-span-4">
            {
              card?.map((res: any, index: number) => (
                <div
                  key={index}
                  onDragStart={() => dragStart(index)}
                  onDragEnter={() => dragEnter(index)}
                  onDragEnd={() => drop()}
                  draggable
                  className=" mb-6"
                >

                  {res?.content(index)}
                </div>
              ))
            }
          </div>
        }
      </div>


    </PageContainer>
  );
}


export default TextAutomation;