zentap/lib/ui/components/tutorial_overlay.dart

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

class TutorialOverlay extends StatefulWidget {
  final VoidCallback onComplete;

  const TutorialOverlay({
    super.key,
    required this.onComplete,
  });

  @override
  State<TutorialOverlay> createState() => _TutorialOverlayState();
}

class _TutorialOverlayState extends State<TutorialOverlay>
    with TickerProviderStateMixin {
  late AnimationController _pulseController;
  late AnimationController _fadeController;
  late Animation<double> _pulseAnimation;
  late Animation<double> _fadeAnimation;

  int _currentStep = 0;
  final int _totalSteps = 3;

  final List<TutorialStep> _steps = [
    TutorialStep(
      title: 'Welcome to ZenTap!',
      description: 'Tap anywhere on the screen to pop relaxing bubbles',
      icon: Icons.touch_app,
      position: TutorialPosition.center,
    ),
    TutorialStep(
      title: 'Earn Relaxation Points',
      description: 'Each bubble you pop gives you points to track your zen journey',
      icon: Icons.stars,
      position: TutorialPosition.center,
    ),
    TutorialStep(
      title: 'Ready to Relax?',
      description: 'Try Zen Mode for endless peaceful tapping without scores',
      icon: Icons.self_improvement,
      position: TutorialPosition.center,
    ),
  ];

  @override
  void initState() {
    super.initState();
    
    _pulseController = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this,
    )..repeat(reverse: true);
    
    _fadeController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );

    _pulseAnimation = Tween<double>(
      begin: 0.8,
      end: 1.2,
    ).animate(CurvedAnimation(
      parent: _pulseController,
      curve: Curves.easeInOut,
    ));

    _fadeAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _fadeController,
      curve: Curves.easeInOut,
    ));

    _fadeController.forward();
  }

  @override
  void dispose() {
    _pulseController.dispose();
    _fadeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final step = _steps[_currentStep];
    
    return FadeTransition(
      opacity: _fadeAnimation,
      child: Container(
        color: ZenColors.black.withOpacity(0.85),
        child: SafeArea(
          child: Stack(
            children: [
              // Tutorial content
              Positioned.fill(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // Animated icon
                    AnimatedBuilder(
                      animation: _pulseAnimation,
                      builder: (context, child) {
                        return Transform.scale(
                          scale: _pulseAnimation.value,
                          child: Container(
                            padding: const EdgeInsets.all(30),
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: ZenColors.buttonBackground.withValues(alpha: 0.2),
                              border: Border.all(
                                color: ZenColors.buttonBackground,
                                width: 2,
                              ),
                            ),
                            child: Icon(
                              step.icon,
                              size: 60,
                              color: ZenColors.buttonBackground,
                            ),
                          ),
                        );
                      },
                    ),
                    
                    const SizedBox(height: 40),
                    
                    // Title
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 40),
                      child: Text(
                        step.title,
                        style: const TextStyle(
                          color: ZenColors.primaryText,
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 0.5,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    
                    const SizedBox(height: 20),
                    
                    // Description
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 40),
                      child: Text(
                        step.description,
                        style: TextStyle(
                          color: ZenColors.secondaryText,
                          fontSize: 16,
                          height: 1.5,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    
                    const SizedBox(height: 60),
                    
                    // Progress indicator
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: List.generate(_totalSteps, (index) {
                        return Container(
                          margin: const EdgeInsets.symmetric(horizontal: 4),
                          width: 12,
                          height: 12,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: index <= _currentStep
                                ? ZenColors.buttonBackground
                                : ZenColors.mutedText.withValues(alpha: 0.3),
                          ),
                        );
                      }),
                    ),
                    
                    const SizedBox(height: 40),
                    
                    // Action buttons
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 40),
                      child: Row(
                        children: [
                          if (_currentStep > 0)
                            Expanded(
                              child: OutlinedButton(
                                onPressed: _previousStep,
                                style: OutlinedButton.styleFrom(
                                  foregroundColor: ZenColors.primaryText,
                                  side: const BorderSide(
                                    color: ZenColors.mutedText,
                                  ),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  padding: const EdgeInsets.symmetric(vertical: 16),
                                ),
                                child: const Text(
                                  'Previous',
                                  style: TextStyle(fontSize: 16),
                                ),
                              ),
                            ),
                          
                          if (_currentStep > 0) const SizedBox(width: 16),
                          
                          Expanded(
                            flex: 2,
                            child: ElevatedButton(
                              onPressed: _nextStep,
                              style: ElevatedButton.styleFrom(
                                backgroundColor: ZenColors.buttonBackground,
                                foregroundColor: ZenColors.buttonText,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                                padding: const EdgeInsets.symmetric(vertical: 16),
                                elevation: 4,
                              ),
                              child: Text(
                                _currentStep == _totalSteps - 1 
                                    ? 'Start Relaxing!' 
                                    : 'Continue',
                                style: const TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              
              // Skip button
              Positioned(
                top: 20,
                right: 20,
                child: TextButton(
                  onPressed: _skipTutorial,
                  style: TextButton.styleFrom(
                    foregroundColor: ZenColors.mutedText,
                  ),
                  child: const Text(
                    'Skip',
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _nextStep() async {
    if (SettingsManager.isHapticsEnabled) {
      await HapticUtils.vibrate(duration: 50);
    }

    if (_currentStep < _totalSteps - 1) {
      setState(() {
        _currentStep++;
      });
    } else {
      await _completeTutorial();
    }
  }

  void _previousStep() async {
    if (SettingsManager.isHapticsEnabled) {
      await HapticUtils.vibrate(duration: 50);
    }

    if (_currentStep > 0) {
      setState(() {
        _currentStep--;
      });
    }
  }

  void _skipTutorial() async {
    if (SettingsManager.isHapticsEnabled) {
      await HapticUtils.vibrate(duration: 50);
    }
    await _completeTutorial();
  }

  Future<void> _completeTutorial() async {
    await SettingsManager.setTutorialShown(true);
    await _fadeController.reverse();
    widget.onComplete();
  }
}

class TutorialStep {
  final String title;
  final String description;
  final IconData icon;
  final TutorialPosition position;

  TutorialStep({
    required this.title,
    required this.description,
    required this.icon,
    required this.position,
  });
}

enum TutorialPosition {
  center,
  top,
  bottom,
}