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) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: Icon(UiIcons.chevronLeft, color: UiColors.textSecondary),
          onPressed: () => Modular.to.pop(),
        ),
        title: Text(
          'Emergency Contact',
          style: UiTypography.title1m.copyWith(color: UiColors.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) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text(state.errorMessage ?? 'An error occurred')),
              );
            }
          },
          builder: (context, state) {
            if (state.status == EmergencyContactStatus.loading) {
              return const Center(child: CircularProgressIndicator());
            }
            return Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    padding: EdgeInsets.all(UiConstants.space6),
                    child: Column(
                      children: [
                        const EmergencyContactInfoBanner(),
                        SizedBox(height: UiConstants.space6),
                        ...state.contacts.asMap().entries.map(
                              (entry) => EmergencyContactFormItem(
                                index: entry.key,
                                contact: entry.value,
                                totalContacts: state.contacts.length,
                              ),
                            ),
                        const EmergencyContactAddButton(),
                        SizedBox(height: UiConstants.space16),
                      ],
                    ),
                  ),
                ),
                const EmergencyContactSaveButton(),
              ],
            );
          },
        ),
      ),
    );
  }
}
