<template>
    <div class="page">
        <div class="forgot-password-container">
            <h1>🔐 Забыли пароль?</h1>

            <form @submit.prevent="requestReset" class="forgot-form">
                <div class="form-group">
                    <label>Введите ваш email</label>
                    <input v-model="email" type="email" required placeholder="example@mail.ru" :disabled="loading"
                        autocomplete="username">
                </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: 'ForgotPassword',
    data() {
        return {
            email: '',
            loading: false,
            message: '',
            messageType: ''
        }
    },
    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
            }
        }
    }
}
</script>