<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 px-4">
    <div class="w-full max-w-md">
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <div class="text-center mb-6">
          <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-primary mb-4">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
          </div>
          <h2 class="text-xl font-bold text-slate-800">Passwort vergessen?</h2>
          <p class="text-slate-500 text-sm mt-1">Kein Problem. Geben Sie Ihre E-Mail ein.</p>
        </div>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">E-Mail</label>
            <input
              v-model="email"
              type="email"
              required
              placeholder="ihre@email.de"
              class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:ring-2 focus:ring-primary focus:border-primary outline-none"
            />
          </div>

          <div v-if="message" class="p-3 rounded-lg text-sm" :class="success ? 'bg-green-50 text-green-600' : 'bg-red-50 text-red-600'">
            {{ message }}
          </div>

          <button
            type="submit"
            :disabled="loading"
            class="w-full py-3 px-4 bg-primary text-white font-medium rounded-lg hover:bg-primary-600 disabled:opacity-50"
          >
            {{ loading ? 'Senden...' : 'Link senden' }}
          </button>
        </form>

        <p class="text-center text-sm text-slate-500 mt-6">
          Zurück zum <router-link to="/login" class="text-primary hover:underline">Login</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/api/client'

const email = ref('')
const loading = ref(false)
const message = ref('')
const success = ref(false)

async function handleSubmit() {
  loading.value = true
  message.value = ''
  try {
    await api.post('/auth/forgot-password', { email: email.value })
    success.value = true
    message.value = 'Wenn die E-Mail existiert, erhalten Sie einen Link zum Zurücksetzen.'
  } catch {
    success.value = true
    message.value = 'Wenn die E-Mail existiert, erhalten Sie einen Link zum Zurücksetzen.'
  } finally {
    loading.value = false
  }
}
</script>