<script setup>
const {
  loading,
  statusLoading,
  websocketTesting,
  config,
  status,
  websocketResult,
  lastUpdated,
  selectedExtension,
  sipRegistered,
  sipStatus,
  registererState,
  sipEvents,
  statusColor,
  statusIcon,
  websocketColor,
  loadTelephony,
  refreshStatus,
  testWebSocket,
} = useTelephonySoftphone()

onMounted(loadTelephony)
</script>

<template>
  <div class="min-h-0 flex-1 overflow-y-auto 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 Setup
          </h1>
          <p class="mt-2 max-w-3xl text-sm text-gray-600">
            Asterisk-Status, Browser-Verbindung und lokale Test-Nebenstellen.
          </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/phone"
            icon="i-heroicons-phone"
            variant="outline"
          >
            Zur Telefonie
          </UButton>
        </div>
      </div>

      <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 lokale Call-Tests 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>

      <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">
                SIP-Diagnose
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Aktuelle Registrierung und letzte SIP-Ereignisse.
              </p>
            </div>
            <div class="flex flex-wrap gap-2">
              <UBadge :color="sipRegistered ? 'success' : 'neutral'" variant="soft">
                {{ sipStatus }}
              </UBadge>
              <UBadge color="neutral" variant="soft">
                Nebenstelle {{ selectedExtension }}
              </UBadge>
              <UBadge color="neutral" variant="soft">
                {{ registererState }}
              </UBadge>
            </div>
          </div>
        </template>

        <div v-if="sipEvents.length" class="rounded-lg border border-gray-200 bg-gray-50 p-3">
          <ul class="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>
        <p v-else class="text-sm text-gray-500">
          Noch keine SIP-Ereignisse vorhanden.
        </p>
      </UCard>

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