<script setup lang="ts">
import { AlertTriangle, RefreshCw, Workflow } from '@lucide/vue'
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useOpenClawOverviewQuery } from '../../api/openclawRuntime'

const overviewQuery = useOpenClawOverviewQuery()
const connection = computed(() => overviewQuery.data.value?.connection ?? null)
const errorMessage = computed(() => {
  const error = overviewQuery.error.value
  return error instanceof Error
    ? error.message
    : error
      ? 'OpenClaw-Status nicht erreichbar'
      : ''
})
const visible = computed(() =>
  Boolean(errorMessage.value || (connection.value && !connection.value.connected)),
)
const title = computed(() => {
  if (errorMessage.value) return 'OpenClaw-Status nicht erreichbar'
  if (!connection.value?.configured) return 'OpenClaw ist nicht konfiguriert'
  if (connection.value?.pairingRequired) return 'OpenClaw Device Pairing erforderlich'
  if (connection.value.state === 'failed') return 'OpenClaw-Verbindung fehlgeschlagen'
  return 'OpenClaw ist nicht verbunden'
})
</script>

<template>
  <aside v-if="visible" class="openclaw-notice" role="status">
    <span class="notice-icon"><AlertTriangle :size="16" aria-hidden="true" /></span>
    <span class="notice-copy">
      <strong>{{ title }}</strong>
      <small>
        {{ errorMessage || (connection?.pairingRequired && connection.pairingRequestId
          ? `Request-ID: ${connection.pairingRequestId}`
          : connection?.recovery || connection?.message) }}
      </small>
    </span>
    <RouterLink class="notice-link" to="/runs">
      <Workflow :size="14" aria-hidden="true" />
      Run Control
    </RouterLink>
    <button
      type="button"
      class="notice-refresh"
      aria-label="OpenClaw status refresh"
      :disabled="overviewQuery.isFetching.value"
      @click="overviewQuery.refetch()"
    >
      <RefreshCw :size="14" :class="{ spin: overviewQuery.isFetching.value }" aria-hidden="true" />
    </button>
  </aside>
</template>

<style scoped>
.openclaw-notice {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--status-queue-line);
  border-radius: var(--r-sm);
  background: var(--status-queue-bg);
  color: var(--tx);
}

.notice-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--st-queue) 12%, transparent);
  color: var(--st-queue);
}

.notice-copy {
  min-width: 0;
}

.notice-copy strong,
.notice-copy small {
  display: block;
}

.notice-copy strong {
  font-size: 12px;
}

.notice-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--tx-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-link,
.notice-refresh {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--space-2) 62%, transparent);
  color: var(--tx);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.notice-link {
  padding: 0 10px;
}

.notice-refresh {
  width: 30px;
  padding: 0;
  cursor: pointer;
}

.notice-refresh:disabled {
  opacity: .55;
}

.spin {
  animation: notice-spin 1s linear infinite;
}

@keyframes notice-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .openclaw-notice {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .notice-link {
    grid-column: 2;
    justify-self: start;
  }

  .notice-refresh {
    grid-column: 3;
    grid-row: 1;
  }
}
</style>
