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

/// Screen for appearance settings (theme mode)
class AppearanceSettingsScreen extends ConsumerWidget {
  const AppearanceSettingsScreen({super.key});

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

    return Scaffold(
      appBar: WorldhopperAppBar(
        title: Text(l10n.appearanceTitle),
      ),
      body: ListView(
        children: [
          _buildSectionHeader(context, l10n.appearanceTheme),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: RadioGroup<ThemeMode>(
              groupValue: themeMode,
              onChanged: (value) {
                if (value != null) {
                  ref.read(themeNotifierProvider.notifier).setThemeMode(value);
                }
              },
              child: Column(
                children: [
                  ListTile(
                    leading: const Icon(Icons.light_mode),
                    title: Text(l10n.themeLight),
                    trailing: const Radio<ThemeMode>(
                      value: ThemeMode.light,
                    ),
                    onTap: () {
                      ref
                          .read(themeNotifierProvider.notifier)
                          .setThemeMode(ThemeMode.light);
                    },
                  ),
                  const Divider(height: 1),
                  ListTile(
                    leading: const Icon(Icons.dark_mode),
                    title: Text(l10n.themeDark),
                    trailing: const Radio<ThemeMode>(
                      value: ThemeMode.dark,
                    ),
                    onTap: () {
                      ref
                          .read(themeNotifierProvider.notifier)
                          .setThemeMode(ThemeMode.dark);
                    },
                  ),
                  const Divider(height: 1),
                  ListTile(
                    leading: const Icon(Icons.brightness_auto),
                    title: Text(l10n.themeSystem),
                    subtitle: Text(l10n.themeSystemSubtitle),
                    trailing: const Radio<ThemeMode>(
                      value: ThemeMode.system,
                    ),
                    onTap: () {
                      ref
                          .read(themeNotifierProvider.notifier)
                          .setThemeMode(ThemeMode.system);
                    },
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(BuildContext context, String title) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(32, 24, 16, 8),
      child: Text(
        title,
        style: Theme.of(context).textTheme.titleSmall?.copyWith(
              color: Theme.of(context).colorScheme.primary,
              fontWeight: FontWeight.bold,
            ),
      ),
    );
  }
}