<template>
  <section class="json-risk-editor-shell panel">
    <div
      v-if="selectedSkill.riskRuleGenerationFailed"
      class="json-risk-generation-failure"
    >
      <i class="mdi mdi-alert-circle-outline"></i>
      <div>
        <h3>风险规则生成失败</h3>
        <p>这条规则没有生成出可执行的 JSON 模板和流程图。管理员可以删除后重新创建。</p>
        <small v-if="selectedSkill.riskRuleGenerationError">
          失败原因：{{ selectedSkill.riskRuleGenerationError }}
        </small>
      </div>
    </div>

    <div v-else class="json-risk-editor-body">
      <section class="json-risk-main-stage">
        <article class="detail-card panel json-risk-summary-card">
          <div class="card-head">
            <div>
              <h3>基本信息</h3>
              <p>这条规则的业务域、风险等级、创建时间、上线状态和最近操作。</p>
            </div>
          </div>
          <div class="json-risk-meta-grid">
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">业务域</span>
              <span class="json-risk-meta-value">{{ selectedSkill.category || '-' }}</span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">适用场景</span>
              <span class="json-risk-meta-value">{{ selectedSkill.riskCategory || selectedSkill.scope || '-' }}</span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">业务环节</span>
              <span class="json-risk-meta-value">{{ selectedSkill.businessStageLabel || '-' }}</span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">风险等级</span>
              <span class="json-risk-meta-value">
                <span class="json-risk-meta-badge" :class="selectedSkill.riskRuleSeverity">
                  {{ selectedSkill.riskRuleSeverityLabel || '-' }}
                </span>
              </span>
            </div>

            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">是否上线</span>
              <span class="json-risk-meta-value">
                <span class="json-risk-meta-badge" :class="selectedSkill.isOnlineValue ? 'test-passed' : 'test-pending'">
                  {{ selectedSkill.isOnlineLabel || '待上线' }}
                </span>
              </span>
            </div>

            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">测试状态</span>
              <span class="json-risk-meta-value">
                <span class="json-risk-meta-badge" :class="riskRuleTestPassed ? 'test-passed' : 'test-pending'">
                  {{ riskRuleTestPassed ? '已确认通过' : '待测试确认' }}
                </span>
              </span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">创建者</span>
              <span class="json-risk-meta-value">{{ selectedSkill.creator || selectedSkill.publisher || '-' }}</span>
            </div>

            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">创建时间</span>
              <span class="json-risk-meta-value">
                {{ selectedSkill.riskRuleCreatedAt || selectedSkill.updatedAt }}
                <span v-if="selectedSkill.riskRuleAgeLabel" class="meta-value-hint">
                  ({{ selectedSkill.riskRuleAgeLabel }})
                </span>
              </span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">上线时间</span>
              <span class="json-risk-meta-value">{{ selectedSkill.publishedAt || '-' }}</span>
            </div>
            <div class="json-risk-meta-item">
              <span class="json-risk-meta-label">最后操作</span>
              <span class="json-risk-meta-value">{{ selectedSkill.lastOperationLabel || '-' }}</span>
            </div>
            <div class="json-risk-meta-item full-width">
              <span class="json-risk-meta-label">使用字段</span>
              <span class="json-risk-meta-value">{{ selectedSkill.riskRuleFieldSummary || '-' }}</span>
            </div>
          </div>
        </article>

        <article
          v-if="selectedSkill.riskRuleBusinessDescription"
          class="detail-card panel json-risk-description-card"
        >
          <div class="card-head">
            <div>
              <h3>业务说明</h3>
              <p>面向规则制定者和审核人的自然语言说明。</p>
            </div>
          </div>
          <p class="json-risk-description-text">{{ selectedSkill.riskRuleBusinessDescription }}</p>
          <p
            v-if="selectedSkill.riskRuleSourceRef"
            class="json-risk-description-source"
          >
            来源：{{ selectedSkill.riskRuleSourceRef }}
          </p>
        </article>

        <AuditReleaseMonitorPanel
          :release-state="releaseState"
          :review-queue="releaseQueue"
          :loading="releaseLoading"
          :error="releaseError"
          :action="releaseAction"
          :can-review="canReviewRelease"
          @refresh="emit('refresh-release')"
          @label="(observationId, label) => emit('label-release', observationId, label)"
        />

        <article class="detail-card panel json-risk-flow-card">
          <div class="card-head">
            <div>
              <h3>判断流程</h3>
              <p>规则从业务单据开始，读取字段证据后按判断依据决定是否进入复核。</p>
            </div>
          </div>
          <RiskRuleFlowDiagram
            :svg="selectedSkill.riskRuleFlowDiagramSvg"
            :flow="selectedSkill.riskRuleFlow"
            :fields="selectedSkill.riskRuleFields"
            :severity="selectedSkill.riskRuleSeverity"
            :severity-label="selectedSkill.riskRuleSeverityLabel"
          />
        </article>
      </section>
    </div>
  </section>
</template>

<script setup>
import RiskRuleFlowDiagram from '../shared/RiskRuleFlowDiagram.vue'
import AuditReleaseMonitorPanel from './AuditReleaseMonitorPanel.vue'

defineOptions({
  name: 'AuditJsonRiskRuleDetail'
})

defineProps({
  selectedSkill: { type: Object, required: true },
  riskRuleTestPassed: { type: Boolean, default: false },
  releaseState: { type: Object, default: null },
  releaseQueue: { type: Object, default: null },
  releaseLoading: { type: Boolean, default: false },
  releaseError: { type: String, default: '' },
  releaseAction: { type: String, default: '' },
  canReviewRelease: { type: Boolean, default: false }
})

const emit = defineEmits(['refresh-release', 'label-release'])
</script>

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