"use client";

import { SignIn } from "@/components/auth/SignIn";
import { Authenticated, Unauthenticated, useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

export default function AuthPage() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const nextPath = searchParams.get("next");

    return (
        <div className="min-h-screen flex items-center justify-center bg-background">
            <Unauthenticated>
                <SignIn />
            </Unauthenticated>
            <Authenticated>
                <RedirectToDashboard nextPath={nextPath} />
            </Authenticated>
        </div>
    );
}

function RedirectToDashboard({ nextPath }: { nextPath: string | null }) {
    const router = useRouter();
    useEffect(() => {
        router.push(nextPath || "/app/dashboard");
    }, [router, nextPath]);

    return (
        <div className="text-center">
            <h1 className="text-2xl font-bold mb-4">You are logged in!</h1>
            <p>Redirecting to dashboard...</p>
        </div>
    );
}