"use client"
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 React, { useEffect, useState } from "react";
import apis from "@/utils/apis";
import { useGlobalContext } from "@/context/Provider";
import { useSearchParams } from "next/navigation";
import EnhancedCard from "../common/card/enhanced-card";
import TextSkeleton from "../common/skeleton/typography";
import Loader from "../common/loader";
import gif from "@/assets/gif/check.gif"
import ReactQuill from "react-quill";




const InputAutomation = () => {

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

  let isDisabled = automationData?.replace(/^[\s\S]*?<html\b/, '<html').replace(/<\/html>[\s\S]*$/, '</html>')
  const dragStart = (e: any) => {
    dragItem.current = e;
  }
  const dragEnter = (e: any) => {
    dragOverItem.current = e;
  }


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



  const sanitizeHtml = (html: string): string => {
    return html.replace(/<[^>]+>/g, '').trim();
  };


  // generate automation.....................
  const generateAutomation = async () => {
    try {
      let sanitizedAutomationData = sanitizeHtml(automationData);

      let payload = {
        job_id: queryParams?.job_id,
        user_prompt: sanitizedAutomationData,
      };
      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)
      setShowCopyBtn(true)

    } 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 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)
    }
  }
  const handleChange = (value: string) => {
    setAutomationData(value);
  };

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


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

  return (
    <PageContainer>
      <div className="mb-4">
        {/* <p className="text-2xl font-semibold mb-1">Upload CV</p> */}
        <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 || "N/A"} />
      </div>
      <div className="grid grid-cols-12 gap-4">
        <div className="col-span-12 lg:col-span-8">

          <Card className="w-full p-6">
            <CardContent className="p-1">
              <ReactQuill
                className="textfield"
                value={automationData}
                onChange={handleChange}
              />

            </CardContent>
            {
              !showCopyBtn ?
                <div className="mt-4 flex justify-end gap-2">
                  <Button variant="default" disabled={isDisabled === "<p><br></p>" || !isDisabled || loading} className="text-white theme-background py-2" onClick={generateAutomation}>
                    <Loader loading={loading} />
                    {loading ? "Generating" : "Generate"}
                  </Button>
                </div> :
                <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>
            }
          </Card>
        </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 InputAutomation;