'use client'
import {useContext} from 'react';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faEnvelope} from "@fortawesome/free-solid-svg-icons";
import LoginForm from "@/app/login/login/LoginForm";
import SocialForm from "@/app/login/login/SocialForm";
import {useTranslations} from "next-intl";
import {LangContext} from "@/context/LangContext";
import System from "@/lib/models/System";

export default function LoginPage() {
    const t = useTranslations();
    const {lang, setLang} = useContext(LangContext);
    
    const toggleLanguage = () => {
        const newLang = lang === 'fr' ? 'en' : 'fr';
        setLang(newLang);
        System.setCookie('lang', newLang, 365);
    };

    return (
        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
            <div className="w-full max-w-md px-4 py-10">
                <div className="flex justify-center mb-8">
                    <div className="w-[90%] max-w-[320px] relative">
                        <img
                            src="/logo.png"
                            alt="ERitors"
                            className="object-contain"
                            style={{width: 320, height: 107}}
                        />
                    </div>
                </div>

                <div
                    className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
                    <button
                        onClick={toggleLanguage}
                        className="absolute right-4 top-4 z-10 flex items-center gap-2 px-3 py-2 bg-secondary border border-gray-dark rounded-lg hover:bg-tertiary transition-colors"
                        aria-label="Toggle language"
                    >
                        <span
                            className={`text-sm font-medium ${lang === 'fr' ? 'text-primary' : 'text-muted'}`}>FR</span>
                        <span className="text-muted">/</span>
                        <span
                            className={`text-sm font-medium ${lang === 'en' ? 'text-primary' : 'text-muted'}`}>EN</span>
                    </button>
                    <div
                        className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info pointer-events-none"></div>
                    <div
                        className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl pointer-events-none"></div>
                    <div
                        className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl pointer-events-none"></div>
                    
                    <div className="p-6 sm:p-8">
                        <div className="text-center mb-8">
                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('loginPage.title')}</h1>
                            <p className="text-muted">{t('loginPage.welcome')}</p>
                        </div>
                        <LoginForm/>
                        <div className="relative my-6">
                            <div className="absolute inset-0 flex items-center">
                                <div className="w-full border-t border-gray-dark"></div>
                            </div>
                            <div className="relative flex justify-center">
                                <span className="px-3 bg-tertiary text-muted text-sm">{t('loginPage.orSocial')}</span>
                            </div>
                        </div>
                        <div className="flex justify-center gap-3 mb-6">
                            <a
                                href="/login/register"
                                className="flex items-center justify-center w-14 h-14 bg-gradient-to-r from-primary to-info hover:shadow-lg hover:shadow-primary/20 text-textPrimary rounded-xl transition-all"
                                aria-label="Register with email"
                            >
                                <FontAwesomeIcon icon={faEnvelope} className="w-6 h-6 text-textPrimary"/>
                            </a>
                            <SocialForm/>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}