import React, { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "@/stores";
import LoginForm from "@/components/auth/LoginForm";
import { useLogin } from "@/hooks/useLogin";
const Login = () => {
  const {
    email,
    setEmail,
    password,
    setPassword,
    showPassword,
    setShowPassword,
    isLoading,
    isSettingUpTables,
    loginError,
    setLoginError: _setLoginError,
    handleLogin,
  } = useLogin();
  const navigate = useNavigate();
  const { user } = useAuth();

  // 이미 로그인된 경우 메인 페이지로 리다이렉트
  useEffect(() => {
    if (user) {
      navigate("/");
    }
  }, [user, navigate]);
  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-neuro-background">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-neuro-income mb-2">
            젤리의 적자탈출
          </h1>
          <p className="text-gray-500">
            계정에 로그인하여 예산 관리를 시작하세요
          </p>
        </div>

        <LoginForm
          email={email}
          setEmail={setEmail}
          password={password}
          setPassword={setPassword}
          showPassword={showPassword}
          setShowPassword={setShowPassword}
          isLoading={isLoading}
          isSettingUpTables={isSettingUpTables}
          loginError={loginError}
          handleLogin={handleLogin}
        />

        <div className="text-center mb-4">
          <p className="text-gray-500">
            계정이 없으신가요?{" "}
            <Link
              to="/register"
              className="text-neuro-income font-medium hover:underline"
            >
              회원가입
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
};
export default Login;