import { useEffect, useState } from 'react';
import { post } from '@/api1/apiUtils';
import toast from 'react-hot-toast';
import { useRouter } from 'next/router';
import { getToken } from '@/helper/getUser';
import LayoutWrapper from '@/components/Layout/LayOutWrapper';
import Head from 'next/head'; // Import Head for adding SEO tags

function Login() {

    const [formData, setFormData] = useState({
        email: '',
        password: '',
    });

    const handleChange = (e: any) => {
        const { name, value } = e.target;
        setFormData(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = async (e: any) => {
        e.preventDefault();
        try {
            const res = await post('/login', formData);
            if (res?.access_token) {
                toast.success("Login Successful");
                localStorage.setItem('encrypt_id', res?.access_token);
                localStorage.setItem('user', JSON.stringify(res?.user));
                router.replace('/');
            } else {
                toast.error("Enter the correct details");
            }
        } catch (err) {
            console.log(err);
            toast.error("Please Try Again");
        }
    };

    const router = useRouter();
    useEffect(() => {
        function fetchDetails() {
            const encrypt_id = getToken();
            if (encrypt_id) {
                router.push('/');
            }
        }
        fetchDetails();
    }, []);

    return (
        <>
            {/* SEO Meta Tags */}
            <Head>
                <title>Login - ayodhyas</title>
                <meta name="description" content="Login to ayodhyas to access your personalized dashboard and services." />
                <meta name="keywords" content="ayodhyas, Login, User Dashboard, Access, Authentication" />
                <meta name="robots" content="index, follow" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                {/* Open Graph (OG) Meta Tags for Social Sharing */}
                <meta property="og:title" content="Login - ayodhyas" />
                <meta property="og:description" content="Login to ayodhyas to access your personalized dashboard and services." />
                <meta property="og:url" content="https://ayodhyas.com/login" />
                <meta property="og:type" content="website" />

            </Head>

            <LayoutWrapper>
                <div className="banner-main-szvw-1">

                    <div className="lg-page">

                        <div className="container mt-5 login-card-outer">


                            <div
                                className="card shadow-lg mb-5"
                                style={{
                                    marginTop: '-140px',
                                    maxWidth: "450px",
                                    width: '100%',
                                    background: 'rgba(255, 255, 255, 0.8)',
                                    backdropFilter: 'blur(30px)',
                                    margin: '20px auto'
                                }}
                            >
                                <div className="card-body text-center p-4">
                                    <h2 className="fw-bold mb-4">Login Here</h2>

                                    <form onSubmit={handleSubmit}>
                                        {/* Email Input */}
                                        <div className="form-group mb-4">
                                            <input
                                                type="email"
                                                className="form-control"
                                                placeholder="Email"
                                                name="email"
                                                value={formData.email}
                                                onChange={handleChange}
                                            />
                                        </div>

                                        {/* Password Input */}
                                        <div className="form-group mb-4">
                                            <input
                                                type="password"
                                                className="form-control"
                                                placeholder="Password"
                                                name="password"
                                                value={formData.password}
                                                onChange={handleChange}
                                            />
                                        </div>

                                        {/* Submit Button */}
                                        <button
                                            type="submit"
                                            className="btn btn-primary w-50 mt-2 mb-2 rental-frm-btns"
                                        >
                                            Login
                                        </button>
                                    </form>

                                    <div className="text-center">
                                        New User?{" "}
                                        <a
                                            href="/register"
                                            style={{ textDecoration: "underline", color: "blue" }}
                                        >
                                            Sign Up
                                        </a>

                                        {/* Social Sign-In Buttons */}
                                        {/* <div className="d-flex justify-content-center mt-3">
                                    <button className="btn btn-link p-0 mx-2">
                                        <i className="bi bi-facebook" style={{ fontSize: '1.5rem', color: '#3b5998' }}></i>
                                    </button>
                                    <button className="btn btn-link p-0 mx-2">
                                        <i className="bi bi-twitter" style={{ fontSize: '1.5rem', color: '#1DA1F2' }}></i>
                                    </button>
                                    <button className="btn btn-link p-0 mx-2">
                                        <i className="bi bi-google" style={{ fontSize: '1.5rem', color: '#db4a39' }}></i>
                                    </button>
                                    <button className="btn btn-link p-0 mx-2">
                                        <i className="bi bi-github" style={{ fontSize: '1.5rem', color: '#333' }}></i>
                                    </button>
                                </div> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </LayoutWrapper>
        </>
    );
}

export default Login;
