<template>
  <div class="min-h-screen bg-coffee-50 flex items-center justify-center p-4">
    <div class="w-full max-w-sm">
      <div class="text-center mb-8">
        <div class="text-5xl mb-3">☕</div>
        <h1 class="text-2xl font-bold text-coffee-900">Coffee Map</h1>
        <p class="text-coffee-600 mt-1 text-sm">Track your Parisian coffee spots</p>
      </div>

      <form @submit.prevent="handleSubmit" class="bg-white rounded-2xl shadow-sm border border-coffee-100 p-6 space-y-4">
        <div>
          <label for="handle" class="block text-sm font-medium text-coffee-800 mb-1">
            Your ATProto handle or DID
          </label>
          <input
            id="handle"
            v-model="handle"
            type="text"
            placeholder="you.bsky.social or your.pds.domain"
            autocomplete="username"
            required
            class="w-full px-3 py-2 border border-coffee-200 rounded-lg text-coffee-900 placeholder-coffee-300 focus:outline-none focus:ring-2 focus:ring-coffee-400 focus:border-transparent"
          />
        </div>

        <p v-if="error" class="text-red-600 text-sm">{{ error }}</p>

        <button
          type="submit"
          :disabled="loading"
          class="w-full bg-coffee-700 hover:bg-coffee-800 disabled:opacity-60 text-white font-medium py-2.5 rounded-lg transition-colors"
        >
          {{ loading ? 'Redirecting…' : 'Sign in with ATProto' }}
        </button>
      </form>

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

<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()
const handle = ref('')
const loading = ref(false)
const error = ref('')

async function handleSubmit() {
  loading.value = true
  error.value = ''
  try {
    await auth.signIn(handle.value.trim())
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Sign in failed'
    loading.value = false
  }
}
</script>
