import 'package:auto_route/auto_route.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:intl/intl.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/data/enums/state_status.dart';
import 'package:krow/core/presentation/gen/assets.gen.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_button.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_loading_overlay.dart';
import 'package:krow/features/profile/wages_forms/domain/bloc/wages_form_bloc.dart';
import 'package:krow/features/profile/wages_forms/presentation/components/title_wage_form_visitor.dart';

@RoutePage()
class SignedFormScreen extends StatelessWidget {
  const SignedFormScreen({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final form = context.read<WagesFormBloc>().state.activeForm;
    const titleVisitor = TitleWageFormVisitor();

    return Scaffold(
      appBar: KwAppBar(
        titleText: form != null ? form.visit(titleVisitor) : 'Form',
        showNotification: true,
      ),
      body: ListView(
        primary: false,
        padding: const EdgeInsetsDirectional.fromSTEB(16, 4, 16, 60),
        children: [
          Container(
            padding: const EdgeInsets.all(12),
            decoration: const BoxDecoration(
              color: AppColors.grayPrimaryFrame,
              borderRadius: BorderRadius.all(
                Radius.circular(12),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      form?.name ?? 'Form',
                      style: AppTextStyles.headingH3,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const Gap(12),
                    DecoratedBox(
                      decoration: const BoxDecoration(
                        color: AppColors.statusSuccess,
                        borderRadius: BorderRadius.all(Radius.circular(32)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 6,
                        ),
                        child: Text(
                          'Signed',
                          style: AppTextStyles.bodySmallMed
                              .copyWith(color: AppColors.grayWhite),
                        ),
                      ),
                    )
                  ],
                ),
                const Gap(12),
                const Divider(color: AppColors.grayTintStroke),
                const Gap(12),
                const Text('SIGNED DATE', style: AppTextStyles.captionReg),
                const Gap(8),
                Text(
                  DateFormat('M/d/y').format(DateTime.now()),
                  style: AppTextStyles.bodyMediumMed,
                ),
                const Gap(24),
                const Text('SIGNATURE', style: AppTextStyles.captionReg),
                const Gap(6),
                Container(
                  height: 106,
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: AppColors.graySecondaryFrame,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Column(
                    children: [
                      Expanded(
                        child: Align(
                          alignment: AlignmentDirectional.centerStart,
                          child: Image.memory(
                            context.read<WagesFormBloc>().state.signImageData ??
                                Uint8List(0),
                          ),
                        ),
                      ),
                      const Gap(6),
                      const Divider(
                        height: 1,
                        color: AppColors.grayTintStroke,
                      ),
                    ],
                  ),
                ),
                const Gap(12),
                KwButton.outlinedPrimary(
                  label: 'Document Preview',
                  leftIcon: Assets.images.icons.eye,
                  onPressed: () {
                    context.pushRoute(const FormPreviewRoute());
                  },
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: SafeArea(
        top: false,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: BlocConsumer<WagesFormBloc, WagesFormState>(
            listenWhen: (previous, current) =>
                current.status == StateStatus.success,
            buildWhen: (previous, current) => current.status != previous.status,
            listener: (context, state) {
              context.router.popUntilRoot();
            },
            builder: (context, state) {
              return KwLoadingOverlay(
                shouldShowLoading: state.status == StateStatus.loading,
                child: KwButton.primary(
                  label: 'Submit',
                  onPressed: () {
                    context
                        .read<WagesFormBloc>()
                        .add(const SubmitCurrentForm());
                  },
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}
