<script setup>
const {
  loading,
  callHistoryLoading,
  config,
  callHistory,
  selectedExtension,
  dialTarget,
  activeSession,
  remoteAudio,
  sipLoading,
  sipRegistered,
  sipStatus,
  sipError,
  callState,
  registererState,
  canRegisterSip,
  canStartCall,
  canHangup,
  loadTelephony,
  loadCallHistory,
  registerSip,
  stopSip,
  startCall,
  hangupCall,
} = useTelephonySoftphone()

const callStatusLabel = (status) => ({
  ringing: "Klingelt",
  dialing: "Wählt",
  active: "Aktiv",
  completed: "Beendet",
  missed: "Verpasst",
  rejected: "Abgelehnt",
  canceled: "Abgebrochen",
  failed: "Fehlgeschlagen",
}[status] || status || "Unbekannt")

const callStatusColor = (status) => ({
  completed: "success",
  active: "primary",
  ringing: "primary",
  dialing: "primary",
  missed: "warning",
  rejected: "neutral",
  canceled: "neutral",
  failed: "error",
}[status] || "neutral")

const formatCallTime = (value) => {
  if (!value) return "-"
  return new Date(value).toLocaleString("de-DE", {
    day: "2-digit",
    month: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  })
}

const formatDuration = (seconds) => {
  if (!seconds) return "-"

  const minutes = Math.floor(seconds / 60)
  const rest = seconds % 60
  return `${minutes}:${String(rest).padStart(2, "0")} Min.`
}

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
          </h1>
          <p class="mt-2 max-w-3xl text-sm text-gray-600">
            Anrufe direkt in FEDEO starten und annehmen.
          </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-setup"
            icon="i-heroicons-cog-6-tooth"
            variant="outline"
          >
            Telefonie-Setup
          </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 Anrufe ü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>

            <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>

      <UCard>
        <template #header>
          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h2 class="text-base font-semibold text-gray-950">
                Anrufhistorie
              </h2>
              <p class="mt-1 text-sm text-gray-500">
                Letzte Telefonie-Ereignisse dieses Mandanten.
              </p>
            </div>
            <UButton
              icon="i-heroicons-arrow-path"
              variant="ghost"
              :loading="callHistoryLoading"
              @click="loadCallHistory"
            >
              Aktualisieren
            </UButton>
          </div>
        </template>

        <div v-if="callHistory.length" class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="text-left text-xs font-medium uppercase tracking-wide text-gray-500">
              <tr>
                <th class="px-3 py-2">Zeit</th>
                <th class="px-3 py-2">Richtung</th>
                <th class="px-3 py-2">Teilnehmer</th>
                <th class="px-3 py-2">Nebenstelle</th>
                <th class="px-3 py-2">Status</th>
                <th class="px-3 py-2 text-right">Dauer</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
              <tr
                v-for="call in callHistory"
                :key="call.id"
                class="bg-white"
              >
                <td class="whitespace-nowrap px-3 py-3 text-gray-600">
                  {{ formatCallTime(call.startedAt) }}
                </td>
                <td class="whitespace-nowrap px-3 py-3">
                  <UIcon
                    :name="call.direction === 'incoming' ? 'i-heroicons-phone-arrow-down-left' : 'i-heroicons-phone-arrow-up-right'"
                    class="h-5 w-5 text-gray-500"
                  />
                </td>
                <td class="px-3 py-3">
                  <div class="font-medium text-gray-950">
                    {{ call.remoteDisplayName || call.remoteNumber || "Unbekannt" }}
                  </div>
                  <div v-if="call.remoteDisplayName && call.remoteNumber && call.remoteDisplayName !== call.remoteNumber" class="text-xs text-gray-500">
                    {{ call.remoteNumber }}
                  </div>
                </td>
                <td class="whitespace-nowrap px-3 py-3 font-mono text-gray-700">
                  {{ call.localExtension || "-" }}
                </td>
                <td class="whitespace-nowrap px-3 py-3">
                  <UBadge :color="callStatusColor(call.status)" variant="soft">
                    {{ callStatusLabel(call.status) }}
                  </UBadge>
                </td>
                <td class="whitespace-nowrap px-3 py-3 text-right text-gray-600">
                  {{ formatDuration(call.durationSeconds) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div v-else class="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-500">
          Noch keine Anrufe in der Historie.
        </div>
      </UCard>
    </div>
  </div>
</template>
