import { useAuthActions } from "@convex-dev/auth/react";
import { useState } from "react";

export function SignIn() {
    const { signIn } = useAuthActions();
    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 });
        } catch (err) {
            setError("Error signing in");
            console.error(err);
        }
    };

    return (
        <div className="flex flex-col gap-4 p-4 border rounded-lg max-w-sm mx-auto mt-10 bg-white shadow-sm text-black">
            <h2 className="text-xl font-bold text-center">{step === "signIn" ? "Sign In" : "Sign Up"}</h2>
            {error && <div className="text-red-500 text-sm text-center">{error}</div>}
            <form onSubmit={handleSubmit} className="flex flex-col gap-3">
                <input
                    type="email"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="border p-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
                    required
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="border p-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
                    required
                    minLength={8}
                />
                <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded font-medium transition-colors">
                    {step === "signIn" ? "Sign In" : "Sign Up"}
                </button>
            </form>
            <button
                type="button"
                onClick={() => setStep(step === "signIn" ? "signUp" : "signIn")}
                className="text-sm text-gray-500 hover:text-gray-700 hover:underline text-center"
            >
                {step === "signIn" ? "Don't have an account? Sign up" : "Already have an account? Sign in"}
            </button>
        </div>
    );
}