import { createLocaleFunction } from "@/components/server-locale";
import { Button } from "@/components/ui/button";
import { cachedDecideLocale } from "@/lib/server-locale";
import { urlQueryToSearchParams } from "next/dist/shared/lib/router/utils/querystring";

export default async function LoginPage(props: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const usp = urlQueryToSearchParams((await props.searchParams) ?? {});
  const redirectUri = usp.get("redirect_uri") || "/";
  const locale = await cachedDecideLocale();
  const t = createLocaleFunction(locale);

  return (
    <>
      <div className="w-screen h-content pb-24 flex flex-col gap-4 items-center justify-center">
        <div>
          <svg
            className="shrink-0 w-36 mx-auto block"
            viewBox="-16.71 0 249.42 249.42"
          >
            <g>
              <g>
                <polygon
                  fill="#e30c34"
                  points="0 62.35 0 187.06 108 249.41 216 187.06 216 62.35 108 0 0 62.35"
                />
                <polygon
                  fill="#fff"
                  points="107.94 41.63 36.21 83.04 36.21 124.45 72.08 103.73 72.08 187.11 107.94 207.78 107.94 207.78 107.94 83.03 143.79 62.33 107.94 41.63"
                />
                <polygon
                  fill="#fff"
                  points="144 103.95 144 187.06 180 166.28 180 83.14 144 103.95"
                />
              </g>
            </g>
          </svg>
        </div>
        <div className="p-4 md:rounded-xl md:bg-card md:shadow-xl flex flex-col gap-4 items-stretch max-w-sm">
          <h1 className="text-2xl font-semibold text-center">
            {t("sign-in.title")}
          </h1>
          <p className="text-muted-foreground">
            {t(
              "sign-in.description",
              <a
                className="underline"
                href={t("sign-in.contact-tidb-team.link")}
                target="_blank"
              >
                {t("sign-in.contact-tidb-team.title")}
              </a>
            )}
          </p>
          <Button asChild>
            <a
              href={`/api/social/login/tidbcloud/?next=${encodeURIComponent(redirectUri)}`}
            >
              {t("sign-in.tidbcloud")}
            </a>
          </Button>
          <Button variant="secondary" asChild>
            <a
              href={`/api/social/login/google-oauth2/?next=${encodeURIComponent(redirectUri)}`}
            >
              {t("sign-in.employee")}
            </a>
          </Button>
          <p className="text-xs text-muted-foreground">
            {t(
              "sign-in.terms",
              <a
                className="underline font-semibold"
                target="_blank"
                href={t("sign-in.tos-link")}
              >
                {t("sign-in.tos-title")}
              </a>,
              <a
                className="underline font-semibold"
                target="_blank"
                href={t("sign-in.privacy-link")}
              >
                {t("sign-in.privacy-title")}
              </a>
            )}
          </p>
        </div>
      </div>
    </>
  );
}