import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/data/models/subscription.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/features/subscription/ui/component/premium_page_factory.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/premium_background_gradient.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/premium_bottom_menu.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/premium_close_button.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/premium_feature.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/selectable_row.dart';
import 'package:kasy_kit/features/subscription/ui/widgets/trial_switcher.dart';
import 'package:kasy_kit/i18n/translations.g.dart';


/// The paywall with switch is a paywall with a switch to toggle the trial offer
/// (You have to have 1 offer with a trial period and 1 offer without a trial period)
/// Once the user toggles the switch, the selected offer is updated
/// - Offer with trial period is most of the time more expensive 
/// - try different pricing strategies to see which one converts the best
class PaywallWithSwitch extends StatelessWidget {
  final List<SubscriptionProduct> offers;
  final SubscriptionProduct? selectedOffer;
  final OnSelectItem<SubscriptionProduct> onSelectItem;
  final OnTapSubscription? onTap;
  final VoidCallback? onTapCoupon;
  final VoidCallback? onTapPrivacy;
  final VoidCallback? onTapTerms;
  final OnTap? onTapRestore;
  final OnTap? onSkip;

  const PaywallWithSwitch({
    super.key,
    required this.offers,
    required this.onSelectItem,
    required this.onTap,
    required this.onTapRestore,
    required this.selectedOffer,
    this.onTapCoupon,
    this.onSkip,
    this.onTapPrivacy,
    this.onTapTerms,
  });

  @override
  Widget build(BuildContext context) {
    var detailedPrice = "";
    var btnActionText = "";
    var title = "";

    final translations = Translations.of(context).paywallWithSwitch;
    final selectedOfferTrialDays = selectedOffer?.trialDays ?? 0;
    final maxTrialDays = offers
        .map((o) => o.trialDays ?? 0)
        .fold(0, (max, days) => days > max ? days : max);

    title = translations.noTrial.title;
    if (selectedOfferTrialDays > 0) {
      detailedPrice = translations.withTrial.details(
        price: selectedOffer?.formattedPrice(context) ?? "",
        days: selectedOfferTrialDays,
      );
      btnActionText = translations.withTrial.btnAction;
      title = translations.withTrial.title(
        days: selectedOfferTrialDays,
      );
    } else {
      detailedPrice = selectedOffer?.formattedPrice(context) ?? "";
      title = translations.noTrial.title;
      btnActionText = translations.noTrial.btnAction;
    }

    return Scaffold(
      backgroundColor: context.colors.primary,
      body: PremiumBackgroundGradient(
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: KasySpacing.pageHorizontalGutter),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  flex: 2,
                  child: Stack(
                    children: [
                      Positioned.fill(
                        child: Image.asset(
                          "assets/images/premium-switch-header.png",
                          fit: BoxFit.contain,
                        ),
                      ),
                      Positioned(
                        top: 8,
                        left: 0,
                        child: AppCloseButton(
                          onTap: () {
                            onSkip?.call();
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: KasySpacing.smd),
                Animate(
                  effects: const [
                    FadeEffect(
                      delay: Duration(milliseconds: 100),
                      duration: Duration(milliseconds: 300),
                    ),
                  ],
                  child: Text(
                    title,
                    textAlign: TextAlign.left,
                    style: GoogleFonts.albertSans(
                      fontSize: 24,
                      fontWeight: FontWeight.w700,
                      color: context.colors.background,
                      letterSpacing: -0.8,
                    ),
                  ),
                ),
                const SizedBox(height: KasySpacing.smd),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: AnimateList(
                    interval: 150.ms,
                    delay: 500.ms,
                    effects: [FadeEffect(duration: 300.ms)],
                    children: translations.features
                        .map((el) => PremiumFeature(text: el))
                        .toList(),
                  ),
                ),
                const SizedBox(height: KasySpacing.lg),
                if (offers.length > 1)
                  TrialSwitcher(
                    onUpdate: (withTrial) {
                      final offer = selectedOffer;
                      final otherOffer = offers.firstWhere(
                        (element) => element != offer,
                      );
                      onSelectItem(otherOffer);
                    },
                    trialDays: maxTrialDays,
                  ),
                const SizedBox(height: KasySpacing.md),
                Animate(
                  effects: const [
                    FadeEffect(
                      delay: Duration(milliseconds: 100),
                      duration: Duration(milliseconds: 300),
                    ),
                  ],
                  child: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 300),
                    transitionBuilder: (child, animation) => FadeTransition(
                      opacity: animation,
                      child: child,
                    ),
                    child: Text(
                      key: ValueKey(detailedPrice),
                      detailedPrice,
                      textAlign: TextAlign.center,
                      style: context.textTheme.titleLarge?.copyWith(
                        fontWeight: FontWeight.w500,
                        color: context.colors.background,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: KasySpacing.md),
                Animate(
                  effects: const [
                    FadeEffect(
                      delay: Duration(milliseconds: 300),
                      duration: Duration(milliseconds: 300),
                    ),
                    ScaleEffect(
                      delay: Duration(milliseconds: 300),
                      duration: Duration(milliseconds: 1000),
                      curve: Curves.elasticInOut,
                    ),
                  ],
                  child: KasyButton(
                    label: btnActionText,
                    variant: KasyButtonVariant.inverse,
                    isLoading: onTap == null,
                    expand: true,
                    onPressed: onTap,
                  ),
                ),
                const SizedBox(height: KasySpacing.lg),
                BottomPremiumMenu(
                  textColor: context.colors.onPrimary,
                  onTapRestore: onTapRestore,
                ),
                const SizedBox(height: KasySpacing.sm),
              ],
            ),
          ),
        ),
      ),
    );
  }
}