<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useHelpCenterStore } from '@/stores/helpCenter'
import { useI18nStore } from '@/stores/i18n'
import { CUSTOMER_SERVICE_ENTRIES_VISIBLE } from '@/utils/customerService'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const store = useHelpCenterStore()
const i18nStore = useI18nStore()
const { groups, expandedIndices, loading, error } = storeToRefs(store)
const { current: locale } = storeToRefs(i18nStore)

function loadGroups() {
  store.fetchGroups()
}

onMounted(loadGroups)
watch(locale, loadGroups)

function isExpanded(index: number): boolean {
  return expandedIndices.value.has(index)
}
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <div class="page-header">
        <RouterLink to="/" class="back-link">&#8249; {{ t('common.back') }}</RouterLink>
        <h1 class="page-title">{{ t('help.supportTitle') }}</h1>
      </div>

      <div class="action-row" :class="{ 'action-row--no-cs': !CUSTOMER_SERVICE_ENTRIES_VISIBLE }">
        <template v-if="CUSTOMER_SERVICE_ENTRIES_VISIBLE">
          <a class="action-card dark-card" href="https://t.me/ibit_support" target="_blank" rel="noopener">
            <span class="act-icon">✈</span>
            <div>
              <p class="act-title">{{ t('help.telegramSupport') }}</p>
              <p class="act-desc">{{ t('help.quickResponse') }}</p>
            </div>
            <span class="act-arrow">&#8250;</span>
          </a>
          <a class="action-card dark-card" href="mailto:support@ibit.com">
            <span class="act-icon">✉</span>
            <div>
              <p class="act-title">{{ t('help.emailSupport') }}</p>
              <p class="act-desc">support@ibit.com</p>
            </div>
            <span class="act-arrow">&#8250;</span>
          </a>
        </template>
        <a class="action-card dark-card" href="#" target="_blank" rel="noopener">
          <span class="act-icon">📖</span>
          <div>
            <p class="act-title">{{ t('help.docs') }}</p>
            <p class="act-desc">{{ t('help.viewFullGuide') }}</p>
          </div>
          <span class="act-arrow">&#8250;</span>
        </a>
      </div>

      <div v-if="loading" class="loading-state">
        <div class="spinner" />
      </div>

      <div v-else-if="error" class="empty-state">
        <p>{{ error }}</p>
      </div>

      <template v-else>
        <div v-for="(group, gi) in groups" :key="`${locale}-${gi}`" class="group-card dark-card">
          <button class="group-header" @click="store.toggleExpand(gi)">
            <h2 class="group-title">{{ group.titleCN || group.titleEN }}</h2>
            <span class="group-arrow" :class="{ rotated: isExpanded(gi) }">&#9662;</span>
          </button>

          <div class="group-items" :class="{ open: isExpanded(gi) }">
            <div class="group-items-inner">
              <RouterLink
                v-for="item in group.content"
                :key="item.id"
                :to="`/help/${item.id}`"
                class="help-item"
              >
                <span class="item-title">{{ item.title }}</span>
                <span class="item-arrow">&#8250;</span>
              </RouterLink>
            </div>
          </div>
        </div>
      </template>
    </div>
  </main>
</template>

<style scoped>
.content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 800px;
}
.page-header { margin-bottom: var(--space-8); }
.back-link {
  font-size: var(--text-small); color: var(--color-text-secondary);
  display: inline-block; margin-bottom: var(--space-3);
  transition: color var(--transition);
}
.back-link:hover { color: var(--color-primary); }
.page-title {
  font-size: var(--text-h1); font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.action-row--no-cs {
  grid-template-columns: 1fr;
  max-width: 400px;
}
.action-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  transition: border-color var(--transition), transform var(--transition);
}
.action-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.act-icon { font-size: 24px; flex-shrink: 0; }
.act-title {
  font-size: var(--text-small); font-weight: var(--fw-semibold);
  color: var(--color-text-primary); margin-bottom: 2px;
}
.act-desc { font-size: var(--text-caption); color: var(--color-text-secondary); }
.act-arrow { font-size: 20px; color: var(--color-text-muted); margin-left: auto; }

.loading-state { display: flex; justify-content: center; padding: var(--space-16); }
.spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; color: var(--color-text-muted); padding: var(--space-16); }

.group-card { margin-bottom: var(--space-3); }
.group-header {
  display: flex; align-items: center;
  justify-content: space-between;
  width: 100%; padding: var(--space-5) var(--space-6);
  background: transparent; border: none;
  cursor: pointer; transition: background var(--transition);
}
.group-header:hover { background: rgba(255,255,255,0.02); }

.group-title {
  font-size: var(--text-body); font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.group-arrow {
  font-size: 14px; flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-text-muted);
}
.group-arrow.rotated { transform: rotate(180deg); color: var(--color-primary); }

.group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.group-items.open { max-height: 2000px; }
.group-items-inner { padding: 0 var(--space-6) var(--space-4); }

.help-item {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.help-item:hover { color: var(--color-primary); background: rgba(240,185,11,0.05); }
.item-arrow { color: var(--color-text-muted); font-size: 16px; }

@media (max-width: 768px) {
  .action-row { grid-template-columns: 1fr; }
}
</style>
