<template>
  <div class="result-json-container">
    <pre class="result-json" v-html="highlightedJson"></pre>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  data: any[]
}>()

// 转义 HTML
const escapeHtml = (str: string) => str
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')

// JSON 高亮
const highlightedJson = computed(() => {
  const json = JSON.stringify(props.data, null, 2)
  if (!json) return ''

  return escapeHtml(json)
    .replace(/: ("(?:[^"\\]|\\.)*")/g, ': <span class="json-string">$1</span>')
    .replace(/: (-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, ': <span class="json-number">$1</span>')
    .replace(/: (true|false|null)/g, ': <span class="json-boolean">$1</span>')
    .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
})
</script>

<style scoped>
.result-json-container {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: var(--spacing-sm, 8px);
}

.result-json {
  margin: 0;
  padding: var(--spacing-md, 16px);
  border-radius: var(--border-radius-medium, 6px);
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: linear-gradient(135deg, var(--color-bg-3) 0%, var(--color-bg-2) 100%);
  color: var(--color-text-2);
  border: 1px solid var(--color-border-2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.result-json :deep(.json-key) {
  color: rgb(var(--arcoblue-6, 22, 93, 255));
  font-weight: 500;
}

.result-json :deep(.json-string) {
  color: rgb(var(--green-6, 0, 180, 42));
}

.result-json :deep(.json-number) {
  color: rgb(var(--orange-6, 255, 125, 0));
}

.result-json :deep(.json-boolean) {
  color: rgb(var(--purple-6, 114, 46, 209));
  font-weight: 500;
}
</style>
