import React from 'react';
import { useNavigate } from 'react-router-dom';

export const RegistrationSuccess: React.FC = () => {
    const navigate = useNavigate();

    React.useEffect(() => {
        // Clear session data to lock /cadastro again
        sessionStorage.removeItem('accessCodeValidated');
        sessionStorage.removeItem('accessCodeData');
        sessionStorage.removeItem('professionalAccessValidated');
        sessionStorage.removeItem('professionalAccessData');
    }, []);

    return (
        <div className="min-h-screen flex items-center justify-center bg-white">
            <div className="text-center fade-in max-w-md px-4">
                <div className="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg
                        className="w-8 h-8 text-white"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                </div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                    Cadastro Pendente de Aprovação
                </h2>
                <p className="text-gray-600 mb-4">
                    Seu cadastro foi realizado com sucesso e está aguardando aprovação
                    da empresa.
                </p>
                <p className="text-gray-600 mb-6">
                    Você receberá um e-mail assim que seu cadastro for aprovado e poderá
                    acessar o sistema.
                </p>
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                    <p className="text-sm text-yellow-800">
                        <strong>Atenção:</strong> Enquanto seu cadastro não for aprovado,
                        você não terá acesso ao sistema.
                    </p>
                </div>
                <button
                    onClick={() => {
                        window.location.href = "/";
                    }}
                    className="w-full px-6 py-2 text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors"
                    style={{ backgroundColor: "#B9CF33" }}
                >
                    OK
                </button>
            </div>
        </div>
    );
};