"use client"

import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { useGetUrlLoginSocial, useLogin, useSocialSinginFacebook } from "@/hook/useAuth"
import { Link, useRouter } from "@/i18n/routing"
import { policyState, termsConditionsState, titleState } from "@/recoil"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { Button, Checkbox, Divider, Form, Input, Modal } from "antd"
import { useCookies } from "next-client-cookies"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useSetRecoilState } from "recoil"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"
import Image from "next/image"
import { CometChatUIKit } from "@cometchat/chat-uikit-react"
import { useSearchParams } from "next/navigation"
import FormPAccount from "@/component/Account/FormPAccount"

export default function LoginContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const [formRef] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const transRq = useTranslations("required")
  const trans = useTranslations("account")
  const cookies = useCookies()
  const login = useLogin()
  const transMessage = useTranslations("message")
  const { notify } = useNotificationContext()
  const { data: dataUrl } = useGetUrlLoginSocial()
  const socialSinginFacebook = useSocialSinginFacebook()
  const searchParams = useSearchParams()
  const [isOpenModal, setIsOpenModal] = useState(false)
  const [userInfo, setUserInfo] = useState<any>(null)
  const openTermsConditions = useSetRecoilState(termsConditionsState)
  const openPolicy = useSetRecoilState(policyState)

  useEffect(() => {
    const code = searchParams.get("code")
    const state = searchParams.get("state")
    if (code && state) {
      setLoading(true)
      socialSinginFacebook
        .mutateAsync({
          code: code,
          state: state,
        })
        .then((res) => {
          console.log("res", res)
          if (res?.data?.data?.access_token) {
            cookies.set("access_token", res?.data?.data?.access_token, {
              expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
            })
            setTimeout(() => {
              router.refresh()
              router.push(`/`)
            }, 500)
          } else {
            setIsOpenModal(true)
            setUserInfo(res?.data?.data?.user)
          }
        })
        .catch((error) => {
          const concatenatedMsgs =
            typeof error?.response?.data?.msgs !== "string"
              ? Object.values(error?.response?.data.msgs).join("<br />")
              : error?.response?.data?.msgs || transMessage("fail")
          notify({
            type: "error",
            message: transMessage("something_wrong"),
            description: concatenatedMsgs,
          })
        })
        .finally(() => {
          setLoading(false)
        })
    }
  }, [searchParams])

  useEffect(() => {
    setPageTitle("Login")
    CometChatUIKit.logout()
  }, [])

  useEffect(() => {
    formRef.resetFields()
  }, [])

  const onFinish = (values: any) => {
    setLoading(true)
    login
      .mutateAsync({
        email: values?.username,
        password: values?.password,
      })
      .then((res) => {
        values?.remember
          ? cookies.set("isRemember", values?.remember, {
              expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
              path: "/",
              sameSite: "strict",
            })
          : cookies.set("isRemember", "false")
        cookies.set("access_token", res?.data?.data?.access_token, {
          expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
          path: "/",
          sameSite: "strict",
        })
        setTimeout(() => {
          router.refresh()
          router.push(`/`)
          // window.location.reload()
        }, 500)
      })
      .catch((error) => {
        const concatenatedMsgs = error?.response?.data.msgs || transMessage("fail")
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: concatenatedMsgs,
        })
      })
      .finally(() => {
        setLoading(false)
      })
  }

  const handleCancel = () => {
    setIsOpenModal(false)
  }

  return (
    <div className="w-full max-w-md xl:max-w-lg mx-auto flex flex-col h-full relative">
      <div className="grow flex flex-col justify-center text-[var(--secondary-100)]">
        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-[var(--secondary-100)]">Welcome</h2>
        <p className="text-[var(--secondary-60)] md:text-xl text-lgxl xl:text-2xl mb-6">Please login to continue</p>
        <Form
          name="login"
          form={formRef}
          onFinish={onFinish}
          initialValues={{ remember: true }}
          // initialValues={{ remember: true, username: "expertzkris@gmail.com", password: "Expertzkris2025" }}
          autoComplete="off"
          layout="vertical">
          <Form.Item
            label="Email"
            name="username"
            rules={[
              { required: true, message: transRq("cannot_empty") },
              { type: "email", message: trans("valid_email") },
              { max: 254, message: trans("not_exceed_254_characters") },
            ]}>
            <Input
              placeholder="Enter your email"
              size="large"
              onBlur={(e) => {
                formRef.setFieldsValue({
                  username: e.target.value.trim(),
                })
              }}
              className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
            />
          </Form.Item>
          <Form.Item
            label={trans("password")}
            name="password"
            rules={[
              { required: true, message: transRq("cannot_empty") },
              { min: 4, message: trans("password_must_be_4_characters") },
              { max: 20, message: trans("password_must_not_exceed_20_characters") },
              {
                validator: (_, value) => {
                  if (value && /\s/.test(value) && value.length <= 20 && value.length >= 8) {
                    return Promise.reject(new Error(trans("password_not_contain_space")))
                  }
                  return Promise.resolve()
                },
              },
            ]}>
            <Input.Password
              placeholder={trans("enter_your_password")}
              size="large"
              onBlur={(e) => {
                formRef.setFieldsValue({
                  password: e.target.value.trim(),
                })
              }}
              className="lg:h-12 xl:h-14 text-[var(--secondary-100)]"
            />
          </Form.Item>
          <div className="flex justify-between items-start">
            <Form.Item
              name="remember"
              valuePropName="checked"
              label={null}>
              <Checkbox className="!text-[var(--secondary-100)] !text-xs md:!text-base xl:!text-lg">{trans("remember_me")}</Checkbox>
            </Form.Item>
            <Link
              href="/forgot-password"
              className="text-xs md:text-base xl:text-lg font-semibol text-[var(--primary--70)]">
              {trans("forgot_password")}
            </Link>
          </div>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-14 !rounded-lg mb-4"
              loading={loading}>
              {trans("login")}
            </Button>
            <Link
              href={dataUrl?.data?.data?.facebook || "#"}
              className="flex items-center justify-center gap-2 px-2 md:px-4 py-2 text-white bg-blue-700 rounded-lg hover:bg-blue-800 hover:text-white transition md:!text-base lg:!text-lg text-nowrap !h-10 md:!h-12 xl:!h-14">
              <FontAwesomeIcon icon={faFacebook} />
              CONTINUE WITH FACEBOOK
            </Link>
          </Form.Item>
        </Form>
        <Divider className="!mt-0">{trans("dont_have_account")}</Divider>
        <div className="text-xs md:text-base xl:text-lg pb-4 flex items-center flex-wrap">
          <Link
            href="/register"
            className="w-full flex items-center justify-center border border-[var(--secondary-30)] rounded-lg hover:text-[var(--primary--70)] hover:border-[var(--primary--70)] md:!text-base lg:!text-lg text-nowrap !h-10 md:!h-12 xl:!h-14">
            {trans("register_now")}
          </Link>
        </div>
      </div>
      <p className="pt-4 border-t border-[var(--secondary-20)]">
        {trans("by_logging_in_you_agree_to_the")}
        <Link
          href="#"
          scroll={false}
          onClick={() => openTermsConditions(true)}
          className="text-[var(--blue-70)] hover:underline px-1">
          {trans("terms_of_service")}
        </Link>
        {trans("and")}
        <Link
          href="#"
          scroll={false}
          onClick={() => openPolicy(true)}
          className="text-[var(--blue-70)] hover:underline px-1">
          {trans("privacy_policy")}
        </Link>
        .
      </p>
      <Modal
        destroyOnClose
        maskClosable={false}
        open={isOpenModal}
        onCancel={handleCancel}
        title=""
        footer={null}>
        <FormPAccount
          updateInfo={true}
          user={userInfo}
        />
      </Modal>
    </div>
  )
}