<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'

const props = defineProps<{
  blockOrder: string[]
  blocks: Record<string, BlockData>
  editorMode?: boolean
  settings: Record<string, unknown>
}>()

const emit = defineEmits<{
  (e: 'update:setting', key: string, value: unknown): void
  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
  (e: 'inline-edit-start', key: string): void
  (e: 'inline-edit-end'): void
  (e: 'undo-redo', action: 'redo' | 'undo'): void
}>()

const s = computed(() => props.settings)
const variant = computed(() => (s.value.variant as string) || 'tips')
const title = computed(() => (s.value.title as string) || '')

const { editableAttrs, blockEditableAttrs } = useInlineEdit({
  editorMode: () => !!props.editorMode,
  onSettingUpdate: (key, value) => emit('update:setting', key, value),
  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
  onEditStart: key => emit('inline-edit-start', key),
  onEditEnd: () => emit('inline-edit-end'),
  onUndoRedo: action => emit('undo-redo', action),
})
</script>

<template>
<!-- tips/note 变体: blog-note-style -->
  <div
    v-if="variant === 'tips' || variant === 'note'"
    class="blog-note-style"
    :class="{ note: variant === 'note' }"
  >
    <span class="blog-note-style-badge">
      {{ variant === 'note' ? title || 'Tips' : 'Tips' }}
    </span>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div
      v-for="id in blockOrder"
      :key="id"
      class="blog-note-style-text"
      v-bind="blockEditableAttrs(id, 'text')"
      v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
    />
  </div>

  <!-- info 变体: blog-note-style3 -->
  <div
    v-else-if="variant === 'info'"
    class="blog-note-style3"
  >
    <div class="blog-note-style3-header">
      <h3 class="blog-note-style3-title" v-bind="editableAttrs('title')">
        {{ title || 'Note' }}
      </h3>
    </div>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div
      v-for="id in blockOrder"
      :key="id"
      class="blog-note-style3-text"
      v-bind="blockEditableAttrs(id, 'text')"
      v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
    />
  </div>
</template>

<style scoped>
.blog-note-style{background:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.blog-note-style-badge{align-items:center;background:#02a967;border-radius:5px 0 10px 0;color:#fff;display:flex;font-size:14px;font-weight:700;gap:4px;height:24px;left:0;padding:0 8px;position:absolute;top:0}.blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/idea.png);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:14px;width:14px}.blog-note-style.note .blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/note.png)}.blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}.blog-note-style3{background:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.blog-note-style3-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/94606ff0f6690ec6/info.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:22px;width:22px}.blog-note-style3-title{color:#000;font-weight:600;margin:0}.blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}@media (min-width:768px){.blog-note-style{padding:36px 16px 20px}.blog-note-style-text{font-size:16px}.blog-note-style3{border-radius:15px;padding:24px}.blog-note-style3-text{font-size:16px}}
</style>
