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

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

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

    return Scaffold(
      appBar: AppBar(
        title: const Text('Relationship Status'),
      ),
      body: userProfile == null
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16.0),
              children: [
                const Text(
                  'Select your current relationship status to customize your experience.',
                  style: TextStyle(fontSize: 16),
                ),
                const SizedBox(height: 24),
                _buildOption(
                  context,
                  ref,
                  title: 'Single',
                  subtitle: 'Tracking for potential future',
                  value: RelationshipStatus.single,
                  groupValue: userProfile.relationshipStatus,
                  icon: Icons.person_outline,
                ),
                _buildOption(
                  context,
                  ref,
                  title: 'Engaged',
                  subtitle: 'Preparing for marriage',
                  value: RelationshipStatus.engaged,
                  groupValue: userProfile.relationshipStatus,
                  icon: Icons.favorite_border,
                ),
                _buildOption(
                  context,
                  ref,
                  title: 'Married',
                  subtitle: 'Tracking together with husband',
                  value: RelationshipStatus.married,
                  groupValue: userProfile.relationshipStatus,
                  icon: Icons.favorite,
                ),
              ],
            ),
    );
  }

  Widget _buildOption(
    BuildContext context,
    WidgetRef ref, {
    required String title,
    required String subtitle,
    required RelationshipStatus value,
    required RelationshipStatus groupValue,
    required IconData icon,
  }) {
    final isSelected = value == groupValue;

    return Card(
      elevation: isSelected ? 2 : 0,
       shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: isSelected
            ? BorderSide(color: Theme.of(context).colorScheme.primary, width: 2)
            : BorderSide.none,
      ),
      child: RadioListTile<RelationshipStatus>(
        value: value,
        groupValue: groupValue,
        onChanged: (RelationshipStatus? newValue) {
          if (newValue != null) {
            ref
                .read(userProfileProvider.notifier)
                .updateRelationshipStatus(newValue);
          }
        },
        title: Text(title, style: const TextStyle(fontWeight: FontWeight.w600)),
        subtitle: Text(subtitle),
        secondary: Icon(icon, color: isSelected ? Theme.of(context).colorScheme.primary : null),
        activeColor: Theme.of(context).colorScheme.primary,
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      ),
    );
  }
}