import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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 themeMode = ref.watch(themeNotifierProvider);

    return Scaffold(
      appBar: const WorldhopperAppBar(
        title: Text('Appearance'),
      ),
      body: ListView(
        children: [
          _buildSectionHeader(context, 'Theme'),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              children: [
                ListTile(
                  leading: const Icon(Icons.light_mode),
                  title: const Text('Light'),
                  trailing: Radio<ThemeMode>(
                    value: ThemeMode.light,
                    groupValue: themeMode,
                    onChanged: (value) {
                      if (value != null) {
                        ref
                            .read(themeNotifierProvider.notifier)
                            .setThemeMode(value);
                      }
                    },
                  ),
                  onTap: () {
                    ref
                        .read(themeNotifierProvider.notifier)
                        .setThemeMode(ThemeMode.light);
                  },
                ),
                const Divider(height: 1),
                ListTile(
                  leading: const Icon(Icons.dark_mode),
                  title: const Text('Dark'),
                  trailing: Radio<ThemeMode>(
                    value: ThemeMode.dark,
                    groupValue: themeMode,
                    onChanged: (value) {
                      if (value != null) {
                        ref
                            .read(themeNotifierProvider.notifier)
                            .setThemeMode(value);
                      }
                    },
                  ),
                  onTap: () {
                    ref
                        .read(themeNotifierProvider.notifier)
                        .setThemeMode(ThemeMode.dark);
                  },
                ),
                const Divider(height: 1),
                ListTile(
                  leading: const Icon(Icons.brightness_auto),
                  title: const Text('System'),
                  subtitle: const Text('Follow device theme'),
                  trailing: Radio<ThemeMode>(
                    value: ThemeMode.system,
                    groupValue: themeMode,
                    onChanged: (value) {
                      if (value != null) {
                        ref
                            .read(themeNotifierProvider.notifier)
                            .setThemeMode(value);
                      }
                    },
                  ),
                  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,
            ),
      ),
    );
  }
}