<template>
  <q-page padding class="flex flex-center">
    <q-card style="width: 350px">
      <q-card-section>
        <div class="text-h6">Password Reset</div>
      </q-card-section>
      
      <q-card-section>
        <p class="text-body2 q-mb-md">
          Enter your email address and we'll send you a link to reset your password.
        </p>
        
        <q-form @submit="onSubmit" class="q-gutter-md">
          <q-input
            v-model="email"
            type="email"
            label="Email"
            filled
            :rules="[val => !!val || 'Email is required']"
          />
          
          <div class="q-mt-md">
            <q-btn 
              label="Send Reset Link" 
              type="submit" 
              color="primary" 
              class="full-width"
              :loading="loading"
            />
          </div>
          
          <div class="text-center q-mt-sm">
            <router-link to="/login" class="text-primary">Back to login</router-link>
          </div>
        </q-form>
      </q-card-section>
      
      <q-dialog v-model="successDialog">
        <q-card>
          <q-card-section>
            <div class="text-h6">Email Sent</div>
          </q-card-section>
          
          <q-card-section>
            <p>If an account exists with that email, we've sent instructions to reset your password.</p>
          </q-card-section>
          
          <q-card-actions align="right">
            <q-btn flat label="Close" color="primary" v-close-popup @click="goToLogin" />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-card>
  </q-page>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'PasswordResetPage',
  setup() {
    const router = useRouter()
    const email = ref('')
    const loading = ref(false)
    const successDialog = ref(false)
    
    const onSubmit = () => {
      loading.value = true
      
      // Here you would call your API to request password reset
      console.log('Password reset requested for:', email.value)
      
      // Simulate API call
      setTimeout(() => {
        loading.value = false
        successDialog.value = true
      }, 1500)
    }
    
    const goToLogin = () => {
      router.push('/login')
    }
    
    return {
      email,
      loading,
      onSubmit,
      successDialog,
      goToLogin
    }
  }
}
</script>