import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers.dart';
import 'main_menu_screen.dart';
import '../game/config.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            AppStrings.settings,
            style: TextStyle(
              fontSize: ThemeConfig.fontSizeTitle,
              fontWeight: ThemeConfig.fontWeightBold,
              color: ThemeConfig.textColorWhite,
            ),
          ),
          const SizedBox(height: 40),

          // Enemy Animation Toggle
          Consumer<SettingsProvider>(
            builder: (context, settings, child) {
              return SizedBox(
                width: 300,
                child: Column(
                  children: [
                    SwitchListTile(
                      title: const Text(
                        AppStrings.enemyAnimations,
                        style: TextStyle(color: ThemeConfig.textColorWhite),
                      ),
                      value: settings.enableEnemyAnimations,
                      onChanged: (value) {
                        settings.toggleEnemyAnimations(value);
                      },
                      activeThumbColor: ThemeConfig.btnActionActive,
                    ),
                    const SizedBox(height: 20),
                    const Text(
                      'Attack Animation Scale',
                      style: TextStyle(color: ThemeConfig.textColorWhite),
                    ),
                    Row(
                      children: [
                        const Text(
                          '2.0',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                        Expanded(
                          child: Slider(
                            value: settings.attackAnimScale,
                            min: 2.0,
                            max: 9.9,
                            divisions: 79,
                            label: settings.attackAnimScale.toStringAsFixed(1),
                            activeColor: ThemeConfig.btnActionActive,
                            inactiveColor: ThemeConfig.textColorGrey,
                            onChanged: (value) {
                              settings.setAttackAnimScale(value);
                            },
                          ),
                        ),
                        const Text(
                          '9.9',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                      ],
                    ),
                    Text(
                      'Current: ${settings.attackAnimScale.toStringAsFixed(1)}',
                      style: const TextStyle(
                        color: ThemeConfig.textColorWhite,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
          Consumer<SettingsProvider>(
            builder: (context, settings, child) {
              return SizedBox(
                width: 300,
                child: Column(
                  children: [
                    const SizedBox(height: 20),
                    const Text(
                      'Shake Offset',
                      style: TextStyle(color: ThemeConfig.textColorWhite),
                    ),
                    Row(
                      children: [
                        const Text(
                          '0',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                        Expanded(
                          child: Slider(
                            value: settings.shakeOffset,
                            min: 0.0,
                            max: 100.0,
                            divisions: 100,
                            label: settings.shakeOffset.toStringAsFixed(1),
                            activeColor: ThemeConfig.btnActionActive,
                            inactiveColor: ThemeConfig.textColorGrey,
                            onChanged: (value) {
                              settings.setShakeOffset(value);
                            },
                          ),
                        ),
                        const Text(
                          '100',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                      ],
                    ),
                    Text(
                      'Current: ${settings.shakeOffset.toStringAsFixed(1)}',
                      style: const TextStyle(
                        color: ThemeConfig.textColorWhite,
                        fontSize: 12,
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Text(
                      'Shake Count',
                      style: TextStyle(color: ThemeConfig.textColorWhite),
                    ),
                    Row(
                      children: [
                        const Text(
                          '1',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                        Expanded(
                          child: Slider(
                            value: settings.shakeCount,
                            min: 1.0,
                            max: 10.0,
                            divisions: 9,
                            label: settings.shakeCount.toStringAsFixed(0),
                            activeColor: ThemeConfig.btnActionActive,
                            inactiveColor: ThemeConfig.textColorGrey,
                            onChanged: (value) {
                              settings.setShakeCount(value);
                            },
                          ),
                        ),
                        const Text(
                          '10',
                          style: TextStyle(color: ThemeConfig.textColorGrey),
                        ),
                      ],
                    ),
                    Text(
                      'Current: ${settings.shakeCount.toStringAsFixed(0)}',
                      style: const TextStyle(
                        color: ThemeConfig.textColorWhite,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),

          // const SizedBox(height: 20),
          // const Text(
          //   'Volume: 100%',
          //   style: TextStyle(color: ThemeConfig.textColorWhite),
          // ),
          const SizedBox(height: 40),

          // Restart Button
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: ThemeConfig.btnRestartBg,
              padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 12),
            ),
            onPressed: () {
              _showConfirmationDialog(
                context,
                title: '${AppStrings.restart} Game?',
                content: 'All progress will be lost. Are you sure?',
                onConfirm: () {
                  context.read<BattleProvider>().initializeBattle();
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Game Restarted!')),
                  );
                  // Optionally switch tab back to Battle (index 0)
                  // But MainWrapper controls the index.
                  // We can't easily switch tab from here without a callback or Provider.
                  // For now, just restart logic is enough.
                },
              );
            },
            child: const Text('Restart Game'),
          ),
          const SizedBox(height: 20),

          // Return to Main Menu Button
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: ThemeConfig.btnReturnMenuBg,
              padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 12),
            ),
            onPressed: () {
              _showConfirmationDialog(
                context,
                title: '${AppStrings.returnToMenu}?',
                content:
                    'Unsaved progress may be lost. (Progress is saved automatically after each stage)',
                onConfirm: () {
                  Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(
                      builder: (context) => const MainMenuScreen(),
                    ),
                    (route) => false,
                  );
                },
              );
            },
            child: const Text(AppStrings.returnToMenu),
          ),
        ],
      ),
    );
  }

  void _showConfirmationDialog(
    BuildContext context, {
    required String title,
    required String content,
    required VoidCallback onConfirm,
  }) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(title),
        content: Text(content),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text(AppStrings.cancel),
          ),
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              onConfirm();
            },
            child: const Text(
              AppStrings.confirm,
              style: TextStyle(color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }
}
