import 'package:flutter/material.dart';

import '../../config/theme.dart';

class El3abBottomNav extends StatelessWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;
  final int badgeCount;
  final bool isGameMode;

  const El3abBottomNav({
    super.key,
    required this.currentIndex,
    required this.onTap,
    this.badgeCount = 0,
    this.isGameMode = false,
  });

  static const List<_NavItem> _items = [
    _NavItem(icon: Icons.emoji_events_rounded, label: 'الترتيب', world: 'rank'),
    _NavItem(icon: Icons.people_rounded, label: 'اجتماعي', world: 'social'),
    _NavItem(icon: Icons.sports_esports_rounded, label: 'العب', world: 'play'),
    _NavItem(icon: Icons.military_tech_rounded, label: 'البطولات', world: 'tournaments'),
    _NavItem(icon: Icons.person_rounded, label: 'حسابي', world: 'profile'),
  ];

  static String worldForIndex(int index) => _items[index].world;

  static int indexForWorld(String world) {
    final idx = _items.indexWhere((item) => item.world == world);
    return idx >= 0 ? idx : 2;
  }

  @override
  Widget build(BuildContext context) {
    if (isGameMode) return const SizedBox.shrink();

    return Container(
      decoration: const BoxDecoration(
        color: El3abColors.bgBase,
        border: Border(
          top: BorderSide(color: El3abColors.border, width: 1),
        ),
      ),
      child: SafeArea(
        top: false,
        child: SizedBox(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(_items.length, (index) {
              final item = _items[index];
              final isActive = index == currentIndex;
              final isCenter = index == 2;

              return Expanded(
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () => onTap(index),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Stack(
                        clipBehavior: Clip.none,
                        children: [
                          AnimatedContainer(
                            duration: const Duration(milliseconds: 200),
                            padding: const EdgeInsets.all(6),
                            decoration: isActive
                                ? BoxDecoration(
                                    borderRadius: BorderRadius.circular(12),
                                    color: El3abColors.gold.withValues(alpha: 0.12),
                                  )
                                : null,
                            child: Icon(
                              item.icon,
                              size: isCenter ? 28 : 24,
                              color: isActive
                                  ? El3abColors.gold
                                  : El3abColors.textSecondary,
                            ),
                          ),
                          if (index == 1 && badgeCount > 0)
                            Positioned(
                              right: -2,
                              top: -2,
                              child: Container(
                                padding: const EdgeInsets.all(4),
                                decoration: const BoxDecoration(
                                  color: El3abColors.error,
                                  shape: BoxShape.circle,
                                ),
                                constraints: const BoxConstraints(
                                  minWidth: 16,
                                  minHeight: 16,
                                ),
                                child: Text(
                                  badgeCount > 9 ? '9+' : '$badgeCount',
                                  style: const TextStyle(
                                    fontSize: 9,
                                    fontWeight: FontWeight.w700,
                                    color: Colors.white,
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                        ],
                      ),
                      const SizedBox(height: 2),
                      Text(
                        item.label,
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
                          color: isActive
                              ? El3abColors.gold
                              : El3abColors.textSecondary,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }
}

class _NavItem {
  final IconData icon;
  final String label;
  final String world;

  const _NavItem({
    required this.icon,
    required this.label,
    required this.world,
  });
}
