import 'package:flutter/material.dart';
import 'package:vibration/vibration.dart';
import '../utils/colors.dart';
import '../utils/settings_manager.dart';
import 'game_screen.dart';
import 'settings_screen.dart';
import 'components/animated_background.dart';
import 'components/tutorial_overlay.dart';

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

  @override
  State<MainMenu> createState() => _MainMenuState();
}

class _MainMenuState extends State<MainMenu> {
  bool _showTutorial = false;

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

  void _checkTutorial() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!SettingsManager.isTutorialShown) {
        setState(() {
          _showTutorial = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ZenColors.appBackground,
      body: AnimatedBackground(
        child: Stack(
          children: [
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: [
                    // Header with settings button
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        IconButton(
                          onPressed: _openSettings,
                          icon: const Icon(
                            Icons.settings,
                            color: ZenColors.primaryText,
                            size: 28,
                          ),
                          style: IconButton.styleFrom(
                            backgroundColor: ZenColors.black.withValues(alpha: 0.3),
                            shape: const CircleBorder(),
                          ),
                        ),
                      ],
                    ),
                    
                    // Main content
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          // Game Title
                          const Text(
                            'ZenTap',
                            style: TextStyle(
                              color: ZenColors.primaryText,
                              fontSize: 48,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 2.0,
                            ),
                          ),
                          const SizedBox(height: 10),
                          
                          // Subtitle
                          Text(
                            'A stress relief tapping game',
                            style: TextStyle(
                              color: ZenColors.secondaryText,
                              fontSize: 18,
                              fontStyle: FontStyle.italic,
                            ),
                          ),
                          const SizedBox(height: 60),
                          
                          // Play Button
                          _buildMenuButton(
                            context,
                            'Play',
                            'Tap to earn Relaxation Points',
                            Icons.play_arrow,
                            () => _navigateToGame(context, false),
                          ),
                          const SizedBox(height: 20),
                          
                          // Zen Mode Button
                          _buildMenuButton(
                            context,
                            'Zen Mode',
                            'Pure relaxation, no score',
                            Icons.self_improvement,
                            () => _navigateToGame(context, true),
                          ),
                          const SizedBox(height: 40),
                          
                          // Settings hint
                          Text(
                            'Tap anywhere to feel the calm',
                            style: TextStyle(
                              color: ZenColors.mutedText,
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            // Tutorial overlay
            if (_showTutorial)
              TutorialOverlay(
                onComplete: () {
                  setState(() {
                    _showTutorial = false;
                  });
                },
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildMenuButton(
    BuildContext context,
    String title,
    String subtitle,
    IconData icon,
    VoidCallback onPressed,
  ) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(horizontal: 20),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: ZenColors.buttonBackground,
          foregroundColor: ZenColors.buttonText,
          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
          elevation: 8,
        ),
        child: Row(
          children: [
            Icon(
              icon,
              size: 32,
              color: ZenColors.buttonText,
            ),
            const SizedBox(width: 20),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: ZenColors.buttonText,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 14,
                      color: ZenColors.buttonText.withValues(alpha: 0.8),
                    ),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.arrow_forward_ios,
              color: ZenColors.buttonText.withValues(alpha: 0.7),
              size: 20,
            ),
          ],
        ),
      ),
    );
  }

  void _openSettings() async {
    if (SettingsManager.isHapticsEnabled) {
      try {
        await Vibration.vibrate(duration: 50);
      } catch (e) {
        // Vibration not supported on this platform
      }
    }
    
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const SettingsScreen(),
      ),
    );
  }

  void _navigateToGame(BuildContext context, bool isZenMode) async {
    if (SettingsManager.isHapticsEnabled) {
      try {
        await Vibration.vibrate(duration: 50);
      } catch (e) {
        // Vibration not supported on this platform
      }
    }
    
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => GameScreen(isZenMode: isZenMode),
      ),
    );
  }
}