<template>
  <div class="min-h-screen flex items-center justify-center bg-neutral-light">
    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-md border border-neutral-light">
      <div>
        <h2 class="mt-6 text-center text-3xl font-bold text-neutral-dark">
          {{ $t('app.title') }}
        </h2>
        <p class="mt-2 text-center text-sm text-neutral">
          {{ $t('auth.loginSubtitle') }}
        </p>
      </div>
      <form class="mt-8 space-y-6" @submit.prevent="login">
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        <div class="rounded-md -space-y-px">
          <div class="mb-4">
            <label for="email" class="form-label">{{ $t('auth.email') }}</label>
            <input id="email" name="email" type="email" autocomplete="email" required 
                   class="form-input" 
                   v-model="form.email" />
          </div>
          <div class="mb-4">
            <label for="password" class="form-label">{{ $t('auth.password') }}</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required 
                   class="form-input" 
                   v-model="form.password" />
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" 
                   class="h-4 w-4 text-primary border-neutral rounded focus:ring-primary-200" 
                   v-model="form.remember">
            <label for="remember-me" class="ml-2 block text-sm text-neutral-dark">
              {{ $t('auth.rememberMe') }}
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-primary hover:text-primary-600 transition-colors duration-200">
              {{ $t('auth.forgotPassword') }}
            </a>
          </div>
        </div>

        <div>
          <button type="submit" 
                  class="btn-primary w-full flex justify-center"
                  :disabled="loading">
            <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {{ loading ? $t('auth.loggingIn') : $t('auth.login') }}
          </button>
        </div>
      </form>
      <div class="text-center mt-4">
        <p class="text-sm text-neutral">
          {{ $t('auth.noAccount') }}
          <router-link to="/register" class="font-medium text-primary hover:text-primary-600 transition-colors duration-200">
            {{ $t('auth.register') }}
          </router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';

export default {
  name: 'Login',
  setup() {
    const router = useRouter();
    const authStore = useAuthStore();
    const { t } = useI18n();
    
    const form = ref({
      email: '',
      password: '',
      remember: false
    });
    
    const loading = ref(false);
    const error = ref('');
    
    const login = async () => {
      loading.value = true;
      error.value = '';
      
      try {
        // In a real app, this would be an API call
        // const response = await axios.post('/api/login', form.value);
        
        // For demo purposes, we'll simulate a successful login
        // with a mock token and user
        if (form.value.email === 'demo@asmrplanner.com' && form.value.password === 'password') {
          const token = 'mock-jwt-token';
          const user = {
            id: 1,
            name: 'ASMR Creator',
            email: form.value.email
          };
          
          // Store the token and user in the auth store
          authStore.setToken(token);
          authStore.setUser(user);
          
          // Redirect to dashboard
          router.push('/');
        } else {
          error.value = 'Invalid email or password. Try demo@asmrplanner.com / password';
        }
      } catch (err) {
        error.value = err.response?.data?.message || 'An error occurred during login';
      } finally {
        loading.value = false;
      }
    };
    
    return {
      form,
      loading,
      error,
      login
    };
  }
};
</script> 