<script setup lang="ts">
import type { DocumentValidationIssue } from './types';

import { computed } from 'vue';

const props = defineProps<{
  issues: DocumentValidationIssue[];
}>();

const emit = defineEmits<{
  locate: [issue: DocumentValidationIssue];
}>();

const errorCount = computed(
  () => props.issues.filter((issue) => issue.severity === 'ERROR').length,
);
const warningCount = computed(
  () => props.issues.filter((issue) => issue.severity === 'WARNING').length,
);
</script>

<template>
  <section class="validation-panel">
    <header class="validation-panel__header">
      <div>
        <h3>校验结果</h3>
        <p>{{ errorCount }} 个错误 · {{ warningCount }} 个警告</p>
      </div>
    </header>
    <div v-if="issues.length > 0" class="validation-panel__list">
      <button
        v-for="(issue, index) in issues"
        :key="`${issue.path}-${issue.line}-${issue.code}-${index}`"
        type="button"
        class="validation-panel__item"
        :class="`is-${issue.severity.toLowerCase()}`"
        @click="emit('locate', issue)"
      >
        <span class="validation-panel__severity">
          {{
            issue.severity === 'ERROR'
              ? '错误'
              : issue.severity === 'WARNING'
                ? '警告'
                : '提示'
          }}
        </span>
        <strong>{{ issue.message }}</strong>
        <small v-if="issue.path">
          {{ issue.path
          }}<template v-if="issue.line">:{{ issue.line }}</template>
        </small>
        <span v-if="issue.suggestion" class="validation-panel__suggestion">
          建议：{{ issue.suggestion }}
        </span>
      </button>
    </div>
    <div v-else class="validation-panel__empty">
      <strong>校验通过</strong>
      <span>未发现需要处理的问题。</span>
    </div>
  </section>
</template>

<style scoped>
.validation-panel {
  min-height: 100%;
}

.validation-panel__header {
  padding: var(--space-6);
  border-bottom: 1px solid hsl(var(--line-subtle));
}

.validation-panel__header h3,
.validation-panel__header p {
  margin: 0;
}

.validation-panel__header p {
  margin-top: var(--space-1);
  font-size: 13px;
  color: hsl(var(--text-muted));
}

.validation-panel__list {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.validation-panel__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
  background: hsl(var(--surface-panel));
  border: 1px solid hsl(var(--line-subtle));
  border-radius: var(--radius-toolbar);
}

.validation-panel__item:hover {
  border-color: hsl(var(--primary) / 42%);
}

.validation-panel__item:focus-visible {
  outline: 2px solid hsl(var(--primary) / 72%);
  outline-offset: 2px;
}

.validation-panel__severity {
  width: fit-content;
  padding: 2px 7px;
  font-size: 11px;
  border-radius: var(--radius-pill, 999px);
}

.validation-panel__item.is-error .validation-panel__severity {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 12%);
}

.validation-panel__item.is-warning .validation-panel__severity {
  color: hsl(var(--warning));
  background: hsl(var(--warning) / 14%);
}

.validation-panel__item small {
  color: hsl(var(--text-muted));
}

.validation-panel__suggestion {
  font-size: 12px;
  line-height: 1.55;
  color: hsl(var(--nav-item-active-foreground));
}

.validation-panel__empty {
  display: grid;
  gap: var(--space-2);
  padding: calc(var(--space-6) * 2) var(--space-6);
  color: hsl(var(--text-muted));
  text-align: center;
}

.validation-panel__empty strong {
  color: hsl(var(--foreground));
}
</style>
