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

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Consumer<AuthState>(
        builder: (context, authState, child) {
          if (authState.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }

          return authState.isLoggedIn
              ? const _LoggedInView()
              : const _LoggedOutView();
        },
      ),
    );
  }
}

class _LoggedInView extends StatelessWidget {
  const _LoggedInView();

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

    return Scaffold(
      appBar: AppBar(
        title: const Text('Welcome Back!'),
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              context.go('/profile'); // Navigate to profile screen
            },
          ),
        ],
      ),
      body: authState.currentUser != null
          ? ListView(
              padding: const EdgeInsets.all(8.0),
              children: [
                Card(
                  child: ListTile(
                    leading: const Icon(Icons.person),
                    title: Text(authState.currentUser!.displayName ?? 'User'),
                    subtitle: Text(authState.currentUser!.phoneNumber ?? 'No phone number'),
                  ),
                ),
                const Divider(),
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: 20, // Example items
                  itemBuilder: (context, index) {
                    return Card(
                      margin: const EdgeInsets.symmetric(vertical: 4.0),
                      child: ListTile(
                        leading: const Icon(Icons.star),
                        title: Text('Item ${index + 1}'),
                        subtitle: const Text('This is an example item.'),
                      ),
                    );
                  },
                ),
              ],
            )
          : const Center(child: Text('Loading user data...')),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          await authState.logout(); // Call logout method
        },
        label: const Text('Logout'),
        icon: const Icon(Icons.logout),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

class _LoggedOutView extends StatelessWidget {
  const _LoggedOutView();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.lock, size: 100, color: Colors.grey),
          const SizedBox(height: 20),
          Text('Welcome!', style: Theme.of(context).textTheme.headlineMedium),
          const SizedBox(height: 10),
          const Text(
            'Please log in to continue.',
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.grey),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            onPressed: () {
              context.go('/login');
            },
            child: const Text('Login'),
          ),
        ],
      ),
    );
  }
}