<template>
  <!-- Agent推荐岗位列表组件 — 展示推荐岗位卡片（可滚动） -->
  <div class="agent-chat-job-list">
    <!-- 标题 -->
    <div class="agent-chat-job-list__header">为你推荐的岗位</div>
    <!-- 推荐说明文字 -->
    <div class="agent-chat-job-list__summary">{{ summary || '根据求职目标和简历信息智能推荐' }}</div>

    <!-- 岗位列表（可滚动区域，默认展示约3.5个高度） -->
    <div class="agent-chat-job-list__scroll">
      <div
        v-for="job in jobs"
        :key="job.id"
        class="agent-chat-job-list__item"
        @click="handleClickJob(job)"
      >
        <!-- 左侧：匹配度方块 + 岗位信息 -->
        <div class="agent-chat-job-list__left">
          <!-- 匹配度环形 -->
          <div class="agent-chat-job-list__score">
            <svg class="agent-chat-job-list__ring" viewBox="0 0 62 62">
              <circle cx="31" cy="31" r="27" fill="none" stroke="#E9F4D7" stroke-width="4" />
              <circle
                cx="31" cy="31" r="27" fill="none"
                stroke="#9FD051" stroke-width="4"
                stroke-linecap="round"
                :stroke-dasharray="2 * Math.PI * 27"
                :stroke-dashoffset="2 * Math.PI * 27 * (1 - (job.matchScore || 0) / 100)"
                transform="rotate(-90 31 31)"
              />
            </svg>
            <span class="agent-chat-job-list__score-text">{{ job.matchScore || 0 }}%</span>
          </div>
          <!-- 岗位详情 -->
          <div class="agent-chat-job-list__detail">
            <!-- 第一行：岗位名称 + 公司 -->
            <div class="agent-chat-job-list__title-row">
              <span class="agent-chat-job-list__title">{{ job.title }}</span>
              <!-- 公司信息 -->
              <span v-if="job.companyShortName || job.companyName" class="agent-chat-job-list__company">
                <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" class="agent-chat-job-list__company-logo" alt="" />
                <span class="agent-chat-job-list__company-name">{{ job.companyShortName || job.companyName }}</span>
              </span>
            </div>
            <!-- 第二行：标签（地区、学历、招聘类型等） -->
            <div class="agent-chat-job-list__tags">
              <span v-if="job.regionName" class="agent-chat-job-list__tag agent-chat-job-list__tag--location">
                <svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 1.5A4.5 4.5 0 0 0 3.5 6C3.5 9.5 8 14.5 8 14.5s4.5-5 4.5-8.5A4.5 4.5 0 0 0 8 1.5Z" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
                {{ job.regionName }}
              </span>
              <span v-if="formatEducation(job.education)" class="agent-chat-job-list__tag">{{ formatEducation(job.education) }}</span>
              <span v-if="formatEmploymentType(job.recruitCategory)" class="agent-chat-job-list__tag agent-chat-job-list__tag--category">{{ formatEmploymentType(job.recruitCategory) }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧：操作按钮 -->
        <div class="agent-chat-job-list__actions" @click.stop>
          <!-- 不再推荐按钮（已加入时不显示） -->
          <button
            v-if="job.applicationStatus !== -1"
            class="agent-chat-job-list__dismiss-btn"
            @click="handleDismiss(job)"
          >不再推荐</button>
          <!-- 已加入状态 -->
          <button
            v-if="job.applicationStatus === -1"
            class="agent-chat-job-list__add-btn agent-chat-job-list__add-btn--added"
            disabled
          >
            <svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            已加入
          </button>
          <!-- 加入投递按钮 -->
          <button
            v-else
            class="agent-chat-job-list__add-btn"
            :disabled="loadingJobIds?.includes(job.id)"
            @click="handleAdd(job)"
          >
            <svg viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            加入投递
          </button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="jobs.length === 0" class="agent-chat-job-list__empty">暂无相关职位推荐</div>

    <!-- 底部按钮区域 -->
    <div v-if="jobs.length > 0" class="agent-chat-job-list__footer">
      <!-- 换一批按钮 -->
      <button class="agent-chat-job-list__refresh-btn" :disabled="refreshing" @click="handleRefresh">
        <svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M2.5 8a5.5 5.5 0 0 1 9.9-3.2M13.5 8a5.5 5.5 0 0 1-9.9 3.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M12 2v3h-3M4 14v-3h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        {{ refreshing ? '加载中...' : '换一批' }}
      </button>
      <!-- 全部添加按钮 -->
      <button class="agent-chat-job-list__add-all-btn" @click="handleAddAll">
        <svg viewBox="0 0 16 16" fill="none" width="16" height="16"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        全部添加
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AgentRecommendJob } from '@/api/agent'
import { formatEducation, formatEmploymentType } from '@/stores/index'

/** 组件 Props */
const props = defineProps<{
  /** 推荐说明文字 */
  summary: string
  /** 当前展示的岗位列表数据 */
  jobs: AgentRecommendJob[]
  /** 正在请求中的岗位 ID 列表 */
  loadingJobIds?: (string | number)[]
  /** 是否正在换一批加载中 */
  refreshing?: boolean
}>()

/** 事件 */
const emit = defineEmits<{
  /** 点击岗位查看详情 */
  (e: 'clickJob', job: AgentRecommendJob): void
  /** 添加单个岗位到待投递 */
  (e: 'add', job: AgentRecommendJob): void
  /** 全部添加 */
  (e: 'addAll'): void
  /** 换一批 */
  (e: 'refresh'): void
  /** 不再推荐 */
  (e: 'dismiss', job: AgentRecommendJob): void
}>()

/** 点击岗位 — 通知父组件打开岗位预览 */
function handleClickJob(job: AgentRecommendJob) {
  emit('clickJob', job)
}

/** 添加岗位到待投递 */
function handleAdd(job: AgentRecommendJob) {
  emit('add', job)
}

/** 全部添加 */
function handleAddAll() {
  emit('addAll')
}

/** 换一批 */
function handleRefresh() {
  emit('refresh')
}

/** 不再推荐 */
function handleDismiss(job: AgentRecommendJob) {
  emit('dismiss', job)
}
</script>

<style scoped lang="scss">
@use '../assets/styles/components/agent-chat-job-list';
</style>
