import { useState, useMemo } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { Search, Grid, GridItem } from '@antmjs/vantui'
import ForumPostCard from '@/components/ForumPostCard'
import { getForumPostsBySubCategory } from '@/mock/forum'
import type { Article, ForumSubCategory } from '@/types/article'
import './index.less'

/** 获取状态栏 + 导航栏高度 */
function getNavBarHeight() {
  const systemInfo = Taro.getSystemInfoSync()
  const statusBarHeight = systemInfo.statusBarHeight || 20
  const navBarHeight = 44
  return { statusBarHeight, navBarHeight, totalHeight: statusBarHeight + navBarHeight }
}

/** 论坛 5 个子分类 */
const FORUM_CATEGORIES: { id: ForumSubCategory; label: string; icon: string }[] = [
  { id: 'life', label: '校园生活', icon: '🌸' },
  { id: 'study', label: '学习交流', icon: '📚' },
  { id: 'lost-found', label: '失物招领', icon: '🔍' },
  { id: 'secondhand', label: '二手交易', icon: '🛍' },
  { id: 'tree-hole', label: '树洞', icon: '🌳' },
]

export default function Forum() {
  const [activeCategory, setActiveCategory] = useState<ForumSubCategory>('life')
  const navBarHeight = useMemo(() => getNavBarHeight(), [])

  /** 按当前子分类过滤帖子 */
  const filteredPosts = useMemo(
    () => getForumPostsBySubCategory(activeCategory),
    [activeCategory],
  )

  /** 搜索 */
  const handleSearch = () => {
    Taro.navigateTo({ url: '/pages/search/index' })
  }

  /** 帖子点击 */
  const handlePostClick = (post: Article) => {
    Taro.navigateTo({ url: `/pages/article/index?id=${post.id}` })
  }

  /** 发布帖子 */
  const handlePublish = () => {
    Taro.showToast({ title: '发布功能即将上线', icon: 'none' })
  }

  return (
    <View className='forum-page'>
      {/* ========== 自定义导航栏（标题 + 发布） ========== */}
      <View
        className='custom-navbar'
        style={{ paddingTop: `${navBarHeight.statusBarHeight}px` }}
      >
        <View
          className='navbar-content'
          style={{ height: `${navBarHeight.navBarHeight}px` }}
        >
          <View className='navbar-title-wrap'>
            <Text className='navbar-title'>校园论坛</Text>
          </View>
          <View className='navbar-publish' onClick={handlePublish}>
            <Text className='publish-icon'>✏️</Text>
          </View>
        </View>
      </View>

      {/* 占位 */}
      <View style={{ height: `${navBarHeight.totalHeight}px` }} />

      {/* ========== 主体内容（搜索 + 分类 + 列表）全部可滚动 ========== */}
      <ScrollView
        className='page-scroll'
        scrollY
        enhanced
        showScrollbar={false}
      >
        {/* 搜索栏（主体内容区顶部） */}
        <View className='inline-search-section'>
          <Search
            placeholder='搜索帖子、用户'
            onClickInput={handleSearch}
            shape='round'
            background='#f2f3f5'
            readonly
          />
        </View>

        {/* 5 个子分类导航 */}
        <View className='category-section'>
          <Grid columnNum={5} border={false} gutter={4}>
            {FORUM_CATEGORIES.map((cat) => (
              <GridItem
                key={cat.id}
                icon={cat.icon}
                text={cat.label}
                onClick={() => setActiveCategory(cat.id)}
              />
            ))}
          </Grid>
        </View>

        {/* 列表头 */}
        <View className='post-list-header'>
          <Text className='post-list-title'>
            {FORUM_CATEGORIES.find((c) => c.id === activeCategory)?.label || ''} ·{' '}
            <Text className='post-list-count'>{filteredPosts.length} 条</Text>
          </Text>
        </View>

        {/* 帖子列表 */}
        <View className='post-list'>
          {filteredPosts.map((post) => (
            <ForumPostCard
              key={post.id}
              post={post}
              onClick={handlePostClick}
            />
          ))}
          {filteredPosts.length === 0 && (
            <View className='empty-tip'>该板块下暂无帖子</View>
          )}
        </View>
        <View className='bottom-safe' />
      </ScrollView>
    </View>
  )
}