<template>
  <div class="forum-view">
    <!-- 背景动画 -->
    <div class="background-animation">
      <div class="floating-shapes">
        <div v-for="i in 15" :key="i" class="shape" :style="{
          left: Math.random() * 100 + '%',
          top: Math.random() * 100 + '%',
          animationDelay: Math.random() * 5 + 's'
        }"></div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">学习论坛</h1>
        <p class="page-subtitle">交流学习心得，分享知识经验</p>
      </div>

      <!-- 论坛导航 -->
      <div class="forum-nav">
        <button 
          v-for="tab in forumTabs" 
          :key="tab.id"
          :class="['nav-tab', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
        >
          <i class="tab-icon">{{ tab.icon }}</i>
          {{ tab.name }}
        </button>
        <button @click="showNewPostModal = true" class="new-post-btn">
          <i class="icon">✏️</i>
          发布新帖
        </button>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-filter-section">
        <div class="search-box">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索帖子..."
            class="search-input"
          >
          <button class="search-btn">
            <i class="search-icon">🔍</i>
          </button>
        </div>
        <div class="filter-options">
          <select v-model="selectedCategory" class="filter-select">
            <option value="all">全部分类</option>
            <option value="study">学习讨论</option>
            <option value="homework">作业求助</option>
            <option value="exam">考试交流</option>
            <option value="resource">资源分享</option>
            <option value="life">校园生活</option>
          </select>
          <select v-model="selectedSubject" class="filter-select">
            <option value="all">全部科目</option>
            <option value="数学">数学</option>
            <option value="语文">语文</option>
            <option value="英语">英语</option>
            <option value="物理">物理</option>
            <option value="化学">化学</option>
          </select>
          <select v-model="sortBy" class="filter-select">
            <option value="latest">最新发布</option>
            <option value="hot">热门讨论</option>
            <option value="replies">回复最多</option>
            <option value="likes">点赞最多</option>
          </select>
        </div>
      </div>

      <!-- 论坛统计 -->
      <div class="stats-section">
        <div class="stat-card">
          <div class="stat-icon">📝</div>
          <div class="stat-info">
            <span class="stat-number">{{ totalPosts }}</span>
            <span class="stat-label">总帖子数</span>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">💬</div>
          <div class="stat-info">
            <span class="stat-number">{{ totalReplies }}</span>
            <span class="stat-label">总回复数</span>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">👥</div>
          <div class="stat-info">
            <span class="stat-number">{{ activeUsers }}</span>
            <span class="stat-label">活跃用户</span>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🔥</div>
          <div class="stat-info">
            <span class="stat-number">{{ todayPosts }}</span>
            <span class="stat-label">今日新帖</span>
          </div>
        </div>
      </div>

      <!-- 热门话题 -->
      <div v-if="activeTab === 'hot'" class="hot-topics-section">
        <h2 class="section-title">🔥 热门话题</h2>
        <div class="topics-grid">
          <div v-for="topic in hotTopics" :key="topic.id" class="topic-card">
            <div class="topic-header">
              <div class="topic-info">
                <h3 class="topic-title">{{ topic.title }}</h3>
                <div class="topic-meta">
                  <span class="topic-category">{{ topic.category }}</span>
                  <span class="topic-subject">{{ topic.subject }}</span>
                </div>
              </div>
              <div class="topic-stats">
                <div class="stat-item">
                  <i class="icon">👁️</i>
                  <span>{{ topic.views }}</span>
                </div>
                <div class="stat-item">
                  <i class="icon">💬</i>
                  <span>{{ topic.replies }}</span>
                </div>
              </div>
            </div>
            <p class="topic-description">{{ topic.description }}</p>
            <div class="topic-footer">
              <div class="author-info">
                <img :src="topic.author.avatar" :alt="topic.author.name" class="author-avatar">
                <div class="author-details">
                  <span class="author-name">{{ topic.author.name }}</span>
                  <span class="post-time">{{ formatTime(topic.createdAt) }}</span>
                </div>
              </div>
              <button @click="viewTopic(topic)" class="view-topic-btn">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新帖子 -->
      <div v-if="activeTab === 'latest'" class="posts-section">
        <h2 class="section-title">📝 最新帖子</h2>
        <div class="posts-list">
          <div v-for="post in filteredPosts" :key="post.id" class="post-card">
            <div class="post-header">
              <div class="post-info">
                <h3 class="post-title" @click="viewPost(post)">{{ post.title }}</h3>
                <div class="post-meta">
                  <span :class="['category-tag', post.category]">{{ getCategoryText(post.category) }}</span>
                  <span class="subject-tag">{{ post.subject }}</span>
                  <span v-if="post.isSticky" class="sticky-tag">📌 置顶</span>
                  <span v-if="post.isHot" class="hot-tag">🔥 热门</span>
                </div>
              </div>
              <div class="post-actions">
                <button @click="likePost(post)" :class="['like-btn', { liked: post.isLiked }]">
                  <i class="icon">{{ post.isLiked ? '❤️' : '🤍' }}</i>
                  <span>{{ post.likes }}</span>
                </button>
                <button @click="favoritePost(post)" :class="['favorite-btn', { favorited: post.isFavorited }]">
                  <i class="icon">{{ post.isFavorited ? '⭐' : '☆' }}</i>
                </button>
              </div>
            </div>
            <p class="post-content">{{ post.content }}</p>
            <div v-if="post.images && post.images.length > 0" class="post-images">
              <img v-for="(image, index) in post.images" :key="index" :src="image" :alt="`图片${index + 1}`" class="post-image">
            </div>
            <div class="post-footer">
              <div class="author-info">
                <img :src="post.author.avatar" :alt="post.author.name" class="author-avatar">
                <div class="author-details">
                  <span class="author-name">{{ post.author.name }}</span>
                  <span class="author-level">{{ post.author.level }}</span>
                  <span class="post-time">{{ formatTime(post.createdAt) }}</span>
                </div>
              </div>
              <div class="post-stats">
                <div class="stat-item">
                  <i class="icon">👁️</i>
                  <span>{{ post.views }}浏览</span>
                </div>
                <div class="stat-item">
                  <i class="icon">💬</i>
                  <span>{{ post.replies }}回复</span>
                </div>
                <div class="stat-item">
                  <i class="icon">👍</i>
                  <span>{{ post.likes }}点赞</span>
                </div>
              </div>
            </div>
            <div v-if="post.lastReply" class="last-reply">
              <div class="reply-info">
                <span class="reply-label">最新回复:</span>
                <span class="reply-author">{{ post.lastReply.author }}</span>
                <span class="reply-time">{{ formatTime(post.lastReply.time) }}</span>
              </div>
              <p class="reply-content">{{ post.lastReply.content }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的帖子 -->
      <div v-if="activeTab === 'my'" class="my-posts-section">
        <h2 class="section-title">📋 我的帖子</h2>
        <div class="my-posts-stats">
          <div class="stat-card">
            <div class="stat-icon">📝</div>
            <div class="stat-info">
              <span class="stat-number">{{ myPosts.length }}</span>
              <span class="stat-label">发布帖子</span>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">💬</div>
            <div class="stat-info">
              <span class="stat-number">{{ myRepliesCount }}</span>
              <span class="stat-label">回复数量</span>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">👍</div>
            <div class="stat-info">
              <span class="stat-number">{{ myLikesCount }}</span>
              <span class="stat-label">获得点赞</span>
            </div>
          </div>
        </div>
        <div class="posts-list">
          <div v-for="post in myPosts" :key="post.id" class="post-card my-post">
            <div class="post-header">
              <div class="post-info">
                <h3 class="post-title" @click="viewPost(post)">{{ post.title }}</h3>
                <div class="post-meta">
                  <span :class="['category-tag', post.category]">{{ getCategoryText(post.category) }}</span>
                  <span class="subject-tag">{{ post.subject }}</span>
                  <span :class="['status-tag', post.status]">{{ getStatusText(post.status) }}</span>
                </div>
              </div>
              <div class="post-actions">
                <button @click="editPost(post)" class="edit-btn">
                  <i class="icon">✏️</i>
                  编辑
                </button>
                <button @click="deletePost(post)" class="delete-btn">
                  <i class="icon">🗑️</i>
                  删除
                </button>
              </div>
            </div>
            <p class="post-content">{{ post.content }}</p>
            <div class="post-footer">
              <div class="post-time">
                发布时间: {{ formatTime(post.createdAt) }}
              </div>
              <div class="post-stats">
                <div class="stat-item">
                  <i class="icon">👁️</i>
                  <span>{{ post.views }}</span>
                </div>
                <div class="stat-item">
                  <i class="icon">💬</i>
                  <span>{{ post.replies }}</span>
                </div>
                <div class="stat-item">
                  <i class="icon">👍</i>
                  <span>{{ post.likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 收藏帖子 -->
      <div v-if="activeTab === 'favorites'" class="favorites-section">
        <h2 class="section-title">⭐ 我的收藏</h2>
        <div class="posts-list">
          <div v-for="post in favoritePosts" :key="post.id" class="post-card favorite-post">
            <div class="post-header">
              <div class="post-info">
                <h3 class="post-title" @click="viewPost(post)">{{ post.title }}</h3>
                <div class="post-meta">
                  <span :class="['category-tag', post.category]">{{ getCategoryText(post.category) }}</span>
                  <span class="subject-tag">{{ post.subject }}</span>
                </div>
              </div>
              <div class="post-actions">
                <button @click="favoritePost(post)" class="unfavorite-btn">
                  <i class="icon">⭐</i>
                  取消收藏
                </button>
              </div>
            </div>
            <p class="post-content">{{ post.content }}</p>
            <div class="post-footer">
              <div class="author-info">
                <img :src="post.author.avatar" :alt="post.author.name" class="author-avatar">
                <div class="author-details">
                  <span class="author-name">{{ post.author.name }}</span>
                  <span class="post-time">{{ formatTime(post.createdAt) }}</span>
                </div>
              </div>
              <div class="favorite-time">
                收藏时间: {{ formatTime(post.favoritedAt) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布新帖弹窗 -->
    <div v-if="showNewPostModal" class="modal-overlay" @click="closeNewPostModal">
      <div class="new-post-modal" @click.stop>
        <div class="modal-header">
          <h3>发布新帖</h3>
          <button @click="closeNewPostModal" class="close-btn">×</button>
        </div>
        <div class="modal-content">
          <form @submit.prevent="submitNewPost">
            <div class="form-group">
              <label>帖子标题</label>
              <input v-model="newPost.title" type="text" placeholder="请输入帖子标题" required>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>分类</label>
                <select v-model="newPost.category" required>
                  <option value="">选择分类</option>
                  <option value="study">学习讨论</option>
                  <option value="homework">作业求助</option>
                  <option value="exam">考试交流</option>
                  <option value="resource">资源分享</option>
                  <option value="life">校园生活</option>
                </select>
              </div>
              <div class="form-group">
                <label>科目</label>
                <select v-model="newPost.subject">
                  <option value="">选择科目</option>
                  <option value="数学">数学</option>
                  <option value="语文">语文</option>
                  <option value="英语">英语</option>
                  <option value="物理">物理</option>
                  <option value="化学">化学</option>
                  <option value="其他">其他</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label>帖子内容</label>
              <textarea v-model="newPost.content" placeholder="请输入帖子内容" rows="8" required></textarea>
            </div>
            <div class="form-group">
              <label>添加图片 (可选)</label>
              <input type="file" multiple accept="image/*" @change="handleImageUpload">
              <div v-if="newPost.images.length > 0" class="image-preview">
                <div v-for="(image, index) in newPost.images" :key="index" class="preview-item">
                  <img :src="image" :alt="`预览${index + 1}`" class="preview-image">
                  <button type="button" @click="removeImage(index)" class="remove-image">×</button>
                </div>
              </div>
            </div>
            <div class="form-actions">
              <button type="button" @click="closeNewPostModal" class="cancel-btn">取消</button>
              <button type="submit" class="submit-btn">发布帖子</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const activeTab = ref('latest')
const searchQuery = ref('')
const selectedCategory = ref('all')
const selectedSubject = ref('all')
const sortBy = ref('latest')
const showNewPostModal = ref(false)

// 论坛导航标签
const forumTabs = [
  { id: 'hot', name: '热门话题', icon: '🔥' },
  { id: 'latest', name: '最新帖子', icon: '📝' },
  { id: 'my', name: '我的帖子', icon: '📋' },
  { id: 'favorites', name: '我的收藏', icon: '⭐' }
]

// 新帖子数据
const newPost = ref({
  title: '',
  category: '',
  subject: '',
  content: '',
  images: []
})

// 热门话题数据
const hotTopics = ref([
  {
    id: 1,
    title: '高考数学复习策略分享',
    category: 'study',
    subject: '数学',
    description: '分享一些高考数学复习的有效方法和技巧，希望对大家有帮助。',
    views: 2345,
    replies: 156,
    author: {
      name: '学霸小王',
      avatar: 'https://via.placeholder.com/40x40?text=王'
    },
    createdAt: new Date('2024-01-25')
  },
  {
    id: 2,
    title: '英语作文写作技巧讨论',
    category: 'study',
    subject: '英语',
    description: '大家来讨论一下英语作文的写作技巧，如何提高作文分数。',
    views: 1876,
    replies: 89,
    author: {
      name: '英语达人',
      avatar: 'https://via.placeholder.com/40x40?text=英'
    },
    createdAt: new Date('2024-01-24')
  },
  {
    id: 3,
    title: '物理实验报告模板分享',
    category: 'resource',
    subject: '物理',
    description: '整理了一些物理实验报告的标准模板，需要的同学可以参考。',
    views: 1234,
    replies: 67,
    author: {
      name: '实验小能手',
      avatar: 'https://via.placeholder.com/40x40?text=实'
    },
    createdAt: new Date('2024-01-23')
  }
])

// 帖子数据
const posts = ref([
  {
    id: 1,
    title: '求助：这道数学题怎么解？',
    category: 'homework',
    subject: '数学',
    content: '这是一道关于函数的题目，我不太理解解题思路，希望有同学能帮忙解答一下。题目是：求函数f(x)=x²+2x-3的最值...',
    images: ['https://via.placeholder.com/300x200?text=数学题目'],
    views: 234,
    replies: 12,
    likes: 8,
    isLiked: false,
    isFavorited: false,
    isSticky: false,
    isHot: false,
    author: {
      name: '小明同学',
      avatar: 'https://via.placeholder.com/40x40?text=明',
      level: '初学者'
    },
    createdAt: new Date('2024-01-28'),
    lastReply: {
      author: '数学老师',
      content: '这道题可以通过配方法来解决...',
      time: new Date('2024-01-28')
    }
  },
  {
    id: 2,
    title: '分享一些英语学习资源',
    category: 'resource',
    subject: '英语',
    content: '最近整理了一些很好的英语学习资源，包括听力材料、阅读文章和语法练习，分享给大家。',
    images: [],
    views: 567,
    replies: 23,
    likes: 45,
    isLiked: true,
    isFavorited: true,
    isSticky: true,
    isHot: true,
    author: {
      name: '英语小助手',
      avatar: 'https://via.placeholder.com/40x40?text=助',
      level: '资深用户'
    },
    createdAt: new Date('2024-01-27'),
    lastReply: {
      author: '学习爱好者',
      content: '谢谢分享，这些资源很有用！',
      time: new Date('2024-01-28')
    }
  },
  {
    id: 3,
    title: '期末考试复习计划讨论',
    category: 'exam',
    subject: '全科',
    content: '期末考试快到了，大家都是怎么制定复习计划的？来交流一下经验吧。',
    images: [],
    views: 789,
    replies: 34,
    likes: 56,
    isLiked: false,
    isFavorited: false,
    isSticky: false,
    isHot: true,
    author: {
      name: '复习达人',
      avatar: 'https://via.placeholder.com/40x40?text=复',
      level: '高级用户'
    },
    createdAt: new Date('2024-01-26'),
    lastReply: {
      author: '时间管理大师',
      content: '我建议按照艾宾浩斯遗忘曲线来安排复习...',
      time: new Date('2024-01-27')
    }
  }
])

// 我的帖子数据
const myPosts = ref([
  {
    id: 101,
    title: '我的学习心得分享',
    category: 'study',
    subject: '数学',
    content: '经过一学期的学习，我总结了一些数学学习的心得体会...',
    views: 123,
    replies: 8,
    likes: 15,
    status: 'published',
    createdAt: new Date('2024-01-20')
  },
  {
    id: 102,
    title: '关于物理实验的疑问',
    category: 'homework',
    subject: '物理',
    content: '在做物理实验时遇到了一些问题，希望能得到解答...',
    views: 67,
    replies: 3,
    likes: 5,
    status: 'published',
    createdAt: new Date('2024-01-18')
  }
])

// 收藏帖子数据
const favoritePosts = ref([
  {
    id: 2,
    title: '分享一些英语学习资源',
    category: 'resource',
    subject: '英语',
    content: '最近整理了一些很好的英语学习资源...',
    author: {
      name: '英语小助手',
      avatar: 'https://via.placeholder.com/40x40?text=助'
    },
    createdAt: new Date('2024-01-27'),
    favoritedAt: new Date('2024-01-28')
  }
])

// 计算属性
const totalPosts = computed(() => posts.value.length + 1247) // 模拟总数
const totalReplies = computed(() => posts.value.reduce((sum, post) => sum + post.replies, 0) + 5678)
const activeUsers = computed(() => 234)
const todayPosts = computed(() => 12)

const myRepliesCount = computed(() => 45)
const myLikesCount = computed(() => myPosts.value.reduce((sum, post) => sum + post.likes, 0))

const filteredPosts = computed(() => {
  let filtered = posts.value
  
  // 搜索过滤
  if (searchQuery.value) {
    filtered = filtered.filter(post => 
      post.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      post.content.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  // 分类过滤
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(post => post.category === selectedCategory.value)
  }
  
  // 科目过滤
  if (selectedSubject.value !== 'all') {
    filtered = filtered.filter(post => post.subject === selectedSubject.value)
  }
  
  // 排序
  switch (sortBy.value) {
    case 'hot':
      filtered.sort((a, b) => (b.views + b.replies * 2 + b.likes * 3) - (a.views + a.replies * 2 + a.likes * 3))
      break
    case 'replies':
      filtered.sort((a, b) => b.replies - a.replies)
      break
    case 'likes':
      filtered.sort((a, b) => b.likes - a.likes)
      break
    default: // latest
      filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
  }
  
  return filtered
})

// 方法
const getCategoryText = (category) => {
  const categoryMap = {
    'study': '学习讨论',
    'homework': '作业求助',
    'exam': '考试交流',
    'resource': '资源分享',
    'life': '校园生活'
  }
  return categoryMap[category] || '其他'
}

const getStatusText = (status) => {
  const statusMap = {
    'published': '已发布',
    'draft': '草稿',
    'hidden': '已隐藏'
  }
  return statusMap[status] || '未知'
}

const formatTime = (date) => {
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)
  
  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return date.toLocaleDateString('zh-CN')
}

const viewTopic = (topic) => {
  console.log('查看话题:', topic.title)
  // router.push(`/forum/topic/${topic.id}`)
}

const viewPost = (post) => {
  console.log('查看帖子:', post.title)
  // router.push(`/forum/post/${post.id}`)
}

const likePost = (post) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
  console.log('点赞状态:', post.isLiked ? '已点赞' : '取消点赞')
}

const favoritePost = (post) => {
  post.isFavorited = !post.isFavorited
  console.log('收藏状态:', post.isFavorited ? '已收藏' : '取消收藏')
}

const editPost = (post) => {
  console.log('编辑帖子:', post.title)
  // 实现编辑功能
}

const deletePost = (post) => {
  if (confirm('确定要删除这个帖子吗？')) {
    const index = myPosts.value.findIndex(p => p.id === post.id)
    if (index > -1) {
      myPosts.value.splice(index, 1)
    }
    console.log('删除帖子:', post.title)
  }
}

const closeNewPostModal = () => {
  showNewPostModal.value = false
  // 重置表单
  newPost.value = {
    title: '',
    category: '',
    subject: '',
    content: '',
    images: []
  }
}

const handleImageUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    const reader = new FileReader()
    reader.onload = (e) => {
      newPost.value.images.push(e.target.result)
    }
    reader.readAsDataURL(file)
  })
}

const removeImage = (index) => {
  newPost.value.images.splice(index, 1)
}

const submitNewPost = () => {
  // 验证表单
  if (!newPost.value.title || !newPost.value.category || !newPost.value.content) {
    alert('请填写完整信息')
    return
  }
  
  // 创建新帖子
  const post = {
    id: Date.now(),
    title: newPost.value.title,
    category: newPost.value.category,
    subject: newPost.value.subject || '其他',
    content: newPost.value.content,
    images: [...newPost.value.images],
    views: 0,
    replies: 0,
    likes: 0,
    isLiked: false,
    isFavorited: false,
    isSticky: false,
    isHot: false,
    author: {
      name: '当前用户',
      avatar: 'https://via.placeholder.com/40x40?text=我',
      level: '普通用户'
    },
    createdAt: new Date()
  }
  
  // 添加到帖子列表
  posts.value.unshift(post)
  myPosts.value.unshift({
    ...post,
    status: 'published'
  })
  
  console.log('发布新帖:', post.title)
  closeNewPostModal()
}

onMounted(() => {
  // 页面加载动画
  const mainContent = document.querySelector('.main-content')
  if (mainContent) {
    mainContent.classList.add('loaded')
  }
})
</script>

<style scoped>
.forum-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
}

.background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-shapes {
  position: relative;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}

.main-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.main-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

.forum-nav {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 5px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
  align-items: center;
  gap: 5px;
}

.nav-tab {
  flex: 1;
  padding: 15px 20px;
  border: none;
  background: transparent;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-tab.active {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.new-post-btn {
  padding: 15px 20px;
  background: linear-gradient(45deg, #10b981, #059669);
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.new-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.tab-icon {
  font-size: 1.2rem;
}

.search-filter-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 300px;
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 12px 15px;
  border: none;
  background: transparent;
  color: white;
  font-size: 1rem;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-btn {
  padding: 12px 15px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.filter-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
  min-width: 120px;
}

.filter-select option {
  background: #374151;
  color: white;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
  color: white;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.stat-icon {
  font-size: 2rem;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fbbf24;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 25px 0;
  color: #fbbf24;
  text-align: center;
}

.hot-topics-section,
.posts-section,
.my-posts-section,
.favorites-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(10px);
  color: white;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
}

.topic-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.topic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.topic-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: white;
}

.topic-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.topic-category,
.topic-subject {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.topic-category {
  background: rgba(251, 191, 36, 0.8);
}

.topic-subject {
  background: rgba(59, 130, 246, 0.8);
}

.topic-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  opacity: 0.8;
}

.topic-description {
  margin: 0 0 20px 0;
  line-height: 1.5;
  opacity: 0.9;
}

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

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: bold;
  font-size: 0.9rem;
}

.author-level {
  font-size: 0.8rem;
  opacity: 0.7;
  color: #fbbf24;
}

.post-time {
  font-size: 0.8rem;
  opacity: 0.7;
}

.view-topic-btn {
  padding: 8px 16px;
  background: linear-gradient(45deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: bold;
}

.view-topic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.post-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease;
}

.post-title:hover {
  color: #fbbf24;
}

.post-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-tag,
.subject-tag,
.sticky-tag,
.hot-tag,
.status-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.category-tag {
  background: rgba(251, 191, 36, 0.8);
}

.subject-tag {
  background: rgba(59, 130, 246, 0.8);
}

.sticky-tag {
  background: rgba(239, 68, 68, 0.8);
}

.hot-tag {
  background: rgba(245, 101, 101, 0.8);
}

.status-tag {
  background: rgba(16, 185, 129, 0.8);
}

.post-actions {
  display: flex;
  gap: 10px;
}

.like-btn,
.favorite-btn,
.edit-btn,
.delete-btn,
.unfavorite-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-btn {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.like-btn.liked {
  background: rgba(239, 68, 68, 1);
}

.favorite-btn {
  background: rgba(251, 191, 36, 0.8);
  color: white;
}

.favorite-btn.favorited {
  background: rgba(251, 191, 36, 1);
}

.edit-btn {
  background: rgba(59, 130, 246, 0.8);
  color: white;
}

.delete-btn {
  background: rgba(239, 68, 68, 0.8);
  color: white;
}

.unfavorite-btn {
  background: rgba(156, 163, 175, 0.8);
  color: white;
}

.like-btn:hover,
.favorite-btn:hover,
.edit-btn:hover,
.delete-btn:hover,
.unfavorite-btn:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.post-content {
  margin: 0 0 15px 0;
  line-height: 1.6;
  opacity: 0.9;
}

.post-images {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.post-image {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.post-image:hover {
  transform: scale(1.05);
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.post-stats {
  display: flex;
  gap: 15px;
}

.last-reply {
  margin-top: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid #fbbf24;
}

.reply-info {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.reply-label {
  font-weight: bold;
  color: #fbbf24;
}

.reply-author {
  font-weight: bold;
}

.reply-time {
  opacity: 0.7;
}

.reply-content {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

.my-posts-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.my-post {
  border-left: 3px solid #10b981;
}

.favorite-post {
  border-left: 3px solid #fbbf24;
}

.post-time,
.favorite-time {
  font-size: 0.9rem;
  opacity: 0.8;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.new-post-modal {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #fbbf24;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #fbbf24;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
  font-size: 1rem;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-group select option {
  background: #374151;
  color: white;
}

.image-preview {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.preview-item {
  position: relative;
}

.preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.remove-image {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

.cancel-btn,
.submit-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(156, 163, 175, 0.8);
  color: white;
}

.cancel-btn:hover {
  background: rgba(156, 163, 175, 1);
}

.submit-btn {
  background: linear-gradient(45deg, #10b981, #059669);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
  .main-content {
    padding: 15px;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .forum-nav {
    flex-direction: column;
    gap: 10px;
  }

  .nav-tab,
  .new-post-btn {
    width: 100%;
    justify-content: center;
  }

  .search-filter-section {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    min-width: auto;
  }

  .filter-options {
    justify-content: center;
  }

  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .topics-grid {
    grid-template-columns: 1fr;
  }

  .topic-header,
  .post-header {
    flex-direction: column;
    gap: 15px;
  }

  .post-footer {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .post-stats {
    align-self: stretch;
    justify-content: space-around;
  }

  .my-posts-stats {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .new-post-modal {
    margin: 20px;
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
  }
}
</style>