import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worldhopper/l10n/app_localizations.dart';
import 'package:worldhopper/providers/reading_mode_provider.dart';
import 'package:worldhopper/widgets/worldhopper_app_bar.dart';

/// Screen for selecting image reader reading direction mode
class ReadingModeSettingsScreen extends ConsumerWidget {
  const ReadingModeSettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final l10n = AppLocalizations.of(context);
    final readingMode = ref.watch(readingModeNotifierProvider);

    final options = <ReadingMode, _ReadingModeOption>{
      ReadingMode.ltr: _ReadingModeOption(
        label: l10n.readingModeLtr,
        description: l10n.readingModeLtrDescription,
        icon: Icons.arrow_forward,
      ),
      ReadingMode.rtl: _ReadingModeOption(
        label: l10n.readingModeRtl,
        description: l10n.readingModeRtlDescription,
        icon: Icons.arrow_back,
      ),
      ReadingMode.verticalContinuous: _ReadingModeOption(
        label: l10n.readingModeVertical,
        description: l10n.readingModeVerticalDescription,
        icon: Icons.swap_vert,
      ),
    };

    return Scaffold(
      appBar: WorldhopperAppBar(
        title: Text(l10n.readingDirectionTitle),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 8),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: RadioGroup<ReadingMode>(
              groupValue: readingMode,
              onChanged: (value) {
                if (value != null) {
                  ref
                      .read(readingModeNotifierProvider.notifier)
                      .setReadingMode(value);
                }
              },
              child: Column(
                children: [
                  for (final entry in options.entries) ...[
                    if (entry.key != options.keys.first)
                      const Divider(height: 1),
                    ListTile(
                      leading: Icon(entry.value.icon),
                      title: Text(entry.value.label),
                      subtitle: Text(entry.value.description),
                      trailing: Radio<ReadingMode>(
                        value: entry.key,
                      ),
                      onTap: () {
                        ref
                            .read(readingModeNotifierProvider.notifier)
                            .setReadingMode(entry.key);
                      },
                    ),
                  ],
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 16, 32, 16),
            child: Text(
              l10n.readingDirectionHelp,
              style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
            ),
          ),
        ],
      ),
    );
  }
}

class _ReadingModeOption {
  final String label;
  final String description;
  final IconData icon;

  const _ReadingModeOption({
    required this.label,
    required this.description,
    required this.icon,
  });
}