<script setup lang="ts">
import { computed } from 'vue';
import { sanitizeHtml } from '@/utils/sanitize';

defineOptions({ name: 'BusinessRichTextView' });

interface Props {
  value?: string | null;
  emptyText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: '',
  emptyText: '—'
});

const safeHtml = computed(() => sanitizeHtml(props.value));
const isEmpty = computed(() => !safeHtml.value || safeHtml.value.replace(/<[^>]+>/g, '').trim() === '');
</script>

<template>
  <div class="business-rich-text-view">
    <span v-if="isEmpty" class="business-rich-text-view__empty">{{ props.emptyText }}</span>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div v-else class="business-rich-text-view__content" v-html="safeHtml" />
  </div>
</template>

<style scoped lang="scss">
.business-rich-text-view {
  width: 100%;
  color: var(--el-text-color-primary);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;

  &__empty {
    color: var(--el-text-color-placeholder);
  }

  &__content {
    :deep(p) {
      margin: 0 0 8px;
    }

    :deep(p:last-child) {
      margin-bottom: 0;
    }

    :deep(img) {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }

    :deep(ul),
    :deep(ol) {
      padding-left: 24px;
      margin: 0 0 8px;
    }

    :deep(blockquote) {
      padding: 6px 12px;
      margin: 0 0 8px;
      border-left: 3px solid var(--el-border-color);
      color: var(--el-text-color-regular);
      background: var(--el-fill-color-light);
    }

    :deep(table) {
      width: 100%;
      border-collapse: collapse;
      margin: 0 0 8px;
    }

    :deep(table td),
    :deep(table th) {
      padding: 4px 8px;
      border: 1px solid var(--el-border-color);
    }

    :deep(a) {
      color: var(--el-color-primary);
      text-decoration: underline;
    }
  }
}
</style>
