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';

/// Dedicated Appearance Settings for the Husband App
/// These settings only affect the husband's experience
class HusbandAppearanceScreen extends ConsumerWidget {
  const HusbandAppearanceScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userProfile = ref.watch(userProfileProvider);
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Appearance',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        centerTitle: true,
      ),
      body: userProfile == null
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16.0),
              children: [
                _buildThemeModeSelector(
                    context, ref, userProfile.husbandThemeMode, isDark),
                const SizedBox(height: 24),
                _buildAccentColorSelector(
                    context, ref, userProfile.husbandAccentColor, isDark),
              ],
            ),
    );
  }

  Widget _buildThemeModeSelector(BuildContext context, WidgetRef ref,
      AppThemeMode currentMode, bool isDark) {
    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) async {
            if (newSelection.isNotEmpty) {
              final profile = ref.read(userProfileProvider);
              if (profile != null) {
                await ref.read(userProfileProvider.notifier).updateProfile(
                      profile.copyWith(husbandThemeMode: newSelection.first),
                    );
              }
            }
          },
        ),
      ],
    );
  }

  Widget _buildAccentColorSelector(
      BuildContext context, WidgetRef ref, String currentAccent, bool isDark) {
    // Navy/blue themed colors for husband app
    final accents = [
      {'color': AppColors.navyBlue, 'value': '0xFF1A3A5C'},
      {'color': AppColors.steelBlue, 'value': '0xFF5C7892'},
      {'color': AppColors.sageGreen, 'value': '0xFFA8C5A8'},
      {'color': AppColors.info, 'value': '0xFF7BB8E8'},
      {'color': AppColors.teal, 'value': '0xFF5B9AA0'},
      {'color': const Color(0xFF6B5B95), 'value': '0xFF6B5B95'}, // Purple
      {'color': const Color(0xFF3D5A80), 'value': '0xFF3D5A80'}, // Dark Blue
    ];

    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: accents.map((accent) {
            final color = accent['color'] as Color;
            final value = accent['value'] as String;
            final isSelected = currentAccent == value;

            return GestureDetector(
              onTap: () async {
                final profile = ref.read(userProfileProvider);
                if (profile != null) {
                  await ref.read(userProfileProvider.notifier).updateProfile(
                        profile.copyWith(husbandAccentColor: value),
                      );
                }
              },
              child: Container(
                width: 48,
                height: 48,
                decoration: BoxDecoration(
                  color: color,
                  shape: BoxShape.circle,
                  border: isSelected
                      ? Border.all(
                          color: isDark ? Colors.white : AppColors.charcoal,
                          width: 3,
                        )
                      : Border.all(
                          color: isDark ? Colors.white30 : Colors.black12,
                          width: 1,
                        ),
                  boxShadow: [
                    if (isSelected)
                      BoxShadow(
                        color: color.withValues(alpha: 0.4),
                        blurRadius: 8,
                        offset: const Offset(0, 4),
                      )
                  ],
                ),
                child: isSelected
                    ? const Icon(Icons.check, color: Colors.white)
                    : null,
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}