import 'package:flutter/material.dart';

import 'package:im_app/core/ui/base/context_theme_ext.dart';
import 'package:im_app/core/ui/components/app_button.dart';
import 'package:im_app/features/login/presentation/login_state.dart';

/// 登录步骤 2 — 输入验证码并完成登录
///
/// 纯展示组件，所有交互通过回调传出，不持有任何状态。
///
/// 使用方式：
/// ```dart
/// LoginOtpStep(
///   otpCtrl: _otpCtrl,
///   state: state,
///   onVerifyAndLogin: _verifyAndLogin,
///   onBackToPhone: _backToPhone,
/// )
/// ```
class LoginOtpStep extends StatelessWidget {
  const LoginOtpStep({
    super.key,
    required this.otpCtrl,
    required this.state,
    required this.onVerifyAndLogin,
    required this.onBackToPhone,
  });

  final TextEditingController otpCtrl;
  final LoginState state;
  final VoidCallback onVerifyAndLogin;
  final VoidCallback onBackToPhone;

  @override
  Widget build(BuildContext context) {
    final s = context.styles;
    final c = context.colors;

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text(
          '输入验证码',
          style: s.headlineSmall,
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 8),
        Text(
          '验证码已发送至 ${state.countryCode} ${state.maskedContact}',
          style: s.bodyMedium?.copyWith(color: c.textSecondary),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 32),
        TextField(
          controller: otpCtrl,
          keyboardType: TextInputType.number,
          maxLength: 4,
          decoration: const InputDecoration(
            labelText: '4 位验证码',
            counterText: '',
          ),
          autofillHints: const [AutofillHints.oneTimeCode],
        ),
        const SizedBox(height: 24),
        if (state.error != null)
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: Text(
              state.error!,
              style: s.bodyError,
              textAlign: TextAlign.center,
            ),
          ),
        AppButton.primary(
          label: '登录',
          onPressed: state.isLoading ? null : onVerifyAndLogin,
          isLoading: state.isLoading,
        ),
        const SizedBox(height: 12),
        AppButton.text(
          label: '返回修改手机号',
          onPressed: state.isLoading ? null : onBackToPhone,
        ),
      ],
    );
  }
}
