import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worldhopper/config/constants.dart';
import 'package:worldhopper/providers/package_info_provider.dart';
import 'package:worldhopper/screens/settings/appearance_settings_screen.dart';
import 'package:worldhopper/screens/settings/readers_settings_screen.dart';
import 'package:worldhopper/widgets/worldhopper_app_bar.dart';

/// Screen for app settings and configuration
class SettingsScreen extends ConsumerWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final packageInfoAsync = ref.watch(packageInfoProvider);

    return Scaffold(
      appBar: const WorldhopperAppBar(
        title: Text('Settings'),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 8),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              children: [
                ListTile(
                  leading: const Icon(Icons.palette_outlined),
                  title: const Text('Appearance'),
                  subtitle: const Text('Theme and display options'),
                  trailing: const Icon(Icons.chevron_right),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (_) => const AppearanceSettingsScreen(),
                      ),
                    );
                  },
                ),
                const Divider(height: 1),
                ListTile(
                  leading: const Icon(Icons.menu_book_outlined),
                  title: const Text('Readers'),
                  subtitle: const Text('Image reader settings'),
                  trailing: const Icon(Icons.chevron_right),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (_) => const ReadersSettingsScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),

          // App Information Section
          _buildSectionHeader(context, 'App Information'),
          Card(
            margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Column(
              children: [
                const ListTile(
                  leading: Icon(Icons.info_outline),
                  title: Text('App Name'),
                  subtitle: Text(AppConstants.appName),
                ),
                const Divider(height: 1),
                ListTile(
                  leading: const Icon(Icons.label_outline),
                  title: const Text('Version'),
                  subtitle: Text(packageInfoAsync.when(
                    data: (info) => info.version,
                    loading: () => '...',
                    error: (_, __) => 'unknown',
                  )),
                ),
                const Divider(height: 1),
                ListTile(
                  leading: const Icon(Icons.article_outlined),
                  title: const Text('About'),
                  trailing: const Icon(Icons.chevron_right),
                  onTap: () => _showAboutDialog(context, ref),
                ),
              ],
            ),
          ),

          const SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(BuildContext context, String title) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(32, 24, 16, 8),
      child: Text(
        title,
        style: Theme.of(context).textTheme.titleSmall?.copyWith(
              color: Theme.of(context).colorScheme.primary,
              fontWeight: FontWeight.bold,
            ),
      ),
    );
  }

  void _showAboutDialog(BuildContext context, WidgetRef ref) {
    final version = ref.read(packageInfoProvider).when(
          data: (info) => info.version,
          loading: () => null,
          error: (_, __) => null,
        );
    showAboutDialog(
      context: context,
      applicationName: AppConstants.appName,
      applicationVersion: version,
      applicationLegalese: '© 2024 Worldhopper',
      children: [
        const SizedBox(height: 16),
        const Text(
          'An OPDS-PSE reader for comics, manga, and books.',
        ),
      ],
    );
  }
}