---
interface Props {
    session?: any;
    status?: 'authenticated' | 'unauthenticated' | 'loading';
    size?: 'sm' | 'md';
    variant?: 'primary' | 'danger' | 'ghost' | 'outline';
    hideText?: boolean;
    class?: string;
}

// Деструктуризация пропсов с дефолтными значениями
const {
    session: propSession,
    status: propStatus,
    size = 'md',
    variant = 'primary',
    hideText = false,
    class: className = ''
} = Astro.props;
const user = Astro.locals.user;
const session = propSession !== undefined ? propSession : (user ? { user } : null);
const status = propStatus !== undefined ? propStatus : (user ? 'authenticated' : 'unauthenticated');

// Конфигурация стилей
const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base'
};

const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 border border-transparent shadow-sm',
    danger: 'bg-red-600 text-white hover:bg-red-700 border border-transparent shadow-sm',
    ghost: 'bg-transparent text-gray-700 hover:text-gray-900',
    outline: 'bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50'
};

const baseClasses = `inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 cursor-pointer ${sizeClasses[size]} ${variantClasses[variant]} ${className}`;
---

{status === 'authenticated' ? (
    // === КНОПКА ВЫХОДА (LOGOUT) ===
    <button
        type="button"
        class={`logout-button ${baseClasses}`}
        aria-label="Abmelden"
        title="Abmelden"
>
    {/* Иконка Logout */}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
        <polyline points="16 17 21 12 16 7"></polyline>
        <line x1="21" y1="12" x2="9" y2="12"></line>
    </svg>
    {!hideText && <span>Abmelden</span>}
</button>
    ) : (
    // === КНОПКА ВХОДА (LOGIN) ===
    <a
        href="/auth/login"
        class={baseClasses}
        aria-label="Anmelden"
        title="Anmelden"
>
    {/* Иконка Login */}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/>
    </svg>
    {!hideText && <span>Anmelden</span>}
</a>
    )}

<script>
    function setupLogoutButtons() {
        // Ищем все кнопки выхода
        const buttons = document.querySelectorAll('.logout-button');

        buttons.forEach((btn) => {
            // Клонируем кнопку, чтобы удалить старые обработчики событий (защита от дублирования)
            const newBtn = btn.cloneNode(true) as HTMLButtonElement;
            btn.parentNode?.replaceChild(newBtn, btn);

            newBtn.addEventListener('click', async (e) => {
                e.preventDefault();

                // Сохраняем исходный контент
                const originalHTML = newBtn.innerHTML;

                // Блокируем кнопку и показываем спиннер
                newBtn.disabled = true;
                newBtn.innerHTML = `
                    <svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    ${!newBtn.innerText.includes('Abmelden') ? '' : '<span class="ml-2">Lädt...</span>'}
                `;

                try {
                    const response = await fetch('/api/auth/sign-out', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' }
                    });

                    if (response.ok) {
                        // Успех: перезагружаем страницу
                        window.location.href = window.location.href;
                    } else {
                        throw new Error('Logout failed');
                    }
                } catch (error) {
                    console.error('Logout error:', error);
                    alert('Fehler beim Abmelden.');

                    // Восстанавливаем кнопку при ошибке
                    newBtn.innerHTML = originalHTML;
                    newBtn.disabled = false;
                }
            });
        });
    }

    // Инициализация при загрузке
    document.addEventListener('DOMContentLoaded', setupLogoutButtons);

    // Поддержка Astro View Transitions (если используются)
    document.addEventListener('astro:page-load', setupLogoutButtons);
</script>