import 'package:flutter/material.dart';

/// 底部导航栏组件
/// 包含四个Tab：龙虎榜、监控、兑换、我
/// 自定义设计风格，使用 LayoutBuilder 确保自适应
class BottomNavBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;
  final int profileBadgeCount;

  const BottomNavBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
    this.profileBadgeCount = 0,
  });

  @override
  Widget build(BuildContext context) {
    // 获取底部安全区域高度
    final bottomPadding = MediaQuery.of(context).padding.bottom;

    return Container(
      // 内容高度 + 底部安全区域
      height: 56 + bottomPadding,
      decoration: const BoxDecoration(
        color: Color(0xFFFFF5E6),
        border: Border(
          top: BorderSide(
            width: 1,
            color: Color(0x338B5A2B),
          ),
        ),
      ),
      child: Padding(
        // 底部留出安全区域
        padding: EdgeInsets.only(bottom: bottomPadding),
        child: Row(
          children: [
            _buildNavItem(
              index: 0,
              icon: Icons.leaderboard_outlined,
              activeIcon: Icons.leaderboard,
              label: '龙虎榜',
            ),
            _buildNavItem(
              index: 1,
              icon: Icons.monitor_heart_outlined,
              activeIcon: Icons.monitor_heart,
              label: '监控',
            ),
            _buildNavItem(
              index: 2,
              icon: Icons.swap_horiz_outlined,
              activeIcon: Icons.swap_horiz,
              label: '兑换',
            ),
            _buildNavItem(
              index: 3,
              icon: Icons.person_outline,
              activeIcon: Icons.person,
              label: '我',
              badgeCount: profileBadgeCount,
            ),
          ],
        ),
      ),
    );
  }

  /// 构建导航项
  Widget _buildNavItem({
    required int index,
    required IconData icon,
    required IconData activeIcon,
    required String label,
    int badgeCount = 0,
  }) {
    final isSelected = currentIndex == index;
    return Expanded(
      child: GestureDetector(
        onTap: () => onTap(index),
        behavior: HitTestBehavior.opaque,
        child: SizedBox(
          height: 56,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Stack(
                clipBehavior: Clip.none,
                children: [
                  Icon(
                    isSelected ? activeIcon : icon,
                    size: 24,
                    color: isSelected ? const Color(0xFFD4AF37) : const Color(0xFF8B5A2B),
                  ),
                  if (badgeCount > 0)
                    Positioned(
                      right: -8,
                      top: -4,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
                        constraints: const BoxConstraints(
                          minWidth: 16,
                          minHeight: 16,
                        ),
                        decoration: BoxDecoration(
                          color: const Color(0xFFD4AF37),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(
                            color: const Color(0xFFFFF5E6),
                            width: 1.5,
                          ),
                        ),
                        child: Center(
                          child: Text(
                            badgeCount > 99 ? '99+' : badgeCount.toString(),
                            style: const TextStyle(
                              fontSize: 10,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                              height: 1,
                            ),
                          ),
                        ),
                      ),
                    ),
                ],
              ),
              const SizedBox(height: 2),
              Text(
                label,
                style: TextStyle(
                  fontSize: 12,
                  fontFamily: 'Inter',
                  fontWeight: FontWeight.w500,
                  height: 1.33,
                  color: isSelected ? const Color(0xFFD4AF37) : const Color(0xFF8B5A2B),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
