import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../providers/admin_provider.dart';
import '../../models/user_model.dart';

class UserListScreen extends ConsumerWidget {
  const UserListScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final usersAsync = ref.watch(organizationUsersProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Ansatte'),
      ),
      body: usersAsync.when(
        data: (users) {
          if (users.isEmpty) {
            return const Center(child: Text('Ingen ansatte funnet'));
          }
          return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              final user = users[index];
              return ListTile(
                leading: CircleAvatar(
                  child: Text(user.displayName.isNotEmpty ? user.displayName[0].toUpperCase() : '?'),
                ),
                title: Text(user.displayName),
                subtitle: Text(user.email),
                trailing: Chip(
                  label: Text(_getRoleDisplayName(user.role)),
                  backgroundColor: _getRoleColor(user.role).withOpacity(0.2),
                ),
                onTap: () {
                  // TODO: Naviger til brukerdetaljer/timeliste
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Detaljvisning kommer snart')),
                  );
                },
              );
            },
          );
        },
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (error, _) => Center(child: Text('Feil: $error')),
      ),
    );
  }

  String _getRoleDisplayName(UserRole role) {
    switch (role) {
      case UserRole.employee:
        return 'Ansatt';
      case UserRole.admin:
        return 'Admin';
      case UserRole.systemAdmin:
        return 'System Admin';
    }
  }

  Color _getRoleColor(UserRole role) {
    switch (role) {
      case UserRole.employee:
        return Colors.blue;
      case UserRole.admin:
        return Colors.orange;
      case UserRole.systemAdmin:
        return Colors.red;
    }
  }
}