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

import '../providers/settings_provider.dart';
import 'debug_notifications_screen.dart';
import 'simple_sync_settings_screen.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Consumer<SettingsProvider>(
        builder: (context, settingsProvider, child) {
          return ListView(
            padding: const EdgeInsets.all(16.0),
            children: [
              // Debug section (only in debug builds)
              if (kDebugMode) ...[
                Card(
                  child: ListTile(
                    leading: const Icon(Icons.bug_report),
                    title: const Text('Debug Notifications'),
                    subtitle: const Text('View scheduled notifications and debug log'),
                    trailing: const Icon(Icons.chevron_right),
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const DebugNotificationsScreen(),
                        ),
                      );
                    },
                  ),
                ),
                const SizedBox(height: 16),
              ],
              Card(
                child: ListTile(
                  leading: const Icon(Icons.cloud_sync),
                  title: const Text('Cloud Sync'),
                  subtitle: const Text('Configure WebDAV sync settings'),
                  trailing: const Icon(Icons.chevron_right),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const SimpleSyncSettingsScreen(),
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(height: 16),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Theme',
                        style: Theme.of(context).textTheme.titleMedium,
                      ),
                      const SizedBox(height: 16),
                      RadioListTile<ThemeOption>(
                        value: ThemeOption.system,
                        groupValue: settingsProvider.themeOption,
                        onChanged: (value) {
                          if (value != null) {
                            settingsProvider.setThemeOption(value);
                          }
                        },
                        title: const Text('Follow System'),
                        subtitle: const Text('Use system theme setting'),
                      ),
                      RadioListTile<ThemeOption>(
                        value: ThemeOption.light,
                        groupValue: settingsProvider.themeOption,
                        onChanged: (value) {
                          if (value != null) {
                            settingsProvider.setThemeOption(value);
                          }
                        },
                        title: const Text('Light Theme'),
                        subtitle: const Text('Always use light theme'),
                      ),
                      RadioListTile<ThemeOption>(
                        value: ThemeOption.dark,
                        groupValue: settingsProvider.themeOption,
                        onChanged: (value) {
                          if (value != null) {
                            settingsProvider.setThemeOption(value);
                          }
                        },
                        title: const Text('Dark Theme'),
                        subtitle: const Text('Always use dark theme'),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),
              // Notifications
              Card(
                child: ListTile(
                  leading: const Icon(Icons.snooze),
                  title: const Text('Snooze duration'),
                  subtitle: const Text('Delay for Snooze action'),
                  trailing: DropdownButton<int>(
                    value: settingsProvider.snoozeMinutes,
                    items: const [
                      DropdownMenuItem(value: 5, child: Text('5 min')),
                      DropdownMenuItem(value: 10, child: Text('10 min')),
                      DropdownMenuItem(value: 15, child: Text('15 min')),
                      DropdownMenuItem(value: 20, child: Text('20 min')),
                    ],
                    onChanged: (value) {
                      if (value != null) {
                        settingsProvider.setSnoozeMinutes(value);
                      }
                    },
                  ),
                ),
              ),
              const SizedBox(height: 16),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Time Periods',
                        style: Theme.of(context).textTheme.titleMedium,
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'Customize when morning, afternoon, evening, and night periods occur',
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: Theme.of(context).colorScheme.onSurfaceVariant,
                        ),
                      ),
                      const SizedBox(height: 16),
                      _TimeRangeSelector(
                        title: 'Morning',
                        icon: Icons.wb_sunny,
                        color: Colors.orange,
                        startHour: settingsProvider.morningStart,
                        endHour: settingsProvider.morningEnd,
                        onChanged: (start, end) => _updateTimeRanges(
                          context, settingsProvider,
                          morningStart: start, morningEnd: end,
                        ),
                      ),
                      const SizedBox(height: 12),
                      _TimeRangeSelector(
                        title: 'Afternoon',
                        icon: Icons.light_mode,
                        color: Colors.blue,
                        startHour: settingsProvider.afternoonStart,
                        endHour: settingsProvider.afternoonEnd,
                        onChanged: (start, end) => _updateTimeRanges(
                          context, settingsProvider,
                          afternoonStart: start, afternoonEnd: end,
                        ),
                      ),
                      const SizedBox(height: 12),
                      _TimeRangeSelector(
                        title: 'Evening',
                        icon: Icons.nightlight_round,
                        color: Colors.indigo,
                        startHour: settingsProvider.eveningStart,
                        endHour: settingsProvider.eveningEnd,
                        onChanged: (start, end) => _updateTimeRanges(
                          context, settingsProvider,
                          eveningStart: start, eveningEnd: end,
                        ),
                      ),
                      const SizedBox(height: 12),
                      _TimeRangeSelector(
                        title: 'Night',
                        icon: Icons.bedtime,
                        color: Colors.purple,
                        startHour: settingsProvider.nightStart,
                        endHour: settingsProvider.nightEnd,
                        onChanged: (start, end) => _updateTimeRanges(
                          context, settingsProvider,
                          nightStart: start, nightEnd: end,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  void _updateTimeRanges(
    BuildContext context,
    SettingsProvider settingsProvider, {
    int? morningStart,
    int? morningEnd,
    int? afternoonStart,
    int? afternoonEnd,
    int? eveningStart,
    int? eveningEnd,
    int? nightStart,
    int? nightEnd,
  }) async {
    try {
      await settingsProvider.setTimeRanges(
        morningStart: morningStart ?? settingsProvider.morningStart,
        morningEnd: morningEnd ?? settingsProvider.morningEnd,
        afternoonStart: afternoonStart ?? settingsProvider.afternoonStart,
        afternoonEnd: afternoonEnd ?? settingsProvider.afternoonEnd,
        eveningStart: eveningStart ?? settingsProvider.eveningStart,
        eveningEnd: eveningEnd ?? settingsProvider.eveningEnd,
        nightStart: nightStart ?? settingsProvider.nightStart,
        nightEnd: nightEnd ?? settingsProvider.nightEnd,
      );
    } catch (e) {
      if (context.mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Invalid time ranges: ${e.toString()}'),
            backgroundColor: Colors.red,
          ),
        );
      }
    }
  }
}

class _TimeRangeSelector extends StatelessWidget {
  final String title;
  final IconData icon;
  final Color color;
  final int startHour;
  final int endHour;
  final void Function(int start, int end) onChanged;

  const _TimeRangeSelector({
    required this.title,
    required this.icon,
    required this.color,
    required this.startHour,
    required this.endHour,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: color.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: color.withValues(alpha: 0.3)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(icon, color: color, size: 20),
              const SizedBox(width: 8),
              Text(
                title,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: color,
                  fontSize: 16,
                ),
              ),
              const Spacer(),
              Text(
                '${_formatHour(startHour)} - ${_formatHour(endHour + 1)}',
                style: TextStyle(
                  color: color,
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Start: ${_formatHour(startHour)}',
                      style: const TextStyle(fontSize: 12),
                    ),
                    Slider(
                      value: startHour.toDouble(),
                      min: 0,
                      max: 23,
                      divisions: 23,
                      activeColor: color,
                      onChanged: (value) {
                        final newStart = value.round();
                        if (newStart != endHour) {
                          onChanged(newStart, endHour);
                        }
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'End: ${_formatHour(endHour)}',
                      style: const TextStyle(fontSize: 12),
                    ),
                    Slider(
                      value: endHour.toDouble(),
                      min: 0,
                      max: 23,
                      divisions: 23,
                      activeColor: color,
                      onChanged: (value) {
                        final newEnd = value.round();
                        if (newEnd != startHour) {
                          onChanged(startHour, newEnd);
                        }
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  String _formatHour(int hour) {
    final adjustedHour = hour % 24;
    return '${adjustedHour.toString().padLeft(2, '0')}:00';
  }
}