<template>
    <div class="page">
        <div class="verification-container">
            <div v-if="verifying" class="loading">
                <h2>🔐 Подтверждение email...</h2>
                <p>Пожалуйста, подождите</p>
            </div>

            <div v-else-if="success" class="success">
                <h2>✅ Email подтвержден!</h2>
                <p>Ваш email успешно подтвержден. Теперь вы можете пользоваться всеми функциями приложения.</p>
                <div class="actions">
                    <button @click="$router.push('/login')" class="btn btn-primary">
                        Войти в аккаунт
                    </button>
                    <button @click="$router.push('/')" class="btn btn-outline">
                        На главную
                    </button>
                </div>
            </div>

            <div v-else class="error">
                <h2>❌ Ошибка подтверждения</h2>
                <p>{{ errorMessage }}</p>
                <div class="actions">
                    <button @click="resendVerification" class="btn" :disabled="resending">
                        {{ resending ? 'Отправка...' : 'Отправить повторно' }}
                    </button>
                    <button @click="$router.push('/login')" class="btn btn-outline">
                        Войти в аккаунт
                    </button>
                    <button @click="$router.push('/')" class="btn btn-secondary">
                        На главную
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useAuthStore } from '../stores/auth'

export default {
    name: 'VerifyEmail',
    setup() {
        const authStore = useAuthStore()
        return { authStore }
    },
    data() {
        return {
            verifying: true,
            success: false,
            errorMessage: '',
            resending: false
        }
    },
    async mounted() {
        const token = this.$route.query.token
        if (!token) {
            this.verifying = false
            this.errorMessage = 'Отсутствует токен подтверждения'
            return
        }

        try {
            const response = await this.$http.get(`/v1/verify-email?token=${token}`)
            console.log("response verify " + response.data)
            this.success = true
        } catch (error) {
            console.error('Verification failed:', error)
            this.errorMessage = error.response?.data?.error || 'Неверный или просроченный токен'
        } finally {
            this.verifying = false
        }
    },
    methods: {
        async resendVerification() {
            this.resending = true
            try {
                // Этот endpoint требует авторизации, поэтому редиректим на логин
                this.$router.push('/login')
            } catch (error) {
                console.error('Resend verification error:', error)
            } finally {
                this.resending = false
            }
        }
    }
}
</script>

<style scoped>
.verification-container {
    max-width: 500px;
    margin: 2rem auto;
    text-align: center;
    padding: 2rem;
}

.loading,
.success,
.error {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #2e8b57;
    color: white;
}

.btn-primary:hover {
    background: #26734d;
}

.btn-outline {
    background: white;
    color: #2e8b57;
    border: 2px solid #2e8b57;
}

.btn-outline:hover {
    background: #2e8b57;
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>