"use client";

import { Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import GoogleSignIn from "@/components/google-sign-in";
import { signIn } from "@/lib/auth";
import { useState } from "react";

function LoginForm() {
  const router = useRouter();
  // 로그인 전에 가려던 곳. 없으면 홈으로 보낸다
  const next = useSearchParams().get("next") || "/";
  const [error, setError] = useState<string | null>(null);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center",
                  gap: "1.5rem", paddingTop: "8rem" }}>
      <h1 className="page-title">로그인</h1>
      <p className="page-subtitle">구글 계정으로 들어와 주세요.</p>
      <GoogleSignIn onCredential={(credential) => {
        setError(null);
        signIn(credential)
          .then(() => router.replace(next))
          .catch((failure) => setError((failure as Error).message));
      }} />
      {error && <p style={{ color: "#ff7a7a", fontSize: "var(--text-sm)" }}>{error}</p>}
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={<p style={{ color: "var(--color-text-gray-400)" }}>불러오는 중…</p>}>
      <LoginForm />
    </Suspense>
  );
}