<script setup lang="ts">
/**
 * C 端代码块：hljs 高亮后用 mp-html 渲染，样式内联适配暗色。
 */
import { computed, watch } from 'vue'
import { highlightCodeBlock, preloadMarkdownRenderer } from '../lib/markdownRenderer'

const props = withDefaults(defineProps<{
  code?: string
  language?: string
}>(), {
  code: '',
  language: '',
})

preloadMarkdownRenderer()

const html = computed(() => highlightCodeBlock(props.code || '(empty)', props.language))

watch(() => props.code, () => {
  /* 触发 computed 刷新即可 */
})
</script>

<template>
  <view class="code-block">
    <mp-html :content="html" container-style="overflow-x:auto;" />
  </view>
</template>

<style scoped lang="scss">
/* mp-html 内样式有限，用 :deep 尽量覆盖；主要靠内联 class */
.code-block {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
:deep(.ios-code-container) {
  background: #1e1e1e;
  border-radius: 16rpx;
  overflow: hidden;
}
:deep(.mac-window-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx;
  background: #282828;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
:deep(.mac-dots) { display: flex; gap: 10rpx; }
:deep(.dot) {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  display: inline-block;
}
:deep(.dot.red) { background: #ff5f56; }
:deep(.dot.yellow) { background: #ffbd2e; }
:deep(.dot.green) { background: #27c93f; }
:deep(.mac-lang) {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}
:deep(.code-pre) {
  margin: 0;
  padding: 24rpx;
  overflow-x: auto;
  background: #1e1e1e !important;
}
:deep(.hljs) {
  background: transparent !important;
  color: #abb2bf;
  font-family: 'JetBrains Mono', monospace;
  font-size: 24rpx;
  line-height: 1.65;
  white-space: pre;
}
/* atom-one-dark 精简 token */
:deep(.hljs-comment),
:deep(.hljs-quote) { color: #5c6370; font-style: italic; }
:deep(.hljs-keyword),
:deep(.hljs-selector-tag),
:deep(.hljs-subst) { color: #c678dd; }
:deep(.hljs-number),
:deep(.hljs-literal),
:deep(.hljs-variable),
:deep(.hljs-template-variable),
:deep(.hljs-tag .hljs-attr) { color: #d19a66; }
:deep(.hljs-string),
:deep(.hljs-doctag) { color: #98c379; }
:deep(.hljs-title),
:deep(.hljs-section),
:deep(.hljs-selector-id) { color: #e06c75; }
:deep(.hljs-type),
:deep(.hljs-class .hljs-title) { color: #e5c07b; }
:deep(.hljs-tag),
:deep(.hljs-name),
:deep(.hljs-attribute) { color: #e06c75; }
:deep(.hljs-regexp),
:deep(.hljs-link) { color: #56b6c2; }
:deep(.hljs-symbol),
:deep(.hljs-bullet) { color: #61afef; }
:deep(.hljs-built_in),
:deep(.hljs-builtin-name) { color: #e6c07b; }
:deep(.hljs-meta) { color: #61afef; }
:deep(.hljs-deletion) { background: #392b2b; }
:deep(.hljs-addition) { background: #2b392f; }
:deep(.hljs-emphasis) { font-style: italic; }
:deep(.hljs-strong) { font-weight: 700; }
</style>
