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),
                const SizedBox(height: 24),
                // _buildPadSettings removed as per new design
              ],
            ),
    );
  }

  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) {
    final accents = [
      {'color': AppColors.sageGreen, 'value': '0xFFA8C5A8'},
      {'color': AppColors.rose, 'value': '0xFFE8A0B0'},
      {'color': AppColors.lavender, 'value': '0xFFD4C4E8'},
      {'color': AppColors.info, 'value': '0xFF7BB8E8'},
      {'color': AppColors.softGold, 'value': '0xFFD4A574'},
      {'color': AppColors.mint, 'value': '0xFF98DDCA'},
      {'color': AppColors.teal, 'value': '0xFF5B9AA0'},
    ];

    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: () {
                ref.read(userProfileProvider.notifier).updateAccentColor(value);
              },
              child: Container(
                width: 48,
                height: 48,
                decoration: BoxDecoration(
                  color: color,
                  shape: BoxShape.circle,
                  border: isSelected
                      ? Border.all(
                          color: Theme.of(context).brightness == Brightness.dark
                              ? Colors.white
                              : AppColors.charcoal,
                          width: 3,
                        )
                      : null,
                  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(),
        ),
      ],
    );
  }
}