import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../chat_tab/providers/pending_payments_provider.dart';

/// 4-tab bottom bar mirroring Figma `HBTabBar` (home / chat / kamu / premium SOON).
///
/// Phase 4 §1 wires home + chat + kamu. `premium` is intentionally
/// no-op + SOON-tagged. Each tab uses `context.go` so tapping a tab from any
/// non-tab screen resets the back-stack — preventing nav-stack growth as the
/// user bounces between tabs.
///
/// Stage 10: the `chat` tab now lands on `/chat` (which redirects into the
/// `aktif` sub-tab) and renders a red dot when any Pembayaran row is pending.
class HaloTabBar extends ConsumerWidget {
  /// One of `home`, `chat`, `kamu`, `premium`.
  final String active;
  const HaloTabBar({super.key, required this.active});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pendingCount = ref.watch(pendingPaymentsCountProvider);
    return Container(
      decoration: const BoxDecoration(
        color: HaloTokens.surface,
        border: Border(top: BorderSide(color: HaloTokens.border)),
      ),
      padding: EdgeInsets.fromLTRB(
        HaloSpacing.s16,
        HaloSpacing.s8,
        HaloSpacing.s16,
        MediaQuery.of(context).padding.bottom + HaloSpacing.s8,
      ),
      child: Row(
        children: [
          _TabItem(
            icon: '🏠',
            label: 'home',
            active: active == 'home',
            onTap: () => context.go('/home'),
          ),
          _TabItem(
            icon: '💬',
            label: 'chat',
            active: active == 'chat',
            showDot: pendingCount > 0,
            onTap: () => context.go('/chat'),
          ),
          _TabItem(
            icon: '👤',
            label: 'kamu',
            active: active == 'kamu',
            onTap: () => context.go('/profile'),
          ),
          _TabItem(
            icon: '✨',
            label: 'premium',
            active: active == 'premium',
            soon: true,
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

class _TabItem extends StatelessWidget {
  final String icon;
  final String label;
  final bool active;
  final bool soon;
  final bool showDot;
  final VoidCallback onTap;
  const _TabItem({
    required this.icon,
    required this.label,
    required this.active,
    required this.onTap,
    this.soon = false,
    this.showDot = false,
  });

  @override
  Widget build(BuildContext context) {
    final color = active ? HaloTokens.brand : HaloTokens.inkMuted;
    final opacity = soon ? 0.5 : 1.0;
    return Expanded(
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 6),
          child: Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Opacity(
                    opacity: opacity,
                    child: Text(icon, style: const TextStyle(fontSize: 22)),
                  ),
                  const SizedBox(height: 2),
                  Opacity(
                    opacity: opacity,
                    child: Text(
                      label,
                      style: TextStyle(
                        fontFamily: HaloTokens.fontBody,
                        fontSize: 10,
                        fontWeight: active ? FontWeight.w600 : FontWeight.w400,
                        color: color,
                      ),
                    ),
                  ),
                ],
              ),
              if (soon)
                Positioned(
                  top: -2,
                  right: 4,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                    decoration: const BoxDecoration(
                      color: HaloTokens.accent,
                      borderRadius: BorderRadius.all(Radius.circular(6)),
                    ),
                    child: const Text(
                      'SOON',
                      style: TextStyle(
                        fontFamily: HaloTokens.fontBody,
                        fontSize: 8,
                        fontWeight: FontWeight.w700,
                        color: Colors.white,
                        letterSpacing: 0.32,
                      ),
                    ),
                  ),
                ),
              if (showDot && !soon)
                Positioned(
                  top: 2,
                  right: 18,
                  child: Container(
                    width: 8,
                    height: 8,
                    decoration: const BoxDecoration(
                      color: HaloTokens.danger,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}