import { Button, buttonVariants } from "C/components/ui/button";
import { ConfettiAnimation } from "C/lib/confettiAnimation";
import { cn } from "C/lib/utils";
import { useEffect, useState } from "react";

import CompleteBG from "../../../../public/images/complete-bg.png";

const CompleteImport = () => {
  const [pageUrl, setPageUrl] = useState([]);
  useEffect(() => {
    ConfettiAnimation();
    importedPage();
  }, []);

  const changeRoute = (value) => {
    const url = new URL(window.location.href);
    const pageQuery = url.searchParams.get("page");

    url.search = "";
    url.hash = "";
    url.search = `page=${pageQuery}`;

    url.searchParams.set("tab", value);
    window.history.replaceState({}, "", url);
    window.location.reload();
  };

  const importedPage = async () => {
    try {
      const formData = new URLSearchParams();

      formData.append("action", "aae_lite_get_latest_imported_pages");
      formData.append("nonce", WCF_ADDONS_ADMIN.nonce);
      formData.append("per_page", 1);

      const response = await fetch(WCF_ADDONS_ADMIN.ajaxurl, {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: formData.toString(),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      // query args aae-cache= 1

      const pageUrl = data?.data?.pages[0]
        ? data?.data?.pages[0].permalink +
          (data?.data?.pages[0].permalink.includes("?") ? "&" : "?") +
          "aae-cache=1"         
        : "#";

      setPageUrl(pageUrl);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="bg-background w-[680px] rounded-2xl p-1.5 shadow-auth-card">
      <div className="border border-border-secondary rounded-xl p-8 pb-3.5">
        <div className="mb-6">
          <h3 className="text-2xl font-medium">Congratulations!!! 🎉</h3>
          <p className="mt-1.5 text-text-secondary">
            Your page is now imported and ready to use.
          </p>
        </div>
        <div className="mb-6">
          <img
            src={CompleteBG}
            className="w-[616px] h-[258px]"
            alt="demo importing"
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <a
            href={pageUrl ?? "#"}
            className={cn(buttonVariants(), "w-full h-11")}
          >
            Go to page
          </a>
          <Button
            variant="link"
            className={"w-full"}
            onClick={() => changeRoute("stater-template")}
          >
            Go to page library
          </Button>
        </div>
      </div>
    </div>
  );
};

export default CompleteImport;