#176 - Save & Display Last Used Auth Method v0.1

<style>
.ms-popup-badge { /* CHANGE THE STYLE OF THE BADGE*/
    position: absolute;
    background: #2d62ff;
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
}

.ms-popup-badge::before {
    font-size: 14px;
    font-weight: bold;
}

.ms-popup-badge .ms-popup-text {
    font-size: 12px;
    font-weight: 600;
}

/* Animation keyframes */
@keyframes ms-badge-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ms-badge-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ms-popup-badge {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .ms-popup-badge .ms-popup-text {
        font-size: 11px;
    }
}
</style>

<!-- 💙 MEMBERSCRIPT #176 v0.1 💙 - SAVE AND DISPLAY LAST AUTH METHOD -->

<script>
(function() {
    'use strict';
    
    const STORAGE_KEY = 'ms_last_auth_method';
    
    // Auth method display names
    const AUTH_METHOD_NAMES = {
        'email': 'Email & Password',
        'google': 'Google',
        'facebook': 'Facebook',
        'github': 'GitHub',
        'linkedin': 'LinkedIn',
        'twitter': 'Twitter',
        'apple': 'Apple',
        'microsoft': 'Microsoft',
        'discord': 'Discord',
        'spotify': 'Spotify',
        'dribbble': 'Dribbble'
    };
    
    function getAuthMethodDisplayName(method) {
        return AUTH_METHOD_NAMES[method] || method.charAt(0).toUpperCase() + method.slice(1);
    }

    function saveAuthMethod(method) {
        if (method) localStorage.setItem(STORAGE_KEY, method);
    }

    function getLastAuthMethod() {
        return localStorage.getItem(STORAGE_KEY);
    }

    function showPopupTag(method) {
        if (!method) return;

        document.querySelectorAll('.ms-popup-badge').forEach(badge => badge.remove());

        let targetElement;
        if (method === 'email') {
            targetElement = document.querySelector('[data-ms-member="email"]') || 
                             document.querySelector('input[type="email"]') ||
                             document.querySelector('input[name="email"]');
        } else {
            targetElement = document.querySelector(`[data-ms-auth-provider="${method}"]`);
        }
        
        if (!targetElement) {
            console.log('Memberstack: Target element not found for method:', method);
            return;
        }

        const authMethodName = getAuthMethodDisplayName(method);
        const badge = document.createElement('div');
        badge.className = 'ms-popup-badge';
        badge.innerHTML = `<span class="ms-popup-text">Last Auth Method Used: ${authMethodName}</span>`;

        const elementRect = targetElement.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

        document.body.appendChild(badge);

        badge.style.position = 'absolute';
        badge.style.top = (elementRect.top + scrollTop - 40) + 'px';
        badge.style.left = (elementRect.right + scrollLeft - 200) + 'px';

        badge.style.opacity = '0';
        badge.style.transform = 'translateY(10px) scale(0.9)';
        
        requestAnimationFrame(() => {
            badge.style.transition = 'all 0.3s ease-out';
            badge.style.opacity = '1';
            badge.style.transform = 'translateY(0) scale(1)';
        });

        setTimeout(() => {
            badge.style.transition = 'all 0.3s ease-in';
            badge.style.opacity = '0';
            badge.style.transform = 'translateY(-10px) scale(0.9)';
            setTimeout(() => {
                if (badge.parentNode) {
                    badge.parentNode.removeChild(badge);
                }
            }, 300);
        }, 8000);
    }

    function handleEmailPasswordLogin() {
        const emailForm = document.querySelector('[data-ms-form="login"]');
        if (emailForm) {
            emailForm.addEventListener('submit', () => {
                setTimeout(() => saveAuthMethod('email'), 100);
            });
        }
    }

    function handleSocialAuthClicks() {
        document.querySelectorAll('[data-ms-auth-provider]').forEach(button => {
            button.addEventListener('click', function() {
                const provider = this.getAttribute('data-ms-auth-provider');
                if (provider) saveAuthMethod(provider);
            });
        });

        document.addEventListener('ms:auth:start', e => {
            const provider = e.detail?.provider || e.detail?.authMethod;
            if (provider) saveAuthMethod(provider);
        });
    }

    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
            return;
        }

        handleEmailPasswordLogin();
        handleSocialAuthClicks();

        const lastMethod = getLastAuthMethod();
        if (lastMethod) showPopupTag(lastMethod);

        document.addEventListener('ms:auth:success', e => {
            const method = e.detail?.method || e.detail?.provider || 'email';
            saveAuthMethod(method);
            showPopupTag(method);
        });
    }

    init();
})();
</script>