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/personal_info_bloc.dart';
import '../blocs/personal_info_state.dart';
import '../widgets/personal_info_content.dart';


/// The Personal Info page for staff onboarding.
///
/// This page allows staff members to view and edit their personal information
/// including phone number and address. Full name and email are read-only as they come from authentication.
///
/// This page is a StatelessWidget that uses BLoC for state management,
/// following Clean Architecture and the design system guidelines.
class PersonalInfoPage extends StatelessWidget {
  /// Creates a [PersonalInfoPage].
  const PersonalInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    final i18n = Translations.of(context).staff.onboarding.personal_info;
    return BlocProvider<PersonalInfoBloc>(
      create: (BuildContext context) => Modular.get<PersonalInfoBloc>(),
      child: BlocListener<PersonalInfoBloc, PersonalInfoState>(
        listener: (BuildContext context, PersonalInfoState state) {
          if (state.status == PersonalInfoStatus.saved) {
            UiSnackbar.show(
              context,
              message: i18n.save_success,
              type: UiSnackbarType.success,
            );
            Modular.to.pop();
          } else if (state.status == PersonalInfoStatus.error) {
            UiSnackbar.show(
              context,
              message: state.errorMessage != null
                  ? translateErrorKey(state.errorMessage!)
                  : 'An error occurred',
              type: UiSnackbarType.error,
            );
          }
        },
        child: Scaffold(
          backgroundColor: UiColors.background,
          appBar: AppBar(
            backgroundColor: UiColors.bgPopup,
            elevation: 0,
            leading: IconButton(
              icon: const Icon(
                UiIcons.chevronLeft,
                color: UiColors.textSecondary,
              ),
              onPressed: () => Modular.to.pop(),
              tooltip: MaterialLocalizations.of(context).backButtonTooltip,
            ),
            title: Text(
              i18n.title,
              style: UiTypography.title1m.textPrimary,
            ),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(1.0),
              child: Container(
                color: UiColors.border,
                height: 1.0,
              ),
            ),
          ),
          body: SafeArea(
            child: BlocBuilder<PersonalInfoBloc, PersonalInfoState>(
              builder: (BuildContext context, PersonalInfoState state) {
                if (state.status == PersonalInfoStatus.loading ||
                    state.status == PersonalInfoStatus.initial) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }

                if (state.staff == null) {
                  return Center(
                    child: Text(
                      'Failed to load personal information',
                      style: UiTypography.body1r.textSecondary,
                    ),
                  );
                }

                return PersonalInfoContent(staff: state.staff!);
              },
            ),
          ),
        ),
      ),
    );
  }
}
