<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Mein Profil
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-100">
        <!-- Loading State -->
        <div
          v-if="isLoading"
          class="flex items-center justify-center py-12"
        >
          <Loader2
            :size="40"
            class="animate-spin text-primary-600"
          />
        </div>

        <!-- Profile Form -->
        <form
          v-else
          class="space-y-6"
          @submit.prevent="handleSave"
        >
          <!-- Name -->
          <div>
            <label
              for="name"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Name
            </label>
            <input
              id="name"
              v-model="formData.name"
              type="text"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              :disabled="isSaving"
            >
          </div>

          <!-- E-Mail -->
          <div>
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              E-Mail-Adresse
            </label>
            <input
              id="email"
              v-model="formData.email"
              type="email"
              required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              :disabled="isSaving"
            >
          </div>

          <!-- Telefon -->
          <div>
            <label
              for="phone"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Telefonnummer
            </label>
            <input
              id="phone"
              v-model="formData.phone"
              type="tel"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              :disabled="isSaving"
            >
          </div>

          <div>
            <label
              for="geburtsdatum"
              class="block text-sm font-medium text-gray-700 mb-2"
            >
              Geburtsdatum
            </label>
            <input
              id="geburtsdatum"
              v-model="formData.geburtsdatum"
              type="date"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              :disabled="isSaving"
            >
            <p class="mt-1 text-xs text-gray-500">
              Sichtbar ist in der Mitgliederliste nur der Geburtstag, wenn Sie ihn unten freigeben.
            </p>
          </div>

          <!-- Sichtbarkeits-Einstellungen -->
          <div class="mt-4 border-t border-gray-100 pt-4">
            <h3 class="text-sm font-medium text-gray-900 mb-2">
              Sichtbarkeit für andere Mitglieder
            </h3>
            <div class="flex flex-col gap-2 text-sm text-gray-700">
              <label class="inline-flex items-center">
                <input
                  v-model="visibility.showEmail"
                  type="checkbox"
                  class="mr-2"
                  :disabled="isSaving"
                >
                E-Mail für alle eingeloggten Mitglieder sichtbar
              </label>
              <label class="inline-flex items-center">
                <input
                  v-model="visibility.showPhone"
                  type="checkbox"
                  class="mr-2"
                  :disabled="isSaving"
                >
                Telefonnummer für alle eingeloggten Mitglieder sichtbar
              </label>
              <label class="inline-flex items-center">
                <input
                  v-model="visibility.showAddress"
                  type="checkbox"
                  class="mr-2"
                  :disabled="isSaving"
                >
                Adresse für alle eingeloggten Mitglieder sichtbar
              </label>
              <label class="inline-flex items-center">
                <input
                  v-model="visibility.showBirthday"
                  type="checkbox"
                  class="mr-2"
                  :disabled="isSaving"
                >
                Geburtstag für alle eingeloggten Mitglieder sichtbar
              </label>
            </div>
          </div>

          <!-- Passwort ändern -->
          <div class="border-t border-gray-200 pt-6 mt-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
              Passwort ändern
            </h3>
            
            <div class="space-y-4">
              <div>
                <label
                  for="currentPassword"
                  class="block text-sm font-medium text-gray-700 mb-2"
                >
                  Aktuelles Passwort
                </label>
                <input
                  id="currentPassword"
                  v-model="passwordData.current"
                  type="password"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  :disabled="isSaving"
                >
              </div>

              <div>
                <label
                  for="newPassword"
                  class="block text-sm font-medium text-gray-700 mb-2"
                >
                  Neues Passwort
                </label>
                <input
                  id="newPassword"
                  v-model="passwordData.new"
                  type="password"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  :disabled="isSaving"
                >
              </div>

              <div>
                <label
                  for="confirmPassword"
                  class="block text-sm font-medium text-gray-700 mb-2"
                >
                  Passwort bestätigen
                </label>
                <input
                  id="confirmPassword"
                  v-model="passwordData.confirm"
                  type="password"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  :disabled="isSaving"
                >
              </div>
            </div>
          </div>

          <div class="border-t border-gray-200 pt-6 mt-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">
              Passkeys
            </h3>
            <p class="text-sm text-gray-600 mb-4">
              Passkeys erlauben eine Anmeldung ohne Passwort. Je nach Gerät erfolgt die Einrichtung lokal oder über Smartphone/USB-Sicherheitsschlüssel.
            </p>
            <p class="text-xs text-gray-500 mb-4">
              Hinweis: Unter Firefox wird der Smartphone-Authenticator (QR/Hybrid) bevorzugt.
            </p>

            <p
              v-if="!isPasskeySupported"
              class="text-sm text-amber-700 mb-4"
            >
              Passkeys sind in diesem Browser bzw. ohne HTTPS nicht verfügbar.
            </p>

            <div
              v-if="passkeyError"
              class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm mb-3"
            >
              <AlertCircle
                :size="20"
                class="mr-2"
              />
              {{ passkeyError }}
            </div>

            <div class="flex flex-wrap gap-3 mb-4">
              <button
                type="button"
                class="px-4 py-2 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition-colors disabled:bg-gray-400"
                :disabled="isSaving || passkeyLoading || !isPasskeySupported"
                @click="addPasskey"
              >
                {{ passkeyLoading ? 'Passkey wird erstellt...' : (isPasskeySupported ? 'Passkey hinzufügen' : 'Passkeys nicht unterstützt') }}
              </button>
              <button
                type="button"
                class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:bg-gray-100 disabled:text-gray-400"
                :disabled="isSaving || passkeyLoading"
                @click="loadPasskeys"
              >
                Aktualisieren
              </button>
            </div>

            <div
              v-if="passkeys.length === 0"
              class="text-sm text-gray-600"
            >
              Noch keine Passkeys hinterlegt.
            </div>

            <ul
              v-else
              class="space-y-2"
            >
              <li
                v-for="pk in passkeys"
                :key="pk.credentialId"
                class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
              >
                <div class="min-w-0">
                  <div class="font-medium text-gray-900 truncate">
                    {{ pk.name || 'Passkey' }}
                  </div>
                  <div class="text-xs text-gray-600">
                    Erstellt: {{ formatDate(pk.createdAt) }}<span v-if="pk.lastUsedAt"> · Zuletzt genutzt: {{ formatDate(pk.lastUsedAt) }}</span>
                  </div>
                </div>
                <button
                  type="button"
                  class="ml-4 px-3 py-1.5 text-sm border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:bg-gray-100 disabled:text-gray-400"
                  :disabled="isSaving || passkeyLoading"
                  @click="removePasskey(pk.credentialId)"
                >
                  Entfernen
                </button>
              </li>
            </ul>
          </div>

          <!-- Error/Success Messages -->
          <div
            v-if="errorMessage"
            class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
          >
            <AlertCircle
              :size="20"
              class="mr-2"
            />
            {{ errorMessage }}
          </div>

          <div
            v-if="successMessage"
            class="flex items-center p-3 rounded-md bg-green-50 text-green-700 text-sm"
          >
            <Check
              :size="20"
              class="mr-2"
            />
            {{ successMessage }}
          </div>

          <!-- Submit Button -->
          <div class="flex justify-end space-x-4">
            <button
              type="button"
              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              :disabled="isSaving"
              @click="loadProfile"
            >
              Zurücksetzen
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
              :disabled="isSaving"
            >
              <Loader2
                v-if="isSaving"
                :size="20"
                class="animate-spin mr-2"
              />
              <span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { AlertCircle, Check, Loader2 } from 'lucide-vue-next'

const authStore = useAuthStore()

const isLoading = ref(true)
const isSaving = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const passkeys = ref([])
const passkeyLoading = ref(false)
const passkeyError = ref('')
const isPasskeySupported = ref(false)
if (process.client) {
  isPasskeySupported.value = !!window.PublicKeyCredential && !!window.isSecureContext
}

const formData = ref({
  name: '',
  email: '',
  phone: '',
  geburtsdatum: ''
})

// Visibility preferences for other logged-in members
const visibility = ref({
  showEmail: true,
  showPhone: true,
  showAddress: false,
  showBirthday: true
})

const passwordData = ref({
  current: '',
  new: '',
  confirm: ''
})

const loadProfile = async () => {
  isLoading.value = true
  errorMessage.value = ''
  successMessage.value = ''

  try {
    const response = await $fetch('/api/profile')
    formData.value = {
      name: response.user.name,
      email: response.user.email,
      phone: response.user.phone || '',
      geburtsdatum: response.user.geburtsdatum || ''
    }
  visibility.value = response.user.visibility || visibility.value
  } catch {
    errorMessage.value = 'Fehler beim Laden des Profils.'
  } finally {
    isLoading.value = false
  }
}

const loadPasskeys = async () => {
  passkeyError.value = ''
  try {
    const res = await $fetch('/api/auth/passkeys/list')
    passkeys.value = res.passkeys || []
  } catch (e) {
    passkeyError.value = e?.data?.message || 'Fehler beim Laden der Passkeys.'
  }
}

const isFirefoxBrowser = () => {
  if (!process.client) return false
  const ua = navigator.userAgent || ''
  return /firefox/i.test(ua)
}

const hasPlatformAuthenticator = async () => {
  if (!process.client || !window.PublicKeyCredential) return false
  if (typeof window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable !== 'function') return false
  try {
    return await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
  } catch {
    return false
  }
}

const addPasskey = async () => {
  passkeyError.value = ''
  passkeyLoading.value = true
  try {
    const name = window.prompt('Name für den Passkey (z.B. "iPhone", "Laptop"):', 'Passkey') || 'Passkey'
    const mod = await import('@simplewebauthn/browser')

    // Firefox auf Linux: Smartphone-Flow (Hybrid/QR) bevorzugen.
    // Chromium: localDevice nur setzen, wenn das Gerät wirklich einen Platform-Authenticator hat.
    const firefox = isFirefoxBrowser()
    const platformAvailable = await hasPlatformAuthenticator()
    const preferredAuthenticatorType = firefox
      ? 'remoteDevice'
      : (platformAvailable ? 'localDevice' : undefined)
    const registrationOptionsRequest = preferredAuthenticatorType
      ? { method: 'POST', body: { preferredAuthenticatorType } }
      : { method: 'POST' }

    const res = await $fetch('/api/auth/passkeys/registration-options', registrationOptionsRequest)

    // @simplewebauthn/browser v13+ erwartet { optionsJSON: options }
    const credential = await mod.startRegistration({ optionsJSON: res.options })

    await $fetch('/api/auth/passkeys/register', {
      method: 'POST',
      body: { credential, name }
    })
    await loadPasskeys()
    successMessage.value = 'Passkey hinzugefügt.'
  } catch (e) {
    const rawMessage = e?.data?.message || e?.message || ''
    if (String(rawMessage).includes('NotAllowedError')) {
      passkeyError.value = 'Passkey-Erstellung abgebrochen oder nicht erlaubt. Unter Firefox/Linux ggf. Smartphone-Passkey oder Sicherheitsschlüssel verwenden.'
    } else {
      passkeyError.value = rawMessage || 'Passkey konnte nicht hinzugefügt werden.'
    }
  } finally {
    passkeyLoading.value = false
  }
}

const removePasskey = async (credentialId) => {
  passkeyError.value = ''
  passkeyLoading.value = true
  try {
    await $fetch('/api/auth/passkeys/remove', {
      method: 'POST',
      body: { credentialId }
    })
    await loadPasskeys()
    successMessage.value = 'Passkey entfernt.'
  } catch (e) {
    passkeyError.value = e?.data?.message || 'Passkey konnte nicht entfernt werden.'
  } finally {
    passkeyLoading.value = false
  }
}

const formatDate = (iso) => {
  if (!iso) return '—'
  try {
    return new Date(iso).toLocaleString('de-DE')
  } catch {
    return iso
  }
}

const handleSave = async () => {
  isSaving.value = true
  errorMessage.value = ''
  successMessage.value = ''

  // Validate password change if provided
  if (passwordData.value.current || passwordData.value.new || passwordData.value.confirm) {
    if (!passwordData.value.current) {
      errorMessage.value = 'Bitte geben Sie Ihr aktuelles Passwort ein.'
      isSaving.value = false
      return
    }
    if (!passwordData.value.new) {
      errorMessage.value = 'Bitte geben Sie ein neues Passwort ein.'
      isSaving.value = false
      return
    }
    if (passwordData.value.new !== passwordData.value.confirm) {
      errorMessage.value = 'Die neuen Passwörter stimmen nicht überein.'
      isSaving.value = false
      return
    }
    if (passwordData.value.new.length < 6) {
      errorMessage.value = 'Das neue Passwort muss mindestens 6 Zeichen lang sein.'
      isSaving.value = false
      return
    }
  }

  try {
    await $fetch('/api/profile', {
      method: 'PUT',
      body: {
        name: formData.value.name,
        email: formData.value.email,
        phone: formData.value.phone,
        geburtsdatum: formData.value.geburtsdatum,
        visibility: visibility.value,
        currentPassword: passwordData.value.current || undefined,
        newPassword: passwordData.value.new || undefined
      }
    })

    successMessage.value = 'Profil erfolgreich aktualisiert!'
    
    // Clear password fields
    passwordData.value = {
      current: '',
      new: '',
      confirm: ''
    }

    // Update auth store if email changed
    await authStore.checkAuth()

    // Scroll to top to show success message
    window.scrollTo({ top: 0, behavior: 'smooth' })
  } catch (error) {
    errorMessage.value = error.data?.message || 'Fehler beim Speichern des Profils.'
  } finally {
    isSaving.value = false
  }
}

onMounted(() => {
  loadProfile()
  if (isPasskeySupported.value) {
    loadPasskeys()
  }
})

definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'Mein Profil - Harheimer TC',
})
</script>

