import { marked } from 'marked'
import hljs from 'highlight.js'

// Configure marked once
marked.setOptions({ breaks: true, gfm: true })

// Custom renderer to add code block header + copy button
const renderer = new marked.Renderer()
renderer.code = function({ text, lang }) {
  const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext'
  const highlighted = hljs.highlight(text, { language }).value

  return `<div class="code-block"><div class="code-header"><span>${language}</span><button class="btn-icon copy-btn" data-code="${encodeURIComponent(text)}" title="Copy"><i class="ph ph-copy"></i></button></div><pre><code class="hljs language-${language}">${highlighted}</code></pre></div>`
}

marked.use({ renderer })

// Fix malformed GFM tables:
// 1. Missing separator row — inject one between header and first data row.
// 2. Mixed separator/data row — inject proper separator before it.
// 3. Spurious all-separator rows inside the table body (model uses them as
//    visual dividers) — strip them once the real header separator has been seen.
function fixTables(text) {
  const lines = text.split('\n')
  const out = []
  const isPipeRow = l => l.trim().startsWith('|') && l.includes('|', 1)
  const isSepCell = c => /^:?-+:?$/.test(c.trim())
  const colCount = l => l.split('|').slice(1, -1).length

  let seenSep = false  // have we emitted the header separator for the current table?

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i]
    const prev = out[out.length - 1] ?? ''

    if (!isPipeRow(line)) {
      // Leaving table context
      seenSep = false
      out.push(line)
      continue
    }

    const cells = line.split('|').slice(1, -1)
    const allSep = cells.every(isSepCell)
    const noneSep = cells.every(c => !isSepCell(c))

    if (allSep) {
      if (!seenSep) {
        // First separator row — keep it as the header separator
        seenSep = true
        out.push(line)
      }
      // Subsequent all-separator rows are spurious visual dividers — drop them
      continue
    }

    if (isPipeRow(prev)) {
      if (!seenSep) {
        if (!noneSep) {
          // Mixed row: mangled separator — inject a clean one, treat this line as data
          out.push('| ' + Array(colCount(prev)).fill('---').join(' | ') + ' |')
          seenSep = true
        } else if (i + 1 < lines.length && isPipeRow(lines[i + 1])) {
          // Separator row is missing entirely — inject it
          out.push('| ' + Array(colCount(prev)).fill('---').join(' | ') + ' |')
          seenSep = true
        }
      }
    }

    out.push(line)
  }
  return out.join('\n')
}

export function renderMarkdown(text) {
  const html = marked.parse(fixTables(text ?? ''))
  // Wrap tables in a scrollable container for mobile
  return html.replace(/<table>/g, '<div class="table-wrap"><table class="table">').replace(/<\/table>/g, '</table></div>')
}

// Attach copy button listeners after v-html renders
export function attachCopyButtons(el) {
  el?.querySelectorAll('.copy-btn').forEach(btn => {
    btn.onclick = () => {
      const code = decodeURIComponent(btn.dataset.code ?? '')
      const done = () => {
        btn.innerHTML = '<i class="ph ph-check"></i>'
        setTimeout(() => { btn.innerHTML = '<i class="ph ph-copy"></i>' }, 1500)
      }
      if (navigator.clipboard?.writeText) {
        navigator.clipboard.writeText(code).then(done)
      } else {
        const el = document.createElement('textarea')
        el.value = code
        el.style.cssText = 'position:fixed;opacity:0'
        document.body.appendChild(el)
        el.select()
        document.execCommand('copy')
        document.body.removeChild(el)
        done()
      }
    }
  })
}