import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { signIn, useSession } from "../lib/auth-client";

const LoginPage = () => {
  const { data: session, isPending } = useSession();
  const navigate = useNavigate();

  if (isPending) return <div className="p-4">Loading...</div>;

  if (session) {
    void navigate({ to: "/" });
    return null;
  }

  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <h1 className="text-2xl font-bold">sign in to lila</h1>
      <button
        className="w-64 rounded-2xl bg-(--color-text) px-4 py-3 text-white font-bold hover:opacity-90 shadow-sm hover:shadow-md transition-all"
        onClick={() => {
          void signIn
            .social({ provider: "github", callbackURL: window.location.origin })
            .catch((err) => {
              console.error("GitHub sign in error:", err);
            });
        }}
      >
        Continue with GitHub
      </button>
      <button
        className="w-64 rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
        onClick={() => {
          void signIn
            .social({ provider: "google", callbackURL: window.location.origin })
            .catch((err) => {
              console.error("Google sign in error:", err);
            });
        }}
      >
        Continue with Google
      </button>
    </div>
  );
};

export const Route = createFileRoute("/login")({ component: LoginPage });
