<template>
  <section class="grid gap-6 pt-3 pb-10">
    <header class="grid gap-2.5">
      <h1 class="m-0 text-[28px] font-extrabold tracking-[-0.01em]">案例 / 文章</h1>
      <p class="m-0 text-gray-600">用 Markdown 维护你的案例、服务说明与技术文章（支持代码复制）。</p>
    </header>

    <div class="grid gap-4">
      <div class="flex flex-wrap gap-2">
        <button
          v-for="file in mdFiles"
          :key="file"
          :class="[
            'rounded-full px-4 py-2 text-sm font-semibold transition-colors',
            currentFile === file ? 'bg-slate-900 text-white' : 'border border-gray-200 bg-white text-gray-600 hover:bg-gray-50',
          ]"
          @click="loadFile(file)"
        >
          {{ file.replace('.md', '') }}
        </button>
      </div>

      <div
        v-if="htmlContent"
        ref="contentRef"
        class="prose prose-slate max-w-none rounded-2xl border border-gray-200 bg-white p-6 shadow-[0_14px_26px_rgba(0,0,0,0.06)]"
        v-html="htmlContent"
      />
      <div v-else class="rounded-2xl border border-gray-200 bg-gray-50 p-6 text-center text-gray-500">
        请选择一个文档查看
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { marked } from 'marked'
import { nextTick, onMounted, ref, watch } from 'vue'

const BASE_URL = import.meta.env.BASE_URL

// 案例文件列表，后期可在此添加新文件
const caseFiles = ['web3d.md', '建模与渲染.md', 'services.md', 'case-template.md', 'contact.md']

const mdFiles = ref<string[]>([])
const currentFile = ref('')
const htmlContent = ref('')
const contentRef = ref<HTMLElement>()

onMounted(async () => {
  mdFiles.value = caseFiles
  if (mdFiles.value.length > 0) {
    await loadFile(mdFiles.value[0])
  }
})

const addCopyButtons = () => {
  if (!contentRef.value) return
  contentRef.value.querySelectorAll('pre').forEach((pre) => {
    if (pre.querySelector('.copy-btn')) return
    const button = document.createElement('button')
    button.className = 'copy-btn'
    button.textContent = '复制'
    button.onclick = async () => {
      const code = pre.querySelector('code')
      const text = code?.textContent || ''
      try {
        await navigator.clipboard.writeText(text)
      } catch {
        const textarea = document.createElement('textarea')
        textarea.value = text
        textarea.style.cssText = 'position:fixed;opacity:0'
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
      }
      button.textContent = '已复制'
      setTimeout(() => (button.textContent = '复制'), 1500)
    }
    pre.style.position = 'relative'
    pre.appendChild(button)
  })
}

watch(htmlContent, () => nextTick(addCopyButtons))

const loadFile = async (filename: string) => {
  currentFile.value = filename
  try {
    const res = await fetch(`${BASE_URL}docs/${filename}`)
    if (!res.ok) return
    const content = await res.text()
    htmlContent.value = marked(content) as string
  } catch (e) {
    console.error('加载文档失败:', e)
  }
}
</script>

<style>
.prose h1 { font-size: 1.875rem; font-weight: 800; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.7; color: #4b5563; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.25rem; color: #4b5563; }
.prose code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 1rem; padding-top: 2.5rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1rem; position: relative; }
.prose pre::before { content: ''; position: absolute; top: 12px; left: 12px; width: 12px; height: 12px; border-radius: 50%; background: #ff5f56; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f; }
.prose pre code { background: transparent; padding: 0; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; color: #6b7280; font-style: italic; }
.prose img { max-width: 100%; border-radius: 0.75rem; margin: 1rem 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
.copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 9999px; color: #e2e8f0; cursor: pointer; transition: background 0.2s; }
.copy-btn:hover { background: rgba(255,255,255,0.2); }
</style>
