import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:household_keeper/core/theme/theme_provider.dart';
import 'package:household_keeper/l10n/app_localizations.dart';

class SettingsScreen extends ConsumerWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final l10n = AppLocalizations.of(context);
    final theme = Theme.of(context);
    final currentThemeMode = ref.watch(themeProvider);

    return ListView(
      children: [
        // Section 1: Appearance (Darstellung)
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
          child: Text(
            l10n.settingsSectionAppearance,
            style: theme.textTheme.titleMedium?.copyWith(
              color: theme.colorScheme.primary,
            ),
          ),
        ),
        ListTile(
          title: Text(l10n.settingsThemeLabel),
          subtitle: Padding(
            padding: const EdgeInsets.only(top: 8),
            child: SegmentedButton<ThemeMode>(
              segments: [
                ButtonSegment<ThemeMode>(
                  value: ThemeMode.system,
                  label: Text(l10n.themeSystem),
                  icon: const Icon(Icons.settings_suggest_outlined),
                ),
                ButtonSegment<ThemeMode>(
                  value: ThemeMode.light,
                  label: Text(l10n.themeLight),
                  icon: const Icon(Icons.light_mode_outlined),
                ),
                ButtonSegment<ThemeMode>(
                  value: ThemeMode.dark,
                  label: Text(l10n.themeDark),
                  icon: const Icon(Icons.dark_mode_outlined),
                ),
              ],
              selected: {currentThemeMode},
              onSelectionChanged: (selection) {
                ref
                    .read(themeProvider.notifier)
                    .setThemeMode(selection.first);
              },
            ),
          ),
        ),

        const Divider(indent: 16, endIndent: 16, height: 32),

        // Section 2: About (Ueber)
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            l10n.settingsSectionAbout,
            style: theme.textTheme.titleMedium?.copyWith(
              color: theme.colorScheme.primary,
            ),
          ),
        ),
        ListTile(
          title: Text(l10n.aboutAppName),
          subtitle: Text(l10n.aboutTagline),
        ),
        ListTile(
          title: const Text('Version'),
          subtitle: Text(l10n.aboutVersion('0.1.0')),
        ),
      ],
    );
  }
}