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

import '../../../core/design/tokens.dart';
import '../../../core/design/tripz_colors.dart';
import '../../../core/l10n/l10n.dart';
import '../../../core/ui/tripz_scaffold.dart';
import '../cubit/settings_cubit.dart';
import '../cubit/settings_state.dart';

/// المظهر واللغة. تبديل اللغة **يقلب الاتجاه كاملاً** بلا إعادة تشغيل —
/// `MaterialApp` يشتقّ RTL/LTR من الـlocale (docs/26 §4).
class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;
    return BlocBuilder<SettingsCubit, SettingsState>(
      builder: (context, state) {
        final cubit = context.read<SettingsCubit>();
        return TripzScaffold(
          title: l10n.settingsTitle,
          child: ListView(
            children: [
              Text(l10n.settingsTheme, style: context.texts.titleMedium),
              const SizedBox(height: Space.xs),
              RadioGroup<ThemeMode>(
                groupValue: state.themeMode,
                onChanged: (v) => cubit.setThemeMode(v ?? ThemeMode.system),
                child: Column(
                  children: [
                    RadioListTile(
                      value: ThemeMode.system,
                      contentPadding: EdgeInsets.zero,
                      title: Text(l10n.settingsThemeSystem),
                    ),
                    RadioListTile(
                      value: ThemeMode.light,
                      contentPadding: EdgeInsets.zero,
                      title: Text(l10n.settingsThemeLight),
                    ),
                    RadioListTile(
                      value: ThemeMode.dark,
                      contentPadding: EdgeInsets.zero,
                      title: Text(l10n.settingsThemeDark),
                    ),
                  ],
                ),
              ),
              const Divider(height: Space.xl),
              Text(l10n.settingsLanguage, style: context.texts.titleMedium),
              const SizedBox(height: Space.xs),
              RadioGroup<String>(
                groupValue: state.locale.languageCode,
                onChanged: (v) => cubit.setLocale(Locale(v ?? 'ar')),
                child: Column(
                  children: [
                    RadioListTile(
                      value: 'ar',
                      contentPadding: EdgeInsets.zero,
                      title: Text(l10n.settingsLanguageArabic),
                    ),
                    RadioListTile(
                      value: 'en',
                      contentPadding: EdgeInsets.zero,
                      title: Text(l10n.settingsLanguageEnglish),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}