import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../blocs/theme/theme_bloc.dart';
import '../../../blocs/theme/theme_state.dart';
import '../../../blocs/theme/theme_event.dart';

class SettingsThemeContent extends StatelessWidget {
  const SettingsThemeContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Thème')),
      body: BlocBuilder<ThemeBloc, ThemeState>(
        builder: (context, state) {
          return ListView(
            padding: const EdgeInsets.all(16),
            children: [
              Text(
                'Choisir le thème',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 20),

              // Option Système
              Card(
                child: ListTile(
                  leading: Icon(
                    state.themeMode == ThemeMode.system
                        ? Icons.radio_button_checked
                        : Icons.radio_button_unchecked,
                    color: state.themeMode == ThemeMode.system
                        ? Theme.of(context).colorScheme.primary
                        : null,
                  ),
                  title: const Text('Système'),
                  subtitle: const Text('Suit les paramètres de votre appareil'),
                  trailing: const Icon(Icons.brightness_auto),
                  selected: state.themeMode == ThemeMode.system,
                  onTap: () {
                    context.read<ThemeBloc>().add(
                      const ThemeChanged(themeMode: ThemeMode.system),
                    );
                  },
                ),
              ),

              const SizedBox(height: 8),

              // Option Clair
              Card(
                child: ListTile(
                  leading: Icon(
                    state.themeMode == ThemeMode.light
                        ? Icons.radio_button_checked
                        : Icons.radio_button_unchecked,
                    color: state.themeMode == ThemeMode.light
                        ? Theme.of(context).colorScheme.primary
                        : null,
                  ),
                  title: const Text('Clair'),
                  subtitle: const Text('Thème clair en permanence'),
                  trailing: const Icon(Icons.light_mode),
                  selected: state.themeMode == ThemeMode.light,
                  onTap: () {
                    context.read<ThemeBloc>().add(
                      const ThemeChanged(themeMode: ThemeMode.light),
                    );
                  },
                ),
              ),

              const SizedBox(height: 8),

              // Option Sombre
              Card(
                child: ListTile(
                  leading: Icon(
                    state.themeMode == ThemeMode.dark
                        ? Icons.radio_button_checked
                        : Icons.radio_button_unchecked,
                    color: state.themeMode == ThemeMode.dark
                        ? Theme.of(context).colorScheme.primary
                        : null,
                  ),
                  title: const Text('Sombre'),
                  subtitle: const Text('Thème sombre en permanence'),
                  trailing: const Icon(Icons.dark_mode),
                  selected: state.themeMode == ThemeMode.dark,
                  onTap: () {
                    context.read<ThemeBloc>().add(
                      const ThemeChanged(themeMode: ThemeMode.dark),
                    );
                  },
                ),
              ),

              const SizedBox(height: 30),

              // Aperçu du thème actuel
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Aperçu',
                        style: Theme.of(context).textTheme.titleMedium,
                      ),
                      const SizedBox(height: 10),
                      Row(
                        children: [
                          Icon(
                            state.isDarkMode
                                ? Icons.dark_mode
                                : Icons.light_mode,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                          const SizedBox(width: 10),
                          Text(
                            state.isDarkMode
                                ? 'Mode sombre actif'
                                : 'Mode clair actif',
                            style: TextStyle(
                              color: Theme.of(context).colorScheme.onSurface,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}