<template>
  <article class="skill-list panel">
    <nav class="status-tabs" aria-label="能力类型">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        type="button"
        :class="{ active: activeType === tab.id }"
        @click="emit('update:activeType', tab.id)"
      >
        {{ tab.label }}
      </button>
    </nav>

    <div class="list-toolbar">
      <div class="filter-set">
        <label class="search-filter">
          <i class="mdi mdi-magnify"></i>
          <input
            :value="keyword"
            type="search"
            :placeholder="searchPlaceholder"
            @input="emit('update:keyword', $event.target.value)"
          />
        </label>

        <AuditPickerFilter
          id="domain"
          title="选择业务域"
          close-label="关闭业务域选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedDomainLabel"
          :options="domainOptions"
          :selected-value="selectedDomain"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('domain', $event)"
        />

        <AuditPickerFilter
          v-if="showOwnerFilter"
          id="owner"
          title="选择负责人"
          close-label="关闭负责人选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedOwnerLabel"
          :options="ownerOptions"
          :selected-value="selectedOwner"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('owner', $event)"
        />

        <AuditPickerFilter
          v-if="showRiskLevelFilter"
          id="riskLevel"
          title="选择风险等级"
          close-label="关闭风险等级选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedRiskLevelLabel"
          :options="riskLevelOptions"
          :selected-value="selectedRiskLevel"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('riskLevel', $event)"
        />

        <AuditPickerFilter
          v-if="showRiskScenarioFilter"
          id="riskScenario"
          title="选择使用场景"
          close-label="关闭使用场景选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedRiskScenarioLabel"
          :options="riskScenarioOptions"
          :selected-value="selectedRiskScenario"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('riskScenario', $event)"
        />

        <AuditPickerFilter
          v-if="showOnlineFilter"
          id="online"
          title="选择上线状态"
          close-label="关闭上线状态选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedOnlineStateLabel"
          :options="onlineStateOptions"
          :selected-value="selectedOnlineState"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('online', $event)"
        />

        <AuditPickerFilter
          v-if="showEnabledFilter"
          id="enabled"
          title="选择启用状态"
          close-label="关闭启用状态选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedEnabledStateLabel"
          :options="enabledStateOptions"
          :selected-value="selectedEnabledState"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('enabled', $event)"
        />

        <AuditPickerFilter
          v-if="showStatusFilter"
          id="status"
          title="选择状态"
          close-label="关闭状态选择"
          :active-filter-popover="activeFilterPopover"
          :label="selectedStatusLabel"
          :options="statusOptions"
          :selected-value="selectedStatus"
          @toggle="emit('toggle-filter-popover', $event)"
          @close="emit('close-filter-popover')"
          @select="selectFilter('status', $event)"
        />
      </div>

      <div class="toolbar-actions">
        <button
          v-if="activeFilterTokens.length"
          class="ghost-filter-btn"
          type="button"
          @click="emit('reset-filters')"
        >
          <i class="mdi mdi-filter-remove-outline"></i>
          <span>清空筛选</span>
        </button>

        <button
          class="create-btn"
          type="button"
          :disabled="!canCreateRiskRule"
          @click="emit('create-risk-rule')"
        >
          <i class="mdi mdi-plus"></i>
          <span>{{ createButtonLabel }}</span>
        </button>
      </div>
    </div>

    <p class="hint"><i class="mdi mdi-information-outline"></i> {{ hintText }}</p>

    <div v-if="activeFilterTokens.length" class="active-filter-strip">
      <span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
        {{ token }}
      </span>
    </div>

    <div
      class="table-wrap"
      :class="{ 'is-empty': !loading && !errorMessage && !visibleSkills.length }"
    >
      <div v-if="loading" class="table-state">
        <TableLoadingState
          variant="panel"
          :title="`${activeTabLabel}资产同步中`"
          :message="`正在加载${activeTabLabel}资产`"
          icon="mdi mdi-view-list-outline"
        />
      </div>

      <div v-else-if="errorMessage" class="table-state error">
        <i class="mdi mdi-alert-circle-outline"></i>
        <p>{{ errorMessage }}</p>
      </div>

      <TableEmptyState
        v-else-if="!visibleSkills.length"
        :eyebrow="auditEmptyState.eyebrow"
        :title="auditEmptyState.title"
        :description="auditEmptyState.desc"
        :icon="auditEmptyState.icon"
        :action-label="auditEmptyState.actionLabel"
        :action-icon="auditEmptyState.actionIcon"
        :tone="auditEmptyState.tone"
        :art-label="auditEmptyState.artLabel"
        :tips="auditEmptyState.tips"
        @action="emit('empty-action')"
      />

      <table v-else>
        <thead>
          <tr>
            <th>{{ tableColumns.name }}</th>
            <th>{{ tableColumns.category }}</th>
            <th>{{ tableColumns.owner }}</th>
            <th>{{ tableColumns.scope }}</th>
            <th v-if="showRuntimeColumn">{{ tableColumns.runtime }}</th>
            <th v-if="showVersionColumn">{{ tableColumns.version }}</th>
            <th v-if="showStatusColumn">{{ tableColumns.status || '状态' }}</th>
            <th v-if="showMetricColumn">{{ tableColumns.metric }}</th>
            <th v-if="showOnlineColumn">是否上线</th>
            <th v-if="showEnabledColumn">是否启用</th>
            <th>{{ tableColumns.updatedAt || '最近更新' }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="skill in visibleSkills"
            :key="skill.id"
            :class="{ 'is-disabled': skill.usesJsonRiskRule && skill.statusValue === 'generating' }"
            @click="emit('open-asset-detail', skill)"
          >
            <td>
              <div class="skill-name-cell">
                <span class="skill-avatar" :class="skill.badgeTone">{{ skill.short }}</span>
                <div>
                  <strong>{{ skill.name }}</strong>
                  <span class="skill-list-subtitle">{{ skill.listSubtitle || skill.summary }}</span>
                </div>
              </div>
            </td>
            <td>{{ skill.category }}</td>
            <td>
              <span
                v-if="skill.usesJsonRiskRule"
                class="json-risk-meta-badge"
                :class="skill.riskLevelTone"
              >
                {{ skill.riskLevelLabel || '-' }}
              </span>
              <template v-else>{{ skill.owner }}</template>
            </td>
            <td><span class="scope-pill">{{ skill.scope }}</span></td>
            <td v-if="showRuntimeColumn">{{ skill.model }}</td>
            <td v-if="showVersionColumn">{{ skill.versionDisplay || skill.version }}</td>
            <td v-if="showStatusColumn">
              <span class="status-pill" :class="skill.statusTone">{{ skill.status }}</span>
            </td>
            <td v-if="showMetricColumn">{{ skill.hitRate }}</td>
            <td v-if="showOnlineColumn">
              <span class="status-pill" :class="skill.isOnlineTone">{{ skill.isOnlineLabel }}</span>
            </td>
            <td v-if="showEnabledColumn">
              <span class="status-pill" :class="skill.isEnabledTone">{{ skill.isEnabledLabel }}</span>
            </td>
            <td>{{ skill.updatedAt }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer v-if="!loading && !errorMessage && visibleSkills.length" class="list-foot">
      <span class="page-summary">当前展示 {{ visibleSkills.length }} 条资产</span>
    </footer>
  </article>
</template>

<script setup>
import AuditPickerFilter from './AuditPickerFilter.vue'
import TableEmptyState from '../shared/TableEmptyState.vue'
import TableLoadingState from '../shared/TableLoadingState.vue'

defineOptions({
  name: 'AuditAssetList'
})

defineProps({
  tabs: { type: Array, default: () => [] },
  activeType: { type: String, default: '' },
  activeTabLabel: { type: String, default: '' },
  keyword: { type: String, default: '' },
  searchPlaceholder: { type: String, default: '' },
  createButtonLabel: { type: String, default: '' },
  hintText: { type: String, default: '' },
  tableColumns: { type: Object, default: () => ({}) },
  showRuntimeColumn: { type: Boolean, default: false },
  showVersionColumn: { type: Boolean, default: false },
  showMetricColumn: { type: Boolean, default: false },
  showStatusColumn: { type: Boolean, default: false },
  showOnlineColumn: { type: Boolean, default: false },
  showEnabledColumn: { type: Boolean, default: false },
  visibleSkills: { type: Array, default: () => [] },
  auditEmptyState: { type: Object, default: () => ({}) },
  loading: { type: Boolean, default: false },
  errorMessage: { type: String, default: '' },
  selectedDomain: { type: String, default: '' },
  selectedOwner: { type: String, default: '' },
  selectedRiskLevel: { type: String, default: '' },
  selectedStatus: { type: String, default: '' },
  selectedRiskScenario: { type: String, default: '' },
  selectedOnlineState: { type: String, default: '' },
  selectedEnabledState: { type: String, default: '' },
  selectedDomainLabel: { type: String, default: '' },
  selectedOwnerLabel: { type: String, default: '' },
  selectedRiskLevelLabel: { type: String, default: '' },
  selectedStatusLabel: { type: String, default: '' },
  selectedRiskScenarioLabel: { type: String, default: '' },
  selectedOnlineStateLabel: { type: String, default: '' },
  selectedEnabledStateLabel: { type: String, default: '' },
  showRiskScenarioFilter: { type: Boolean, default: false },
  showOwnerFilter: { type: Boolean, default: false },
  showRiskLevelFilter: { type: Boolean, default: false },
  showStatusFilter: { type: Boolean, default: false },
  showOnlineFilter: { type: Boolean, default: false },
  showEnabledFilter: { type: Boolean, default: false },
  domainOptions: { type: Array, default: () => [] },
  ownerOptions: { type: Array, default: () => [] },
  riskLevelOptions: { type: Array, default: () => [] },
  statusOptions: { type: Array, default: () => [] },
  riskScenarioOptions: { type: Array, default: () => [] },
  onlineStateOptions: { type: Array, default: () => [] },
  enabledStateOptions: { type: Array, default: () => [] },
  activeFilterPopover: { type: String, default: '' },
  activeFilterTokens: { type: Array, default: () => [] },
  canCreateRiskRule: { type: Boolean, default: false }
})

const emit = defineEmits([
  'update:activeType',
  'update:keyword',
  'toggle-filter-popover',
  'close-filter-popover',
  'select-filter',
  'reset-filters',
  'create-risk-rule',
  'empty-action',
  'open-asset-detail'
])

function selectFilter(type, value) {
  emit('select-filter', type, value)
}
</script>

<style scoped src="../../assets/styles/views/audit-view.css"></style>
<style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
