import React, {useContext, useState} from "react";
import Link from "next/link";
import System from "@/lib/models/System";
import {AlertContext} from "@/context/AlertContext";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faKey} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";

export default function StepTree(
    {
        email,
        prevStep
    }: {
        email: string;
        prevStep: Function;
    }) {
    
    const {errorMessage, successMessage} = useContext(AlertContext);

    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
    const [verifyCode, setVerifyCode] = useState<string>('');
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext)
    
    async function handleVerifyCode(): Promise<void> {
        if (verifyCode === '') {
            errorMessage(t('registerStepTwo.error.codeIncorrect'));
            return;
        }
        try {
            const response: boolean = await System.postToServer<boolean>('register/verify-code', {
                verifyCode,
                email,
            }, lang);
            if (!response) {
                errorMessage(t('registerStepTwo.error.codeIncorrect'));
                return;
            }
            setIsConfirmed(true);
            successMessage(t('registerStepTwo.success.verified'));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('registerStepTwo.error.unknown'));
            }
        }
    }
    
    return (
        !isConfirmed ? (
            <div className="space-y-6">
                <div className="text-center mb-6">
                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
                </div>
                
                <div className="mb-4">
                    <label htmlFor="verifyCode" className="block text-sm font-medium mb-1 text-muted">
                        {t('registerStepTwo.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="verifyCode"
                            placeholder={t('registerStepTwo.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={verifyCode}
                            onChange={(e) => setVerifyCode(e.target.value)}
                            required
                        />
                    </div>
                </div>
                
                <div className="flex flex-col space-y-3 mt-6">
                    <button
                        type="button"
                        onClick={() => handleVerifyCode()}
                        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('registerStepTwo.verify')}
                    </button>
                    
                    <button
                        type="button"
                        onClick={() => prevStep()}
                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
                    >
                        {t('registerStepTwo.back')}
                    </button>
                </div>
            </div>
        ) : (
            <div className="space-y-6">
                <div className="p-4 bg-success/20 border border-success rounded-xl">
                    <p className="text-center text-text">{t('registerStepTwo.confirmed')}</p>
                </div>
                <div className="mt-6">
                    <Link href="/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('registerStepTwo.start')}
                        </button>
                    </Link>
                </div>
            </div>
        )
    )
}