<template>
  <div class="flex items-center justify-center px-4">
    <form
      class="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-zinc-800 bg-zinc-900/60 p-6"
      @submit.prevent="onSubmit"
    >
      <div class="flex items-center justify-between">
        <h1 class="text-lg font-semibold text-zinc-100">{{ t('common.appName') }}</h1>
        <LanguageSwitcher />
      </div>
      <p class="text-sm text-zinc-400">{{ t('login.title') }}</p>
      <label class="flex flex-col gap-1 text-xs text-zinc-400">
        {{ t('login.tokenLabel') }}
        <input
          v-model="token"
          type="password"
          class="input font-mono"
          :placeholder="t('login.tokenPlaceholder')"
          autocomplete="current-password"
          autofocus
          required
        />
      </label>
      <p v-if="error" class="text-sm text-red-400">{{ error }}</p>
      <button type="submit" class="btn-primary" :disabled="submitting || token.trim() === ''">
        {{ submitting ? t('login.submitting') : t('login.submit') }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
import { ApiError } from '../lib/api';
import LanguageSwitcher from '../components/LanguageSwitcher.vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const auth = useAuthStore();

const token = ref('');
const error = ref<string | null>(null);
const submitting = ref(false);

async function onSubmit(): Promise<void> {
  submitting.value = true;
  error.value = null;
  try {
    await auth.login(token.value.trim());
    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/';
    await router.replace(redirect);
  } catch (err) {
    if (err instanceof ApiError && err.status === 401) error.value = t('login.invalidToken');
    else if (err instanceof ApiError && err.status === 429) error.value = t('login.rateLimited');
    else error.value = t('login.genericError', { status: err instanceof ApiError ? err.status : '?' });
  } finally {
    submitting.value = false;
  }
}
</script>
