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

import '../blocs/i9/form_i9_cubit.dart';
import '../blocs/i9/form_i9_state.dart';

class FormI9Page extends StatefulWidget {
  final TaxForm? form;
  const FormI9Page({super.key, this.form});

  @override
  State<FormI9Page> createState() => _FormI9PageState();
}

class _FormI9PageState extends State<FormI9Page> {
  final List<String> _usStates = <String>[
    'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
    'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
    'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
    'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
    'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
  ];

  @override
  void initState() {
    super.initState();
    if (widget.form != null) {
      // Use post-frame callback or simple direct call since we are using Modular.get in build
      // But better helper:
      Modular.get<FormI9Cubit>().initialize(widget.form);
    }
  }

  final List<Map<String, String>> _steps = <Map<String, String>>[
    <String, String>{'title': 'Personal Information', 'subtitle': 'Name and contact details'},
    <String, String>{'title': 'Address', 'subtitle': 'Your current address'},
    <String, String>{'title': 'Citizenship Status', 'subtitle': 'Work authorization verification'},
    <String, String>{'title': 'Review & Sign', 'subtitle': 'Confirm your information'},
  ];

  bool _canProceed(FormI9State state) {
    switch (state.currentStep) {
      case 0:
        return state.firstName.trim().isNotEmpty &&
            state.lastName.trim().isNotEmpty &&
            state.dob.isNotEmpty &&
            state.ssn.replaceAll(RegExp(r'\D'), '').length >= 9;
      case 1:
        return state.address.trim().isNotEmpty &&
            state.city.trim().isNotEmpty &&
            state.state.isNotEmpty &&
            state.zipCode.isNotEmpty;
      case 2:
        return state.citizenshipStatus.isNotEmpty;
      case 3:
        return state.signature.trim().isNotEmpty;
      default:
        return true;
    }
  }

  void _handleNext(BuildContext context, int currentStep) {
    if (currentStep < _steps.length - 1) {
      context.read<FormI9Cubit>().nextStep(_steps.length);
    } else {
      context.read<FormI9Cubit>().submit();
    }
  }

  void _handleBack(BuildContext context) {
    context.read<FormI9Cubit>().previousStep();
  }

  @override
  Widget build(BuildContext context) {
    final i18n = Translations.of(context).staff_compliance.tax_forms.i9;

    final List<Map<String, String>> steps = <Map<String, String>>[
      <String, String>{'title': i18n.steps.personal, 'subtitle': i18n.steps.personal_sub},
      <String, String>{'title': i18n.steps.address, 'subtitle': i18n.steps.address_sub},
      <String, String>{'title': i18n.steps.citizenship, 'subtitle': i18n.steps.citizenship_sub},
      <String, String>{'title': i18n.steps.review, 'subtitle': i18n.steps.review_sub},
    ];

    return BlocProvider<FormI9Cubit>.value(
      value: Modular.get<FormI9Cubit>(),
      child: BlocConsumer<FormI9Cubit, FormI9State>(
        listener: (BuildContext context, FormI9State state) {
          if (state.status == FormI9Status.success) {
            // Success view is handled by state check in build or we can navigate
          } else if (state.status == FormI9Status.failure) {
            UiSnackbar.show(
              context,
              message: translateErrorKey(state.errorMessage ?? 'An error occurred'),
              type: UiSnackbarType.error,
              margin: const EdgeInsets.only(
                left: UiConstants.space4,
                right: UiConstants.space4,
                bottom: 120,
              ),
            );
          }
        },
        builder: (BuildContext context, FormI9State state) {
          if (state.status == FormI9Status.success) return _buildSuccessView(i18n);

          return Scaffold(
            backgroundColor: UiColors.background,
            body: Column(
              children: <Widget>[
                _buildHeader(context, state, steps, i18n),
                Expanded(
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.symmetric(
                      horizontal: UiConstants.space5,
                      vertical: UiConstants.space6,
                    ),
                    child: _buildCurrentStep(context, state, i18n),
                  ),
                ),
                _buildFooter(context, state, steps),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildSuccessView(TranslationsStaffComplianceTaxFormsI9En i18n) {
    return Scaffold(
      backgroundColor: UiColors.background,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(UiConstants.space6),
          child: Container(
            padding: const EdgeInsets.all(UiConstants.space8),
            decoration: BoxDecoration(
              color: UiColors.bgPopup,
              borderRadius: UiConstants.radiusLg,
              border: Border.all(color: UiColors.border),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  width: 64,
                  height: 64,
                  decoration: BoxDecoration(
                    color: UiColors.tagSuccess,
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    UiIcons.success,
                    color: UiColors.textSuccess,
                    size: 32,
                  ),
                ),
                const SizedBox(height: UiConstants.space4),
                Text(
                  i18n.submitted_title,
                  style: UiTypography.headline4m.textPrimary,
                ),
                const SizedBox(height: UiConstants.space2),
                Text(
                  i18n.submitted_desc,
                  textAlign: TextAlign.center,
                  style: UiTypography.body2r.textSecondary,
                ),
                const SizedBox(height: UiConstants.space6),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () => Modular.to.pop(true),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: UiColors.primary,
                      foregroundColor: UiColors.white,
                      padding: const EdgeInsets.symmetric(
                        vertical: UiConstants.space4,
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: UiConstants.radiusLg,
                      ),
                      elevation: 0,
                    ),
                    child: Text(Translations.of(context).staff_compliance.tax_forms.w4.back_to_docs),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeader(
    BuildContext context,
    FormI9State state,
    List<Map<String, String>> steps,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    return Container(
      color: UiColors.primary,
      padding: const EdgeInsets.only(
        top: 60,
        bottom: UiConstants.space6,
        left: UiConstants.space5,
        right: UiConstants.space5,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              GestureDetector(
                onTap: () => Modular.to.pop(),
                child: const Icon(
                  UiIcons.arrowLeft,
                  color: UiColors.white,
                  size: 24,
                ),
              ),
              const SizedBox(width: UiConstants.space3),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    i18n.title,
                    style: UiTypography.headline4m.white,
                  ),
                  Text(
                    i18n.subtitle,
                    style: UiTypography.body3r.copyWith(
                      color: UiColors.white.withValues(alpha: 0.7),
                    ),
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space6),
          Row(
            children: steps
                .asMap()
                .entries
                .map((MapEntry<int, Map<String, String>> entry) {
              final int idx = entry.key;
              final bool isLast = idx == steps.length - 1;
              return Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        height: 4,
                        decoration: BoxDecoration(
                          color: idx <= state.currentStep
                              ? UiColors.white
                              : UiColors.white.withValues(alpha: 0.3),
                          borderRadius: UiConstants.radiusXs,
                        ),
                      ),
                    ),
                    if (!isLast) const SizedBox(width: 4),
                  ],
                ),
              );
            }).toList(),
          ),
          const SizedBox(height: UiConstants.space2),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                i18n.step_label(
                  current: (state.currentStep + 1).toString(),
                  total: steps.length.toString(),
                ),
                style: UiTypography.body3r.copyWith(
                  color: UiColors.white.withValues(alpha: 0.7),
                ),
              ),
              Expanded(
                child: Text(
                  steps[state.currentStep]['title']!,
                  textAlign: TextAlign.end,
                  style: UiTypography.body3m.white.copyWith(
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildCurrentStep(
    BuildContext context,
    FormI9State state,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    switch (state.currentStep) {
      case 0:
        return _buildStep1(context, state, i18n);
      case 1:
        return _buildStep2(context, state, i18n);
      case 2:
        return _buildStep3(context, state, i18n);
      case 3:
        return _buildStep4(context, state, i18n);
      default:
        return Container();
    }
  }

  Widget _buildTextField(
    String label, {
    required String value,
    required ValueChanged<String> onChanged,
    TextInputType? keyboardType,
    String? placeholder,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          label,
          style: UiTypography.body3m.textSecondary.copyWith(
            fontWeight: FontWeight.w500,
          ),
        ),
        const SizedBox(height: UiConstants.space1 + 2),
        TextField(
          controller: TextEditingController(text: value)
            ..selection = TextSelection.fromPosition(
              TextPosition(offset: value.length),
            ),
          onChanged: onChanged,
          keyboardType: keyboardType,
          style: UiTypography.body2r.textPrimary,
          decoration: InputDecoration(
            hintText: placeholder,
            hintStyle: UiTypography.body2r.textPlaceholder,
            filled: true,
            fillColor: UiColors.bgPopup,
            contentPadding: const EdgeInsets.symmetric(
              horizontal: UiConstants.space4,
              vertical: UiConstants.space4,
            ),
            border: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.border),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.border),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.primary),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildStep1(
    BuildContext context,
    FormI9State state,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: _buildTextField(
                i18n.fields.first_name,
                value: state.firstName,
                onChanged: (String val) => context.read<FormI9Cubit>().firstNameChanged(val),
                placeholder: i18n.fields.hints.first_name,
              ),
            ),
            const SizedBox(width: UiConstants.space3),
            Expanded(
              child: _buildTextField(
                i18n.fields.last_name,
                value: state.lastName,
                onChanged: (String val) => context.read<FormI9Cubit>().lastNameChanged(val),
                placeholder: i18n.fields.hints.last_name,
              ),
            ),
          ],
        ),
        const SizedBox(height: UiConstants.space4),
        Row(
          children: <Widget>[
            Expanded(
              child: _buildTextField(
                i18n.fields.middle_initial,
                value: state.middleInitial,
                onChanged: (String val) => context.read<FormI9Cubit>().middleInitialChanged(val),
                placeholder: i18n.fields.hints.middle_initial,
              ),
            ),
            const SizedBox(width: UiConstants.space3),
            Expanded(
              flex: 2,
              child: _buildTextField(
                i18n.fields.other_last_names,
                value: state.otherLastNames,
                onChanged: (String val) => context.read<FormI9Cubit>().otherLastNamesChanged(val),
                placeholder: i18n.fields.maiden_name,
              ),
            ),
          ],
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.dob,
          value: state.dob,
          onChanged: (String val) => context.read<FormI9Cubit>().dobChanged(val),
          placeholder: i18n.fields.hints.dob,
          keyboardType: TextInputType.datetime,
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.ssn,
          value: state.ssn,
          placeholder: i18n.fields.hints.ssn,
          keyboardType: TextInputType.number,
          onChanged: (String val) {
            String text = val.replaceAll(RegExp(r'\D'), '');
            if (text.length > 9) text = text.substring(0, 9);
            context.read<FormI9Cubit>().ssnChanged(text);
          },
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.email,
          value: state.email,
          onChanged: (String val) => context.read<FormI9Cubit>().emailChanged(val),
          keyboardType: TextInputType.emailAddress,
          placeholder: i18n.fields.hints.email,
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.phone,
          value: state.phone,
          onChanged: (String val) => context.read<FormI9Cubit>().phoneChanged(val),
          keyboardType: TextInputType.phone,
          placeholder: i18n.fields.hints.phone,
        ),
      ],
    );
  }

  Widget _buildStep2(
    BuildContext context,
    FormI9State state,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    return Column(
      children: <Widget>[
        _buildTextField(
          i18n.fields.address_long,
          value: state.address,
          onChanged: (String val) => context.read<FormI9Cubit>().addressChanged(val),
          placeholder: i18n.fields.hints.address,
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.apt,
          value: state.aptNumber,
          onChanged: (String val) => context.read<FormI9Cubit>().aptNumberChanged(val),
          placeholder: i18n.fields.hints.apt,
        ),
        const SizedBox(height: UiConstants.space4),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: _buildTextField(
                i18n.fields.city,
                value: state.city,
                onChanged: (String val) => context.read<FormI9Cubit>().cityChanged(val),
                placeholder: i18n.fields.hints.city,
              ),
            ),
            const SizedBox(width: UiConstants.space3),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    i18n.fields.state,
                    style: UiTypography.body3m.textSecondary.copyWith(
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const SizedBox(height: UiConstants.space1 + 2),
                  DropdownButtonFormField<String>(
                    value: state.state.isEmpty ? null : state.state,
                    onChanged: (String? val) =>
                        context.read<FormI9Cubit>().stateChanged(val ?? ''),
                    items: _usStates.map((String stateAbbr) {
                      return DropdownMenuItem<String>(
                        value: stateAbbr,
                        child: Text(stateAbbr),
                      );
                    }).toList(),
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: UiColors.bgPopup,
                      contentPadding: const EdgeInsets.symmetric(
                        horizontal: UiConstants.space4,
                      ),
                      border: OutlineInputBorder(
                        borderRadius: UiConstants.radiusLg,
                        borderSide: const BorderSide(color: UiColors.border),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: UiConstants.radiusLg,
                        borderSide: const BorderSide(color: UiColors.border),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        const SizedBox(height: UiConstants.space4),
        _buildTextField(
          i18n.fields.zip,
          value: state.zipCode,
          onChanged: (String val) => context.read<FormI9Cubit>().zipCodeChanged(val),
          placeholder: i18n.fields.hints.zip,
          keyboardType: TextInputType.number,
        ),
      ],
    );
  }

  Widget _buildStep3(
    BuildContext context,
    FormI9State state,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          i18n.fields.attestation,
          style: UiTypography.body2m.textPrimary,
        ),
        const SizedBox(height: UiConstants.space6),
        _buildRadioOption(
          context,
          state,
          'CITIZEN',
          i18n.fields.citizen,
        ),
        const SizedBox(height: UiConstants.space3),
        _buildRadioOption(
          context,
          state,
          'NONCITIZEN',
          i18n.fields.noncitizen,
        ),
        const SizedBox(height: UiConstants.space3),
        _buildRadioOption(
          context,
          state,
          'PERMANENT_RESIDENT',
          i18n.fields.permanent_resident,
          child: state.citizenshipStatus == 'PERMANENT_RESIDENT'
              ? Padding(
                  padding: const EdgeInsets.only(top: UiConstants.space3),
                  child: _buildTextField(
                    i18n.fields.uscis_number_label,
                    value: state.uscisNumber,
                    onChanged: (String val) => context.read<FormI9Cubit>().uscisNumberChanged(val),
                    placeholder: i18n.fields.hints.uscis,
                  ),
                )
              : null,
        ),
        const SizedBox(height: UiConstants.space3),
        _buildRadioOption(
          context,
          state,
          'ALIEN',
          i18n.fields.alien,
          child: state.citizenshipStatus == 'ALIEN'
              ? Padding(
                  padding: const EdgeInsets.only(top: UiConstants.space3),
                  child: Column(
                    children: <Widget>[
                      _buildTextField(
                        i18n.fields.admission_number,
                        value: state.admissionNumber,
                        onChanged: (String val) => context.read<FormI9Cubit>().admissionNumberChanged(val),
                      ),
                      const SizedBox(height: UiConstants.space3),
                      _buildTextField(
                        i18n.fields.passport,
                        value: state.passportNumber,
                        onChanged: (String val) => context.read<FormI9Cubit>().passportNumberChanged(val),
                      ),
                      const SizedBox(height: UiConstants.space3),
                      _buildTextField(
                        i18n.fields.country,
                        value: state.countryIssuance,
                        onChanged: (String val) => context.read<FormI9Cubit>().countryIssuanceChanged(val),
                      ),
                    ],
                  ),
                )
              : null,
        ),
      ],
    );
  }

  Widget _buildRadioOption(
    BuildContext context,
    FormI9State state,
    String value,
    String label, {
    Widget? child,
  }) {
    final bool isSelected = state.citizenshipStatus == value;
    return GestureDetector(
      onTap: () => context.read<FormI9Cubit>().citizenshipStatusChanged(value),
      child: Container(
        padding: const EdgeInsets.all(UiConstants.space4),
        decoration: BoxDecoration(
          color: UiColors.bgPopup,
          borderRadius: UiConstants.radiusLg,
          border: Border.all(
            color: isSelected ? UiColors.primary : UiColors.border,
            width: isSelected ? 2 : 1,
          ),
        ),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 20,
                  height: 20,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: isSelected ? UiColors.primary : UiColors.border,
                      width: isSelected ? UiConstants.radiusMdValue : 2,
                    ),
                  ),
                ),
                const SizedBox(width: UiConstants.space3),
                Expanded(
                  child: Text(
                    label,
                    style: UiTypography.body2m.textPrimary,
                  ),
                ),
              ],
            ),
            if (child != null) child,
          ],
        ),
      ),
    );
  }

  Widget _buildStep4(
    BuildContext context,
    FormI9State state,
    TranslationsStaffComplianceTaxFormsI9En i18n,
  ) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          padding: const EdgeInsets.all(UiConstants.space4),
          decoration: BoxDecoration(
            color: UiColors.bgPopup,
            borderRadius: UiConstants.radiusLg,
            border: Border.all(color: UiColors.border),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                i18n.fields.summary_title,
                style: UiTypography.headline4m.copyWith(fontSize: 14),
              ),
              const SizedBox(height: UiConstants.space3),
              _buildSummaryRow(i18n.fields.summary_name, '${state.firstName} ${state.lastName}'),
              _buildSummaryRow(i18n.fields.summary_address, '${state.address}, ${state.city}'),
              _buildSummaryRow(
                i18n.fields.summary_ssn,
                '***-**-${state.ssn.length >= 4 ? state.ssn.substring(state.ssn.length - 4) : '****'}',
              ),
              _buildSummaryRow(
                i18n.fields.summary_citizenship,
                _getReadableCitizenship(state.citizenshipStatus),
              ),
            ],
          ),
        ),
        const SizedBox(height: UiConstants.space6),
        CheckboxListTile(
          value: state.preparerUsed,
          onChanged: (bool? val) {
            context.read<FormI9Cubit>().preparerUsedChanged(val ?? false);
          },
          contentPadding: EdgeInsets.zero,
          title: Text(
            i18n.fields.preparer,
            style: UiTypography.body2r.textPrimary,
          ),
          controlAffinity: ListTileControlAffinity.leading,
          activeColor: UiColors.primary,
        ),
        const SizedBox(height: UiConstants.space6),
        Container(
          padding: const EdgeInsets.all(UiConstants.space4),
          decoration: BoxDecoration(
            color: UiColors.accent.withValues(alpha: 0.1),
            borderRadius: UiConstants.radiusLg,
          ),
          child: Text(
            i18n.fields.warning,
            style: UiTypography.body3r.textWarning.copyWith(fontSize: 12),
          ),
        ),
        const SizedBox(height: UiConstants.space6),
        Text(
          i18n.fields.signature_label,
          style: UiTypography.body3m.textSecondary,
        ),
        const SizedBox(height: UiConstants.space1 + 2),
        TextField(
          controller: TextEditingController(text: state.signature)
            ..selection = TextSelection.fromPosition(
              TextPosition(offset: state.signature.length),
            ),
          onChanged: (String val) =>
              context.read<FormI9Cubit>().signatureChanged(val),
          decoration: InputDecoration(
            hintText: i18n.fields.signature_hint,
            filled: true,
            fillColor: UiColors.bgPopup,
            contentPadding: const EdgeInsets.symmetric(
              horizontal: UiConstants.space4,
              vertical: UiConstants.space4,
            ),
            border: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.border),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.border),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: UiConstants.radiusLg,
              borderSide: const BorderSide(color: UiColors.primary),
            ),
          ),
          style: const TextStyle(fontFamily: 'Cursive', fontSize: 18),
        ),
        const SizedBox(height: UiConstants.space4),
        Text(
          i18n.fields.date_label,
          style: UiTypography.body3m.textSecondary,
        ),
        const SizedBox(height: UiConstants.space1 + 2),
        Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(
            horizontal: UiConstants.space4,
            vertical: UiConstants.space4,
          ),
          decoration: BoxDecoration(
            color: UiColors.bgSecondary,
            borderRadius: UiConstants.radiusLg,
            border: Border.all(color: UiColors.border),
          ),
          child: Text(
            DateTime.now().toString().split(' ')[0],
            style: UiTypography.body1r.textPrimary,
          ),
        ),
      ],
    );
  }

  Widget _buildSummaryRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            label,
            style: UiTypography.body2r.textSecondary,
          ),
          Expanded(
            child: Text(
              value,
              textAlign: TextAlign.end,
              style: UiTypography.body2m.textPrimary,
            ),
          ),
        ],
      ),
    );
  }

  String _getReadableCitizenship(String status) {
    final i18n = Translations.of(context).staff_compliance.tax_forms.i9.fields;
    switch (status) {
      case 'CITIZEN':
        return i18n.status_us_citizen;
      case 'NONCITIZEN':
        return i18n.status_noncitizen;
      case 'PERMANENT_RESIDENT':
        return i18n.status_permanent_resident;
      case 'ALIEN':
        return i18n.status_alien;
      default:
        return i18n.status_unknown;
    }
  }

  Widget _buildFooter(
    BuildContext context,
    FormI9State state,
    List<Map<String, String>> steps,
  ) {
    final i18n = Translations.of(context).staff_compliance.tax_forms.i9;

    return Container(
      padding: const EdgeInsets.all(UiConstants.space4),
      decoration: const BoxDecoration(
        color: UiColors.bgPopup,
        border: Border(top: BorderSide(color: UiColors.border)),
      ),
      child: SafeArea(
        child: Row(
          children: <Widget>[
            if (state.currentStep > 0)
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: UiConstants.space3),
                  child: OutlinedButton(
                    onPressed: () => _handleBack(context),
                    style: OutlinedButton.styleFrom(
                      padding: const EdgeInsets.symmetric(
                        vertical: UiConstants.space4,
                      ),
                      side: const BorderSide(color: UiColors.border),
                      shape: RoundedRectangleBorder(
                        borderRadius: UiConstants.radiusLg,
                      ),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Icon(
                          UiIcons.arrowLeft,
                          size: 16,
                          color: UiColors.textPrimary,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        Text(
                          i18n.back,
                          style: UiTypography.body2r.textPrimary,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            Expanded(
              flex: 2,
              child: ElevatedButton(
                onPressed: (
                        _canProceed(state) &&
                        state.status != FormI9Status.submitting)
                    ? () => _handleNext(context, state.currentStep)
                    : null,
                style: ElevatedButton.styleFrom(
                  backgroundColor: UiColors.primary,
                  disabledBackgroundColor: UiColors.bgSecondary,
                  foregroundColor: UiColors.white,
                  padding: const EdgeInsets.symmetric(
                    vertical: UiConstants.space4,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: UiConstants.radiusLg,
                  ),
                  elevation: 0,
                ),
                child: state.status == FormI9Status.submitting
                    ? const SizedBox(
                        width: 20,
                        height: 20,
                        child: CircularProgressIndicator(
                          color: UiColors.white,
                          strokeWidth: 2,
                        ),
                      )
                    : Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            state.currentStep == steps.length - 1
                                ? i18n.submit
                                : i18n.kContinue,
                          ),
                          if (state.currentStep < steps.length - 1) ...<Widget>[
                            const SizedBox(width: UiConstants.space2),
                            const Icon(UiIcons.arrowRight, size: 16, color: UiColors.white),
                          ],
                        ],
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
