import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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 readingMode = ref.watch(readingModeNotifierProvider);

    return Scaffold(
      appBar: const WorldhopperAppBar(
        title: Text('Reading Direction'),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 8),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              children: [
                for (final entry in _readingModeOptions.entries) ...[
                  if (entry.key != _readingModeOptions.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,
                      groupValue: readingMode,
                      onChanged: (value) {
                        if (value != null) {
                          ref
                              .read(readingModeNotifierProvider.notifier)
                              .setReadingMode(value);
                        }
                      },
                    ),
                    onTap: () {
                      ref
                          .read(readingModeNotifierProvider.notifier)
                          .setReadingMode(entry.key);
                    },
                  ),
                ],
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(32, 16, 32, 16),
            child: Text(
              'Controls the reading direction for the image reader. '
              'Left to right is standard for Western comics, right to left '
              'for manga, and vertical scroll for webtoons.',
              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,
  });
}

const _readingModeOptions = <ReadingMode, _ReadingModeOption>{
  ReadingMode.ltr: _ReadingModeOption(
    label: 'Left to right',
    description: 'Standard Western reading order',
    icon: Icons.arrow_forward,
  ),
  ReadingMode.rtl: _ReadingModeOption(
    label: 'Right to left',
    description: 'Manga-style reading order',
    icon: Icons.arrow_back,
  ),
  ReadingMode.verticalContinuous: _ReadingModeOption(
    label: 'Vertical scroll',
    description: 'Continuous webtoon-style scrolling',
    icon: Icons.swap_vert,
  ),
};