import 'package:flutter/material.dart';
import '../../resouce/base_color.dart';
import '../game/game_tab_screen.dart';
import '../home/home_screen.dart';
import '../personal/personal_screen.dart';
import '../support/transaction_history_screen.dart';
import '../voucher/voucher_tab_screen.dart';

class MainTabScreen extends StatefulWidget {
  const MainTabScreen({super.key});

  @override
  State<MainTabScreen> createState() => _MainTabScreenState();
}

class _MainTabScreenState extends State<MainTabScreen> {
  int _currentIndex = 0;

  final List<Widget> _pages = const [
    HomeScreen(),
    VoucherTabScreen(),
    GameTabScreen(),
    TransactionHistoryScreen(),
    PersonalScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent, // cho sáng nền tổng thể
      extendBody: true,
      body: _pages[_currentIndex],
      bottomNavigationBar: SafeArea(
        minimum: const EdgeInsets.only(left: 12, right: 12, bottom: 12),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(132),
          child: Container(
            height: 72,
            color: BaseColor.primary500,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _buildTabItem(icon: Icons.home, label: 'Trang chủ', index: 0),
                _buildTabItem(icon: Icons.star, label: 'Ưu đãi', index: 1),
                _buildTabItem(icon: Icons.videogame_asset, label: 'Game', index: 2),
                _buildTabItem(icon: Icons.shopping_cart, label: 'Mua sắm', index: 3),
                _buildTabItem(icon: Icons.person, label: 'Cá nhân', index: 4),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildTabItem({required IconData icon, required String label, required int index}) {
    final isSelected = _currentIndex == index;
    return Expanded(
      child: GestureDetector(
        onTap: () => setState(() => _currentIndex = index),
        child: Container(
          color: Colors.transparent,
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon,
                  size: 28,
                  color: isSelected ? Colors.white : Colors.white70),
              const SizedBox(height: 2),
              Text(
                label,
                style: TextStyle(
                  color: isSelected ? Colors.white : Colors.white70,
                  fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                  fontSize: 12,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
