import { FC, ReactNode } from 'react';
import { Main } from '@/app/ui/Main';

import { authConfig, myAuth } from "@/app/lib/auth";
import { SignInButton } from '@/app/ui/SignInButton';
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 Link from 'next/link';
import { MultiParagraphText } from '../ui/MultiParagrpahText';

type Provider = {
  id: string;
  name: string;
  type: string;
  style: {
    logo: string;
    bg: string;
    text: string;
  };
};

function getProviders(): Provider[] {
  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
  return authConfig.providers.map((provider) =>
    getKeyValuesFromObject<Provider>(provider, providerKeys)
  );
}

function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
  return keys.reduce((acc, key) => {
    if (obj[key]) {
      acc[key] = obj[key];
    }
    return acc;
  }, {} as T);
}

const Page:FC = async () => {

  const session = await myAuth();
  const locale = await getLocale();
  const providers = await getProviders();
  const t = await getTranslations("login-page");
  // get userAgent from NextJS

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

  const insideWebeview = isWebview(userAgent);

 return (
    <Main>
      <h1 className="text-3xl font-bold text-center">
        <span className="text-neutral-50">{t("main-card.title-1")}</span>
        <span className="text-indigo-400">{t("main-card.title-2")}</span>
        <span className="text-neutral-50 ml-2">{t("main-card.title-3")}</span>
      </h1>
      {t.rich("main-card.text-1", {
        strong: (chunks) => <strong>{chunks}</strong>,
        p: (chunks) => <p className="p mt-[1em] max-w-[38em] mx-auto text-justify">{chunks}</p>
      })}

      <Image src="/man-burried-under-paper.png" alt="Man burried under bills" className="m-auto" width={400} height={300} />
      <MultiParagraphText text={t("main-card.text-2")} />
      <Image src="/robot-sorting-papers.png" alt="Robot sortira papire" className="m-auto" width={400} height={300} />
      {
        t("main-card.text-2").split("\n").map((line, index) => (
          <p key={index} className="p mt-[1em] max-w-[38em] mx-auto text-justify">{line}</p>
        ))
      }

      <span className="flex justify-center">
        {
          session ? (
            <Link
              href={`/${locale}/home`}
              className="btn btn-neutral btn-lg"
            >
              {t("main-card.cta-try-it-for-free")}
            </Link>
          ) : (
            Object.values(providers).map((provider) => (
              <div key={provider.name}>
                <SignInButton provider={provider} />
              </div>
            ))
          )
        }
      </span>

      {
        // 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", {
                  br: () => <br />,
                  strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
                  hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span> 
              })
            }
          </div>
        </div>
      }

      man-burried-under-paper.png

      <video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
        <source src={t("main-card.video-url")} type="video/webm" />
      </video>

      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
      <p className="p mt-[1em]">{t("card-1.text")}</p>
      <video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
        <source src={t("card-1.video-url")} type="video/webm" />
      </video>

      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
      <p className="p mt-[1em]">{t("card-2.text")}</p>
      <Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />

      <h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
      <p className="p mt-[1em]">{t("card-3.text")}</p>
      <video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
        <source src={t("card-3.video-url")} type="video/webm" />
      </video>
    </Main>
  );
}

export default Page;