import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../core/providers/locale_provider.dart';
import '../core/providers/theme_provider.dart';

const _orange = Color(0xFFFF6B00);

/// Compact row of language pills + theme toggle.
/// [onDark] = true when rendered on a dark background (landing screen).
class PreferencesBar extends ConsumerWidget {
  final bool onDark;

  const PreferencesBar({super.key, this.onDark = false});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentLocale = ref.watch(localeProvider);
    final themeMode = ref.watch(themeProvider);
    final isDark = themeMode == ThemeMode.dark;

    final inactiveText = onDark
        ? Colors.white.withValues(alpha: 0.55)
        : Theme.of(context).colorScheme.onSurfaceVariant;
    final activeText = Colors.white;
    final inactiveBg = onDark
        ? Colors.white.withValues(alpha: 0.12)
        : Theme.of(context).colorScheme.surfaceContainerHighest;

    const langs = [
      ('EN', Locale('en')),
      ('FR', Locale('fr')),
      ('AR', Locale('ar')),
    ];

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Language pills
        ...langs.map((item) {
          final (code, locale) = item;
          final selected =
              currentLocale.languageCode == locale.languageCode;
          return GestureDetector(
            onTap: () => ref.read(localeProvider.notifier).setLocale(locale),
            child: Container(
              margin: const EdgeInsets.only(right: 6),
              padding:
                  const EdgeInsets.symmetric(horizontal: 11, vertical: 6),
              decoration: BoxDecoration(
                color: selected ? _orange : inactiveBg,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(
                code,
                style: TextStyle(
                  color: selected ? activeText : inactiveText,
                  fontSize: 12,
                  fontWeight:
                      selected ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
          );
        }),

        const SizedBox(width: 2),

        // Theme toggle icon
        GestureDetector(
          onTap: () => ref.read(themeProvider.notifier).toggle(),
          child: Container(
            padding: const EdgeInsets.all(7),
            decoration: BoxDecoration(
              color: inactiveBg,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Icon(
              isDark ? Icons.light_mode_outlined : Icons.dark_mode_outlined,
              size: 15,
              color: onDark
                  ? Colors.white.withValues(alpha: 0.8)
                  : Theme.of(context).colorScheme.onSurfaceVariant,
            ),
          ),
        ),
      ],
    );
  }
}