<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { login } from "../auth";
import { t } from "../i18n";
import Logo from "../components/Logo.vue";

const router = useRouter();
const route = useRoute();
const email = ref("");
const password = ref("");
const error = ref("");
const loading = ref(false);
const showPassword = ref(false);

async function submit() {
  loading.value = true;
  error.value = "";
  try {
    await login(email.value.trim(), password.value);
    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/";
    router.replace(redirect);
  } catch (e) {
    error.value = e.message || t("login.failed");
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="grid min-h-screen place-items-center bg-page px-4">
    <div class="w-full max-w-sm">
      <div class="mb-7 text-center">
        <Logo class="mx-auto mb-4 h-10 w-auto" />
        <h1 class="text-2xl font-bold tracking-[-0.02em] text-strong">{{ t("login.title") }}</h1>
        <p class="mt-1 text-sm text-muted">{{ t("login.tagline") }}</p>
      </div>

      <form class="dh-card space-y-4 p-6" @submit.prevent="submit">
        <p v-if="error" class="rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
        <div>
          <label class="dh-label">{{ t("login.email") }}</label>
          <input v-model="email" type="email" required autocomplete="username" class="dh-input" placeholder="you@example.com" />
        </div>
        <div>
          <label class="dh-label">{{ t("login.password") }}</label>
          <div class="relative">
            <input v-model="password" :type="showPassword ? 'text' : 'password'" required autocomplete="current-password"
              class="dh-input pr-10" placeholder="••••••••" />
            <button type="button" @click="showPassword = !showPassword"
              :aria-label="showPassword ? t('login.hidePassword') : t('login.showPassword')"
              class="absolute inset-y-0 right-0 flex items-center px-3 text-muted transition-colors hover:text-strong">
              <svg v-if="showPassword" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
              </svg>
            </button>
          </div>
        </div>
        <button type="submit" :disabled="loading" class="dh-btn dh-btn-primary w-full">
          {{ loading ? t("login.submitting") : t("login.submit") }}
        </button>

      </form>
    </div>
  </div>
</template>
