"use client";
import SignInForm from "@/components/forms/sign-in-form";
import Link from "next/link";
import AppTypography from "@/components/ui/typography";
import { useTranslations } from "next-intl";
import StorageHelper from "@/lib/storeHelper";
import { STORAGE_KEYS } from "@/types/common";
import { showToast } from "@/components/toast/showToast";
import { useEffect, useRef } from "react";

export default function SignInPage() {
  const t = useTranslations("SignInPage");
  // const router = useRouter();
  // const pathname = usePathname();

  const unauthorizedMessage = StorageHelper.getLocalItem(
    STORAGE_KEYS.unauthorizedMessage
  );

  // const locale = StorageHelper.getCookie(STORAGE_KEYS.NEXT_LOCALE) || "ja";

  const toastShown = useRef(false);

  // const handleRenderLocaleMenu = () => {
  //   const supportedLocales = ["en", "ja"];
  //
  //   const handleSwitchLanguage = (newLocale: string) => {
  //     if (locale !== newLocale) {
  //       StorageHelper.setCookie(STORAGE_KEYS.NEXT_LOCALE, newLocale, {
  //         path: "/",
  //         maxAge: 31536000,
  //       });
  //       router.replace(pathname, { locale: newLocale });
  //     }
  //   };
  //
  //   return [
  //     {
  //       key: "ja",
  //       label: (
  //         <AppTypography className="text-neutral-600">日本語</AppTypography>
  //       ),
  //       onClick: () => handleSwitchLanguage("ja"),
  //     },
  //     {
  //       key: "en",
  //       label: (
  //         <AppTypography className="text-neutral-600">English</AppTypography>
  //       ),
  //       onClick: () => handleSwitchLanguage("en"),
  //     },
  //   ];
  // };

  useEffect(() => {
    /**
     * Handle unauthorized message display on sign-in page
     *
     * @description
     * This effect checks for an unauthorized message in local storage and displays it as a toast notification.
     * It uses a ref to prevent duplicate toasts in development strict mode or during re-renders.
     *
     * Flow:
     * 1. Gets unauthorized message from local storage if exists
     * 2. Checks if toast hasn't been shown yet using toastShown ref
     * 3. Shows toast message with 100ms delay to ensure proper page load
     * 4. Removes the message from local storage after displaying
     *
     * Dependencies:
     * - unauthorizedMessage: Message stored in local storage
     * - toastShown: useRef to track if toast has been displayed
     * - showToast: Toast notification function
     * - StorageHelper: Local storage utility
     */
    if (unauthorizedMessage && !toastShown.current) {
      toastShown.current = true;
      setTimeout(() => {
        showToast("error", unauthorizedMessage);
        StorageHelper.removeLocalItem(STORAGE_KEYS.unauthorizedMessage);
      }, 100);
    }
  }, [unauthorizedMessage]);

  return (
    <>
      <div className="w-full min-h-screen flex flex-col justify-center items-center relative">
        {/*<div className="absolute top-8 right-8">*/}
        {/*  <AppDropdown*/}
        {/*    overlayClassName="manage-account-dropdown"*/}
        {/*    menu={{*/}
        {/*      items: handleRenderLocaleMenu(),*/}
        {/*      selectedKeys: [locale],*/}
        {/*    }}*/}
        {/*    trigger={["click"]}*/}
        {/*    className={"flex items-center"}*/}
        {/*  >*/}
        {/*    <AppButton*/}
        {/*      type="text"*/}
        {/*      shape="circle"*/}
        {/*      size="large"*/}
        {/*      className="!flex items-center"*/}
        {/*    >*/}
        {/*      <Languages size={24} />*/}
        {/*    </AppButton>*/}
        {/*  </AppDropdown>*/}
        {/*</div>*/}

        <div className="w-[500px] px-8 py-4 border border-gray-200 rounded-lg shadow">
          <AppTypography
            type="title"
            level={3}
            className="font-semibold text-center "
          >
            iDoc Shopify App
          </AppTypography>
          <AppTypography
            type="title"
            level={4}
            className="font-semibold text-center "
          >
            {t("title")}
          </AppTypography>

          <SignInForm />
          <div className="text-center font-normal text-md mt-2 text-[#3b82f6]">
            <Link href="forgot-password">{t("forgot_password")}</Link>
          </div>
        </div>
      </div>
    </>
  );
}