halobestie-clone/mitra_app/lib/features/shell/widgets/bestie_tab_bar.dart

import 'package:flutter/material.dart';
import '../../../core/theme/halo_tokens.dart';

/// Bottom navigation bar for the mitra app shell.
///
/// Mirrors `figma-bestie/project/screens/v4.jsx::BestieTabBar` (v4.jsx:464).
/// Three tabs: Home / Chat / Profil. The Chat tab can render a red badge
/// with [chatBadgeCount] when > 0.
class BestieTabBar extends StatelessWidget {
  const BestieTabBar({
    super.key,
    required this.activeIndex,
    required this.onTap,
    this.chatBadgeCount = 0,
  });

  /// 0 = Home, 1 = Chat, 2 = Profil.
  final int activeIndex;
  final ValueChanged<int> onTap;
  final int chatBadgeCount;

  static const _items = <_TabItem>[
    _TabItem(emoji: '🏠', label: 'Home'),
    _TabItem(emoji: '💬', label: 'Chat'),
    _TabItem(emoji: '👤', label: 'Profil'),
  ];

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        color: HaloTokens.surface,
        border: Border(top: BorderSide(color: HaloTokens.border)),
      ),
      child: SafeArea(
        top: false,
        child: SizedBox(
          height: 64,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              for (var i = 0; i < _items.length; i++)
                Expanded(
                  child: _Tab(
                    item: _items[i],
                    active: activeIndex == i,
                    badgeCount: i == 1 ? chatBadgeCount : 0,
                    onTap: () => onTap(i),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

class _TabItem {
  const _TabItem({required this.emoji, required this.label});
  final String emoji;
  final String label;
}

class _Tab extends StatelessWidget {
  const _Tab({
    required this.item,
    required this.active,
    required this.badgeCount,
    required this.onTap,
  });

  final _TabItem item;
  final bool active;
  final int badgeCount;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final color = active ? HaloTokens.brand : HaloTokens.inkMuted;
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 6),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Stack(
                clipBehavior: Clip.none,
                children: [
                  Text(item.emoji, style: const TextStyle(fontSize: 18, height: 1.1)),
                  if (badgeCount > 0)
                    Positioned(
                      top: -4,
                      right: -10,
                      child: Container(
                        constraints: const BoxConstraints(minWidth: 16),
                        height: 16,
                        padding: const EdgeInsets.symmetric(horizontal: 4),
                        alignment: Alignment.center,
                        decoration: const BoxDecoration(
                          color: Color(0xFFFF4D6A),
                          borderRadius: HaloRadius.pill,
                        ),
                        child: Text(
                          '$badgeCount',
                          style: const TextStyle(
                            fontFamily: HaloTokens.fontBody,
                            color: Colors.white,
                            fontSize: 9,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                    ),
                ],
              ),
              const SizedBox(height: 2),
              Text(
                item.label,
                style: TextStyle(
                  fontFamily: HaloTokens.fontBody,
                  fontSize: 10,
                  fontWeight: active ? FontWeight.w700 : FontWeight.w500,
                  color: color,
                ),
              ),
              const SizedBox(height: 4),
              // Active-indicator pill — small pink underline below label.
              Container(
                width: 18,
                height: 3,
                decoration: BoxDecoration(
                  color: active ? HaloTokens.brand : Colors.transparent,
                  borderRadius: HaloRadius.pill,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}