<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { forumApi, type ForumPost } from '@/api/forum'
import { Plus, MessageSquare, CheckCircle, Send, X, Radio } from 'lucide-vue-next'

const posts = ref<ForumPost[]>([])
const showCreateForm = ref(false)
const newTitle = ref('')
const newContent = ref('')
const newCategory = ref('discussion')
const isPosting = ref(false)

async function loadPosts() {
  try {
    const response = await forumApi.listPosts()
    posts.value = response.data
  } catch (e) { console.error('加载帖子失败:', e) }
}

async function createPost() {
  if (!newTitle.value.trim() || !newContent.value.trim()) return
  isPosting.value = true
  try {
    const response = await forumApi.createPost({
      title: newTitle.value.trim(),
      content: newContent.value.trim(),
      category: newCategory.value,
    })
    posts.value.unshift(response.data)
    newTitle.value = ''
    newContent.value = ''
    showCreateForm.value = false
  } catch (e) { console.error('创建失败:', e) }
  isPosting.value = false
}

function formatDate(dateStr: string) {
  const d = new Date(dateStr)
  return d.toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
}

function getCategoryLabel(cat?: string) {
  const map: Record<string, { label: string; color: string }> = {
    discussion: { label: 'DISCUSSION', color: 'var(--accent-cyan)' },
    instruction: { label: 'INSTRUCTION', color: 'var(--accent-amber)' },
    question: { label: 'QUESTION', color: 'var(--accent-green)' },
  }
  return map[cat ?? 'discussion'] || map.discussion
}

onMounted(() => { loadPosts() })
</script>

<template>
  <div class="forum-view">
    <!-- Header -->
    <div class="page-header">
      <div class="header-left">
        <div class="header-icon"><Radio :size="20" /></div>
        <div class="header-text">
          <h1>COMMAND FORUM</h1>
          <span class="header-sub">{{ posts.length }} transmissions</span>
        </div>
      </div>
      <button class="add-btn" @click="showCreateForm = true">
        <Plus :size="14" />
        NEW POST
      </button>
    </div>

    <!-- Create form -->
    <div v-if="showCreateForm" class="create-panel">
      <div class="panel-header">
        <span>// NEW TRANSMISSION</span>
        <button class="close-btn" @click="showCreateForm = false"><X :size="14" /></button>
      </div>
      <div class="panel-body">
        <input v-model="newTitle" placeholder="Transmission title..." class="title-input" />
        <textarea v-model="newContent" placeholder="Message content..." rows="5" class="content-input"></textarea>
        <div class="panel-footer">
          <select v-model="newCategory" class="cat-select">
            <option value="discussion">DISCUSSION</option>
            <option value="instruction">INSTRUCTION</option>
            <option value="question">QUESTION</option>
          </select>
          <button class="post-btn" @click="createPost" :disabled="isPosting">
            <Send v-if="!isPosting" :size="13" />
            {{ isPosting ? 'SENDING...' : 'TRANSMIT' }}
          </button>
        </div>
      </div>
    </div>

    <!-- Posts -->
    <div class="posts-list">
      <div v-for="post in posts" :key="post.id" class="post-card">
        <div class="post-left">
          <div
            class="post-cat-badge"
            :style="{ color: getCategoryLabel(post.category).color, borderColor: getCategoryLabel(post.category).color + '40', background: getCategoryLabel(post.category).color + '10' }"
          >
            {{ getCategoryLabel(post.category).label }}
          </div>
        </div>
        <div class="post-body">
          <div class="post-title">{{ post.title }}</div>
          <div class="post-content">{{ post.content }}</div>
          <div class="post-footer">
            <span class="post-date">{{ formatDate(post.created_at) }}</span>
            <div class="post-stats">
              <MessageSquare :size="11" />
              <span>{{ post.reply_count }}</span>
              <CheckCircle v-if="post.is_executed" :size="11" class="executed-icon" />
              <span v-if="post.is_executed" class="executed-label">EXECUTED</span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="posts.length === 0" class="empty-state">
        <Radio :size="32" />
        <span>No transmissions yet</span>
        <span class="empty-sub">Post an instruction or question</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.forum-view {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left { display: flex; align-items: center; gap: 14px; }

.header-icon { color: var(--accent-purple); filter: drop-shadow(0 0 8px var(--accent-purple)); }

h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-primary);
  margin: 0;
}

.header-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }

.add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-purple-dim);
  border: 1px solid rgba(123, 44, 191, 0.3);
  border-radius: var(--radius-md);
  color: #a855f7;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  transition: all var(--transition-fast);
}

.add-btn:hover {
  background: rgba(123, 44, 191, 0.2);
  box-shadow: 0 0 16px rgba(123, 44, 191, 0.3);
}

/* Create panel */
.create-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fade-in-up 0.2s ease;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(123, 44, 191, 0.06);
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #a855f7;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: all var(--transition-fast);
}

.close-btn:hover { color: var(--accent-red); }

.panel-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.title-input, .content-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
  box-sizing: border-box;
}

.title-input:focus, .content-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 1px rgba(123,44,191,0.1), 0 0 12px rgba(123,44,191,0.15);
}

.content-input { resize: vertical; min-height: 100px; }

.panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-select {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
}

.post-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--accent-purple-dim);
  border: 1px solid rgba(123, 44, 191, 0.3);
  border-radius: var(--radius-md);
  color: #a855f7;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  transition: all var(--transition-fast);
}

.post-btn:hover:not(:disabled) {
  background: rgba(123, 44, 191, 0.2);
  box-shadow: 0 0 12px rgba(123,44,191,0.3);
}

/* Posts */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-card {
  display: flex;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: all var(--transition-fast);
  animation: fade-in-up 0.3s ease;
}

.post-card:hover {
  border-color: var(--border-mid);
  background: var(--bg-card-hover);
}

.post-left { display: flex; flex-direction: column; align-items: center; }

.post-cat-badge {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
}

.post-body { flex: 1; min-width: 0; }

.post-title {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-weight: 500;
}

.post-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.post-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.executed-icon { color: var(--accent-green); }
.executed-label { color: var(--accent-green); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
}

.empty-sub { font-size: 11px; color: var(--text-muted); }
</style>
