import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:easy_refresh/easy_refresh.dart';
import '../shell/nav_bar_config.dart';
import '../../core/theme/app_colors.dart';
import '../../core/utils/date_utils.dart' as du;
import '../../core/utils/responsive.dart';
import '../../shared/widgets/list_card.dart';
import '../../shared/widgets/status_tag.dart';
import '../../shared/widgets/empty_state.dart';
import '../../shared/widgets/loading_widget.dart';
import '../../core/i18n/app_localizations.dart';
import 'expense_application_list_controller.dart';

class ExpenseApplicationListPage extends ConsumerStatefulWidget {
  const ExpenseApplicationListPage({super.key});
  @override
  ConsumerState<ExpenseApplicationListPage> createState() =>
      _ExpenseApplicationListPageState();
}

class _ExpenseApplicationListPageState
    extends ConsumerState<ExpenseApplicationListPage>
    with TickerProviderStateMixin {
  static const _tabLabels = ['全部', '草稿', '审批中', '已通过', '已拒绝', '已撤回'];
  static const _tabKeys = ['', 'draft', 'pending', 'approved', 'rejected', 'revoked'];

  late final TabController _tabCtrl;

  @override
  void initState() {
    super.initState();
    _tabCtrl = TabController(length: _tabLabels.length, vsync: this);
    _tabCtrl.addListener(() {
      if (!_tabCtrl.indexIsChanging) {
        ref.read(expenseApplyStatusFilterProvider.notifier).state =
            _tabKeys[_tabCtrl.index];
      }
    });
  }

  @override
  void dispose() {
    _tabCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final status = ref.watch(expenseApplyStatusFilterProvider);
    final l10n = AppLocalizations.of(context);

    ref.read(navBarConfigProvider.notifier).update(
          NavBarConfig(
            title: l10n.get('expenseApplyList'),
            showBack: true,
            onBack: () => context.pop(),
          ),
        );

    // Sync TabController when external filter changes
    final targetIdx = _tabKeys.indexOf(status);
    if (targetIdx >= 0 && _tabCtrl.index != targetIdx && !_tabCtrl.indexIsChanging) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted) _tabCtrl.animateTo(targetIdx);
      });
    }

    return Column(
      children: [
        Container(
          color: AppColors.bgCard,
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          child: TDTabBar(
            tabs: _tabLabels.map((l) => TDTab(text: l)).toList(),
            controller: _tabCtrl,
            labelColor: AppColors.primary,
            unselectedLabelColor: AppColors.textSecondary,
            outlineType: TDTabBarOutlineType.filled,
            showIndicator: true,
            indicatorColor: AppColors.primary,
            indicatorHeight: 3,
            isScrollable: true,
            labelPadding: const EdgeInsets.symmetric(horizontal: 12),
            onTap: (index) {
              ref.read(expenseApplyStatusFilterProvider.notifier).state =
                  _tabKeys[index];
            },
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabCtrl,
            children: List.generate(_tabKeys.length, (tabIdx) {
              return _buildTabContent(tabIdx);
            }),
          ),
        ),
      ],
    );
  }

  Widget _buildTabContent(int tabIdx) {
    final r = ResponsiveHelper.of(context);
    final statusKey = _tabKeys[tabIdx];

    return Center(
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: r.listMaxWidth),
        child: _ExpenseApplyList(
          statusKey: statusKey,
          tabIdx: tabIdx,
        ),
      ),
    );
  }
}

class _ExpenseApplyList extends ConsumerWidget {
  final String statusKey;
  final int tabIdx;

  const _ExpenseApplyList({
    required this.statusKey,
    required this.tabIdx,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Use a key that depends on status to force rebuild when switching tabs
    final itemsAsync = ref.watch(
      expenseApplicationListProvider.select((value) => value),
    );

    return itemsAsync.when(
      loading: () => const LoadingWidget(),
      error: (_, _) => const EmptyState(message: '加载失败'),
      data: (items) {
        if (items.isEmpty) {
          return EasyRefresh(
            header: TDRefreshHeader(),
            onRefresh: () async {
              ref.invalidate(expenseApplicationListProvider);
            },
            child: ListView(
              children: const [
                SizedBox(height: 120),
                EmptyState(message: '暂无报销申请'),
              ],
            ),
          );
        }

        return EasyRefresh(
          header: TDRefreshHeader(),
          onRefresh: () async {
            ref.invalidate(expenseApplicationListProvider);
          },
          child: ListView.builder(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
            itemCount: items.length,
            itemBuilder: (_, i) => Padding(
              padding: const EdgeInsets.only(bottom: 16),
              child: ListCard(
                cardNo: items[i].applicationNo,
                amount: '¥${items[i].estimatedAmount.toStringAsFixed(2)}',
                description:
                    '${items[i].expenseType} — ${items[i].purpose}',
                date: du.DateUtils.formatDate(items[i].createTime),
                statusTag: StatusTag.fromStatus(items[i].status),
                onTap: () => context.push(
                  '/expense-apply/detail/${items[i].id}',
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
