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

import { computed, onMounted, ref } 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 dismissKey = computed(() => (s.value.dismiss_key as string) || '')
// dismissKey 为空时也允许关闭，只是本次会话内关闭不持久化
const storageKey = computed(() => (dismissKey.value ? `retention-banner-dismissed:${dismissKey.value}` : ''))

const dismissed = ref(false)

// 初始挂载时读取持久化状态；editorMode 下跳过以方便运营预览样式
onMounted(() => {
  if (props.editorMode)
    return
  if (storageKey.value && typeof localStorage !== 'undefined' && localStorage.getItem(storageKey.value)) {
    dismissed.value = true
  }
})

function handleClose() {
  if (storageKey.value && typeof localStorage !== 'undefined') {
    localStorage.setItem(storageKey.value, '1')
  }
  dismissed.value = true
}

const { editableAttrs } = 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>
  <section v-if="!dismissed">
    <div
      class="retention-banner"
      data-component="retention-banner"
      :data-dismiss-key="dismissKey"
    >
      <div class="retention-banner-inner">
        <img
          class="retention-banner-img"
          :src="(s.image_url as string) || ''"
          :alt="(s.image_alt as string) || ''"
        >
        <div>
          <p class="retention-banner-text">
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span v-bind="editableAttrs('text_prefix')" v-html="s.text_prefix" />
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span class="retention-highlight" v-bind="editableAttrs('highlight_text')" v-html="s.highlight_text" />
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span v-bind="editableAttrs('text_suffix')" v-html="s.text_suffix" />
          </p>
          <a
            v-if="s.cta_label"
            class="retention-banner-btn"
            :href="(s.cta_url as string) || '#'"
            v-bind="editableAttrs('cta_label')"
            v-html="s.cta_label"
          >
          </a>
        </div>
      </div>
      <button
        type="button"
        class="retention-banner-close"
        aria-label="Close"
        @click.stop="handleClose"
      >
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 1L1 12" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M12 12L1 1" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </button>
    </div>
  </section>
</template>
