<script setup lang="ts">
/**
 * 代码片段列表：弹层内用 CodeBlock 做语法高亮。
 */
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import CodeBlock from '../../components/CodeBlock.vue'
import { getSnippets, type Snippet } from '@/api'
import { preloadMarkdownRenderer } from '../../lib/markdownRenderer'

const loading = ref(false)
const list = ref<Snippet[]>([])
const popupVisible = ref(false)
const active = ref<Snippet | null>(null)

async function load() {
  loading.value = true
  try {
    list.value = await getSnippets() || []
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

onShow(load)

const open = (item: Snippet) => {
  preloadMarkdownRenderer()
  active.value = item
  popupVisible.value = true
}

const copyCode = () => {
  if (!active.value?.code) return
  uni.setClipboardData({ data: String(active.value.code) })
}
</script>

<template>
  <AppPageShell>
    <AppNavbar title="代码" show-back />
    <view class="page-pad">
      <view class="hero-eyebrow">Snippets</view>
      <view class="section-title" style="margin-bottom: 32rpx;">代码片段</view>
      <view
        v-for="item in list"
        :key="String(item.id)"
        class="art-card art-card-press card"
        @click="open(item)"
      >
        <text class="font-mono-label text-art-accent">{{ item.language || 'code' }}</text>
        <text class="title">{{ item.title }}</text>
        <text v-if="item.description" class="desc text-art-muted">{{ item.description }}</text>
      </view>
      <wd-loading v-if="loading" />
      <wd-empty v-if="!loading && !list.length" description="暂无代码片段" />
    </view>

    <wd-popup
      v-model="popupVisible"
      position="bottom"
      closable
      safe-area-inset-bottom
      custom-style="border-radius:24rpx 24rpx 0 0;max-height:80vh;"
    >
      <view v-if="active" class="popup-body">
        <text class="popup-title">{{ active.title }}</text>
        <text class="font-mono-label text-art-muted">{{ active.language || 'plaintext' }}</text>
        <scroll-view scroll-y class="code-scroll">
          <CodeBlock :code="String(active.code || '')" :language="String(active.language || '')" />
        </scroll-view>
        <wd-button block type="primary" custom-style="background:#d4b383;border-color:#d4b383;" @click="copyCode">
          复制代码
        </wd-button>
      </view>
    </wd-popup>
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 48rpx; }
.card { padding: 28rpx 32rpx; margin-bottom: 20rpx; display: flex; flex-direction: column; gap: 10rpx; }
.title { font-size: 32rpx; color: rgb(var(--art-text)); }
.desc { font-size: 26rpx; line-height: 1.5; }
.popup-body { padding: 32rpx; display: flex; flex-direction: column; gap: 16rpx; }
.popup-title { font-size: 36rpx; color: rgb(var(--art-text)); font-family: 'Playfair Display', serif; }
.code-scroll { max-height: 50vh; margin: 8rpx 0 24rpx; }
</style>
