wushu/lib/views/active/category_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../constants/app_constants.dart';
import '../../services/get/category_controller.dart';
import '../../services/get/theme_controller.dart';

/// 时间: 2026-04-01
/// 功能: 分类页面
/// 介绍: 展示诗词分类，包括场景分类和朝代分类
/// 最新变化: 2026-04-02 支持深色模式

class CategoryPage extends StatelessWidget {
  const CategoryPage({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(CategoryController());
    final themeController = Get.find<ThemeController>();

    return Obx(() {
      final isDark = themeController.isDarkModeRx.value;
      final themeColor = themeController.currentThemeColor;

      return Column(
        children: [
          Container(
            color: isDark ? Colors.grey[900] : Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: TabBar(
              controller: controller.tabController,
              tabs: controller.tabCategories
                  .map(
                    (category) => Tab(
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(category['icon'] as IconData, size: 18),
                          const SizedBox(width: 6),
                          Text(category['label'] as String),
                        ],
                      ),
                    ),
                  )
                  .toList(),
              labelColor: themeColor,
              unselectedLabelColor: isDark
                  ? Colors.grey[400]
                  : Colors.grey[600],
              indicatorColor: themeColor,
              indicatorWeight: 3,
              labelStyle: const TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
              unselectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.normal,
                fontSize: 16,
              ),
            ),
          ),
          Container(
            height: 0.5,
            color: isDark ? Colors.grey[800] : const Color(0xFFE5E5EA),
          ),
          Expanded(
            child: Container(
              color: isDark ? const Color(0xFF121212) : const Color(0xFFF2F2F7),
              child: TabBarView(
                controller: controller.tabController,
                children: [
                  _buildCategoryList(
                    controller.sceneData,
                    controller.tabCategories[0]['label'] as String,
                    isDark,
                    themeColor,
                  ),
                  _buildCategoryList(
                    controller.dynastyData,
                    controller.tabCategories[1]['label'] as String,
                    isDark,
                    themeColor,
                  ),
                ],
              ),
            ),
          ),
        ],
      );
    });
  }

  Widget _buildCategoryList(
    Map<String, List<String>> data,
    String categoryType,
    bool isDark,
    Color themeColor,
  ) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(vertical: 8),
      itemCount: data.keys.length,
      separatorBuilder: (context, index) => const SizedBox(height: 8),
      itemBuilder: (context, index) {
        final category = data.keys.elementAt(index);
        final items = data[category]!;

        return Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            color: isDark ? Colors.grey[850] : Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withAlpha(isDark ? 0 : 10),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Material(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(12),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          category,
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                            color: isDark ? Colors.white : Colors.black,
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 10,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: themeColor.withAlpha(26),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Text(
                          '${items.length}',
                          style: TextStyle(
                            fontSize: 13,
                            color: themeColor,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 12),
                  Wrap(
                    spacing: 10,
                    runSpacing: 10,
                    children: items.map((item) {
                      return _buildCategoryChip(
                        item,
                        categoryType,
                        isDark,
                        themeColor,
                      );
                    }).toList(),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget _buildCategoryChip(
    String label,
    String categoryType,
    bool isDark,
    Color themeColor,
  ) {
    final controller = Get.find<CategoryController>();

    return GestureDetector(
      onTap: () {
        controller.navigateToCategoryDetail(label, categoryType);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        decoration: BoxDecoration(
          color: themeColor.withAlpha(26),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: themeColor.withAlpha(77), width: 1),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: themeColor,
            fontSize: 14,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
}