<template>
    <div class="page">
        <div class="password-reset-container">
            <h1>🔐 Восстановление пароля</h1>

            <!-- Форма запроса сброса -->
            <form v-if="!showResetForm" @submit.prevent="requestReset" class="reset-form">
                <div class="form-group">
                    <label>Email</label>
                    <input v-model="email" type="email" required placeholder="Введите ваш email" :disabled="loading">
                </div>

                <button type="submit" class="btn btn-primary" :disabled="loading">
                    {{ loading ? 'Отправка...' : 'Восстановить пароль' }}
                </button>
            </form>

            <!-- Форма сброса пароля -->
            <form v-else @submit.prevent="confirmReset" class="reset-form">
                <div class="form-group">
                    <label>Новый пароль</label>
                    <input v-model="newPassword" type="password" required minlength="6"
                        placeholder="Введите новый пароль" :disabled="loading">
                </div>

                <div class="form-group">
                    <label>Подтвердите пароль</label>
                    <input v-model="confirmPassword" type="password" required placeholder="Повторите новый пароль"
                        :disabled="loading">
                </div>

                <button type="submit" class="btn btn-primary" :disabled="loading">
                    {{ loading ? 'Обновление...' : 'Обновить пароль' }}
                </button>
            </form>

            <div v-if="message" class="message" :class="messageType">
                {{ message }}
            </div>

            <div class="links">
                <router-link to="/login" class="link">← Вернуться к входу</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PasswordReset',
    data() {
        return {
            email: '',
            newPassword: '',
            confirmPassword: '',
            loading: false,
            showResetForm: false,
            token: '',
            message: '',
            messageType: '' // 'success' или 'error'
        }
    },
    mounted() {
        // Проверяем токен в URL
        const token = this.$route.query.token
        if (token) {
            this.token = token
            this.showResetForm = true
        }
    },
    methods: {
        async requestReset() {
            this.loading = true
            this.message = ''

            try {
                await this.$http.post('/v1/auth/password-reset/request', {
                    email: this.email
                })
                this.message = 'Инструкции по восстановлению пароля отправлены на ваш email'
                this.messageType = 'success'
            } catch (error) {
                this.message = error.response?.data?.error || 'Ошибка при запросе восстановления'
                this.messageType = 'error'
            } finally {
                this.loading = false
            }
        },

        async confirmReset() {
            if (this.newPassword !== this.confirmPassword) {
                this.message = 'Пароли не совпадают'
                this.messageType = 'error'
                return
            }

            if (this.newPassword.length < 6) {
                this.message = 'Пароль должен содержать минимум 6 символов'
                this.messageType = 'error'
                return
            }

            this.loading = true
            this.message = ''

            try {
                await this.$http.post('/v1/auth/password-reset/confirm', {
                    token: this.token,
                    password: this.newPassword
                })

                this.message = 'Пароль успешно изменен! Теперь вы можете войти в систему.'
                this.messageType = 'success'

                // Редирект на логин через 3 секунды
                setTimeout(() => {
                    this.$router.push('/login')
                }, 3000)

            } catch (error) {
                this.message = error.response?.data?.error || 'Неверный или просроченный токен'
                this.messageType = 'error'
            } finally {
                this.loading = false
            }
        }
    }
}
</script>

<style scoped>
.password-reset-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.reset-form {
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: #2e8b57;
}

.form-group input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.btn-primary {
    width: 100%;
    background: #2e8b57;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

.btn-primary:hover:not(:disabled) {
    background: #26734d;
}

.btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.message {
    padding: 12px;
    border-radius: 6px;
    margin: 1rem 0;
    text-align: center;
}

.message.success {
    background: #efe;
    color: #2e8b57;
    border: 1px solid #2e8b57;
}

.message.error {
    background: #fee;
    color: #c33;
    border: 1px solid #c33;
}

.links {
    text-align: center;
}

.link {
    color: #2e8b57;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}
</style>