import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/core/widgets/responsive_layout.dart';
import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.dart';
import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart';

/// A generic onboarding step widget with text and image.
class OnboardingStep extends StatelessWidget {
  final String? title;
  final Widget? titleWidget;
  final String imgPath;
  final String description;
  final String btnText;
  final String nextRoute;
  final VoidCallback? onNext;
  final double progress;
  final Widget? image;
  final bool withBg;
  final VoidCallback? onSkip;
  final String? skipLabel;
  final VoidCallback? onSecondary;
  final String? secondaryLabel;

  const OnboardingStep({
    super.key,
    this.title,
    this.titleWidget,
    required this.imgPath,
    required this.description,
    required this.btnText,
    required this.nextRoute,
    required this.progress,
    this.onNext,
    this.withBg = false,
    this.image,
    this.onSkip,
    this.skipLabel,
    this.onSecondary,
    this.secondaryLabel,
  });

  @override
  Widget build(BuildContext context) {
    final Widget? illustration = image ??
        (imgPath.isNotEmpty
            ? Animate(
                effects: const [
                  FadeEffect(
                    delay: Duration(milliseconds: 100),
                    duration: Duration(milliseconds: 200),
                    curve: Curves.easeIn,
                  ),
                  MoveEffect(
                    delay: Duration(milliseconds: 100),
                    duration: Duration(milliseconds: 450),
                    curve: Curves.easeOut,
                    begin: Offset(0, 50),
                    end: Offset.zero,
                  ),
                ],
                child: Image.asset(imgPath, fit: BoxFit.contain),
              )
            : null);

    final scaffold = OnboardingIllustrationScaffold(
      progress: progress,
      onSkip: onSkip,
      skipLabel: skipLabel,
      title: title ?? '',
      titleWidget: title != null
          ? Animate(
              effects: const [
                FadeEffect(
                  delay: Duration(milliseconds: 200),
                  duration: Duration(milliseconds: 200),
                  curve: Curves.easeIn,
                ),
                MoveEffect(
                  delay: Duration(milliseconds: 200),
                  duration: Duration(milliseconds: 450),
                  curve: Curves.easeOut,
                  begin: Offset(0, 50),
                  end: Offset.zero,
                ),
              ],
              child: Text(
                title!,
                textAlign: TextAlign.center,
                style: context.textTheme.headlineMedium?.copyWith(
                  color: context.colors.onBackground,
                  fontWeight: FontWeight.w600,
                ),
              ),
            )
          : titleWidget,
      description: description,
      descriptionWidget: Animate(
        effects: const [
          FadeEffect(
            delay: Duration(milliseconds: 300),
            duration: Duration(milliseconds: 200),
            curve: Curves.easeIn,
          ),
          MoveEffect(
            delay: Duration(milliseconds: 300),
            duration: Duration(milliseconds: 450),
            curve: Curves.easeOut,
            begin: Offset(0, 50),
            end: Offset.zero,
          ),
        ],
        child: Text(
          description,
          textAlign: TextAlign.center,
          style: context.textTheme.bodyLarge?.copyWith(
            color: context.colors.onBackground.withValues(alpha: 0.6),
          ),
        ),
      ),
      image: illustration,
      footerActions: [
        KasyButton(
          label: btnText,
          expand: true,
          onPressed: () {
            if (onNext != null) {
              onNext!.call();
            } else {
              Navigator.of(context).pushReplacementNamed(nextRoute);
            }
          },
        ),
        if (onSecondary != null && secondaryLabel != null) ...[
          const SizedBox(height: KasySpacing.xs),
          KasyButton(
            label: secondaryLabel!,
            variant: KasyButtonVariant.link,
            expand: true,
            onPressed: onSecondary,
          ),
        ],
      ],
    );

    final content = ResponsiveLayout(
      small: withBg
          ? OnboardingBackground(child: scaffold)
          : ColoredBox(
              color: context.colors.background,
              child: scaffold,
            ),
    );

    return content;
  }
}
