import 'dart:async';

import 'package:auth/src/features/login/presentation/widgets/otp_code_fields.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';

class TwoFactorBottomSheetView extends StatelessWidget {
  const TwoFactorBottomSheetView({
    super.key,
    required this.theme,
    required this.title,
    required this.subtitle,
    required this.verifyText,
    required this.closeText,
    required this.isOtpLoading,
    required this.otpCode,
    required this.otpErrorText,
    required this.onChanged,
    required this.onVerify,
    required this.onClose,
  });

  final ThemePort theme;

  final String title;
  final String subtitle;
  final String verifyText;
  final String closeText;

  final bool isOtpLoading;
  final String otpCode;
  final String otpErrorText;

  final ValueChanged<String> onChanged;
  final Future<void> Function() onVerify;
  final VoidCallback onClose;

  bool get _isValidOtp => otpCode.trim().length == 6;

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;

    return Container(
      decoration: BoxDecoration(
        color: theme.getColorFor(ThemeCode.backgroundPrimary),
        borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
      ),
      padding: EdgeInsets.fromLTRB(24, 12, 24, 24 + bottomInset),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 4,
            width: 48,
            decoration: BoxDecoration(
              color: Colors.grey.withValues(alpha: 0.35),
              borderRadius: BorderRadius.circular(999),
            ),
          ),
          const SizedBox(height: 16),

          Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
          ),
          const SizedBox(height: 8),
          Text(
            subtitle,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 14),
          ),
          const SizedBox(height: 20),

          OtpCodeFields(
            length: 6,
            enabled: !isOtpLoading,
            errorText: otpErrorText.isEmpty ? null : otpErrorText,
            onChanged: onChanged,
            onCompleted: (_) {
              if (isOtpLoading || !_isValidOtp) return;
              unawaited(onVerify());
            },
          ),
          const SizedBox(height: 20),

          PrimaryButton(
            onPressed: (isOtpLoading || !_isValidOtp)
                ? () {}
                : () => unawaited(onVerify()),
            text: verifyText,
            color: theme.getColorFor(ThemeCode.buttonPrimary),
            leading: isOtpLoading
                ? const SizedBox(
                    height: 18,
                    width: 18,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      color: Colors.white,
                    ),
                  )
                : null,
          ),

          const SizedBox(height: 12),

          TextButton(
            onPressed: isOtpLoading ? null : onClose,
            child: Text(closeText),
          ),
        ],
      ),
    );
  }
}
