<script setup>
const toast = useToast()
const { $api } = useNuxtApp()

const loading = ref(false)
const statusLoading = ref(false)
const websocketTesting = ref(false)
const config = ref(null)
const status = ref(null)
const websocketResult = ref(null)
const lastUpdated = ref(null)
const selectedExtension = ref("1001")
const dialTarget = ref("600")
const sipModule = ref(null)
const userAgent = shallowRef(null)
const registerer = shallowRef(null)
const activeSession = shallowRef(null)
const remoteAudio = ref(null)
const sipLoading = ref(false)
const sipRegistered = ref(false)
const sipStatus = ref("Nicht verbunden")
const sipError = ref(null)
const incomingCall = ref(null)
const callState = ref("idle")
const registererState = ref("Initial")
const sipEvents = ref([])

const addSipEvent = (message) => {
  sipEvents.value = [
    {
      time: new Date().toLocaleTimeString("de-DE"),
      message,
    },
    ...sipEvents.value,
  ].slice(0, 8)
}

const selectedAccount = computed(() =>
  (config.value?.testAccounts || []).find((account) => account.extension === selectedExtension.value)
    || config.value?.testAccounts?.[0]
)

const canRegisterSip = computed(() =>
  Boolean(config.value?.sipWebSocketUrl && config.value?.sipDomain && selectedAccount.value && !sipLoading.value)
)

const canStartCall = computed(() =>
  Boolean(sipRegistered.value && dialTarget.value?.trim() && !activeSession.value && !sipLoading.value)
)

const canHangup = computed(() =>
  Boolean(activeSession.value && callState.value !== "terminated")
)

const statusColor = computed(() => {
  if (status.value?.reachable) return "success"
  if (!status.value?.enabled) return "warning"
  return "error"
})

const statusIcon = computed(() => {
  if (status.value?.reachable) return "i-heroicons-signal"
  if (!status.value?.enabled) return "i-heroicons-pause-circle"
  return "i-heroicons-signal-slash"
})

const websocketColor = computed(() => {
  if (!websocketResult.value) return "neutral"
  return websocketResult.value.ok ? "success" : "error"
})

const loadTelephony = async () => {
  loading.value = true
  try {
    const [configRes, statusRes] = await Promise.all([
      $api("/api/telephony/config"),
      $api("/api/telephony/status")
    ])

    config.value = configRes
    status.value = statusRes
    lastUpdated.value = new Date()
  } catch (error) {
    toast.add({
      title: "Telefonie-Status konnte nicht geladen werden",
      color: "error"
    })
  } finally {
    loading.value = false
  }
}

const refreshStatus = async () => {
  statusLoading.value = true
  try {
    status.value = await $api("/api/telephony/status")
    lastUpdated.value = new Date()
  } catch (error) {
    toast.add({
      title: "Asterisk-Status konnte nicht geprüft werden",
      color: "error"
    })
  } finally {
    statusLoading.value = false
  }
}

const testWebSocket = async () => {
  if (!config.value?.sipWebSocketUrl || websocketTesting.value) return

  websocketTesting.value = true
  websocketResult.value = null

  await new Promise((resolve) => {
    let settled = false
    const socket = new WebSocket(config.value.sipWebSocketUrl, "sip")
    const timer = window.setTimeout(() => {
      if (settled) return
      settled = true
      socket.close()
      websocketResult.value = {
        ok: false,
        message: "WebSocket-Verbindung ist abgelaufen."
      }
      resolve()
    }, 3000)

    socket.onopen = () => {
      if (settled) return
      settled = true
      window.clearTimeout(timer)
      websocketResult.value = {
        ok: true,
        message: "SIP-WebSocket ist aus dem Browser erreichbar."
      }
      socket.close()
      resolve()
    }

    socket.onerror = () => {
      if (settled) return
      settled = true
      window.clearTimeout(timer)
      websocketResult.value = {
        ok: false,
        message: "SIP-WebSocket konnte nicht geöffnet werden."
      }
      resolve()
    }
  })

  websocketTesting.value = false
}

const ensureSipModule = async () => {
  if (!sipModule.value) {
    sipModule.value = await import("sip.js")
  }

  return sipModule.value
}

const cleanupRemoteAudio = () => {
  if (!remoteAudio.value?.srcObject) return

  const stream = remoteAudio.value.srcObject
  if (stream?.getTracks) {
    stream.getTracks().forEach((track) => track.stop())
  }

  remoteAudio.value.srcObject = null
}

const attachRemoteAudio = async (session) => {
  const peerConnection = session?.sessionDescriptionHandler?.peerConnection
  if (!peerConnection || !remoteAudio.value) return

  const remoteStream = new MediaStream()
  peerConnection.getReceivers().forEach((receiver) => {
    if (receiver.track) remoteStream.addTrack(receiver.track)
  })

  remoteAudio.value.srcObject = remoteStream

  try {
    await remoteAudio.value.play()
  } catch (error) {
    // Browser dürfen Autoplay blockieren; der Call selbst bleibt davon unberührt.
  }
}

const setupSession = (session, direction = "outgoing") => {
  const { SessionState } = sipModule.value

  activeSession.value = session
  callState.value = direction === "incoming" ? "incoming" : "connecting"
  sipStatus.value = direction === "incoming" ? "Eingehender Anruf" : "Anruf wird aufgebaut"

  session.stateChange.addListener(async (state) => {
    if (state === SessionState.Establishing) {
      callState.value = "connecting"
      sipStatus.value = "Anruf wird aufgebaut"
    }

    if (state === SessionState.Established) {
      callState.value = "active"
      sipStatus.value = "Im Gespräch"
      incomingCall.value = null
      await attachRemoteAudio(session)
    }

    if (state === SessionState.Terminated) {
      callState.value = "terminated"
      sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
      activeSession.value = null
      incomingCall.value = null
      cleanupRemoteAudio()
    }
  })
}

const stopSip = async () => {
  sipLoading.value = true
  sipError.value = null

  try {
    if (activeSession.value) {
      await hangupCall()
    }

    if (registerer.value) {
      await registerer.value.unregister()
      registerer.value = null
    }

    if (userAgent.value) {
      await userAgent.value.stop()
      userAgent.value = null
    }

    sipRegistered.value = false
    registererState.value = "Initial"
    sipStatus.value = "Nicht verbunden"
    callState.value = "idle"
  } catch (error) {
    sipError.value = error?.message || "SIP-Verbindung konnte nicht getrennt werden."
  } finally {
    sipLoading.value = false
  }
}

const registerSip = async () => {
  if (!canRegisterSip.value) return

  sipLoading.value = true
  sipError.value = null

  try {
    await stopSip()

    const sip = await ensureSipModule()
    const account = selectedAccount.value
    const uri = sip.UserAgent.makeURI(`sip:${account.extension}@${config.value.sipDomain}`)

    if (!uri) throw new Error("SIP-URI konnte nicht erstellt werden.")

    const handleIncomingInvite = (invitation) => {
      addSipEvent(`INVITE von ${invitation.remoteIdentity?.uri?.user || "unbekannt"} empfangen`)
      incomingCall.value = invitation
      setupSession(invitation, "incoming")

      toast.add({
        title: "Eingehender Anruf",
        description: `Anruf für ${account.extension}`,
        color: "primary"
      })
    }

    const ua = new sip.UserAgent({
      uri,
      displayName: account.displayName,
      contactName: account.extension,
      authorizationUsername: account.extension,
      authorizationPassword: account.password,
      logBuiltinEnabled: true,
      logLevel: "log",
      logConnector: (level, category, label, content) => {
        if (category === "sip.Transport" && content.includes("Received WebSocket")) {
          addSipEvent("SIP-Nachricht über WebSocket empfangen")
        }

        if (content.includes("INVITE")) {
          addSipEvent(`${category}: ${content.split("\n")[0]}`)
        }

        if (level === "error" || level === "warn") {
          addSipEvent(`${category}: ${content.split("\n")[0]}`)
        }
      },
      delegate: {
        onInvite: handleIncomingInvite,
        onConnect: () => {
          addSipEvent("SIP-WebSocket verbunden")
          sipStatus.value = sipRegistered.value ? `Registriert als ${account.extension}` : "SIP-WebSocket verbunden"
        },
        onDisconnect: () => {
          addSipEvent("SIP-WebSocket getrennt")
          sipRegistered.value = false
          sipStatus.value = "SIP-WebSocket getrennt"
        },
      },
      transportOptions: {
        server: config.value.sipWebSocketUrl,
        keepAliveInterval: 20,
        traceSip: true,
      },
      sessionDescriptionHandlerFactoryOptions: {
        constraints: {
          audio: true,
          video: false,
        },
        peerConnectionConfiguration: {
          iceServers: [],
        },
      },
    })

    const reg = new sip.Registerer(ua, {
      expires: 120,
    })

    reg.stateChange.addListener((state) => {
      registererState.value = state

      if (state === sip.RegistererState.Registered) {
        addSipEvent(`Registrierung ${account.extension}: Registered`)
        sipRegistered.value = true
        sipStatus.value = `Registriert als ${account.extension}`
      }

      if (state === sip.RegistererState.Unregistered || state === sip.RegistererState.Terminated) {
        addSipEvent(`Registrierung ${account.extension}: ${state}`)
        sipRegistered.value = false
        sipStatus.value = "Nicht verbunden"
      }
    })

    userAgent.value = ua
    registerer.value = reg

    await ua.start()
    await reg.register({
      requestDelegate: {
        onAccept: () => {
          addSipEvent(`REGISTER ${account.extension}: 200 OK`)
          sipRegistered.value = true
          sipStatus.value = `Registriert als ${account.extension}`
          registererState.value = sip.RegistererState.Registered
        },
        onReject: (response) => {
          sipRegistered.value = false
          sipStatus.value = "Registrierung abgelehnt"
          sipError.value = `Asterisk hat REGISTER mit HTTP/SIP ${response.message.statusCode} abgelehnt.`
          addSipEvent(`REGISTER ${account.extension}: ${response.message.statusCode}`)
        },
      },
    })
  } catch (error) {
    sipRegistered.value = false
    sipStatus.value = "Nicht verbunden"
    sipError.value = error?.message || "SIP-Registrierung fehlgeschlagen."
  } finally {
    sipLoading.value = false
  }
}

const startCall = async () => {
  if (!canStartCall.value) return

  sipLoading.value = true
  sipError.value = null

  try {
    const sip = await ensureSipModule()
    const target = sip.UserAgent.makeURI(`sip:${dialTarget.value.trim()}@${config.value.sipDomain}`)

    if (!target) throw new Error("Zielnummer ist keine gültige SIP-Adresse.")

    const inviter = new sip.Inviter(userAgent.value, target, {
      sessionDescriptionHandlerOptions: {
        constraints: {
          audio: true,
          video: false,
        },
      },
    })

    setupSession(inviter, "outgoing")
    await inviter.invite()
  } catch (error) {
    activeSession.value = null
    callState.value = "idle"
    sipError.value = error?.message || "Anruf konnte nicht gestartet werden."
  } finally {
    sipLoading.value = false
  }
}

const acceptIncomingCall = async () => {
  if (!incomingCall.value) return

  sipLoading.value = true
  sipError.value = null

  try {
    await incomingCall.value.accept({
      sessionDescriptionHandlerOptions: {
        constraints: {
          audio: true,
          video: false,
        },
      },
    })
  } catch (error) {
    sipError.value = error?.message || "Anruf konnte nicht angenommen werden."
  } finally {
    sipLoading.value = false
  }
}

const rejectIncomingCall = async () => {
  if (!incomingCall.value) return

  try {
    await incomingCall.value.reject()
  } finally {
    incomingCall.value = null
    activeSession.value = null
    callState.value = "idle"
  }
}

const hangupCall = async () => {
  const session = activeSession.value
  if (!session) return

  const { SessionState } = sipModule.value || await ensureSipModule()

  try {
    if (session.state === SessionState.Initial && session.reject) {
      await session.reject()
    } else if (session.state === SessionState.Establishing && session.cancel) {
      await session.cancel()
    } else if (session.state === SessionState.Established && session.bye) {
      await session.bye()
    } else if (session.dispose) {
      session.dispose()
    }
  } finally {
    activeSession.value = null
    incomingCall.value = null
    callState.value = "idle"
    cleanupRemoteAudio()
    sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
  }
}

watch(config, (nextConfig) => {
  if (!selectedAccount.value && nextConfig?.testAccounts?.length) {
    selectedExtension.value = nextConfig.testAccounts[0].extension
  }
})

onMounted(loadTelephony)

onBeforeUnmount(() => {
  stopSip()
})
</script>

<template>
  <div class="min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
    <div class="mx-auto flex max-w-7xl flex-col gap-6">
      <div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p class="text-sm font-medium text-primary-600">
            Kommunikation
          </p>
          <h1 class="mt-1 text-2xl font-semibold text-gray-950">
            Telefonie
          </h1>
          <p class="mt-2 max-w-3xl text-sm text-gray-600">
            Lokaler Asterisk-Test für SIP, WebRTC und spätere Voice-Integration in FEDEO.
          </p>
        </div>

        <div class="flex flex-wrap gap-2">
          <UButton
            icon="i-heroicons-arrow-path"
            variant="soft"
            :loading="loading"
            @click="loadTelephony"
          >
            Aktualisieren
          </UButton>
          <UButton
            to="/communication/chat"
            icon="i-heroicons-chat-bubble-left-right"
            variant="outline"
          >
            Zum Chat
          </UButton>
        </div>
      </div>

      <UCard>
        <template #header>
          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <h2 class="text-base font-semibold text-gray-950">
                FEDEO Softphone
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Registrierung und Testanrufe direkt über den lokalen Asterisk.
              </p>
            </div>
            <UBadge
              :color="sipRegistered ? 'success' : 'neutral'"
              variant="soft"
              class="w-fit"
            >
              {{ sipStatus }}
            </UBadge>
          </div>
        </template>

        <div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
          <div class="space-y-4">
            <div>
              <label class="text-sm font-medium text-gray-700">Nebenstelle</label>
              <div class="mt-2 grid gap-2 sm:grid-cols-2">
                <button
                  v-for="account in config?.testAccounts || []"
                  :key="account.extension"
                  type="button"
                  class="rounded-lg border px-4 py-3 text-left transition"
                  :class="selectedExtension === account.extension ? 'border-primary-500 bg-primary-50 text-primary-900' : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'"
                  :disabled="sipRegistered || sipLoading"
                  @click="selectedExtension = account.extension"
                >
                  <span class="block font-semibold">{{ account.extension }}</span>
                  <span class="mt-1 block text-xs opacity-75">{{ account.displayName }}</span>
                </button>
              </div>
            </div>

            <div class="grid gap-3 sm:grid-cols-2">
              <UButton
                icon="i-heroicons-phone-arrow-up-right"
                :loading="sipLoading && !sipRegistered"
                :disabled="!canRegisterSip || sipRegistered"
                @click="registerSip"
              >
                Registrieren
              </UButton>
              <UButton
                icon="i-heroicons-x-circle"
                color="neutral"
                variant="soft"
                :disabled="!sipRegistered || sipLoading"
                @click="stopSip"
              >
                Trennen
              </UButton>
            </div>
          </div>

          <div class="rounded-lg border border-gray-200 bg-white p-4">
            <div class="grid gap-3 sm:grid-cols-[1fr_auto]">
              <UInput
                v-model="dialTarget"
                icon="i-heroicons-hashtag"
                placeholder="Ziel, z. B. 600 oder 1002"
                :disabled="!sipRegistered || Boolean(activeSession)"
              />
              <UButton
                icon="i-heroicons-phone"
                :loading="sipLoading && sipRegistered"
                :disabled="!canStartCall"
                @click="startCall"
              >
                Anrufen
              </UButton>
            </div>

            <div class="mt-4 flex flex-wrap items-center gap-2">
              <UButton
                icon="i-heroicons-phone-x-mark"
                color="error"
                variant="soft"
                :disabled="!canHangup"
                @click="hangupCall"
              >
                Auflegen
              </UButton>
              <UBadge color="neutral" variant="soft">
                {{ callState === "active" ? "Aktiver Anruf" : callState === "connecting" ? "Verbindet" : callState === "incoming" ? "Eingehend" : "Bereit" }}
              </UBadge>
              <UBadge :color="sipRegistered ? 'success' : 'warning'" variant="soft">
                Registrierung: {{ registererState }}
              </UBadge>
            </div>

            <div
              v-if="sipEvents.length"
              class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3"
            >
              <p class="text-xs font-medium uppercase text-gray-500">
                SIP-Ereignisse
              </p>
              <ul class="mt-2 space-y-1 text-xs text-gray-600">
                <li
                  v-for="event in sipEvents"
                  :key="`${event.time}-${event.message}`"
                  class="grid grid-cols-[4.5rem_1fr] gap-2"
                >
                  <span class="font-mono text-gray-400">{{ event.time }}</span>
                  <span class="break-words">{{ event.message }}</span>
                </li>
              </ul>
            </div>

            <UAlert
              v-if="incomingCall"
              class="mt-4"
              color="primary"
              icon="i-heroicons-phone-arrow-down-left"
              title="Eingehender Anruf"
              description="Ein lokaler SIP-Testanruf wartet auf Annahme."
            >
              <template #actions>
                <UButton
                  size="xs"
                  color="success"
                  icon="i-heroicons-phone"
                  :loading="sipLoading"
                  @click="acceptIncomingCall"
                >
                  Annehmen
                </UButton>
                <UButton
                  size="xs"
                  color="error"
                  variant="soft"
                  icon="i-heroicons-phone-x-mark"
                  @click="rejectIncomingCall"
                >
                  Ablehnen
                </UButton>
              </template>
            </UAlert>

            <UAlert
              v-if="sipError"
              class="mt-4"
              color="error"
              icon="i-heroicons-exclamation-triangle"
              title="Telefoniefehler"
              :description="sipError"
            />

            <audio ref="remoteAudio" autoplay playsinline />
          </div>
        </div>
      </UCard>

      <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
        <UCard>
          <template #header>
            <div class="flex items-center justify-between gap-3">
              <div>
                <h2 class="text-base font-semibold text-gray-950">
                  Asterisk-Status
                </h2>
                <p class="mt-1 text-sm text-gray-500">
                  Backend-Abfrage gegen den lokalen Telefonie-Stack.
                </p>
              </div>
              <UButton
                icon="i-heroicons-signal"
                variant="ghost"
                :loading="statusLoading"
                @click="refreshStatus"
              />
            </div>
          </template>

          <div class="grid gap-4 sm:grid-cols-3">
            <div class="rounded-lg border border-gray-200 bg-white p-4">
              <div class="flex items-center gap-2">
                <UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
                <span class="text-sm font-medium text-gray-700">Status</span>
              </div>
              <p class="mt-3 text-lg font-semibold text-gray-950">
                {{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
              </p>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-4">
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-server-stack" class="text-gray-500" />
                <span class="text-sm font-medium text-gray-700">Provider</span>
              </div>
              <p class="mt-3 text-lg font-semibold text-gray-950">
                {{ config?.provider || "asterisk" }}
              </p>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-4">
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
                <span class="text-sm font-medium text-gray-700">Echo-Test</span>
              </div>
              <p class="mt-3 text-lg font-semibold text-gray-950">
                {{ config?.echoExtension || "600" }}
              </p>
            </div>
          </div>

          <UAlert
            class="mt-4"
            :color="statusColor"
            :icon="statusIcon"
            :title="status?.message || 'Telefonie wird geladen'"
            :description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
          />

          <div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
            <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
              Geprüfte Status-Ziele
            </p>
            <div class="mt-2 grid gap-2">
              <div
                v-for="attempt in status.attempts"
                :key="attempt.url"
                class="flex items-center justify-between gap-3 text-sm"
              >
                <span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
                <UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
                  {{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
                </UBadge>
              </div>
            </div>
          </div>
        </UCard>

        <UCard>
          <template #header>
            <div>
              <h2 class="text-base font-semibold text-gray-950">
                Lokalen Stack starten
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
              </p>
            </div>
          </template>

          <div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
            docker compose --profile telephony-dev up -d asterisk-dev
          </div>

          <div class="mt-4 grid gap-3 text-sm text-gray-600">
            <div class="flex items-center justify-between gap-4">
              <span>SIP-Domain</span>
              <span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
            </div>
            <div class="flex items-center justify-between gap-4">
              <span>WebSocket</span>
              <span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
            </div>
          </div>
        </UCard>
      </div>

      <div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
        <UCard>
          <template #header>
            <div>
              <h2 class="text-base font-semibold text-gray-950">
                Browser-Test
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
              </p>
            </div>
          </template>

          <div class="flex flex-col gap-3">
            <UButton
              icon="i-heroicons-bolt"
              :loading="websocketTesting"
              :disabled="!config?.sipWebSocketUrl"
              @click="testWebSocket"
            >
              WebSocket prüfen
            </UButton>

            <UAlert
              v-if="websocketResult"
              :color="websocketColor"
              :icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
              :title="websocketResult.message"
            />
          </div>
        </UCard>

        <UCard>
          <template #header>
            <div>
              <h2 class="text-base font-semibold text-gray-950">
                Test-Nebenstellen
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Für den ersten lokalen Call-Test zwischen zwei Browser-Sessions.
              </p>
            </div>
          </template>

          <div class="grid gap-3 sm:grid-cols-2">
            <div
              v-for="account in config?.testAccounts || []"
              :key="account.extension"
              class="rounded-lg border border-gray-200 bg-white p-4"
            >
              <div class="flex items-center gap-2">
                <UIcon name="i-heroicons-user-circle" class="text-primary-600" />
                <h3 class="font-semibold text-gray-950">
                  {{ account.displayName }}
                </h3>
              </div>
              <dl class="mt-4 grid gap-2 text-sm">
                <div class="flex items-center justify-between gap-3">
                  <dt class="text-gray-500">Nebenstelle</dt>
                  <dd class="font-mono text-gray-950">{{ account.extension }}</dd>
                </div>
                <div class="flex items-center justify-between gap-3">
                  <dt class="text-gray-500">Passwort</dt>
                  <dd class="font-mono text-gray-950">{{ account.password }}</dd>
                </div>
              </dl>
            </div>
          </div>
        </UCard>
      </div>

      <p v-if="lastUpdated" class="text-xs text-gray-500">
        Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
      </p>
    </div>
  </div>
</template>
