<script setup lang="ts">
import { ref } from 'vue'
import type { Product } from '@/types/troubleshoot'

interface Props {
  products: Product[]
  loading?: boolean
  selectedProductId?: string | null
  selectedNodeType?: 'documents' | 'faqs' | null
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  selectedProductId: null,
  selectedNodeType: null,
})

const emit = defineEmits<{
  select: [productId: string, productName: string, nodeType: 'documents' | 'faqs']
}>()

// 展开状态
const expandedProducts = ref<Set<string>>(new Set())

function toggleProduct(productId: string) {
  const newSet = new Set(expandedProducts.value)
  if (newSet.has(productId)) {
    newSet.delete(productId)
  } else {
    newSet.add(productId)
  }
  expandedProducts.value = newSet
}

function selectNode(product: Product, nodeType: 'documents' | 'faqs') {
  emit('select', product.id, product.name, nodeType)
}

function isNodeActive(productId: string, nodeType: 'documents' | 'faqs'): boolean {
  return props.selectedProductId === productId && props.selectedNodeType === nodeType
}

function getProductIcon(product: Product): string {
  const name = product.name.toLowerCase()
  if (name.includes('门口屏')) return '🖥️'
  if (name.includes('桌牌')) return '🏷️'
  if (name.includes('无纸化')) return '📱'
  if (name.includes('预定')) return '📅'
  if (name.includes('会管')) return '👥'
  if (name.includes('运维')) return '🔧'
  return '📦'
}
</script>

<template>
  <div class="product-tree" v-loading="loading">
    <div v-if="products.length === 0 && !loading" class="empty">
      <span class="empty-icon">🔍</span>
      <p>未找到匹配的产品</p>
    </div>

    <div v-else class="tree-list">
      <div
        v-for="product in products"
        :key="product.id"
        class="product-node"
      >
        <!-- 产品节点 -->
        <div
          class="product-header"
          @click="toggleProduct(product.id)"
        >
          <span class="expand-icon" :class="{ expanded: expandedProducts.has(product.id) }">
            ▶
          </span>
          <span class="product-icon">{{ getProductIcon(product) }}</span>
          <span class="product-name">{{ product.name }}</span>
        </div>

        <!-- 子节点 -->
        <transition name="slide">
          <div
            v-show="expandedProducts.has(product.id)"
            class="product-children"
          >
            <div
              class="child-node"
              :class="{ active: isNodeActive(product.id, 'documents') }"
              @click.stop="selectNode(product, 'documents')"
            >
              <span class="child-icon">📁</span>
              <span class="child-label">产品资料</span>
              <span v-if="product.documents?.length" class="count-badge">
                {{ product.documents.length }}
              </span>
            </div>

            <div
              class="child-node"
              :class="{ active: isNodeActive(product.id, 'faqs') }"
              @click.stop="selectNode(product, 'faqs')"
            >
              <span class="child-icon">❓</span>
              <span class="child-label">常见问题</span>
              <span v-if="product.faq_count" class="count-badge">
                {{ product.faq_count }}
              </span>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #86909c;

  .empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
  }

  p {
    font-size: 13px;
    margin: 0;
  }
}

.tree-list {
  padding: 0 8px;
}

.product-node {
  margin-bottom: 2px;
}

.product-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;

  &:hover {
    background: #f2f3f5;
  }
}

.expand-icon {
  font-size: 10px;
  color: #86909c;
  width: 14px;
  text-align: center;
  transition: transform 0.2s;
  flex-shrink: 0;

  &.expanded {
    transform: rotate(90deg);
  }
}

.product-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.product-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-children {
  margin-left: 24px;
  padding: 2px 0 4px;
}

.child-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: #4e5969;
  transition: all 0.2s;
  margin-bottom: 1px;

  &:hover {
    background: #e8f3ff;
    color: #165dff;
  }

  &.active {
    background: #e8f3ff;
    color: #165dff;
    font-weight: 500;
  }
}

.child-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.child-label {
  flex: 1;
}

.count-badge {
  background: #f2f3f5;
  color: #86909c;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 20px;
  text-align: center;

  .child-node.active & {
    background: #bedaff;
    color: #165dff;
  }
}

// 展开动画
.slide-enter-active,
.slide-leave-active {
  transition: all 0.2s ease;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
}

.slide-enter-to,
.slide-leave-from {
  opacity: 1;
  max-height: 200px;
}
</style>
