// 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';
import { useSession } from "next-auth/react"

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

    const { data: session } = useSession()
    //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 bg-gray-100">
                        <h1 className="text-2xl font-bold text-gray-900 mt-6">Вход</h1>
                        <div className="mt-8 w-full max-w-md px-4 py-8 bg-white shadow rounded-lg">
                            {/* <h2 className="text-center text-lg font-semibold text-gray-900 mb-4">Sign in with a Social Media Account</h2> */}
                            <button onClick={() => signIn('google', { callbackUrl: '/' })}
                                className="flex items-center justify-center w-full py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium 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>
                            {/* Apple Sign-In Button */}
                            {/* <button onClick={() => signIn('apple', { callbackUrl: '/' })}
                                className="mt-4 flex items-center justify-center w-full py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                <img loading="lazy" height="24" width="24" alt="Apple logo"
                                    src="https://authjs.dev/img/providers/apple.svg" className="mr-2" />
                                Влез чрез Apple
                            </button> */}
                            {/* microsoft */}
                            {/* <button onClick={() => signIn('azure-ad', { callbackUrl: '/' })}
                                className="mt-4 flex items-center justify-center w-full py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                <img loading="lazy" height="24" width="24" alt="Microsoft logo"
                                    src="https://authjs.dev/img/providers/azure-ad.svg" className="mr-2" />
                                Влез чрез Microsoft
                            </button> */}
                        </div>
                        <div className="w-full max-w-xs mt-8 mb-8">
                            <hr className="border-t border-gray-300" />
                        </div>
                        <div className="w-full max-w-md mt-8 mb-8 px-4 py-8 bg-white shadow rounded-lg">
                            <h2 className="text-center text-lg font-semibold text-gray-900 mb-4">Влез с локален акаунт</h2>
                            <form onSubmit={handleSubmit}>
                                <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
                                <div className="mb-4">
                                    <label htmlFor="email" className="block text-sm font-medium text-gray-900">имейл</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-blue-500 focus:border-blue-500 sm:text-sm"
                                    />
                                </div>
                                <div className="mb-6">
                                    <label htmlFor="password" className="block text-sm font-medium text-gray-900">парола</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-blue-500 focus:border-blue-500 sm:text-sm"
                                    />
                                </div>
                                {error && <div className="text-red-500 text-sm text-center">{error}</div>}
                                <button type="submit" className="w-full flex justify-center py-3 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>
            </div>
        </Layout>
    );
}

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