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

import 'package:im_app/features/settings/presentation/theme_view_model.dart';
import 'package:im_app/features/settings/view/widgets/settings_section_header.dart';
import 'package:im_app/features/settings/view/widgets/theme_option_tile.dart';

/// 主题选择页
///
/// 通过 [ThemeViewModel] 读写主题状态，不直接感知 app 级 Provider。
class ThemeView extends ConsumerWidget {
  const ThemeView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final current = ref.watch(themeViewModelProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('主题')),
      body: ListView(
        children: [
          const SettingsSectionHeader(title: '外观'),
          ThemeOptionTile(
            label: '跟随系统',
            isSelected: current == ThemeMode.system,
            onTap: () => ref
                .read(themeViewModelProvider.notifier)
                .setMode(ThemeMode.system),
          ),
          ThemeOptionTile(
            label: '黑色模式',
            isSelected: current == ThemeMode.dark,
            onTap: () => ref
                .read(themeViewModelProvider.notifier)
                .setMode(ThemeMode.dark),
          ),
          ThemeOptionTile(
            label: '白色模式',
            isSelected: current == ThemeMode.light,
            onTap: () => ref
                .read(themeViewModelProvider.notifier)
                .setMode(ThemeMode.light),
          ),
        ],
      ),
    );
  }
}