'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import Loader from '@/components/ui/Loader'
import useUserStore from '@/app/store/userStore'
import ClientView from './ClientView'

const LoginPage = () => {
  const router = useRouter()
  const { isAuthenticated } = useUserStore()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // проверяем логин
    if (isAuthenticated) {
      // распределяем
      router.replace('/account')
      return
    }

    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 300)

    return () => clearTimeout(timer)
  }, [isAuthenticated, router])

  if (isLoading) {
    return <Loader />
  }

  return (
    <div className="flex items-center justify-center py-8">
      <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl bg-white p-6 shadow-lg">
        <div className="flex flex-col items-center py-4">
          <h1 className="pb-1 text-2xl font-medium">Рады видеть Вас снова!</h1>
          <p className="text-center text-base font-medium">
            Пожалуйста, авторизуйтесь, чтобы продолжить
          </p>
        </div>

        <ClientView />

        <p className="text-center text-base font-medium">
          Впервые у нас?{' '}
          <span className="text-orange/70 hover:underline">
            <Link href="/register">Зарегистрироваться</Link>
          </span>
        </p>
      </div>
    </div>
  )
}

export default LoginPage