"use client";

import { useAuthActions } from "@convex-dev/auth/react";
import { Authenticated, Unauthenticated, useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-6">
      <Unauthenticated>
        <SignInPage />
      </Unauthenticated>
      <Authenticated>
        <DashboardRedirect />
      </Authenticated>
    </main>
  );
}

function SignInPage() {
  const { signIn } = useAuthActions();

  return (
    <div className="text-center max-w-md">
      <h1 className="text-5xl font-bold mb-4">Suno Spaces</h1>
      <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
        Digital music collaboration platform
      </p>
      <button
        onClick={() => signIn("google")}
        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
      >
        Sign in with Google
      </button>
      <p className="text-sm text-gray-500 mt-4">
        @suno.com emails only
      </p>
    </div>
  );
}

function DashboardRedirect() {
  const router = useRouter();
  const user = useQuery(api.users.current);

  useEffect(() => {
    if (user) {
      router.push("/dashboard");
    }
  }, [user, router]);

  return (
    <div className="text-center">
      <h1 className="text-2xl font-bold mb-4">Welcome!</h1>
      <p className="text-gray-600 dark:text-gray-400">Redirecting...</p>
    </div>
  );
}