import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:im_app/features/login/presentation/login_state.dart';
import 'package:im_app/features/login/presentation/login_view_model.dart';
import 'package:im_app/features/login/view/widgets/login_otp_step.dart';
import 'package:im_app/features/login/view/widgets/login_phone_step.dart';

/// 登录页 — 两步流程：手机号 → 验证码
///
/// 步骤 1 [LoginStep.phone]：[LoginPhoneStep] — 输入国家代码 + 手机号
/// 步骤 2 [LoginStep.otp]：[LoginOtpStep] — 输入验证码完成登录
///
/// 页面本身只持有两个 TextEditingController 和三个回调方法，
/// 具体 UI 由 widgets/ 下的子组件负责。
class LoginPage extends ConsumerStatefulWidget {
  const LoginPage({super.key});

  @override
  ConsumerState<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends ConsumerState<LoginPage> {
  // demo 预填，上线前去掉
  final _phoneCtrl = TextEditingController(text: '83465308');
  final _otpCtrl = TextEditingController(text: '0000');

  @override
  void dispose() {
    _phoneCtrl.dispose();
    _otpCtrl.dispose();
    super.dispose();
  }

  void _sendOtp(LoginState state) {
    ref
        .read(loginViewModelProvider.notifier)
        .sendOtp(state.countryCode, _phoneCtrl.text.trim());
  }

  void _verifyAndLogin() {
    ref
        .read(loginViewModelProvider.notifier)
        .verifyAndLogin(_otpCtrl.text.trim());
  }

  void _backToPhone() {
    _otpCtrl.clear();
    ref.read(loginViewModelProvider.notifier).backToPhone();
  }

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(loginViewModelProvider);

    return Scaffold(
      appBar: AppBar(automaticallyImplyLeading: false, title: const Text('登录')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 32),
        child: state.step == LoginStep.phone
            ? LoginPhoneStep(
                phoneCtrl: _phoneCtrl,
                state: state,
                onSendOtp: () => _sendOtp(state),
              )
            : LoginOtpStep(
                otpCtrl: _otpCtrl,
                state: state,
                onVerifyAndLogin: _verifyAndLogin,
                onBackToPhone: _backToPhone,
              ),
      ),
    );
  }
}