import { ClerkProvider } from "@clerk/nextjs";
import { dark } from "@clerk/themes";
const clerkLocalizationOverrides = {
  footerPageLink__privacy: "By continuing, you accept our Privacy Policy and",
  footerPageLink__terms: "Terms of Use",
  signUp: {
    start: {
      actionText: "",
    },
  },
};
import { Analytics } from "@vercel/analytics/react";
import { track } from "@vercel/analytics/server";
import atob from "atob";
import { domAnimation, LazyMotion } from "framer-motion";
import type { AppContext, AppProps } from "next/app";

import RootLayout from "@/components/root-layout";
import SeoMeta from "@/components/seo-meta";
import { getCopy } from "@/config/copy";
import { isBrowser } from "@/helpers/is-browser";

import "@/styles/index.scss";

type TProps = Pick<AppProps, "Component" | "pageProps"> & {
  customMetadata: {
    title?: string;
    img?: string;
    url?: string;
  };
};

function App({ Component, pageProps, customMetadata }: TProps) {
  return (
    <ClerkProvider
      localization={clerkLocalizationOverrides}
      appearance={{
        baseTheme: dark,
        layout: {
          termsPageUrl: "https://suno.ai/legal/terms",
          privacyPageUrl: "https://suno.ai/legal/privacy",
        },
      }}
    >
      <LazyMotion features={domAnimation} strict>
        <RootLayout>
          <Component {...pageProps} />
          <SeoMeta {...customMetadata} />
          <Analytics />
        </RootLayout>
      </LazyMotion>
    </ClerkProvider>
  );
}

App.getInitialProps = async (context: AppContext) => {
  let songTitle = "";
  let songDescription = "";
  const songJson = {
    i: "",
    song: {
      title: undefined,
      description: undefined,
      image_url: undefined,
    },
    f: "",
    t: "",
  };

  const songId = context?.router?.query?.s;
  const base64query = context?.router?.query?.r;
  let siteURL = process.env.SITE_URL;
  // console.log(songId, base64query);
  if (typeof songId === "string" && typeof base64query === "string") {
    try {
      const urlDecodeBase64 = isBrowser
        ? window.atob(base64query)
        : atob(base64query);
      const urlSplitted = urlDecodeBase64.split("&");
      /*
      i stands for id of the song
      t stands for name to and is on index 0
      f stands for name from and is on index 1
      */
      songJson.i = decodeURIComponent(songId);
      songJson.t = decodeURIComponent(urlSplitted[0]);
      songJson.f = decodeURIComponent(urlSplitted[1]);

      const { req } = context.ctx;
      const baseUrl = req ? `https://${req.headers.host}` : "";
      siteURL = `${baseUrl}/?s=${songId}&r=${base64query}`;
      track("page_view:shared_link", {
        song_id: songId,
        url: siteURL,
      });
      const response = await fetch(`${baseUrl}/api/clips/?ids=${songJson?.i}`, {
        method: "GET",
      });
      const data = await response.json();
      songTitle = data[0].title || "";
      songJson.song = data[0];
      if (songJson?.f) {
        songTitle += `, by ${songJson.f}`;
      }

      if (songJson?.t) {
        songDescription = getCopy("share:description").replace(
          "[NAMETO]",
          songJson.t,
        );
      }

      if (songJson?.f == "undefined" || songJson?.t == "undefined")
        throw new Error("Invalid song data");
    } catch (e) {
      console.error(e);
      songTitle = "";
      songDescription = "";
      songJson.song.image_url = undefined;
      siteURL = process.env.SITE_URL;
    }
  }

  return {
    customMetadata: {
      title: songTitle,
      description: songDescription,
      img: songJson?.song?.image_url,
      url: siteURL,
    },
  };
};

export default App;