refactor: implement Flutter best practices and proper architecture

- Create proper service layer with AuthService and FirebaseAuthService
- Implement UserModel for proper data representation
- Enhance AuthState with proper loading states and error handling
- Convert stateless widgets to stateful where appropriate
- Add proper form validation and user feedback mechanisms
- Implement comprehensive error handling and loading indicators
- Fix redirect logic in router for proper authentication flow
- Create theme system with light and dark themes
- Add shared components like LoadingIndicator
- Improve code organization following recommended architecture
- Add proper disposal of controllers and focus nodes
- Implement proper null safety handling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/auth/phone_input_screen.dart

@@ -1,11 +1,31 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:intl_phone_field/intl_phone_field.dart';
+import 'package:provider/provider.dart';
+import 'package:phone_login/auth/auth_state.dart';
 
-class PhoneInputScreen extends StatelessWidget {
+class PhoneInputScreen extends StatefulWidget {
   const PhoneInputScreen({super.key});
 
+  @override
+  State<PhoneInputScreen> createState() => _PhoneInputScreenState();
+}
+
+class _PhoneInputScreenState extends State<PhoneInputScreen> {
+  final TextEditingController _phoneController = TextEditingController();
+  String? _selectedCountry;
+  String? _formattedPhone;
+
+  @override
+  void dispose() {
+    _phoneController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final authState = Provider.of<AuthState>(context);
+
     return Scaffold(
       appBar: AppBar(title: const Text('Enter Phone Number')),
       body: Padding(
@@ -20,11 +40,43 @@ class PhoneInputScreen extends StatelessWidget {
               ),
               initialCountryCode: 'US',
               onChanged: (phone) {
-                // TODO: Handle phone number changes
+                _formattedPhone = phone.completeNumber;
+              },
+              onCountryChanged: (country) {
+                _selectedCountry = country.isoCode;
               },
             ),
             const SizedBox(height: 20),
-            ElevatedButton(onPressed: () {}, child: const Text('Send OTP')),
+            authState.isLoading
+                ? const Center(child: CircularProgressIndicator())
+                : ElevatedButton(
+                    onPressed: _formattedPhone != null
+                        ? () async {
+                            if (_formattedPhone != null) {
+                              await authState.signInWithPhoneNumber(_formattedPhone!);
+                              if (!context.mounted) return;
+
+                              if (authState.errorMessage != null) {
+                                ScaffoldMessenger.of(context).showSnackBar(
+                                  SnackBar(content: Text(authState.errorMessage!)),
+                                );
+                              } else {
+                                context.go('/sms_verify');
+                              }
+                            }
+                          }
+                        : null,
+                    child: const Text('Send OTP'),
+                  ),
+            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,
+                ),
+              ),
           ],
         ),
       ),