import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:core_localization/core_localization.dart';

import '../blocs/attire_cubit.dart';
import '../blocs/attire_state.dart';
import '../widgets/attestation_checkbox.dart';
import '../widgets/attire_bottom_bar.dart';
import '../widgets/attire_grid.dart';
import '../widgets/attire_info_card.dart';

class AttirePage extends StatelessWidget {
  const AttirePage({super.key});

  @override
  Widget build(BuildContext context) {
    // Note: t.staff_profile_attire is available via re-export of core_localization
    final AttireCubit cubit = Modular.get<AttireCubit>();

    return BlocProvider<AttireCubit>.value(
      value: cubit,
      child: Scaffold(
        backgroundColor: UiColors.background, // FAFBFC
        appBar: AppBar(
          backgroundColor: UiColors.white,
          elevation: 0,
          leading: IconButton(
            icon: const Icon(UiIcons.chevronLeft, color: UiColors.iconSecondary),
            onPressed: () => Modular.to.pop(),
          ),
          title: Text(
            t.staff_profile_attire.title,
            style: UiTypography.headline3m.textPrimary,
          ),
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(1.0),
            child: Container(color: UiColors.border, height: 1.0),
          ),
        ),
        body: BlocConsumer<AttireCubit, AttireState>(
          listener: (BuildContext context, AttireState state) {
            if (state.status == AttireStatus.failure) {
              UiSnackbar.show(
                context,
                message: translateErrorKey(state.errorMessage ?? 'Error'),
                type: UiSnackbarType.error,
                margin: const EdgeInsets.only(
                  bottom: 150,
                  left: UiConstants.space4,
                  right: UiConstants.space4,
                ),
              );
            }
            if (state.status == AttireStatus.saved) {
              Modular.to.pop();
            }
          },
          builder: (BuildContext context, AttireState state) {
            if (state.status == AttireStatus.loading && state.options.isEmpty) {
              return const Center(child: CircularProgressIndicator());
            }

            return Column(
              children: <Widget>[
                Expanded(
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.all(UiConstants.space5),
                    child: Column(
                      children: <Widget>[
                        const AttireInfoCard(),
                        const SizedBox(height: UiConstants.space6),
                        AttireGrid(
                          items: state.options,
                          selectedIds: state.selectedIds,
                          photoUrls: state.photoUrls,
                          uploadingStatus: state.uploadingStatus,
                          onToggle: cubit.toggleSelection,
                          onUpload: cubit.uploadPhoto,
                        ),
                        const SizedBox(height: UiConstants.space6),
                        AttestationCheckbox(
                          isChecked: state.attestationChecked,
                          onChanged: (bool? val) => cubit.toggleAttestation(val ?? false),
                        ),
                        const SizedBox(height: UiConstants.space20),
                      ],
                    ),
                  ),
                ),
                AttireBottomBar(
                  canSave: state.canSave,
                  allMandatorySelected: state.allMandatorySelected,
                  allMandatoryHavePhotos: state.allMandatoryHavePhotos,
                  attestationChecked: state.attestationChecked,
                  onSave: cubit.save,
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
