"use client";

import { FadeIn } from "@/components/landing/fade-in";
import Link from "next/link";
import * as React from "react";
import { ErrorBanner, WarnBanner } from "../../banners";
import { EmailCode } from "../email-code";
import { MixSignIn } from "../mix-signin";
import { OAuthSignIn } from "../oauth-signin";
import toast from "react-hot-toast";
import initTranslations from "@/app/i18n";
import { useTranslation } from "react-i18next";


export default function SignInPage({ params: { locale } }: { params: { locale: string } }) {

  const { t } = useTranslation();

  const [verify, setVerify] = React.useState(false);
  const [accountNotFound, setAccountNotFound] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");

  return (
    <div className="flex flex-col gap-10">
      {accountNotFound ? (
        <WarnBanner>
          <div className="flex items-center justify-between w-full gap-2">
            <p className="text-xs">{t("auth.account_not_found")}</p>

            <Link href={`/auth/sign-up?email=${encodeURIComponent(username)}`}>
              <div className="border text-center text-xs border-transparent hover:border-[#FFD55D]/50  text-[#FFD55D]  duration-200  p-1 rounded-lg ">
              </div>
            </Link>
          </div>
        </WarnBanner>
      ) : null}

      {error ? <ErrorBanner>{error}</ErrorBanner> : null}

      {verify ? (
        <FadeIn>
          <EmailCode setError={setError} />
        </FadeIn>
      ) : (
        <>
          <div className="flex flex-col ">
            <h1 className="text-4xl text-black">{t("login")}</h1>
          </div>
          <div className="grid w-full gap-6">
            <div className="w-full">
              <MixSignIn
                setError={setError}
                verification={setVerify}
                setAccountNotFound={setAccountNotFound}
                username={setUsername}
                // password={setPassword}
                usernameValue={username}
                passwordValue={password}
              />
              <p className="mt-4 text-left text-sm text-md text-black/50 ">
                <Link href="/auth/sign-up" className="ml-2 underline text-black hover:underline" onClick={(e) => {
                  e.preventDefault();
                  toast.success('coming soon')
                }}>
                {t("auth.frogot_password")}
                </Link>
              </p>
            </div>

           {/* <OAuthSignIn /> */}
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-black/20" />
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-4 bg-white text-black/90"> {t("auth.or")} </span>
              </div>
            </div>

            <Link href="/auth/sign-up" className="h-10 leading-10 ml-2 text-center border border-black text-black ">
              {t("auth.creat_account")}
            </Link>
          </div>
        </>
      )}
    </div>
  );
}