import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/constants/assets.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/view_models/home_view_model.dart';
import 'package:tm_app/views/profile/strings/profile_strings.dart';

import '../../../views/home/strings/home_strings.dart';
import '../../../views/tenders/strings/tenders_strings.dart';

class MobileShellPage extends StatelessWidget {
  const MobileShellPage({
    required this.navigationShell,
    required this.onTap,
    super.key,
  });

  final StatefulNavigationShell navigationShell;
  final ValueChanged<int> onTap;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationShell,
      bottomNavigationBar: Container(
        height: 72.0.h(),
        decoration: BoxDecoration(
          color: AppColors.grey10,
          border: Border(top: BorderSide(color: AppColors.grey30)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _bottomNavigationItem(
              context: context,
              text: HomeStrings.home,
              isActive: navigationShell.currentIndex == 0,
              onTap: () => onTap(0),
              iconPath: AssetsManager.home,
              activeIconPath: AssetsManager.homeActive,
            ),
            _bottomNavigationItem(
              context: context,
              text: TendersStrings.tendersTitle,
              isActive: navigationShell.currentIndex == 1,
              onTap: () => onTap(1),
              iconPath: AssetsManager.tenders,
              activeIconPath: AssetsManager.tendersActive,
            ),
            _bottomNavigationItem(
              context: context,
              text: TendersStrings.contracts,
              isActive: navigationShell.currentIndex == 4,
              onTap: () => onTap(4),
              iconPath: AssetsManager.contracts,
              activeIconPath: AssetsManager.contracts,
            ),
            _bottomNavigationItem(
              context: context,
              text: TendersStrings.notifications,
              isActive: navigationShell.currentIndex == 3,
              onTap: () => onTap(3),
              iconPath: AssetsManager.notify,
              activeIconPath: AssetsManager.notifyActive,
              showBadge: context.watch<HomeViewModel>().hasUnreadNotification,
            ),
            _bottomNavigationItem(
              context: context,
              text: ProfileStrings.profileTitle,
              isActive: navigationShell.currentIndex == 2,
              onTap: () => onTap(2),
              iconPath: AssetsManager.profile,
              activeIconPath: AssetsManager.profileActive,
            ),
          ],
        ),
      ),
    );
  }

  Widget _bottomNavigationItem({
    required BuildContext context,
    required String text,
    required bool isActive,
    required VoidCallback onTap,
    required String iconPath,
    required String activeIconPath,
    bool showBadge = false,
  }) {
    return InkWell(
      onTap: onTap,
      child: SizedBox(
        width: 64.0.w(),
        height: 72.0.h(),
        child: Padding(
          padding: EdgeInsets.only(top: 12.0.h(), bottom: 14.0.h()),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Stack(
                clipBehavior: Clip.none,
                children: [
                  SvgPicture.asset(isActive ? activeIconPath : iconPath),
                  if (showBadge)
                    Positioned(
                      right: -5,
                      top: -2,
                      child: Container(
                        width: 8,
                        height: 8,
                        decoration: const BoxDecoration(
                          color: Colors.red,
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                ],
              ),
              Text(
                text,
                maxLines: 1,
                style: TextStyle(
                  fontSize:
                      iconPath == AssetsManager.notify ? 11.0.sp() : 12.0.sp(),
                  fontWeight: FontWeight.w400,
                  color: isActive ? AppColors.primaryColor : AppColors.grey60,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
