thebet365/apps/player/src/views/desktop/DesktopInboxHubView.vue

<script setup lang="ts">
import { computed, onActivated, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import MessageListPanel from '../../components/MessageListPanel.vue';
import CustomerServicePanel from '../../components/CustomerServicePanel.vue';
import ConfirmDialog from '../../components/ConfirmDialog.vue';
import { useAuthStore } from '../../stores/auth';
import { usePlayerMessages } from '../../composables/usePlayerMessages';
import { useInboxFeature } from '../../composables/useInboxFeature';

type HubTab = 'messages' | 'support';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const auth = useAuthStore();
const { inboxEnabled, hubTitleKey } = useInboxFeature();
const { unreadCount, messages, listLoaded, refreshUnreadCount, markAllRead, deleteAllMessages } = usePlayerMessages();

const markingAll = ref(false);
const deletingAll = ref(false);
const deleteAllConfirmVisible = ref(false);

const activeTab = computed<HubTab>(() => {
  if (!inboxEnabled.value) return 'support';
  return route.query.tab === 'support' ? 'support' : 'messages';
});

const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
const hasMessages = computed(() => listLoaded.value && messages.value.length > 0);
const showMessageActions = computed(
  () => inboxEnabled.value && activeTab.value === 'messages' && auth.token && hasMessages.value,
);

function switchTab(tab: HubTab) {
  if (!inboxEnabled.value || tab === activeTab.value) return;
  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
}

async function onMarkAllRead() {
  if (!unreadInList.value || markingAll.value) return;
  markingAll.value = true;
  try {
    await markAllRead();
    await refreshUnreadCount();
  } finally {
    markingAll.value = false;
  }
}

function onDeleteAll() {
  if (deletingAll.value || !messages.value.length) return;
  deleteAllConfirmVisible.value = true;
}

async function confirmDeleteAll() {
  deletingAll.value = true;
  deleteAllConfirmVisible.value = false;
  try {
    await deleteAllMessages();
    await refreshUnreadCount();
  } finally {
    deletingAll.value = false;
  }
}

onMounted(refreshUnreadCount);
onActivated(refreshUnreadCount);
</script>

<template>
  <div class="desktop-hub-shell">
    <!-- Sidebar: tabs -->
    <aside class="hub-aside">
      <nav class="hub-nav">
        <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
        <button
          v-if="inboxEnabled"
          type="button"
          class="hub-tab hover-bg"
          :class="{ active: activeTab === 'messages' }"
          @click="switchTab('messages')"
        >
          <span class="dot" />
          <span>{{ t('messages.tab_inbox') }}</span>
          <span v-if="unreadInList > 0" class="badge">{{ unreadInList }}</span>
        </button>
        <button
          type="button"
          class="hub-tab hover-bg"
          :class="{ active: activeTab === 'support' }"
          @click="switchTab('support')"
        >
          <span class="dot" />
          <span>{{ t('messages.tab_support') }}</span>
        </button>
      </nav>
    </aside>

    <!-- Main content -->
    <main class="hub-main">
      <div class="hub-header">
        <h1 class="hub-title">
          {{ activeTab === 'messages' ? t('messages.tab_inbox') : t('messages.tab_support') }}
        </h1>
        <div v-if="showMessageActions" class="hub-actions">
          <button
            v-if="unreadInList > 0"
            type="button"
            class="action-link"
            :disabled="markingAll"
            @click="onMarkAllRead"
          >
            {{ t('messages.mark_all_read') }}
          </button>
          <button
            type="button"
            class="action-link danger"
            :disabled="deletingAll"
            @click="onDeleteAll"
          >
            {{ t('messages.delete_all') }}
          </button>
        </div>
      </div>

      <MessageListPanel v-if="activeTab === 'messages' && inboxEnabled" class="hub-panel" @click-message="id => $router.push('/messages/' + id)" />
      <CustomerServicePanel v-else class="hub-panel" />
    </main>

    <ConfirmDialog
      v-if="deleteAllConfirmVisible"
      :visible="deleteAllConfirmVisible"
      :message="t('messages.delete_all_confirm')"
      @confirm="confirmDeleteAll"
      @cancel="deleteAllConfirmVisible = false"
    />
  </div>
</template>

<style scoped>
.desktop-hub-shell {
  display: flex;
  min-height: 0;
  flex: 1;
}

.hub-aside {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--desktop-border);
  background: var(--desktop-sidebar-panel-bg);
  padding: 10px;
}

.hub-nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px 10px;
}

.hub-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  position: relative;
}

.hub-tab:hover { color: #fff; }

.hub-tab.active {
  color: var(--primary-light);
  background: rgba(244, 162, 97, 0.08);
}

.hub-tab.active .dot { background: var(--primary); box-shadow: 0 0 8px var(--primary); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tertiary);
  flex-shrink: 0;
  transition: all 0.2s;
}

.badge {
  margin-left: auto;
  background: rgba(255, 69, 58, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.hub-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hub-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--desktop-border);
}

.hub-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-light);
  margin: 0;
  flex: 1;
}

.hub-actions {
  display: flex;
  gap: 12px;
}

.action-link {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.action-link:hover:not(:disabled) { color: var(--primary-light); }
.action-link.danger:hover:not(:disabled) { color: var(--danger); }
.action-link:disabled { opacity: 0.4; cursor: default; }

.hub-panel {
  flex: 1;
  overflow-y: auto;
}
</style>