'use client'
import {useContext, useState} from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faEnvelope, faKey, faLock, faArrowLeft} from '@fortawesome/free-solid-svg-icons';
import System from "@/lib/models/System";
import {QueryDataResponse} from "@/shared/interface";
import {AlertContext} from "@/context/AlertContext";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";

export default function ForgetPasswordPage() {
    const [step, setStep] = useState(1);
    const [email, setEmail] = useState('');
    const [verificationCode, setVerificationCode] = useState('');
    const [isConfirmed, setIsConfirmed] = useState(false);
    const [newPassword, setNewPassword] = useState<string>('');
    const {errorMessage, successMessage} = useContext(AlertContext);
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext)

    function handleNextStep(): void {
        setStep(step + 1);
    }

    function handlePrevStep(): void {
        setStep(step - 1);
    }
    
    async function handleConfirm() {
        try {
            const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/verify-code', {
                verifyCode: verificationCode,
                email,
            }, lang);
            if (response.valid) {
                successMessage(response.message ?? '');
                setIsConfirmed(true);
            } else {
                errorMessage(response.message ?? '');
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(t('resetPassword.error.codeServer'));
            } else {
                errorMessage(t('resetPassword.error.codeUnknown'));
            }
        }
    }
    
    async function handleEmailCheck(): Promise<void> {
        if (email == null || email == "") {
            errorMessage(t('resetPassword.error.emailInvalid'));
            return;
        }
        
        const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        if (!emailRegEx.test(email)) {
            errorMessage(t('resetPassword.error.emailFormat'));
            return;
        }
        
        try {
            const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/email-check', {
                email: email
            }, lang);
            if (response.valid) {
                successMessage(response.message ?? '');
                handleNextStep();
            } else {
                errorMessage(response.message ?? '');
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(t('resetPassword.error.emailServer'));
            } else {
                errorMessage(t('resetPassword.error.emailUnknown'));
            }
        }
    }
    
    async function handleNewPassword(): Promise<void> {
        try {
            const response: QueryDataResponse<null> = await System.postToServer('password/reset', {
                email: email,
                newPassword: newPassword,
                code: verificationCode
            }, lang);
            if (response.valid) {
                successMessage(response.message ?? '');
                handleNextStep();
            } else {
                errorMessage(response.message ?? '');
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(t('resetPassword.error.passwordServer'));
            } else {
                errorMessage(t('resetPassword.error.passwordUnknown'));
            }
        }
    }
    
    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('resetPassword.title')}</h1>
                            <p className="text-muted">{t('resetPassword.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 className="w-4"></div>
                                <div
                                    className={`flex-grow h-2 rounded-full ${step >= 3 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
                            </div>
                            <div className="flex justify-between mt-2 text-xs text-muted">
                                <span>{t('resetPassword.progress.email')}</span>
                                <span>{t('resetPassword.progress.verification')}</span>
                                <span>{t('resetPassword.progress.final')}</span>
                            </div>
                        </div>
                        
                        {step === 1 && (
                            <form className="space-y-4">
                                <div className="mb-5">
                                    <label htmlFor="email" className="block text-sm font-medium mb-1 text-muted">
                                        {t('resetPassword.fields.email.label')}
                                    </label>
                                    <div className="relative">
                                        <FontAwesomeIcon icon={faEnvelope}
                                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
                                        <input
                                            type="email"
                                            id="email"
                                            placeholder={t('resetPassword.fields.email.placeholder')}
                                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
                                            value={email}
                                            onChange={(e) => setEmail(e.target.value)}
                                            required
                                        />
                                    </div>
                                </div>

                                <div className="flex flex-col space-y-3">
                                    <button
                                        type="button"
                                        onClick={handleEmailCheck}
                                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
                                    >
                                        {t('resetPassword.verify')}
                                    </button>

                                    <a
                                        href="/login/login"
                                        className="w-full py-4 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('resetPassword.backToLogin')}
                                    </a>
                                </div>
                            </form>
                        )}
                        
                        {step === 2 && (
                            <form className="space-y-4">
                                <div className="mb-5">
                                    <label htmlFor="verificationCode"
                                           className="block text-sm font-medium mb-1 text-muted">
                                        {t('resetPassword.fields.code.label')}
                                    </label>
                                    <div className="relative">
                                        <FontAwesomeIcon icon={faKey}
                                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
                                        <input
                                            type="text"
                                            id="verificationCode"
                                            placeholder={t('resetPassword.fields.code.placeholder')}
                                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
                                            value={verificationCode}
                                            onChange={(e) => setVerificationCode(e.target.value)}
                                            disabled={isConfirmed}
                                            required
                                        />
                                    </div>
                                </div>
                                
                                {isConfirmed && (
                                    <div className="mb-5">
                                        <label htmlFor="newPassword"
                                               className="block text-sm font-medium mb-1 text-muted">
                                            {t('resetPassword.fields.newPassword.label')}
                                        </label>
                                        <div className="relative">
                                            <FontAwesomeIcon icon={faLock}
                                                             className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
                                            <input
                                                type="password"
                                                id="newPassword"
                                                placeholder={t('resetPassword.fields.newPassword.placeholder')}
                                                className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
                                                value={newPassword}
                                                onChange={(e) => setNewPassword(e.target.value)}
                                                required
                                            />
                                        </div>
                                    </div>
                                )}
                                
                                <div className="flex flex-col space-y-3 mt-6">
                                    <button
                                        type="button"
                                        onClick={isConfirmed ? handleNewPassword : handleConfirm}
                                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
                                    >
                                        {isConfirmed ? t('resetPassword.changePassword') : t('resetPassword.confirm')}
                                    </button>
                                    
                                    <button
                                        type="button"
                                        onClick={handlePrevStep}
                                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
                                    >
                                        {t('resetPassword.back')}
                                    </button>
                                </div>
                            </form>
                        )}
                        
                        {step === 3 && (
                            <div className="space-y-6">
                                <div className="p-4 bg-success/20 border border-success rounded-xl">
                                    <p className="text-center text-text">
                                        {t('resetPassword.success')}
                                    </p>
                                </div>
                                <div className="mt-6">
                                    <a href="/login/login" className="block w-full">
                                        <button
                                            type="button"
                                            className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
                                        >
                                            {t('resetPassword.goToLogin')}
                                        </button>
                                    </a>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </main>
    )
}