<script setup lang="ts">
import { useAuthStore } from '~/stores/auth';

definePageMeta({ layout: false });

const auth = useAuthStore();
const email = ref('');
const password = ref('');
const error = ref('');

async function submit() {
  error.value = '';
  try {
    await auth.login({ email: email.value, password: password.value });
    await navigateTo('/dashboard');
  } catch {
    error.value = 'Invalid credentials.';
  }
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <form class="w-full max-w-sm space-y-4" @submit.prevent="submit">
      <h1 class="text-2xl font-bold text-center">CrowMate Intranet</h1>
      <p v-if="error" class="text-red-500 text-sm text-center">{{ error }}</p>
      <input
        v-model="email"
        type="email"
        placeholder="Email"
        required
        class="w-full border rounded px-3 py-2 text-sm"
      />
      <input
        v-model="password"
        type="password"
        placeholder="Password"
        required
        class="w-full border rounded px-3 py-2 text-sm"
      />
      <button type="submit" class="w-full bg-black text-white rounded py-2 text-sm font-medium">
        Sign in
      </button>
    </form>
  </div>
</template>
