import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../core/theme/app_colors.dart';
import '../controllers/usage_controller.dart';

class UsageView extends GetView<UsageController> {
  const UsageView({super.key});

  // 2. 颜色配置集中管理
  Color _getBgColor(bool isDark) =>
      isDark ? Colors.black : const Color(0xFFF9FAFB);
  Color _getUnselectedColor(bool isDark) =>
      isDark ? Colors.grey[500]! : const Color(0xFF6B7280);
  Color _getSelectedColor(bool isDark) =>
      isDark ? Colors.blue[200]! : const Color(0xFF3B82F6);

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50],
      body: Obx(() => PageView(
            physics: const NeverScrollableScrollPhysics(),
            controller: controller.pageController,
            children: controller.pageList,
          )),
      bottomNavigationBar: Obx(
        () {
          final currentIndex = controller.pageIndex.value;

          return Container(
            decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(
                color: isDarkMode ? Colors.grey[800]! : Colors.grey[200]!,
                width: 0.5,
              )),
            ),
            // 3. 添加安全区域适配（针对刘海屏）
            child: BottomNavigationBar(
              // 4. 使用生成的导航项
              items: (controller.showAiChat.value
                      ? const [
                          _NavItem(Icons.chat_bubble_outline, 'aiChat'),
                          _NavItem(Icons.translate, 'interpretation'),
                          _NavItem(Icons.people, 'meeting'),
                        ]
                      : const [
                          _NavItem(Icons.translate, 'interpretation'),
                          _NavItem(Icons.people, 'meeting'),
                        ])
                  .map((item) => BottomNavigationBarItem(
                        icon: Icon(item.icon),
                        activeIcon: Icon(item.icon,
                            color: _getSelectedColor(isDarkMode)), // 5. 激活态图标
                        label: item.label.tr, // 统一处理国际化
                      ))
                  .toList(),

              backgroundColor: _getBgColor(isDarkMode),
              currentIndex: currentIndex,
              unselectedItemColor: _getUnselectedColor(isDarkMode),
              selectedItemColor: _getSelectedColor(isDarkMode),
              unselectedFontSize: 10.sp,
              selectedFontSize: 10.sp,

              // 6. 添加动画过渡效果
              onTap: (index) => _onItemTapped(index, currentIndex),

              type: BottomNavigationBarType.fixed,
              // 7. 增加图标和文字的间距
              iconSize: 22.w, // 响应式图标尺寸
              selectedLabelStyle: TextStyle(height: 1.5.sp), // 文字垂直间距
              unselectedLabelStyle: TextStyle(height: 1.5.sp),
            ),
          );
        },
      ),
    );
  }

  // 9. 抽离点击逻辑
  void _onItemTapped(int index, int currentIndex) {
    if (index == currentIndex) return;

    // 10. 添加页面切换动画
    controller.pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
    controller.pageIndex.value = index;
  }
}

// 11. 使用数据类管理导航项配置
class _NavItem {
  final IconData icon;
  final String label;

  const _NavItem(this.icon, this.label);
}