'use client';
import { LoginForm } from "@/components/auth/login-form";
import { useAuthStore } from '@/store/auth-store';
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import Image from "next/image";

const SAVED_USER_ID_KEY = 'savedUserId';

// 로그인 페이지 컴포넌트
export default function LoginPage() {
  const [userId, setUserId] = useState('')
  const [userPassword, setUserPassword] = useState('')
  const [error, setError] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [saveId, setSaveId] = useState(false)
  const router = useRouter()
  const { login } = useAuthStore();

  // 저장된 아이디 불러오기
  useEffect(() => {
    const savedUserId = localStorage.getItem(SAVED_USER_ID_KEY)
    if (savedUserId) {
      setUserId(savedUserId)
      setSaveId(true)
    }
  }, [])

  // 로그인 처리 함수
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setIsLoading(true)

    // 아이디 저장 처리
    if (saveId) {
      localStorage.setItem(SAVED_USER_ID_KEY, userId)
    } else {
      localStorage.removeItem(SAVED_USER_ID_KEY)
    }

    try {
      await login({
        userId: userId,
        userPassword: userPassword
      })

      // 로그인 성공 후 사용자 정보 가져오기
      const userInfo = useAuthStore.getState().user
      const isAdmin = userInfo?.userRole === 'ADMIN'

      // 관리자는 /admin, 일반 사용자는 /dashboard로 이동
      router.push(isAdmin ? '/admin' : '/dashboard')

    } catch (err: unknown) {
      if (err instanceof Error) {
        setError(err.message)
      } else {
        setError('알 수 없는 오류가 발생했습니다')
      }
    } finally {
      setIsLoading(false)
    }
  }

  // 렌더링
  return (
    <div className="grid min-h-svh lg:grid-cols-2">
      {/* 데스크톱: 왼쪽 로고 이미지 영역 */}
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="한우 유전체 컨설팅 로고"
          fill
          className="object-contain p-16 -translate-y-12 translate-x-24"
          priority
        />
      </div>

      {/* 오른쪽 폼 영역 */}
      <div className="flex flex-col p-4 md:p-10 bg-white">
        {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[300px] lg:max-w-sm">
            {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
            <div className="lg:hidden flex justify-center mb-2">
              <Image
                src="/logo-graphic.svg"
                alt="한우 유전체 컨설팅 로고"
                width={120}
                height={120}
                className="object-contain"
                priority
              />
            </div>

            <LoginForm
              onSubmit={handleLogin}
              userId={userId}
              setUserId={setUserId}
              userPassword={userPassword}
              setUserPassword={setUserPassword}
              error={error}
              isLoading={isLoading}
              saveId={saveId}
              setSaveId={setSaveId}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
