<template>
  <view class="app-container pb-20">
    <TopBar title="帮助中心" show-back />

    <view class="px-4 py-4">
      <!-- 角色提示 -->
      <view class="card p-4 mb-4">
        <view class="flex items-center">
          <view class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-3">
            <text class="uni-icons uniui-person-filled text-primary"></text>
          </view>
          <view>
            <text class="text-sm text-gray-500">当前角色</text>
            <text class="text-base font-semibold text-gray-800">{{ roleText }}</text>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="card p-4 mb-4">
        <view class="flex items-center mb-4">
          <text class="uni-icons uniui-help-filled text-primary mr-2"></text>
          <text class="text-base font-semibold text-gray-800">常见问题</text>
        </view>

        <view class="gap-y-3">
          <view
            v-for="(faq, index) in roleFaqs"
            :key="faq.id"
            class="border-b border-gray-100 pb-3"
            :class="index === roleFaqs.length - 1 ? 'border-b-0 pb-0' : ''"
          >
            <view class="flex justify-between items-center" @click="toggleFaq(index)">
              <text class="text-sm text-gray-700 flex-1 pr-2">{{ faq.question }}</text>
              <text
                class="uni-icons uniui-arrowdown text-gray-400 text-xs transition-transform"
                :class="expandedIndex === index ? 'rotate-180' : ''"
              ></text>
            </view>
            <view v-if="expandedIndex === index" class="mt-2 text-gray-500 text-sm bg-gray-50 rounded-lg p-3">
              {{ faq.answer }}
            </view>
          </view>
        </view>
      </view>

      <!-- 联系客服 -->
      <view class="card p-4">
        <view class="flex items-center mb-4">
          <text class="uni-icons uniui-phone-filled text-success mr-2"></text>
          <text class="text-base font-semibold text-gray-800">联系客服</text>
        </view>
        <view class="flex items-center justify-between py-3 border-b border-gray-100" @click="makePhoneCall('400-888-8888')">
          <view class="flex items-center">
            <text class="uni-icons uniui-phone text-primary mr-3"></text>
            <text class="text-sm text-gray-700">客服热线</text>
          </view>
          <text class="text-primary text-sm">400-888-8888</text>
        </view>
        <view class="flex items-center justify-between py-3 border-b border-gray-100">
          <view class="flex items-center">
            <text class="uni-icons uniui-email text-primary mr-3"></text>
            <text class="text-sm text-gray-700">电子邮箱</text>
          </view>
          <text class="text-gray-600 text-sm">service@qingdaofu.com</text>
        </view>
        <view class="flex items-center justify-between py-3">
          <view class="flex items-center">
            <text class="uni-icons uniui-clock-filled text-primary mr-3"></text>
            <text class="text-sm text-gray-700">服务时间</text>
          </view>
          <text class="text-gray-600 text-sm">9:00-18:00</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { useAuthStore } from '@/stores/auth'
import { useCommonStore } from '@/stores/common'
import { getRoleText } from '@/utils'

const authStore = useAuthStore()
const commonStore = useCommonStore()

const role = computed(() => authStore.userRole || 'sales')
const roleText = computed(() => getRoleText(role.value))

const roleFaqs = computed(() => {
  return commonStore.faqs.filter((faq) => faq.category === role.value || faq.category === 'common')
})

const expandedIndex = ref<number | null>(null)

function toggleFaq(index: number) {
  expandedIndex.value = expandedIndex.value === index ? null : index
}

function makePhoneCall(phone: string) {
  uni.makePhoneCall({ phoneNumber: phone })
}
</script>
