import 'package:flutter/material.dart';
import 'package:itrimobe/pages/login_screen.dart';

class AppBottomNavigation extends StatelessWidget {
  final int? selectedIndex;
  final Function(int) onItemTapped;
  final bool isDesktop;

  const AppBottomNavigation({
    super.key,
    required this.selectedIndex,
    required this.onItemTapped,
    this.isDesktop = false,
  });

  @override
  Widget build(BuildContext context) {
    if (isDesktop) return const SizedBox.shrink();

    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      child: Row(
        children: [
          // Tables Tab - Index 0
          GestureDetector(
            onTap: () => onItemTapped(0),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 0
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.table_restaurant,
                    color:
                        selectedIndex == 0
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Tables',
                    style: TextStyle(
                      color:
                          selectedIndex == 0
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 0
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          // Commandes Tab - Index 1
          GestureDetector(
            onTap: () => onItemTapped(1),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 1
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.receipt_long_outlined,
                    color:
                        selectedIndex == 1
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Commandes',
                    style: TextStyle(
                      color:
                          selectedIndex == 1
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 1
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          // Catégories Tab - Index 2
          GestureDetector(
            onTap: () => onItemTapped(2),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 2
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.category_outlined,
                    color:
                        selectedIndex == 2
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Catégories',
                    style: TextStyle(
                      color:
                          selectedIndex == 2
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 2
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          GestureDetector(
            onTap: () => onItemTapped(4),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 4
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.restaurant_menu,
                    color:
                        selectedIndex == 4
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Plats',
                    style: TextStyle(
                      color:
                          selectedIndex == 4
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 4
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(width: 20),

          GestureDetector(
            onTap: () => onItemTapped(5),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              decoration: BoxDecoration(
                color:
                    selectedIndex == 5
                        ? Colors.green.shade700
                        : Colors.transparent,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.payment,
                    color:
                        selectedIndex == 5
                            ? Colors.white
                            : Colors.grey.shade600,
                    size: 16,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    'Encaissement',
                    style: TextStyle(
                      color:
                          selectedIndex == 5
                              ? Colors.white
                              : Colors.grey.shade600,
                      fontWeight:
                          selectedIndex == 5
                              ? FontWeight.w500
                              : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),

          const Spacer(),

          // User Profile Section
          _buildUserProfile(context),
        ],
      ),
    );
  }

  Widget _buildUserProfile(BuildContext context) {
    return Row(
      children: [
        const SizedBox(width: 6),
        IconButton(
          icon: const Icon(Icons.logout),
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => const LoginScreen()),
            );
          },
        ),
      ],
    );
  }
}