<template>
  <q-page padding class="flex flex-center">
    <q-card style="width: 350px">
      <q-card-section>
        <div class="text-h6">Login</div>
      </q-card-section>
      
      <q-card-section>
        <q-form @submit.prevent="onSubmit" class="q-gutter-md">
          <q-input
            v-model="email"
            type="email"
            label="Email"
            filled
            :rules="[val => !!val || 'Email is required']"
          />
          
          <q-input
            v-model="password"
            type="password"
            label="Password"
            filled
            :rules="[val => !!val || 'Password is required']"
          />
          
          <div class="q-mt-md">
            <q-btn label="Login" type="submit" color="primary" class="full-width"/>
          </div>
          
          <div class="text-center q-mt-sm">
            <router-link to="/password-reset" class="text-primary">Forgot your password?</router-link>
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'LoginPage',
  setup() {
    const email = ref('')
    const password = ref('')
    
    const onSubmit = () => {
      console.log('Login attempt with:', email.value, password.value)
      
      // Save login status
      localStorage.setItem('isLoggedIn', 'true')
      window.dispatchEvent(new Event('storage'))
      
      console.log('Redirecting to wave page...')
      
      // Direct navigation
      window.location.href = '/#/wave'
    }
    
    return {
      email,
      password,
      onSubmit
    }
  }
}
</script>