'use client'

import { motion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Lock, Mail } from "lucide-react";
import { useState } from "react";
import { createClient } from '@/utils/supabase/client'

export default function Login() {
    const supabase = createClient();

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState<string|null>(null);

    const handleLogin = async () => {
        setError(null);
        const { error } = await supabase.auth.signInWithPassword({ email, password });
        if (error) setError(error.message);
    };

    const handleGoogleSignIn = async () => {
        const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
        if (error) setError(error.message);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-6">
            {/* Card */}
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
                className="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-md"
            >
                <h2 className="text-3xl font-bold text-center mb-6">Login</h2>

                {error && <p className="text-red-500 text-center mb-4">{error}</p>}

                <div className="space-y-4">
                    <div>
                        <label className="block text-gray-400 mb-1">Email</label>
                        <div className="relative">
                            <Mail className="absolute left-3 top-2 text-gray-500" size={20} />
                            <Input
                                type="email"
                                placeholder="Enter your email"
                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-gray-400 mb-1">Password</label>
                        <div className="relative">
                            <Lock className="absolute left-3 top-2 text-gray-500" size={20} />
                            <Input
                                type="password"
                                placeholder="Enter your password"
                                className="pl-10 bg-gray-700 border-none focus:ring-2 focus:ring-gray-500"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                            />
                        </div>
                    </div>

                    <Button
                        className="w-full bg-white text-gray-900 font-semibold px-6 py-3 rounded-lg shadow-lg mt-4 hover:bg-gray-200"
                        onClick={handleLogin}
                    >
                        Login
                    </Button>
                    <div className="my-6 flex items-center">
                    <div className="flex-1 border-t border-gray-600"></div>
                    <p className="px-4 text-gray-400">or</p>
                    <div className="flex-1 border-t border-gray-600"></div>
                    </div>
                    <Button
                        className="w-full bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg mt-2 hover:bg-blue-600"
                        onClick={handleGoogleSignIn}
                    >
                        Sign in with Google
                    </Button>
                </div>

                <p className="text-center text-gray-400 mt-4">
                    Don&apos;t have an account? <a href="/register" className="text-blue-400 hover:underline">Register</a>
                </p>
            </motion.div>
        </div>
    );
}