import 'package:blog_app/apis/blog.dart';
import 'package:blog_app/models/blog.dart';
import 'package:blog_app/pages/blog_list_page.dart';
import 'package:blog_app/widget/common.dart';
import 'package:flutter/material.dart';

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

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  late List<BlogCategory> categories = [];

  @override
  void initState() {
    super.initState();
    _loadBlogCategory();
  }

  Future<void> _loadBlogCategory() async {
    try {
      final result = await queryBlogCategoryApi();
      setState(() {
        categories = result;
      });
    } catch (e) {
      throw Exception('获取博客分类失败: $e');
    }
  }

  Widget _buildTitle() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primary,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(
            '共 ${categories.length} 个分类',
            style: const TextStyle(
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildTitle(),
        SizedBox(height: 10),
        // 分类列表
        Expanded(
          child: ListView.builder(
            itemCount: categories.length,
            itemBuilder: (context, index) {
              final category = categories[index];
              return _buildCategoryCard(context, category);
            },
          ),
        ),
      ],
    );
  }

  Widget _buildCategoryCard(BuildContext context, BlogCategory category) {
    final colors = Theme.of(context).colorScheme;

    return buildCard(
      context: context,
      child: ListTile(
        leading: Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: colors.primary.withAlpha(50),
            shape: BoxShape.circle,
          ),
          child: Icon(Icons.folder, color: colors.primary, size: 28),
        ),
        title: Text(
          category.name,
          style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(top: 4.0),
          child: Text(
            '${category.count} 篇博客',
            style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
          ),
        ),
        trailing: Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
          decoration: BoxDecoration(
            color: colors.primary.withAlpha(50),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Text(
            category.count.toString(),
            style: TextStyle(
              color: colors.primary,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        onTap: () => _navigateToBlogList(context, category),
      ),
    );
  }

  void _navigateToBlogList(BuildContext context, BlogCategory category) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => BlogListPage(category: category.name),
      ),
    );
  }

  void _showCategoryDetail(BuildContext context, BlogCategory category) {
    showDialog(
      context: context,
      builder:
          (context) => AlertDialog(
            title: Text(category.name),
            content: Text('该分类下有 ${category.count} 篇博客'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: const Text('关闭'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                  // 这里可以添加跳转到该分类博客列表的逻辑
                },
                child: const Text('查看博客'),
              ),
            ],
          ),
    );
  }
}