phone_login/lib/auth/sms_verification_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
import 'package:phone_login/auth/auth_state.dart';

class SmsVerificationScreen extends StatefulWidget {
  const SmsVerificationScreen({super.key});

  @override
  State<SmsVerificationScreen> createState() => _SmsVerificationScreenState();
}

class _SmsVerificationScreenState extends State<SmsVerificationScreen> {
  final TextEditingController _pinController = TextEditingController();
  final FocusNode _pinFocusNode = FocusNode();
  String? _verificationId;

  @override
  void initState() {
    super.initState();
    // In a real app, the verificationId would be passed from the previous screen
    // For now, we'll store it in a global variable or use another mechanism
  }

  @override
  void dispose() {
    _pinController.dispose();
    _pinFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authState = Provider.of<AuthState>(context);

    return Scaffold(
      appBar: AppBar(title: const Text('SMS Verification')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              'Enter the 6-digit code sent to your phone',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 20),
            Pinput(
              length: 6,
              controller: _pinController,
              focusNode: _pinFocusNode,
              onCompleted: (pin) async {
                // In a real app, we'd have the verificationId from the previous step
                // This is a simplified implementation
                if (_verificationId != null) {
                  await authState.verifyOTP(_verificationId!, pin);
                  if (authState.errorMessage != null) {
                    if (context.mounted) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text(authState.errorMessage!)),
                      );
                    }
                  } else {
                    if (context.mounted) {
                      context.go('/');
                    }
                  }
                }
              },
            ),
            const SizedBox(height: 20),
            authState.isLoading
                ? const Center(child: CircularProgressIndicator())
                : ElevatedButton(
                    onPressed: _pinController.text.length == 6
                        ? () async {
                            // In a real app, we'd have the verificationId from the previous step
                            if (_verificationId != null) {
                              await authState.verifyOTP(_verificationId!, _pinController.text);
                              if (!context.mounted) return;

                              if (authState.errorMessage != null) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(content: Text(authState.errorMessage!)),
                                );
                              } else {
                                context.go('/');
                              }
                            }
                          }
                        : null,
                    child: const Text('Verify'),
                  ),
            if (authState.errorMessage != null)
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Text(
                  authState.errorMessage!,
                  style: const TextStyle(color: Colors.red),
                  textAlign: TextAlign.center,
                ),
              ),
          ],
        ),
      ),
    );
  }
}