import { FC } from 'react';
import { Main } from '@/app/ui/Main';
import { myAuth } from "@/app/lib/auth";
import Image from 'next/image';
import { getTranslations, getLocale } from "next-intl/server";
import isWebview from "is-ua-webview";
import { headers } from 'next/headers';
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
import { getAuthProviders } from '../lib/getProviders';
import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
import Link from 'next/link';

const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
const h2ClassName = h1ClassName + " mt-8";

const Page: FC = async () => {

  const locale = await getLocale();
  const paragraphFormat = paragraphFormatFactory(locale);

  const t = await getTranslations("login-page");
  const session = await myAuth();
  const providers = getAuthProviders();

  // get userAgent from NextJS
  const headersList = headers();
  const userAgent = headersList.get("user-agent") as string;

  const insideWebeview = isWebview(userAgent);

  return (
    <Main>
      <h1 className={h1ClassName}>
        {t.rich("main-card.title", paragraphFormat)}
      </h1>
      <EnterOrSignInButton session={session} locale={locale} providers={providers} />

      {t.rich("main-card.text", paragraphFormat)}
      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
      {
        // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
        insideWebeview &&
        <div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
          <figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
            <ExclamationTriangleIcon className="text-red-600 self-start" />
          </figure>
          <div className="card-body pl-2">
            {t.rich("main-card.in-app-browser-warning", paragraphFormat)}
          </div>
        </div>
      }
      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-1.title", paragraphFormat)}</h2>
      {t.rich("card-1.text", paragraphFormat)}
      <Image src={t("card-1.image-url")} alt={t("card-1.image-alt")} className="m-auto mt-4" width={400} height={300} />

      <h2 className={`${h2ClassName} text-xl`}>{t.rich("card-2.title", paragraphFormat)}</h2>
      {t.rich("card-2.text", paragraphFormat)}

      <EnterOrSignInButton session={session} locale={locale} providers={providers} />


    </Main>
  );
}

export default Page;