<script setup lang="ts">
const props = defineProps<{
  content: string
}>()

/**
 * Basic markdown rendering: bold, line breaks, unordered lists.
 * Returns sanitized HTML string for v-html usage.
 */
const renderedHtml = computed(() => {
  if (!props.content) return ''

  let html = props.content

  // Escape HTML entities to prevent XSS
  html = html
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')

  // Convert **bold** to <strong>
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')

  // Convert *italic* to <em>
  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>')

  // Process lines for list items
  const lines = html.split('\n')
  const result: string[] = []
  let inList = false

  for (const line of lines) {
    const trimmed = line.trim()

    if (trimmed.startsWith('- ')) {
      if (!inList) {
        result.push('<ul class="list-disc list-inside space-y-1 my-2">')
        inList = true
      }
      result.push(`<li>${trimmed.slice(2)}</li>`)
    } else {
      if (inList) {
        result.push('</ul>')
        inList = false
      }
      if (trimmed === '') {
        result.push('<br>')
      } else {
        result.push(`<p class="my-1">${line}</p>`)
      }
    }
  }

  if (inList) {
    result.push('</ul>')
  }

  return result.join('\n')
})
</script>

<template>
  <div
    class="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed"
    v-html="renderedHtml"
  />
</template>
