import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/animations/movefade_anim.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_progress.dart';
import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_sticky_footer.dart';
import 'package:kasy_kit/features/onboarding/ui/widgets/selectable_row_tile.dart';

typedef OptionBuilder = Widget Function(String key, bool selected);

typedef ReassuranceBuilder = Widget? Function(String key);

typedef OnOptionIdSelected = void Function(String id);

typedef OnValidate = void Function(String? key);

/// Single choice question with radio buttons
class OnboardingRadioQuestion extends ConsumerStatefulWidget {
  final double? progress;
  final String title;
  final String description;
  final String btnText;
  final List<String> optionIds;
  final OptionBuilder optionBuilder;
  final ReassuranceBuilder? reassuranceBuilder;
  final OnOptionIdSelected? onOptionIdSelected;
  final OnValidate? onValidate;

  const OnboardingRadioQuestion({
    super.key,
    required this.title,
    required this.description,
    required this.btnText,
    required this.optionIds,
    required this.optionBuilder,
    this.progress,
    this.onOptionIdSelected,
    this.onValidate,
    this.reassuranceBuilder,
  });

  @override
  ConsumerState<OnboardingRadioQuestion> createState() =>
      _OnboardingRadioQuestionState();
}

class _OnboardingRadioQuestionState
    extends ConsumerState<OnboardingRadioQuestion> {
  String? selectedChoiceId;

  @override
  Widget build(BuildContext context) {
    final scrollBody = Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        if (widget.progress != null)
          OnboardingProgress(value: widget.progress!),
        Padding(
          padding: const EdgeInsets.fromLTRB(
            KasySpacing.md,
            KasySpacing.xl,
            KasySpacing.md,
            0,
          ),
          child: MoveFadeAnim(
            delayInMs: 100,
            child: Text(
              widget.title,
              textAlign: TextAlign.center,
              style: context.textTheme.headlineLarge?.copyWith(
                color: context.colors.onBackground,
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(
            KasySpacing.lg,
            KasySpacing.md,
            KasySpacing.lg,
            KasySpacing.xl,
          ),
          child: MoveFadeAnim(
            delayInMs: 200,
            child: Text(
              widget.description,
              textAlign: TextAlign.center,
              style: context.textTheme.bodyLarge?.copyWith(
                color: context.colors.onBackground.withValues(alpha: 0.6),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
          child: OnboardingSelectableRowGroup(
            physics: const NeverScrollableScrollPhysics(),
            options: widget.optionIds
                .map(
              (e) {
                final index = widget.optionIds.indexOf(e);
                return Animate(
                  effects: [
                    FadeEffect(
                      delay: Duration(milliseconds: 300 + index * 100),
                      duration: const Duration(milliseconds: 550),
                      curve: Curves.easeInOut,
                    ),
                  ],
                  child: widget.optionBuilder(e, e == selectedChoiceId),
                );
              },
            ).toList(),
            onSelect: (index, selected) {
              widget.onOptionIdSelected?.call(widget.optionIds[index]);
              setState(() {
                selectedChoiceId = widget.optionIds[index];
              });
            },
            onSelectInfoWidget: widget.optionIds
                .map((el) => widget.reassuranceBuilder?.call(el))
                .toList(),
          ),
        ),
        const SizedBox(height: KasySpacing.xl),
      ],
    );

    return OnboardingBackground(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: SafeArea(
              bottom: false,
              child: SingleChildScrollView(
                padding: const EdgeInsets.only(bottom: KasySpacing.md),
                child: ResponsiveBuilder(
                  small: scrollBody,
                  medium: Center(
                    child: ConstrainedBox(
                      constraints: const BoxConstraints(maxWidth: 600),
                      child: scrollBody,
                    ),
                  ),
                ),
              ),
            ),
          ),
          DeviceSizeBuilder(
            builder: (device) => OnboardingStickyFooter(
              maxContentWidth:
                  device == DeviceType.small ? null : 600,
              children: [
                KasyButton(
                  label: widget.btnText,
                  expand: true,
                  onPressed: selectedChoiceId == null
                      ? null
                      : () => widget.onValidate?.call(selectedChoiceId),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
