import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:staff_authentication/src/presentation/blocs/auth_state.dart';
import 'otp_verification/otp_input_field.dart';
import 'otp_verification/otp_resend_section.dart';
import 'otp_verification/otp_verification_actions.dart';
import 'otp_verification/otp_verification_header.dart';

/// A widget that displays the OTP verification UI.
class OtpVerification extends StatelessWidget {
  /// The current state of the authentication process.
  final AuthState state;

  /// Callback for when the OTP is submitted.
  final ValueChanged<String> onOtpSubmitted;

  /// Callback for when a new code is requested.
  final VoidCallback onResend;

  /// Callback for the "Continue" action.
  final VoidCallback onContinue;

  /// Creates an [OtpVerification].
  const OtpVerification({
    super.key,
    required this.state,
    required this.onOtpSubmitted,
    required this.onResend,
    required this.onContinue,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(
              horizontal: UiConstants.space6,
              vertical: UiConstants.space8,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                OtpVerificationHeader(phoneNumber: state.phoneNumber),
                const SizedBox(height: UiConstants.space8),
                OtpInputField(
                  error: state.errorMessage ?? '',
                  onCompleted: onOtpSubmitted,
                ),
                const SizedBox(height: UiConstants.space6),
                OtpResendSection(onResend: onResend, hasError: state.hasError),
              ],
            ),
          ),
        ),
        OtpVerificationActions(
          isLoading: state.isLoading,
          canSubmit: state.otp.length == 6,
          onContinue: onContinue,
        ),
      ],
    );
  }
}
