// pages/auth/signin.js
import { getCsrfToken, signIn } from 'next-auth/react';
import React, { useState } from 'react';
import { useRouter } from 'next/router';
import Layout from '../../components/layout';
const { data: session } = useSession()

export default function SignIn({ csrfToken }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const router = useRouter();

    //handle callbackUrl
    const { callbackUrl } = router.query;
    if (callbackUrl) {
        if (session) {
            router.push(callbackUrl);
        }
    }



    const handleSubmit = async (e) => {
        e.preventDefault();

        // Perform client-side validation if needed
        if (!email || !password) {
            setError('Всички полета са задължителни');
            return;
        }

        // Clear any existing errors
        setError('');

        // Attempt to sign in
        const result = await signIn('credentials', {
            redirect: false,
            username: email,
            password,
            callbackUrl: '/',
        });

        // Check if there was an error
        if (result.error) {
            setError(result.error);
        }

        // Redirect to the home page or callbackUrl on success
        if (result.ok && result.url) {
            router.push(result.url);
        }
    };

    return (
        <Layout>
            <div className="page">
                <div className="signin">
                    <div className="min-h-screen flex flex-col items-center justify-center">
                        {/* SSO Providers */}
                        <div className="mt-8 w-full max-w-xs px-4">
                            <button onClick={() => signIn('google', { callbackUrl: '/' })}
                                className="flex items-center justify-center w-full py-2 px-4 border border-gray-300 rounded shadow-sm text-sm text-gray-700 bg-white hover:bg-gray-50">
                                <img loading="lazy" height="24" width="24" alt="Google logo"
                                    src="https://authjs.dev/img/providers/google.svg" className="mr-2" />
                                Влез чрез Google
                            </button>

                            {/* Add more buttons for other SSO providers here in similar style */}
                        </div>

                        {/* Email and Password Form */}
                        <form onSubmit={handleSubmit} className="mt-8 w-full max-w-xs px-4">
                            <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
                            <div className="mb-4">
                                <label htmlFor="email" className="block text-sm font-medium text-gray-700">имейл</label>
                                <input
                                    id="email"
                                    type="text" // allow non-email addresses for username (admins)
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                />
                            </div>
                            <div className="mb-6">
                                <label htmlFor="password" className="block text-sm font-medium text-gray-700">парола</label>
                                <input
                                    id="password"
                                    type="password"
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                />
                            </div>
                            {error && <div className="text-red-500 text-sm">{error}</div>}
                            <button type="submit" className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                                Влез
                            </button>
                            {/* <button
                                type="button"
                                className="mt-4 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none"
                                onClick={() => router.push('/auth/reset-password')}>
                                Забравена парола?
                            </button> */}
                        </form>
                    </div>
                </div>
            </div>
        </Layout>
    );
}

// This gets called on every request
export async function getServerSideProps(context) {
    return {
        props: {
            csrfToken: await getCsrfToken(context),
        },
    };
}
