import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:tatlock_ui/core/auth/auth_provider.dart';
import 'package:tatlock_ui/routing/app_router.dart';

/// Profile dropdown menu in the header.
///
/// Shows user info when authenticated, with Settings and Logout options.
class ProfileDropdown extends ConsumerWidget {
  const ProfileDropdown({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authState = ref.watch(authNotifierProvider);
    final colorScheme = Theme.of(context).colorScheme;

    return authState.when(
      data: (auth) => PopupMenuButton<String>(
        offset: const Offset(0, 48),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        child: Tooltip(
          message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
          child: CircleAvatar(
            radius: 18,
            backgroundColor: colorScheme.primaryContainer,
            child: auth.isAuthenticated
                ? Text(
                    _getInitials(auth.userName),
                    style: TextStyle(
                      color: colorScheme.onPrimaryContainer,
                      fontWeight: FontWeight.w500,
                    ),
                  )
                : Icon(
                    Icons.person_outline,
                    size: 20,
                    color: colorScheme.onPrimaryContainer,
                  ),
          ),
        ),
        itemBuilder: (context) => [
          // User info header (non-selectable)
          PopupMenuItem<String>(
            enabled: false,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
                if (auth.userEmail != null)
                  Text(
                    auth.userEmail!,
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: colorScheme.onSurfaceVariant,
                        ),
                  ),
              ],
            ),
          ),
          const PopupMenuDivider(),

          // Settings
          const PopupMenuItem<String>(
            value: 'settings',
            child: Row(
              children: [
                Icon(Icons.settings_outlined, size: 20),
                SizedBox(width: 12),
                Text('Settings'),
              ],
            ),
          ),

          // Logout (only if authenticated)
          if (auth.isAuthenticated)
            const PopupMenuItem<String>(
              value: 'logout',
              child: Row(
                children: [
                  Icon(Icons.logout, size: 20),
                  SizedBox(width: 12),
                  Text('Logout'),
                ],
              ),
            ),
        ],
        onSelected: (value) {
          switch (value) {
            case 'settings':
              context.go(AppRoutes.settings);
            case 'logout':
              ref.read(authNotifierProvider.notifier).signOut();
          }
        },
      ),
      loading: () => const CircleAvatar(
        radius: 18,
        child: SizedBox(
          width: 16,
          height: 16,
          child: CircularProgressIndicator(strokeWidth: 2),
        ),
      ),
      error: (_, __) => CircleAvatar(
        radius: 18,
        backgroundColor: colorScheme.errorContainer,
        child: Icon(
          Icons.error_outline,
          size: 20,
          color: colorScheme.onErrorContainer,
        ),
      ),
    );
  }

  String _getInitials(String? name) {
    if (name == null || name.isEmpty) return '?';
    final parts = name.trim().split(' ');
    if (parts.length >= 2) {
      return '${parts.first[0]}${parts.last[0]}'.toUpperCase();
    }
    return name[0].toUpperCase();
  }
}