import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';

class PinchZoomTutorialOverlay extends StatefulWidget {
  final VoidCallback onComplete;

  const PinchZoomTutorialOverlay({
    Key? key,
    required this.onComplete,
  }) : super(key: key);

  @override
  State<PinchZoomTutorialOverlay> createState() => _PinchZoomTutorialOverlayState();
}

class _PinchZoomTutorialOverlayState extends State<PinchZoomTutorialOverlay> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _fadeAnimation;
  int _currentStep = 0;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _fadeAnimation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    );
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _nextStep() {
    if (_currentStep < 1) {
      setState(() {
        _currentStep++;
      });
    } else {
      _animationController.reverse().then((_) {
        widget.onComplete();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _fadeAnimation,
      child: Material(
        color: Colors.black.withValues(alpha: 0.85),
        child: SafeArea(
          child: Stack(
            children: [
              // Tap to dismiss overlay
              Positioned.fill(
                child: GestureDetector(
                  onTap: () {},
                  child: Container(color: Colors.transparent),
                ),
              ),
              // Tutorial content
              Center(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: _currentStep == 0 ? _buildFirstStep() : _buildSecondStep(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildFirstStep() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // Pinch gesture illustration
        Container(
          width: 200.w,
          height: 200.h,
          decoration: BoxDecoration(
            color: Colors.white.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(20.r),
          ),
          child: Center(
            child: _buildPinchGestureAnimation(),
          ),
        ),
        SizedBox(height: 32.h),
        // Title
        Text(
          LocaleKeys.pinchToZoom.tr(context: context),
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.f,
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
        SizedBox(height: 32.h),
        // Button
        CustomButton(
          text: LocaleKeys.gotIt.tr(context: context),
          onPressed: _nextStep,
          backgroundColor: AppColors.primaryRedColor,
          textColor: AppColors.whiteColor,
          fontSize: 16.f,
          fontWeight: FontWeight.w600,
          borderRadius: 12.r,
          height: 50.h,
        ),
      ],
    );
  }

  Widget _buildSecondStep() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // Illustration container with rounded corners
        Container(
          padding: EdgeInsets.all(24.w),
          decoration: BoxDecoration(
            color: Colors.white.withValues(alpha: 0.95),
            borderRadius: BorderRadius.circular(20.r),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                LocaleKeys.zoomIntoDetails.tr(context: context),
                style: TextStyle(
                  color: AppColors.textColor,
                  fontSize: 20.f,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24.h),
              // Pinch instruction
              _buildInstructionRow(
                icon: Icons.pinch_outlined,
                text: LocaleKeys.pinchWithTwoFingersToZoom.tr(context: context),
              ),
              SizedBox(height: 16.h),
              // Drag instruction
              _buildInstructionRow(
                icon: Icons.pan_tool_outlined,
                text: LocaleKeys.dragToMoveAround.tr(context: context),
              ),
            ],
          ),
        ),
        SizedBox(height: 32.h),
        // Button
        CustomButton(
          text: LocaleKeys.startExploring.tr(context: context),
          onPressed: _nextStep,
          backgroundColor: AppColors.primaryRedColor,
          textColor: AppColors.whiteColor,
          fontSize: 16.f,
          fontWeight: FontWeight.w600,
          borderRadius: 12.r,
          height: 50.h,
        ),
      ],
    );
  }

  Widget _buildInstructionRow({required IconData icon, required String text}) {
    return Row(
      children: [
        Container(
          width: 48.w,
          height: 48.h,
          decoration: BoxDecoration(
            color: AppColors.primaryRedColor.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Icon(
            icon,
            color: AppColors.primaryRedColor,
            size: 24.w,
          ),
        ),
        SizedBox(width: 16.w),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
              color: AppColors.textColor,
              fontSize: 14.f,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildPinchGestureAnimation() {
    return TweenAnimationBuilder<double>(
      tween: Tween(begin: 1.0, end: 0.7),
      duration: const Duration(milliseconds: 1500),
      curve: Curves.easeInOut,
      builder: (context, value, child) {
        return Transform.scale(
          scale: value,
          child: Stack(
            alignment: Alignment.center,
            children: [
              // Left hand
              Positioned(
                left: 40.w * (1 - value),
                child: Transform.rotate(
                  angle: -0.3,
                  child: Icon(
                    Icons.pan_tool,
                    size: 50.w,
                    color: Colors.white.withValues(alpha: 0.9),
                  ),
                ),
              ),
              // Right hand
              Positioned(
                right: 40.w * (1 - value),
                child: Transform.rotate(
                  angle: 0.3,
                  child: Icon(
                    Icons.pan_tool,
                    size: 50.w,
                    color: Colors.white.withValues(alpha: 0.9),
                  ),
                ),
              ),
            ],
          ),
        );
      },
      onEnd: () {
        // Restart animation
        setState(() {});
      },
    );
  }
}

