import 'package:easy_localization/easy_localization.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:krow/app.dart';
import 'package:krow/core/application/clients/api/api_client.dart';
import 'package:krow/core/application/di/injectable.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/profile/profile_main/domain/bloc/user_profile_bloc.dart';
import 'package:krow/features/profile/profile_main/domain/bloc/user_profile_event.dart';
import 'package:krow/features/profile/profile_main/domain/bloc/user_profile_state.dart';

class ProfileMenuWidget extends StatelessWidget {
  final ProfileState state;

  const ProfileMenuWidget({super.key, required this.state});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      child: AnimatedSize(
        alignment: Alignment.topCenter,
        duration: const Duration(milliseconds: 300),
        child: Container(
          margin: const EdgeInsets.only(top: 18),
          child: Column(
            children: [
              if (state.menu.parent != null && state.menu.title != null)
                _buildCurrentMenuTitle(context),
              for (var item in state.menu.children) ...[
                const Gap(6),
                _buildMenuItem(item, context),
                const Gap(6),
              ],
              const Gap(18),
              if (state.menu.parent == null) ...[
                const Padding(
                  padding: EdgeInsets.only(left: 16, right: 16, bottom: 24),
                  child: Divider(color: AppColors.grayStroke),
                ),
                _buildLogOutItem(context),
                const Gap(24),
              ]
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCurrentMenuTitle(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 18.0, top: 6),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () {
              if (state.menu.parent != null) {
                context
                    .read<ProfileBloc>()
                    .add(ProfileEventSelectMenu(item: state.menu.parent!));
              }
            },
            child: Container(
              margin: const EdgeInsets.only(left: 16),
              color: Colors.transparent,
              height: 48,
              width: 48,
              child: Center(child: Assets.images.appBar.appbarLeading.svg()),
            ),
          ),
          Expanded(
            child: Text(
              state.menu.title!.tr(),

              style: AppTextStyles.headingH2.copyWith(
                color: AppColors.blackBlack,
              ),
            ),
          ),
          const Gap(64),
        ],
      ),
    );
  }

  Widget _buildMenuItem(MenuRoutItem item, BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (item.children.isNotEmpty) {
          context.read<ProfileBloc>().add(ProfileEventSelectMenu(item: item));
        } else if (item.route != null) {
          appRouter.push(item.route!);
          return;
        } else {
          item.onTap?.call();
        }
      },
      child: Container(
        color: Colors.transparent,
        child: Row(
          children: [
            _buildMenuIcon(icon: item.icon!, showBadge: item.showBadge),
            Expanded(
              child: Text(
                item.title?.tr() ?? '',
                style: AppTextStyles.headingH3.copyWith(
                  color: AppColors.blackBlack,
                ),
              ),
            ),
            const Gap(16),
            Assets.images.userProfile.chevron2.svg(),
            const Gap(16),
          ],
        ),
      ),
    );
  }

  Widget _buildLogOutItem(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FirebaseAuth.instance.signOut();
        getIt<ApiClient>().dropCache();
        appRouter.replace(const WelcomeRoute());
      },
      child: Row(
        children: [
          _buildMenuIcon(
            icon: Assets.images.userProfile.menu.logOut.svg(),
          ),
          Expanded(
            child: Text(
              'log_out'.tr(),
              style: AppTextStyles.headingH3.copyWith(
                color: AppColors.statusError,
              ),
            ),
          ),
          const Gap(16),
        ],
      ),
    );
  }

  Stack _buildMenuIcon({required SvgPicture icon, bool showBadge = false}) {
    return Stack(
      children: [
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 16),
          height: 48,
          width: 48,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: AppColors.primaryYellow,
          ),
          child: Center(
            child: icon,
          ),
        ),
        if (showBadge) _buildBadge(),
      ],
    );
  }

  Widget _buildBadge() {
    return Positioned(
      right: 16,
      child: Container(
        height: 12,
        width: 12,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: AppColors.statusError,
          border: Border.all(color: AppColors.bgColorLight, width: 2),
        ),
      ),
    );
  }
}
