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

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

const email = ref('')
const password = ref('')
const orgSlug = ref(authStore.orgSlug || '')
const error = ref('')
const loading = ref(false)
const isRegister = ref(false)
const firstName = ref('')
const lastName = ref('')
const phone = ref('')

async function handleSubmit() {
  error.value = ''
  loading.value = true

  try {
    if (isRegister.value) {
      await authStore.register({
        email: email.value,
        password: password.value,
        first_name: firstName.value,
        last_name: lastName.value,
        phone: phone.value,
        org_slug: orgSlug.value
      })
      // After registration, login
      await authStore.login(email.value, password.value, orgSlug.value)
    } else {
      await authStore.login(email.value, password.value, orgSlug.value)
    }
    
    const redirect = route.query.redirect as string || '/'
    router.push(redirect)
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Anmeldung fehlgeschlagen'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <!-- Logo -->
      <div class="text-center">
        <h1 class="text-4xl font-bold text-primary-600">🔐 SeCu</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Mitarbeiterverwaltung</p>
      </div>

      <!-- Form -->
      <div class="card">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
          {{ isRegister ? 'Registrieren' : 'Anmelden' }}
        </h2>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <!-- Organization -->
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Organisation
            </label>
            <input
              v-model="orgSlug"
              type="text"
              required
              class="input"
              placeholder="z.B. demo"
            />
          </div>

          <!-- Email -->
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              E-Mail
            </label>
            <input
              v-model="email"
              type="email"
              required
              class="input"
              placeholder="name@firma.de"
            />
          </div>

          <!-- Registration fields -->
          <template v-if="isRegister">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Vorname
                </label>
                <input
                  v-model="firstName"
                  type="text"
                  required
                  class="input"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Nachname
                </label>
                <input
                  v-model="lastName"
                  type="text"
                  required
                  class="input"
                />
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Telefon
              </label>
              <input
                v-model="phone"
                type="tel"
                class="input"
                placeholder="Optional"
              />
            </div>
          </template>

          <!-- Password -->
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Passwort
            </label>
            <input
              v-model="password"
              type="password"
              required
              class="input"
              :placeholder="isRegister ? 'Mindestens 8 Zeichen' : ''"
            />
          </div>

          <!-- Error -->
          <div v-if="error" class="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
            {{ error }}
          </div>

          <!-- Submit -->
          <button
            type="submit"
            :disabled="loading"
            class="btn btn-primary w-full"
          >
            {{ loading ? 'Bitte warten...' : (isRegister ? 'Registrieren' : 'Anmelden') }}
          </button>
        </form>

        <!-- Toggle register/login -->
        <div class="mt-4 text-center">
          <button
            type="button"
            class="text-sm text-primary-600 hover:text-primary-700"
            @click="isRegister = !isRegister"
          >
            {{ isRegister ? 'Bereits registriert? Anmelden' : 'Noch kein Konto? Registrieren' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
