<template>
  <view class="prompt-detail">
    <view class="card" v-if="prompt.id">
      <text class="title">{{ prompt.title }}</text>
      <text class="desc">{{ prompt.description }}</text>
      <view class="content-box">
        <text class="content-label">提示词内容：</text>
        <text class="content-text">{{ prompt.content }}</text>
      </view>
      <view class="actions">
        <button class="btn-copy" @tap="copyContent">复制内容</button>
        <button class="btn-like" @tap="toggleFavorite">{{ favorited ? '❤️ 已收藏' : '🤍 收藏' }}</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'
import { useUserStore } from '../../store/user'

const userStore = useUserStore()
const prompt = ref<any>({})
const favorited = ref(false)

onMounted(async () => {
  const id = Number((uni as any).getCurrentInstance()?.router?.params?.id || '')
  try {
    prompt.value = await api.prompts.detail(id)
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  }
})

function copyContent() {
  uni.setClipboardData({
    data: prompt.value.content,
    success: () => uni.showToast({ title: '已复制', icon: 'success' }),
  })
}

async function toggleFavorite() {
  if (!userStore.isLoggedIn) { uni.navigateTo({ url: '/pages/login/index' }); return }
  try {
    await api.prompts.toggleFavorite(prompt.value.id)
    favorited.value = !favorited.value
    uni.showToast({ title: favorited.value ? '已收藏' : '已取消收藏', icon: 'success' })
  } catch (e) { /* ignore */ }
}
</script>

<style scoped>
.prompt-detail { padding: 30rpx; }
.card { background: var(--card); border-radius: 16rpx; padding: 30rpx; }
.title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.desc { font-size: 26rpx; color: var(--muted-foreground); display: block; margin-bottom: 30rpx; }
.content-box { background: var(--muted); border-radius: 12rpx; padding: 24rpx; margin-bottom: 30rpx; }
.content-label { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 12rpx; }
.content-text { font-size: 26rpx; color: var(--foreground); line-height: 1.7; }
.actions { display: flex; gap: 20rpx; }
.btn-copy { flex: 1; background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: none; }
.btn-like { flex: 1; background: var(--card); color: #ff6b6b; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: 1rpx solid #ff6b6b; }
</style>
