<template>
  <view class="page fade-in">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-inner">
        <text class="search-icon">🔍</text>
        <input class="search-input" v-model="keyword" placeholder="搜索岗位或公司..." @input="onSearch" />
        <text class="search-clear" v-if="keyword" @tap="keyword = ''; onSearch()">✕</text>
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="tabs">
      <view class="tab" :class="tab === 'all' && 'tab-active'" @tap="tab = 'all'; tabIndex = 0">
        <text class="tab-text">全部</text>
      </view>
      <view class="tab" :class="tab === 'ai' && 'tab-active'" @tap="tab = 'ai'; tabIndex = 1">
        <text class="tab-text">🤖 AI 岗位</text>
      </view>
      <view class="tab" :class="tab === 'traditional' && 'tab-active'" @tap="tab = 'traditional'; tabIndex = 2">
        <text class="tab-text">💼 传统岗位</text>
      </view>
    </view>

    <!-- 结果计数 -->
    <view class="result-info" v-if="!loading">
      <text class="result-count">共 {{ filteredPositions.length }} 个岗位</text>
    </view>

    <!-- 岗位列表 -->
    <view class="position-list">
      <view class="pos-item card" v-for="(item, idx) in filteredPositions" :key="idx" @click="startInterview(item)">
        <view class="pos-left">
          <view class="pos-icon-wrap">
            <text class="pos-icon">{{ item.icon || '💼' }}</text>
          </view>
          <view class="pos-body">
            <text class="pos-name">{{ item.name }}</text>
            <view class="pos-meta-row" v-if="item.company">
              <text class="pos-company">{{ item.company }}</text>
              <text class="pos-badge" :class="item.category === 'ai' ? 'badge-ai' : 'badge-traditional'">{{ item.category === 'ai' ? 'AI' : '传统' }}</text>
            </view>
          </view>
        </view>
        <view class="pos-right">
          <text class="pos-salary" v-if="item.salary">{{ item.salary }}</text>
          <text class="pos-action">模拟 ›</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="!loading && filteredPositions.length === 0">
      <text class="empty-icon">🔍</text>
      <text class="empty-text">{{ keyword ? '没有匹配的岗位' : '暂无岗位数据' }}</text>
    </view>

    <!-- 加载 -->
    <view class="loading-bar" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { api } from '../../config'

const keyword = ref('')
const tab = ref('all')
const tabIndex = ref(0)
const positions = ref([])
const loading = ref(true)

const filteredPositions = computed(() => {
  let list = positions.value
  if (tab.value !== 'all') {
    list = list.filter(p => p.category === tab.value)
  }
  if (keyword.value.trim()) {
    const kw = keyword.value.trim().toLowerCase()
    list = list.filter(p => (p.name && p.name.toLowerCase().includes(kw)) || (p.company && p.company.toLowerCase().includes(kw)))
  }
  return list
})

onMounted(async () => {
  try {
    const res = await uni.request({ url: api('/positions/hot'), method: 'GET' })
    if (res.statusCode === 200) positions.value = res.data || []
  } catch (e) { console.error(e) }
  finally { loading.value = false }
})

function onSearch() { /* reactivity handles filtering via computed */ }

const startInterview = (pos) => uni.navigateTo({ url: `/pages/interview/interview?position=${encodeURIComponent(pos.name)}` })
</script>

<style scoped>
.page { min-height: 100vh; background: var(--color-bg); padding: 20rpx 32rpx 40rpx; }

/* 搜索 */
.search-bar { padding-top: 16rpx; margin-bottom: 20rpx; }
.search-inner {
  height: 76rpx; background: var(--color-surface); border-radius: var(--radius-round);
  display: flex; align-items: center; padding: 0 24rpx; gap: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.search-icon { font-size: 26rpx; }
.search-input { flex: 1; font-size: 26rpx; color: var(--color-text); height: 100%; }
.search-clear { font-size: 28rpx; color: var(--color-text-tertiary); padding: 8rpx; }

/* 分类标签 */
.tabs { display: flex; gap: 12rpx; margin-bottom: 16rpx; }
.tab {
  padding: 12rpx 24rpx; border-radius: var(--radius-round); background: var(--color-surface);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.tab-active { background: var(--color-primary); }
.tab-active .tab-text { color: #fff; }
.tab-text { font-size: 24rpx; color: var(--color-text-secondary); font-weight: 500; }

/* 结果信息 */
.result-info { margin-bottom: 16rpx; }
.result-count { font-size: 22rpx; color: var(--color-text-tertiary); }

/* 岗位列表 */
.position-list { display: flex; flex-direction: column; gap: 16rpx; }
.pos-item {
  padding: 24rpx 28rpx; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between;
}
.pos-item:active { transform: scale(0.98); }
.pos-left { display: flex; align-items: center; gap: 16rpx; flex: 1; min-width: 0; }
.pos-icon-wrap { width: 56rpx; height: 56rpx; background: #F3F4F6; border-radius: 14rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pos-icon { font-size: 28rpx; }
.pos-body { flex: 1; min-width: 0; }
.pos-name { font-size: 28rpx; font-weight: 600; color: var(--color-text); display: block; }
.pos-meta-row { display: flex; align-items: center; gap: 10rpx; margin-top: 6rpx; }
.pos-company { font-size: 22rpx; color: var(--color-text-tertiary); }
.pos-badge { font-size: 18rpx; padding: 2rpx 12rpx; border-radius: var(--radius-round); font-weight: 500; }
.badge-ai { background: #FEF3C7; color: #92400E; }
.badge-traditional { background: #EEF2FF; color: var(--color-primary); }
.pos-right { text-align: right; flex-shrink: 0; margin-left: 16rpx; }
.pos-salary { font-size: 24rpx; color: var(--color-primary); font-weight: 600; display: block; margin-bottom: 4rpx; }
.pos-action { font-size: 22rpx; color: var(--color-text-tertiary); }

/* 空状态 */
.empty { text-align: center; padding: 80rpx 0; }
.empty-icon { font-size: 56rpx; display: block; margin-bottom: 16rpx; }
.empty-text { font-size: 28rpx; color: var(--color-text-secondary); }

/* 加载 */
.loading-bar { text-align: center; padding: 60rpx; }
.loading-text { font-size: 24rpx; color: var(--color-text-tertiary); }
</style>
