import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/active_session_notifier.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../home/widgets/halo_tab_bar.dart';
import '../providers/pending_payments_provider.dart';
import '../widgets/sub_tab_pill.dart';

/// Phase 4 Stage 10 — host scaffold for the Chat tab.
///
/// Wraps the three sub-tab views (`/chat/aktif`, `/chat/pembayaran`,
/// `/chat/selesai`) via `ShellRoute`. The header + sub-tab pills + bottom
/// `HaloTabBar` stay constant while only the body swaps.
class ChatTabShell extends ConsumerWidget {
  final Widget child;
  final ChatSubTab active;

  const ChatTabShell({
    super.key,
    required this.child,
    required this.active,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final activeSession = ref.watch(activeSessionProvider).valueOrNull;
    final unreadCount =
        activeSession?.hasSession == true ? activeSession!.unreadCount : 0;
    final pendingCount = ref.watch(pendingPaymentsCountProvider);

    return Scaffold(
      backgroundColor: HaloTokens.bg,
      body: SafeArea(
        bottom: false,
        child: Column(
          children: [
            const _Heading(),
            _SubTabBar(
              active: active,
              aktifBadge: unreadCount,
              pembayaranBadge: pendingCount,
            ),
            Expanded(child: child),
            const HaloTabBar(active: 'chat'),
          ],
        ),
      ),
    );
  }
}

enum ChatSubTab {
  aktif('/chat/aktif', 'aktif'),
  pembayaran('/chat/pembayaran', 'pembayaran'),
  selesai('/chat/selesai', 'selesai');

  final String path;
  final String label;
  const ChatSubTab(this.path, this.label);
}

class _Heading extends StatelessWidget {
  const _Heading();

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.fromLTRB(
        HaloSpacing.s24,
        HaloSpacing.s20,
        HaloSpacing.s24,
        HaloSpacing.s12,
      ),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          'chat',
          style: TextStyle(
            fontFamily: HaloTokens.fontDisplay,
            fontSize: 26,
            fontWeight: FontWeight.w700,
            color: HaloTokens.brandDark,
            letterSpacing: -0.52,
          ),
        ),
      ),
    );
  }
}

class _SubTabBar extends StatelessWidget {
  final ChatSubTab active;
  final int aktifBadge;
  final int pembayaranBadge;

  const _SubTabBar({
    required this.active,
    required this.aktifBadge,
    required this.pembayaranBadge,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: HaloSpacing.s16),
      decoration: const BoxDecoration(
        border: Border(bottom: BorderSide(color: HaloTokens.border)),
      ),
      child: Row(
        children: [
          SubTabPill(
            label: 'aktif',
            active: active == ChatSubTab.aktif,
            badgeCount: aktifBadge,
            onTap: () => _navigate(context, ChatSubTab.aktif),
          ),
          SubTabPill(
            label: 'pembayaran',
            active: active == ChatSubTab.pembayaran,
            badgeCount: pembayaranBadge,
            onTap: () => _navigate(context, ChatSubTab.pembayaran),
          ),
          SubTabPill(
            label: 'selesai',
            active: active == ChatSubTab.selesai,
            badgeCount: null,
            onTap: () => _navigate(context, ChatSubTab.selesai),
          ),
        ],
      ),
    );
  }

  void _navigate(BuildContext context, ChatSubTab target) {
    if (target == active) return;
    context.go(target.path);
  }
}
