import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../common_bloc/bottom_navigation_bloc.dart';

class CustomBottomNavBar extends StatelessWidget {
  const CustomBottomNavBar({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<NavigationBloc, NavigationState>(
      builder: (context, state) {
        return Container(
          decoration: BoxDecoration(
            color: const Color(0xffFFF5F5),
            border: Border.all(color: Color(0xffFDCDCE)),
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(24),
              topRight: Radius.circular(24),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 8.r,
                offset: const Offset(0, -2),
              ),
            ],
          ),
          padding: EdgeInsets.symmetric(vertical: 14.h, horizontal: 16.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildNavItem(
                context,
                index: 0,
                iconPath: 'assets/icons/explore.png',
                label: 'Explore',
                isActive: state.selectedIndex == 0,
              ),
              _buildNavItem(
                context,
                index: 1,
                iconPath: 'assets/icons/magic.png',
                label: 'Magic Itinerary',
                isActive: state.selectedIndex == 1,
              ),
              _buildNavItem(
                context,
                index: 2,
                iconPath: 'assets/icons/pass_icon.png',
                label: 'My Passes',
                isActive: state.selectedIndex == 2,
              ),
              _buildNavItem(
                context,
                index: 3,
                iconPath: 'assets/icons/postcard_icon.png',
                label: 'Postcard',
                isActive: state.selectedIndex == 3,
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildNavItem(
    BuildContext context, {
    required int index,
    required String iconPath,
    required String label,
    required bool isActive,
  }) {
    final color = isActive
        ? const Color(0xFFBB474A)
        : Color(0xFFBB474A).withOpacity(0.6);
    return GestureDetector(
      onTap: () =>
          context.read<NavigationBloc>().add(NavigationTabChanged(index)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (isActive)
            Container(
              margin: EdgeInsets.only(bottom: 4.h),
              height: 4.h,
              width: 50.w,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(2.r),
              ),
            )
          else
            SizedBox(height: 7.h),
          Image.asset(iconPath, scale: 4, color: color),
          SizedBox(height: 4.h),
          Text(
            label,
            style: TextStyle(
              color: color,
              fontSize: 12.sp,
              fontWeight: isActive ? FontWeight.w500 : FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }
}
