import 'package:flutter/material.dart';
import '../utils/colors.dart';
import '../utils/haptic_utils.dart';
import '../utils/settings_manager.dart';
import 'components/animated_background.dart';
import 'google_play_games_widget.dart';

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

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  bool _musicEnabled = true;
  bool _hapticsEnabled = true;
  double _bgmVolume = 0.4;
  double _sfxVolume = 0.6;

  @override
  void initState() {
    super.initState();
    _loadSettings();
  }

  Future<void> _loadSettings() async {
    setState(() {
      _musicEnabled = SettingsManager.isMusicEnabled;
      _hapticsEnabled = SettingsManager.isHapticsEnabled;
      _bgmVolume = SettingsManager.bgmVolume;
      _sfxVolume = SettingsManager.sfxVolume;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ZenColors.appBackground,
      body: AnimatedBackground(
        child: SafeArea(
          child: Column(
            children: [
              // Header
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  children: [
                    IconButton(
                      onPressed: () => Navigator.of(context).pop(),
                      icon: const Icon(
                        Icons.arrow_back,
                        color: ZenColors.primaryText,
                        size: 28,
                      ),
                      style: IconButton.styleFrom(
                        backgroundColor: ZenColors.black.withValues(alpha: 0.3),
                        shape: const CircleBorder(),
                      ),
                    ),
                    const SizedBox(width: 16),
                    const Text(
                      'Settings',
                      style: TextStyle(
                        color: ZenColors.primaryText,
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        letterSpacing: 1.0,
                      ),
                    ),
                  ],
                ),
              ),
              
              // Settings List
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  child: Column(
                    children: [
                      const SizedBox(height: 20),
                      
                      // Audio Section
                      _buildSectionHeader('Audio'),
                      _buildSettingTile(
                        icon: Icons.music_note,
                        title: 'Background Music',
                        subtitle: 'Enable relaxing ambient sounds',
                        value: _musicEnabled,
                        onChanged: _toggleMusic,
                      ),
                      _buildVolumeSlider(
                        icon: Icons.volume_up,
                        title: 'Music Volume',
                        value: _bgmVolume,
                        onChanged: _setBgmVolume,
                      ),
                      
                      const SizedBox(height: 10),
                      
                      _buildVolumeSlider(
                        icon: Icons.volume_up,
                        title: 'Sound Effects Volume',
                        value: _sfxVolume,
                        onChanged: _setSfxVolume,
                      ),
                      
                      const SizedBox(height: 30),
                      
                      // Feedback Section
                      _buildSectionHeader('Feedback'),
                      _buildSettingTile(
                        icon: Icons.vibration,
                        title: 'Haptic Feedback',
                        subtitle: 'Feel gentle vibrations on tap',
                        value: _hapticsEnabled,
                        onChanged: _toggleHaptics,
                      ),
                      
                      const SizedBox(height: 30),
                      
                      // Tutorial Section
                      _buildSectionHeader('Help'),
                      _buildActionTile(
                        icon: Icons.help_outline,
                        title: 'Show Tutorial',
                        subtitle: 'Learn how to use ZenTap',
                        onTap: _showTutorial,
                      ),
                      
                      const SizedBox(height: 30),
                      
                      // Google Play Games Section
                      _buildSectionHeader('Google Play Games'),
                      const GooglePlayGamesWidget(),
                      
                      const SizedBox(height: 30),
                      
                      // About Section
                      Padding(
                        padding: const EdgeInsets.only(bottom: 20),
                        child: Column(
                          children: [
                            Text(
                              'ZenTap v1.0.1',
                              style: TextStyle(
                                color: ZenColors.mutedText,
                                fontSize: 14,
                              ),
                            ),
                            const SizedBox(height: 8),
                            Text(
                              'A stress relief tapping game',
                              style: TextStyle(
                                color: ZenColors.mutedText,
                                fontSize: 12,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Text(
        title,
        style: TextStyle(
          color: ZenColors.secondaryText,
          fontSize: 16,
          fontWeight: FontWeight.w600,
          letterSpacing: 0.5,
        ),
      ),
    );
  }

  Widget _buildSettingTile({
    required IconData icon,
    required String title,
    required String subtitle,
    required bool value,
    required ValueChanged<bool> onChanged,
  }) {
    return Container(
      margin: const EdgeInsets.only(top: 12),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: ZenColors.uiElements.withValues(alpha: 0.3),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: ZenColors.uiElements.withValues(alpha: 0.2),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Icon(
            icon,
            color: ZenColors.primaryText,
            size: 24,
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: ZenColors.primaryText,
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  subtitle,
                  style: TextStyle(
                    color: ZenColors.secondaryText,
                    fontSize: 13,
                  ),
                ),
              ],
            ),
          ),
          Switch(
            value: value,
            onChanged: onChanged,
            activeColor: ZenColors.buttonBackground,
            activeTrackColor: ZenColors.buttonBackground.withValues(alpha: 0.3),
            inactiveThumbColor: ZenColors.mutedText,
            inactiveTrackColor: ZenColors.mutedText.withValues(alpha: 0.2),
          ),
        ],
      ),
    );
  }

  Widget _buildActionTile({
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return Container(
      margin: const EdgeInsets.only(top: 12),
      child: Material(
        color: ZenColors.uiElements.withValues(alpha: 0.3),
        borderRadius: BorderRadius.circular(12),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: ZenColors.uiElements.withValues(alpha: 0.2),
                width: 1,
              ),
            ),
            child: Row(
              children: [
                Icon(
                  icon,
                  color: ZenColors.primaryText,
                  size: 24,
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: const TextStyle(
                          color: ZenColors.primaryText,
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(height: 2),
                      Text(
                        subtitle,
                        style: TextStyle(
                          color: ZenColors.secondaryText,
                          fontSize: 13,
                        ),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: ZenColors.mutedText,
                  size: 16,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _toggleMusic(bool value) async {
    setState(() {
      _musicEnabled = value;
    });
    await SettingsManager.setMusicEnabled(value);
    
    if (_hapticsEnabled) {
      await HapticUtils.vibrate(duration: 50);
    }
  }

  Future<void> _setBgmVolume(double value) async {
    setState(() {
      _bgmVolume = value;
    });
    await SettingsManager.setBgmVolume(value);
    SettingsManager.applyBgmVolume();
  }

  Future<void> _setSfxVolume(double value) async {
    setState(() {
      _sfxVolume = value;
    });
    await SettingsManager.setSfxVolume(value);
  }

  Future<void> _toggleHaptics(bool value) async {
    setState(() {
      _hapticsEnabled = value;
    });
    await SettingsManager.setHapticsEnabled(value);
    
    // Give immediate feedback if enabling haptics
    if (value) {
      await HapticUtils.vibrate(duration: 100);
    }
  }

  void _showTutorial() {
    if (_hapticsEnabled) {
      HapticUtils.vibrate(duration: 50);
    }
    
    showDialog(
      context: context,
      builder: (context) => _buildTutorialDialog(),
    );
  }

  Widget _buildTutorialDialog() {
    return AlertDialog(
      backgroundColor: ZenColors.uiElements,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      title: const Text(
        'How to Use ZenTap',
        style: TextStyle(
          color: ZenColors.primaryText,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildTutorialStep(
            icon: Icons.touch_app,
            text: 'Tap anywhere on the screen to pop bubbles',
          ),
          const SizedBox(height: 16),
          _buildTutorialStep(
            icon: Icons.stars,
            text: 'Earn Relaxation Points in Play mode',
          ),
          const SizedBox(height: 16),
          _buildTutorialStep(
            icon: Icons.self_improvement,
            text: 'Choose Zen Mode for pure relaxation',
          ),
          const SizedBox(height: 16),
          _buildTutorialStep(
            icon: Icons.pause,
            text: 'Tap pause anytime to take a break',
          ),
        ],
      ),
      actions: [
        ElevatedButton(
          onPressed: () => Navigator.of(context).pop(),
          style: ElevatedButton.styleFrom(
            backgroundColor: ZenColors.buttonBackground,
            foregroundColor: ZenColors.buttonText,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
          ),
          child: const Text('Got it!'),
        ),
      ],
    );
  }

  Widget _buildVolumeSlider({
    required IconData icon,
    required String title,
    required double value,
    required ValueChanged<double> onChanged,
  }) {
    return Container(
      margin: const EdgeInsets.only(top: 8),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: ZenColors.uiElements.withValues(alpha: 0.3),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: ZenColors.uiElements.withValues(alpha: 0.2),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Icon(
            icon,
            color: ZenColors.primaryText,
            size: 24,
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: ZenColors.primaryText,
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 8),
                Slider(
                  value: value,
                  onChanged: onChanged,
                  min: 0.0,
                  max: 1.0,
                  divisions: 10,
                  label: '${(value * 100).round()}%',
                  activeColor: ZenColors.buttonBackground,
                  inactiveColor: ZenColors.mutedText.withValues(alpha: 0.2),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTutorialStep({
    required IconData icon,
    required String text,
  }) {
    return Row(
      children: [
        Icon(
          icon,
          color: ZenColors.buttonBackground,
          size: 20,
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
              color: ZenColors.secondaryText,
              fontSize: 14,
            ),
          ),
        ),
      ],
    );
  }
}