import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worldhopper/l10n/app_localizations.dart';
import 'package:worldhopper/providers/locale_provider.dart';
import 'package:worldhopper/widgets/worldhopper_app_bar.dart';

/// Screen for selecting the app language
class LanguageSettingsScreen extends ConsumerWidget {
  const LanguageSettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final l10n = AppLocalizations.of(context);
    final currentLocale = ref.watch(localeNotifierProvider);

    return Scaffold(
      appBar: WorldhopperAppBar(
        title: Text(l10n.languageTitle),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 8),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: RadioGroup<Locale?>(
              groupValue: currentLocale,
              onChanged: (value) {
                ref.read(localeNotifierProvider.notifier).setLocale(value);
              },
              child: Column(
                children: [
                  // System default option
                  ListTile(
                    leading: const Icon(Icons.language),
                    title: Text(l10n.languageSystem),
                    subtitle: Text(l10n.languageSystemSubtitle),
                    trailing: const Radio<Locale?>(
                      value: null,
                    ),
                    onTap: () {
                      ref.read(localeNotifierProvider.notifier).setLocale(null);
                    },
                  ),
                  // Supported locales
                  for (final locale in AppLocalizations.supportedLocales) ...[
                    const Divider(height: 1),
                    ListTile(
                      title: Text(_localeDisplayName(locale)),
                      trailing: Radio<Locale?>(
                        value: locale,
                      ),
                      onTap: () {
                        ref
                            .read(localeNotifierProvider.notifier)
                            .setLocale(locale);
                      },
                    ),
                  ],
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  String _localeDisplayName(Locale locale) {
    // Map locale codes to their native display names
    const localeNames = <String, String>{
      'en': 'English',
      'es': 'Espa\u00f1ol',
      'fr': 'Fran\u00e7ais',
      'de': 'Deutsch',
      'it': 'Italiano',
      'pt': 'Portugu\u00eas',
      'ja': '\u65e5\u672c\u8a9e',
      'ko': '\ud55c\uad6d\uc5b4',
      'zh': '\u4e2d\u6587',
    };

    return localeNames[locale.languageCode] ?? locale.languageCode;
  }
}