<script setup>
useSeoMeta({ title: 'Log in — IDconvert' })

const auth = useAuthStore()
const router = useRouter()
const route = useRoute()

const mode = ref(route.query.mode === 'register' ? 'register' : 'login')
const email = ref('')
const password = ref('')
const name = ref('')
const isLogin = computed(() => mode.value === 'login')

async function handleSubmit() {
  if (isLogin.value) {
    await auth.login(email.value, password.value)
  } else {
    await auth.register(email.value, password.value, name.value)
  }
  if (!auth.error) router.push('/')
}
</script>

<template>
  <div class="min-h-[calc(100vh-60px)] bg-gray-100 flex items-center justify-center px-4 py-12">
    <div class="bg-white rounded-xl p-8 w-full max-w-sm shadow-sm border border-gray-200">
      <h1 class="text-xl font-bold text-gray-900 mb-6">{{ isLogin ? 'Log in' : 'Create account' }}</h1>

      <div v-if="auth.error" class="bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-3 py-2 mb-4">
        {{ auth.error }}
      </div>

      <form @submit.prevent="handleSubmit" class="space-y-4">
        <div v-if="!isLogin">
          <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
          <input v-model="name" type="text" required
            class="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-[#1a56db]" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input v-model="email" type="email" required placeholder="you@example.com"
            class="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-[#1a56db]" />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input v-model="password" type="password" required placeholder="••••••••"
            class="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-[#1a56db]" />
        </div>
        <BaseButton type="submit" variant="primary" full-width :loading="auth.status === 'loading'">
          {{ isLogin ? 'Log in' : 'Create account' }}
        </BaseButton>
      </form>

      <p class="text-sm text-gray-500 text-center mt-4">
        <template v-if="isLogin">
          No account? <button @click="mode = 'register'" class="text-[#1a56db] hover:underline">Sign up</button>
        </template>
        <template v-else>
          Already have an account? <button @click="mode = 'login'" class="text-[#1a56db] hover:underline">Log in</button>
        </template>
      </p>

      <!-- Dev shortcuts -->
      <div class="mt-6 pt-4 border-t border-gray-100">
        <p class="text-xs text-gray-400 mb-2">Dev shortcuts:</p>
        <div class="flex flex-wrap gap-2">
          <button @click="auth.login('maya@studio.com','pass').then(()=>{ if(!auth.error) router.push('/') })"
            class="text-xs bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded transition-colors">Maya (4 credits)</button>
          <button @click="auth.login('richard@firmname.com','pass').then(()=>{ if(!auth.error) router.push('/') })"
            class="text-xs bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded transition-colors">Richard (0 credits)</button>
          <button @click="auth.login('new@user.com','pass').then(()=>{ if(!auth.error) router.push('/') })"
            class="text-xs bg-gray-100 hover:bg-gray-200 px-2.5 py-1 rounded transition-colors">New user</button>
        </div>
      </div>
    </div>
  </div>
</template>
