import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/data/enums/state_status.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_app_bar.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_loading_overlay.dart';
import 'package:krow/features/profile/benefits/domain/bloc/benefits_bloc.dart';
import 'package:krow/features/profile/benefits/presentation/widgets/benefit_card_widget.dart';

@RoutePage()
class BenefitsScreen extends StatefulWidget implements AutoRouteWrapper {
  const BenefitsScreen({super.key});

  @override
  State<BenefitsScreen> createState() => _BenefitsScreenState();

  @override
  Widget wrappedRoute(BuildContext context) {
    return BlocProvider<BenefitsBloc>(
      create: (context) => BenefitsBloc()..add(const InitializeBenefits()),
      child: this,
    );
  }
}

class _BenefitsScreenState extends State<BenefitsScreen> {
  final OverlayPortalController _controller = OverlayPortalController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: KwLoadingOverlay(
        controller: _controller,
        child: BlocListener<BenefitsBloc, BenefitsState>(
          listenWhen: (previous, current) => previous.status != current.status,
          listener: (context, state) {
            if (state.status == StateStatus.loading) {
              _controller.show();
            } else {
              _controller.hide();
            }
          },
          child: CustomScrollView(
            primary: false,
            slivers: [
              SliverList.list(
                children: [
                  KwAppBar(
                    titleText: 'your_benefits_overview'.tr(),
                    showNotification: true,
                  ),
                  const Gap(16),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Text(
                      'manage_and_track_benefits'.tr(),
                      style: AppTextStyles.bodySmallReg.copyWith(
                        color: AppColors.blackGray,
                      ),
                      textAlign: TextAlign.start,
                    ),
                  ),
                ],
              ),
              SliverPadding(
                padding: const EdgeInsets.fromLTRB(16, 16, 16, 120),
                sliver: BlocBuilder<BenefitsBloc, BenefitsState>(
                  buildWhen: (current, previous) =>
                      current.benefits != previous.benefits,
                  builder: (context, state) {
                    return SliverList.separated(
                      itemCount: state.benefits.length,
                      separatorBuilder: (context, index) {
                        return const SizedBox(height: 12);
                      },
                      itemBuilder: (context, index) {
                        return BenefitCardWidget(
                          benefit: state.benefits[index],
                        );
                      },
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
