import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../models/user_profile.dart';
import '../../providers/user_provider.dart';
import '../../theme/app_theme.dart';

class AppearanceScreen extends ConsumerWidget {
  const AppearanceScreen({super.key});

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

    return Scaffold(
      appBar: AppBar(
        title: const Text('Appearance'),
      ),
      body: userProfile == null
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16.0),
              children: [
                _buildThemeModeSelector(context, ref, userProfile.themeMode),
                const SizedBox(height: 24),
                _buildAccentColorSelector(
                    context, ref, userProfile.accentColor, AppColors.sageGreen),
                const SizedBox(height: 32),
                _buildRelationshipStatusSelector(context, ref, userProfile.relationshipStatus),
              ],
            ),
    );
  }

  Widget _buildThemeModeSelector(
      BuildContext context, WidgetRef ref, AppThemeMode currentMode) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Theme Mode',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        const SizedBox(height: 16),
        SegmentedButton<AppThemeMode>(
          segments: const [
            ButtonSegment(
              value: AppThemeMode.light,
              label: Text('Light'),
              icon: Icon(Icons.light_mode),
            ),
            ButtonSegment(
              value: AppThemeMode.dark,
              label: Text('Dark'),
              icon: Icon(Icons.dark_mode),
            ),
            ButtonSegment(
              value: AppThemeMode.system,
              label: Text('System'),
              icon: Icon(Icons.brightness_auto),
            ),
          ],
          selected: {currentMode},
          onSelectionChanged: (Set<AppThemeMode> newSelection) {
            if (newSelection.isNotEmpty) {
              ref
                  .read(userProfileProvider.notifier)
                  .updateThemeMode(newSelection.first);
            }
          },
          style: SegmentedButton.styleFrom(
            fixedSize: const Size.fromHeight(48),
          )
        ),
      ],
    );
  }

  Widget _buildAccentColorSelector(BuildContext context, WidgetRef ref,
      String currentAccent) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Accent Color',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        const SizedBox(height: 16),
        Wrap(
          spacing: 16,
          runSpacing: 16,
          children: [
            GestureDetector(
              onTap: () {
                ref
                    .read(userProfileProvider.notifier)
                    .updateAccentColor('0xFFA8C5A8');
              },
              child: Container(
                width: 48,
                height: 48,
                decoration: BoxDecoration(
                  color: AppColors.sageGreen,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color:
                        Theme.of(context).colorScheme.primary, // Assuming currentAccent is sageGreen
                    width: 3,
                  ),
                ),
                child: const Icon(Icons.check, color: Colors.white),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildRelationshipStatusSelector(
      BuildContext context, WidgetRef ref, RelationshipStatus currentStatus) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Relationship Status',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        const SizedBox(height: 16),
        SegmentedButton<RelationshipStatus>(
          segments: const [
            ButtonSegment(
              value: RelationshipStatus.single,
              label: Text('Single'),
              icon: Icon(Icons.person_outline),
            ),
            ButtonSegment(
              value: RelationshipStatus.engaged,
              label: Text('Engaged'),
              icon: Icon(Icons.favorite_border),
            ),
            ButtonSegment(
              value: RelationshipStatus.married,
              label: Text('Married'),
              icon: Icon(Icons.favorite),
            ),
          ],
          selected: {currentStatus},
          onSelectionChanged: (Set<RelationshipStatus> newSelection) {
            if (newSelection.isNotEmpty) {
              ref
                  .read(userProfileProvider.notifier)
                  .updateRelationshipStatus(newSelection.first);
            }
          },
          style: SegmentedButton.styleFrom(
            fixedSize: const Size.fromHeight(48),
          )
        ),
      ],
    );
  }
}