'use client'
import {useState} from 'react';
import StepOne from "./StepOne";
import StepTree from "@/app/login/register/StepTree";
import SocialForm from "@/app/login/login/SocialForm";
import {useTranslations} from "next-intl";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';

export default function Register() {
    const t = useTranslations();
    const [username, setUsername] = useState<string>('');
    const [email, setEmail] = useState<string>('');
    const [step, setStep] = useState<number>(1);
    
    function handleNextStep(): void {
        setStep(step + 1);
    }
    
    function handlePrevStep(): void {
        setStep(step - 1);
    }
    
    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]">
                        <img
                            src="/logo.png"
                            alt="ERitors"
                            className="w-full h-auto object-contain"
                        />
                    </div>
                </div>
                
                <div className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
                    <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info"></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"></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"></div>
                    
                    <div className="p-6 sm:p-8">
                        <div className="text-center mb-6">
                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('registerPage.title')}</h1>
                            <p className="text-muted">{t('registerPage.subtitle')}</p>
                        </div>
                        
                        <div className="mb-8">
                            <div className="flex items-center">
                                <div
                                    className={`flex-grow h-2 rounded-full ${step >= 1 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
                                <div className="w-4"></div>
                                <div
                                    className={`flex-grow h-2 rounded-full ${step >= 2 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
                            </div>
                            <div className="flex justify-between items-center mt-2 text-xs text-muted">
                                <span>{t('registerPage.progress.infos')}</span>
                                <span>{t('registerPage.progress.verif')}</span>
                            </div>
                        </div>
                        {
                            step === 1 && <SocialForm/>
                        }
                        {
                            step === 1 && (
                                <>
                                    <StepOne username={username}
                                             email={email}
                                             setUsername={setUsername}
                                             setEmail={setEmail}
                                             handleNextStep={handleNextStep}
                                    />
                                    <a
                                        href="/login/login"
                                        className="w-full py-4 mt-3 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors flex items-center justify-center gap-2"
                                    >
                                        <FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
                                        {t('registerPage.backToLogin')}
                                    </a>
                                </>
                            )
                        }
                        {
                            step === 2 && (
                                <StepTree email={email} prevStep={handlePrevStep}/>
                            )
                        }
                    </div>
                </div>
            </div>
        </main>
    );
}