<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import ProductTree from '@/components/troubleshoot/ProductTree.vue'
import DocumentsPanel from '@/components/troubleshoot/DocumentsPanel.vue'
import FAQsPanel from '@/components/troubleshoot/FAQsPanel.vue'
import { getProducts } from '@/api/troubleshoot'
import type { Product } from '@/types/troubleshoot'
import { ElMessage } from 'element-plus'

// 产品列表
const products = ref<Product[]>([])
const loading = ref(true)

// 当前选中
const selectedProductId = ref<string | null>(null)
const selectedProductName = ref('')
const selectedNodeType = ref<'documents' | 'faqs' | null>(null)

// 搜索关键词
const searchKeyword = ref('')

// 过滤后的产品列表
const filteredProducts = computed(() => {
  if (!searchKeyword.value) return products.value
  const keyword = searchKeyword.value.toLowerCase()
  return products.value.filter(p =>
    p.name.toLowerCase().includes(keyword) ||
    p.tags?.some(t => t.toLowerCase().includes(keyword))
  )
})

// 加载产品列表
async function loadProducts() {
  try {
    const res = await getProducts()
    if (res.success) {
      products.value = res.products
    }
  } catch (e) {
    ElMessage.error('加载产品列表失败')
  } finally {
    loading.value = false
  }
}

// 处理节点选择
function handleNodeSelect(productId: string, productName: string, nodeType: 'documents' | 'faqs') {
  selectedProductId.value = productId
  selectedProductName.value = productName
  selectedNodeType.value = nodeType
}

onMounted(() => {
  loadProducts()
})
</script>

<template>
  <div class="page-offline-troubleshoot">
    <AppNavbar
      show-module
      module-label="问题排查（离线）"
      home-path="/troubleshoot"
      logs-path="/troubleshoot/logs"
    />

    <div class="main-container">
      <!-- 左侧面板：产品树 -->
      <aside class="left-panel">
        <div class="panel-title">
          <span class="title-icon">📦</span>
          <span>产品列表</span>
        </div>

        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索产品..."
            clearable
            :prefix-icon="'Search'"
          />
        </div>

        <ProductTree
          :products="filteredProducts"
          :loading="loading"
          :selected-product-id="selectedProductId"
          :selected-node-type="selectedNodeType"
          @select="handleNodeSelect"
        />
      </aside>

      <!-- 右侧面板：内容区 -->
      <main class="right-panel">
        <div v-if="!selectedProductId" class="empty-state">
          <div class="empty-icon">📋</div>
          <h3>请从左侧选择产品</h3>
          <p>点击产品下的「产品资料」或「常见问题」查看详细内容</p>
        </div>

        <DocumentsPanel
          v-else-if="selectedNodeType === 'documents'"
          :product-id="selectedProductId"
          :product-name="selectedProductName"
        />

        <FAQsPanel
          v-else-if="selectedNodeType === 'faqs'"
          :product-id="selectedProductId"
          :product-name="selectedProductName"
        />
      </main>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-offline-troubleshoot {
  min-height: 100vh;
  background: #f0f2f5;
  padding-top: 56px;
}

.main-container {
  display: flex;
  height: calc(100vh - 56px);
}

.left-panel {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  border-bottom: 1px solid #f0f0f0;

  .title-icon {
    font-size: 20px;
  }
}

.search-box {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.right-panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #f0f2f5;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #86909c;

  .empty-icon {
    font-size: 72px;
    margin-bottom: 20px;
    opacity: 0.6;
  }

  h3 {
    font-size: 18px;
    font-weight: 500;
    color: #4e5969;
    margin-bottom: 8px;
  }

  p {
    font-size: 14px;
  }
}

// ============================================================
// 响应式适配
// ============================================================
@media screen and (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }

  .left-panel {
    width: 100%;
    height: auto;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }

  .right-panel {
    padding: 16px;
  }
}
</style>
