import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../core/theme/app_colors.dart';
import '../features/customer/presentation/customer_tab.dart';
import '../features/mine/presentation/mine_tab.dart';
import '../features/project/presentation/project_tab.dart';
import '../features/workbench/presentation/workbench_tab.dart';
import '../shared/widgets/x_bottom_nav.dart';
import 'tab_index.dart';

/// 4 个 Tab 的常驻容器，对应 `pages/tabs/index.vue`。
///
/// 源项目用 `v-show` 切换，不销毁重建、保留滚动位置与内部状态；
/// 这里用 [IndexedStack] 达到同样效果。
class TabsPage extends ConsumerWidget {
  const TabsPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final current = ref.watch(tabIndexProvider);

    return Scaffold(
      backgroundColor: AppColors.bgPage,
      body: Stack(
        children: [
          Positioned.fill(
            child: IndexedStack(
              index: current.index,
              children: const [
                WorkbenchTab(),
                CustomerTab(),
                ProjectTab(),
                MineTab(),
              ],
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: XBottomNav(
              current: current.key,
              onChanged: (key) =>
                  ref.read(tabIndexProvider.notifier).selectByKey(key),
            ),
          ),
        ],
      ),
    );
  }
}