<!--
  Navbar entry for the staff live-chat module: a chat-bubble button with an
  unread-count indicator. Renders nothing for limited roles or when chat is
  disabled. Clicking toggles the drawer. Auto-imported as <ChatBadge>.
  Styled to match the neighbouring <ThemeToggle> button in TopMegaBar.
-->
<script setup>
const open = useChatOpen()
const unread = useChatUnread()

// Single source of truth for the client gate: chat enabled + logged-in +
// non-limited role + the user's IsChatEnabled flag (see useChatEligible).
const enabled = useChatEligible()

const totalUnread = computed(() =>
  Object.values(unread.value || {}).reduce((a, b) => a + Number(b || 0), 0))

// On mobile the teleported drawer doesn't render reliably, so route to the
// dedicated full-screen chat page (pages/chat.vue) instead. Desktop keeps the
// slide-in drawer. Breakpoint mirrors the drawer's `isNarrow` gate (≤1024).
const toggle = () => {
  if (import.meta.client && window.innerWidth <= 1024) { navigateTo('/chat'); return }
  open.value = !open.value
}
</script>

<template>
  <template v-if="enabled">
    <button
      type="button"
      class="chat-bell"
      :class="{ 'has-unread': totalUnread > 0 }"
      :title="totalUnread > 0 ? `Chat — ${totalUnread} unread` : 'Chat'"
      aria-label="Chat"
      @click="toggle"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="chat-icon pointerEvents-none"
      >
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
      </svg>
      <span v-if="totalUnread > 0" class="indicator pointerEvents-none">
        {{ totalUnread > 99 ? '99+' : totalUnread }}
      </span>
    </button>
  </template>
</template>

<style scoped>
.chat-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: 2.5rem;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface);
  color: var(--theme-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-bell:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-primary);
}

.chat-bell:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--theme-primary);
}

.chat-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}

.chat-bell:hover .chat-icon {
  transform: scale(1.08);
}

/* Gentle pulse on the icon while there are unread messages. */
.chat-bell.has-unread {
  border-color: var(--theme-primary);
}

.chat-bell .indicator {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--theme-danger, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--theme-surface);
}

@media (max-width: 768px) {
  .chat-bell {
    padding: 0.375rem;
    min-width: 2.25rem;
  }

  .chat-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}
</style>
