<template>
  <div v-html="renderedHtml" class="markdown-content"></div>
</template>

<script setup>
import { computed, onMounted, nextTick } from 'vue'
import MarkdownIt from 'markdown-it'
import katex from 'katex'
import 'katex/dist/katex.css'

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})

// Configuración de markdown-it SIN breaks
const md = new MarkdownIt({ 
  html: true,
  breaks: false // Esto es clave: desactiva la conversión automática de \n a <br>
})

// Función para renderizar LaTeX
const renderLatex = (content) => {
  // Procesar bloques de display math ($$...$$)
  content = content.replace(/\$\$([\s\S]*?)\$\$/g, (match, tex) => {
    try {
      return katex.renderToString(tex.trim(), {
        displayMode: true,
        throwOnError: false,
        fleqn: true
      })
    } catch (e) {
      return `<div class="latex-error">${match}</div>`
    }
  })
  
  // Procesar bloques de display math (\[...\])
  content = content.replace(/\\\[([\s\S]*?)\\\]/g, (match, tex) => {
    try {
      return katex.renderToString(tex.trim(), {
        displayMode: true,
        throwOnError: false,
        fleqn: true
      })
    } catch (e) {
      return `<div class="latex-error">${match}</div>`
    }
  })
  
  // Procesar LaTeX en línea ($...$)
  content = content.replace(/\$([^\$]*?)\$/g, (match, tex) => {
    try {
      return katex.renderToString(tex.trim(), {
        displayMode: false,
        throwOnError: false
      })
    } catch (e) {
      return `<span class="latex-error">${match}</span>`
    }
  })
  
  return content
}

const renderedHtml = computed(() => {
  if (!props.content) return ''
  
  try {
    // Primero procesar el LaTeX
    let content = renderLatex(props.content)
    
    // Luego procesar el markdown
    content = md.render(content)
    
    return content
  } catch (error) {
    console.error('Error rendering:', error)
    return props.content
  }
})

// Para asegurar que KaTeX se renderice correctamente
onMounted(() => {
  nextTick(() => {
    // Intentar renderizar cualquier elemento KaTeX que no se haya renderizado
    const katexElements = document.querySelectorAll('.katex')
    katexElements.forEach(el => {
      if (!el.querySelector('.katex-html')) {
        try {
          const tex = el.textContent
          const isDisplayMode = el.classList.contains('katex-display')
          katex.render(tex, el, {
            displayMode: isDisplayMode,
            throwOnError: false
          })
        } catch (error) {
          console.warn('Error re-rendering KaTeX:', error)
        }
      }
    })
  })
})
</script>

<style scoped>
.markdown-content {
  line-height: 1.6;
  font-size: 14px;
}

/* Listas con sangría bonita */
.markdown-content ul {
  padding-left: 20px;
  list-style-type: disc;
}

.markdown-content ol {
  padding-left: 20px;
  list-style-type: decimal;
}

.markdown-content :deep(.katex-display) {
  margin: 0.75em 0;
  text-align: center;

  overflow-x: auto;     /* si es largo, que haga scroll horizontal */
  overflow-y: hidden;   /* IMPORTANTE: no scroll vertical -> no flechas */
}
/* Quitar botones/flechas del scrollbar (Chrome/Edge) */
.markdown-content :deep(.katex-display::-webkit-scrollbar-button) {
  display: none;
}
.markdown-content :deep(.katex-display::-webkit-scrollbar) {
  height: 0px;          /* Chrome/Edge */
}
/* Si quieres ocultar completamente la barra horizontal (opcional) */
.markdown-content :deep(.katex-display) {
  scrollbar-width: none; /* Firefox */
}

.markdown-content :deep(.latex-error) {
  color: red;
  background-color: #fff0f0;
  padding: 4px;
  border: 1px solid red;
}
</style>