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/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.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/scroll_layout_helper.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_app_bar.dart';
import 'package:krow/features/profile/bank_account/domain/bloc/bank_account_bloc.dart';

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

  @override
  State<BankAccountScreen> createState() => _BankAccountScreenState();

  @override
  Widget wrappedRoute(BuildContext context) {
    return this;
  }
}

class _BankAccountScreenState extends State<BankAccountScreen> {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<BankAccountBloc, BankAccountState>(
      builder: (context, state) {
        return Scaffold(
          appBar: KwAppBar(
            titleText: 'bank_account'.tr(),
            showNotification: true,
          ),
          body: ScrollLayoutHelper(
            padding: const EdgeInsets.all(16),
            upperWidget: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'securely_manage_bank_account'.tr(),
                  style: AppTextStyles.bodySmallReg
                      .copyWith(color: AppColors.blackGray),
                ),
                const Gap(24),
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: KwBoxDecorations.primaryLight12,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildCardHeader(context),
                      ...(state
                          .mapFromBankAccount()
                          .entries
                          .map((entry) => infoRow(
                              entry.value.title, entry.value.value ?? ''))
                          .expand((e) => e)
                          .toList())
                    ],
                  ),
                ),
              ],
            ),
            lowerWidget: Container(),
          ),
        );
      },
    );
  }

  Row _buildCardHeader(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
         Text(
          'your_payment_details'.tr(),
          style: AppTextStyles.bodyMediumMed,
        ),
        GestureDetector(
            onTap: () {
              context.router.push(const BankAccountEditRoute());
            },
            child: Assets.images.icons.edit.svg(height: 16, width: 16))
      ],
    );
  }

  List<Widget> infoRow(
    String title,
    String value,
  ) {
    return [
      const Gap(24),
      Text(
        '$title:'.toUpperCase(),
        style: AppTextStyles.captionReg.copyWith(color: AppColors.blackGray),
      ),
      const Gap(8),
      Text(
        value,
        style: AppTextStyles.bodyMediumMed,
      ),
    ];
  }
}
