SanatiLeads/components/auth/SignIn.tsx

import { useAuthActions } from "@convex-dev/auth/react";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";

export function SignIn() {
    const { signIn } = useAuthActions();
    const router = useRouter();
    const searchParams = useSearchParams();
    const nextPath = searchParams.get("next");
    const [step, setStep] = useState<"signIn" | "signUp">("signIn");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState<string | null>(null);

    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        setError(null);
        try {
            const flow = step === "signIn" ? "signIn" : "signUp";
            await signIn("password", { email, password, flow });
            const next = nextPath || (flow === "signIn" ? "/dashboard" : "/onboarding");
            if (flow === "signIn") {
                router.push(next);
            } else {
                router.push(next);
            }
        } catch (err: any) {
            console.error(err);
            const errorMessage = err.message || "Error signing in. Please check your credentials.";
            if (errorMessage.includes("Account") && errorMessage.includes("already exists")) {
                setError("Account already exists. Please sign in instead.");
            } else {
                setError(errorMessage);
            }
        }
    };

    const handleGoogleSignIn = () => {
        const next = nextPath || "/dashboard";
        void signIn("google", { redirectTo: next });
    };

    return (
        <Card className="w-full max-w-md mx-auto mt-20 shadow-lg">
            <CardHeader className="space-y-1">
                <CardTitle className="text-2xl font-bold text-center">
                    {step === "signIn" ? "Welcome back" : "Create an account"}
                </CardTitle>
                <CardDescription className="text-center">
                    {step === "signIn"
                        ? "Enter your email to sign in to your account"
                        : "Enter your email below to create your account"}
                </CardDescription>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    {error && (
                        <div className="bg-destructive/15 text-destructive text-sm p-3 rounded-md text-center">
                            {error}
                        </div>
                    )}
                    <Button
                        variant="outline"
                        className="w-full flex items-center justify-center gap-2"
                        onClick={handleGoogleSignIn}
                    >
                        <svg className="w-5 h-5" viewBox="0 0 24 24">
                            <path
                                fill="currentColor"
                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                            />
                            <path
                                fill="currentColor"
                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                            />
                            <path
                                fill="currentColor"
                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                            />
                            <path
                                fill="currentColor"
                                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                            />
                        </svg>
                        Sign in with Google
                    </Button>
                    <div className="relative">
                        <div className="absolute inset-0 flex items-center">
                            <span className="w-full border-t" />
                        </div>
                        <div className="relative flex justify-center text-xs uppercase">
                            <span className="bg-background px-2 text-muted-foreground">
                                Or continue with email
                            </span>
                        </div>
                    </div>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="email">Email</Label>
                            <Input
                                id="email"
                                type="email"
                                placeholder="m@example.com"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                required
                            />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="password">Password</Label>
                            <Input
                                id="password"
                                type="password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                required
                                minLength={8}
                            />
                        </div>
                        <Button type="submit" className="w-full">
                            {step === "signIn" ? "Sign In" : "Sign Up"}
                        </Button>
                    </form>
                </div>
            </CardContent>
            <CardFooter className="flex flex-col gap-4">
                <Button
                    variant="link"
                    onClick={() => setStep(step === "signIn" ? "signUp" : "signIn")}
                    className="w-full"
                >
                    {step === "signIn" ? "Don't have an account? Sign up" : "Already have an account? Sign in"}
                </Button>
            </CardFooter>
        </Card>
    );
}