import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../providers/theme_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Thème'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Consumer<ThemeProvider>(
        builder: (context, themeProvider, child) {
          return ListView(
            padding: EdgeInsets.all(16),
            children: [
              Text(
                'Choisir le thème',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              SizedBox(height: 20),

              // Option Système
              RadioListTile<ThemeMode>(
                title: Text('Système'),
                subtitle: Text('Suit les paramètres de votre appareil'),
                value: ThemeMode.system,
                groupValue: themeProvider.themeMode,
                onChanged: (ThemeMode? value) {
                  if (value != null) {
                    themeProvider.setThemeMode(value);
                  }
                },
                secondary: Icon(Icons.brightness_auto),
              ),

              // Option Clair
              RadioListTile<ThemeMode>(
                title: Text('Clair'),
                subtitle: Text('Thème clair en permanence'),
                value: ThemeMode.light,
                groupValue: themeProvider.themeMode,
                onChanged: (ThemeMode? value) {
                  if (value != null) {
                    themeProvider.setThemeMode(value);
                  }
                },
                secondary: Icon(Icons.light_mode),
              ),

              // Option Sombre
              RadioListTile<ThemeMode>(
                title: Text('Sombre'),
                subtitle: Text('Thème sombre en permanence'),
                value: ThemeMode.dark,
                groupValue: themeProvider.themeMode,
                onChanged: (ThemeMode? value) {
                  if (value != null) {
                    themeProvider.setThemeMode(value);
                  }
                },
                secondary: Icon(Icons.dark_mode),
              ),

              SizedBox(height: 30),

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