<template>
  <div class="block-renderer">
    <template v-for="(block, i) in blocks" :key="block.id || i">
      <div
        class="yh-block"
        :class="animClass(block)"
        :style="animStyle(block)"
      >
        <template v-if="block.type === 'heading'">
          <component :is="headingTag(block)" class="builder-heading">{{ block.props?.text }}</component>
        </template>
        <template v-else-if="block.type === 'text'">
          <p v-if="!block.props?.html" class="builder-text">{{ block.props?.text }}</p>
          <div v-else class="builder-text" v-html="block.props?.html || block.props?.text"></div>
        </template>
        <template v-else-if="block.type === 'link_list'">
          <nav class="builder-links">
            <a
              v-for="(item, j) in (block.props?.items || [])"
              :key="j"
              :href="item.url || '#'"
              :target="item.target || '_self'"
              rel="noopener"
            >{{ item.label }}</a>
          </nav>
        </template>
        <template v-else-if="block.type === 'button'">
          <a
            :href="block.props?.url || '#'"
            class="builder-btn"
            :class="block.props?.variant === 'ghost' ? 'builder-btn--ghost' : 'builder-btn--primary'"
            :target="block.props?.target || '_self'"
            rel="noopener"
          >{{ block.props?.text }}</a>
        </template>
        <template v-else-if="block.type === 'html'">
          <div class="builder-html" v-html="block.props?.html"></div>
        </template>
        <template v-else-if="block.type === 'spacer'">
          <div :style="{ height: (block.props?.height || 16) + 'px' }" aria-hidden="true"></div>
        </template>
        <template v-else-if="block.type === 'divider'">
          <hr style="border: none; border-top: 1px solid #e4e7ed; margin: 24px 0" />
        </template>
        <template v-else-if="block.type === 'section'">
          <section
            class="builder-section"
            :style="sectionStyle(block.props)"
          >
            <BlockRenderer v-if="block.children?.length" :blocks="block.children" />
          </section>
        </template>
        <template v-else>
          <p class="builder-unknown">未知模块: {{ block.type }}</p>
        </template>
      </div>
    </template>
  </div>
</template>

<script setup>
defineOptions({ name: 'BlockRenderer' })

defineProps({
  blocks: { type: Array, default: () => [] }
})

function animClass(block) {
  const enter = block.animation?.enter || 'fadeIn'
  if (enter === 'none') return 'yh-anim-none'
  const map = {
    fadeIn: 'yh-anim-fadeIn',
    slideUp: 'yh-anim-slideUp',
    slideLeft: 'yh-anim-slideLeft',
    zoomIn: 'yh-anim-zoomIn'
  }
  return map[enter] || 'yh-anim-fadeIn'
}

function animStyle(block) {
  const a = block.animation || {}
  const delay = a.delay_ms != null ? a.delay_ms : 0
  const duration = a.duration_ms != null ? a.duration_ms : 600
  return {
    animationDelay: `${delay}ms`,
    animationDuration: `${duration}ms`
  }
}

function headingTag(block) {
  const lv = Math.min(6, Math.max(1, block.props?.level || 2))
  return `h${lv}`
}

function sectionStyle(props) {
  if (!props) return {}
  return {
    padding: props.padding || '16px 0',
    maxWidth: props.maxWidth || '100%',
    margin: '0 auto',
    background: props.background || 'transparent'
  }
}
</script>

<style scoped>
.builder-unknown {
  color: #909399;
  font-size: 13px;
}
</style>
