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

import '../services/app_state.dart';

/// "UI" settings submenu, reached from [SettingsScreen] — currently just
/// Appearance (theme), but its own screen so more display-related settings
/// have somewhere to go without crowding the Settings landing page.
class UiSettingsScreen extends StatelessWidget {
  const UiSettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final appState = context.watch<AppState>();

    return Scaffold(
      appBar: AppBar(title: const Text('UI')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Appearance', style: Theme.of(context).textTheme.titleMedium),
                  const SizedBox(height: 12),
                  SegmentedButton<ThemeMode>(
                    segments: const [
                      ButtonSegment(value: ThemeMode.system, label: Text('System')),
                      ButtonSegment(value: ThemeMode.light, label: Text('Light')),
                      ButtonSegment(value: ThemeMode.dark, label: Text('Dark')),
                    ],
                    selected: {appState.themeMode},
                    onSelectionChanged: (selection) =>
                        context.read<AppState>().setThemeMode(selection.first),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 16),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SwitchListTile(
                    contentPadding: EdgeInsets.zero,
                    title: const Text('Estimated Fuel Refund'),
                    subtitle: const Text(
                      'Shows an estimate of your Missouri Highway Fuel Tax Refund next to '
                      'your receipts and totals. Based on the current rate — contingent on '
                      "it, and not a substitute for confirming the actual amount with the "
                      'Missouri Department of Revenue.',
                    ),
                    value: appState.showEstimatedFuelRefund,
                    onChanged: (value) =>
                        context.read<AppState>().setShowEstimatedFuelRefund(value),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}