import 'package:core_localization/core_localization.dart';
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 '../blocs/emergency_contact_bloc.dart';
import '../widgets/emergency_contact_add_button.dart';
import '../widgets/emergency_contact_form_item.dart';
import '../widgets/emergency_contact_info_banner.dart';
import '../widgets/emergency_contact_save_button.dart';

/// The Staff Emergency Contact screen.
///
/// This screen allows staff to manage their emergency contacts during onboarding.
/// It uses [EmergencyContactBloc] for state management and follows the
/// composed-widget pattern for UI elements.
class EmergencyContactScreen extends StatelessWidget {
  const EmergencyContactScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Translations.of(context); // Force rebuild on locale change
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: const Icon(UiIcons.chevronLeft, color: UiColors.textSecondary),
          onPressed: () => Modular.to.pop(),
        ),
        title: Text(
          'Emergency Contact',
          style: UiTypography.title1m.textPrimary,
        ),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(1.0),
          child: Container(color: UiColors.border, height: 1.0),
        ),
      ),
      body: BlocProvider(
        create: (context) => Modular.get<EmergencyContactBloc>(),
        child: BlocConsumer<EmergencyContactBloc, EmergencyContactState>(

          listener: (context, state) {
            if (state.status == EmergencyContactStatus.failure) {
              UiSnackbar.show(
                context,
                message: state.errorMessage != null
                    ? translateErrorKey(state.errorMessage!)
                    : 'An error occurred',
                type: UiSnackbarType.error,
                margin: const EdgeInsets.only(bottom: 150, left: 16, right: 16),
              );
            }
          },
          builder: (context, state) {
            if (state.status == EmergencyContactStatus.loading) {
              return const Center(child: CircularProgressIndicator());
            }
            return Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.all(UiConstants.space6),
                    child: Column(
                      children: [
                        const EmergencyContactInfoBanner(),
                        const SizedBox(height: UiConstants.space6),
                        ...state.contacts.asMap().entries.map(
                              (entry) => EmergencyContactFormItem(
                                index: entry.key,
                                contact: entry.value,
                                totalContacts: state.contacts.length,
                              ),
                            ),
                        const EmergencyContactAddButton(),
                        const SizedBox(height: UiConstants.space16),
                      ],
                    ),
                  ),
                ),
                const EmergencyContactSaveButton(),
              ],
            );
          },
        ),
      ),
    );
  }
}
