import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
import 'package:flutter/material.dart';

import 'guide_common_scaffold.dart';

class OnboardingMotionPlaceholder extends StatelessWidget {
  const OnboardingMotionPlaceholder({
    super.key,
    required this.icon,
    required this.height,
  });

  final IconData icon;
  final double height;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: Center(
        child: TweenAnimationBuilder<double>(
          tween: Tween(begin: 0.96, end: 1),
          duration: const Duration(milliseconds: 900),
          curve: Curves.easeInOut,
          builder: (context, scale, child) {
            return Transform.scale(scale: scale, child: child);
          },
          child: Container(
            width: 170,
            height: 170,
            decoration: BoxDecoration(
              color: Colors.white.withValues(alpha: 0.42),
              borderRadius: BorderRadius.circular(32),
              border: Border.all(
                color: Colors.white.withValues(alpha: 0.6),
              ),
              boxShadow: [
                BoxShadow(
                  color: GuideCommonScaffold.brandColor.withValues(alpha: 0.1),
                  blurRadius: 26,
                  offset: const Offset(0, 12),
                ),
              ],
            ),
            child: Icon(
              icon,
              color: GuideCommonScaffold.brandColor,
              size: 72,
            ),
          ),
        ),
      ),
    );
  }
}

class ResearchCard extends StatelessWidget {
  const ResearchCard({
    super.key,
    required this.title,
    required this.isHRVup,
    required this.backgroundColor,
    required this.height,
    required this.image,
  });

  final String title;
  final bool isHRVup;

  final Color backgroundColor;
  final double height;
  final String image;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(32),
      ),
      padding: const EdgeInsets.fromLTRB(12, 24, 12, 28),
      child: Stack(
        children: [
          Image.asset(image),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  title,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    color: GuideCommonScaffold.titleColor,
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0,
                  ),
                ),
                const SizedBox(height: 2),
                RichText(
                    text: TextSpan(children: [
                  TextSpan(
                      text: isHRVup
                          ? context.l10n.onboardingResearchHrvUp
                          : context.l10n.onboardingResearchHrvDown,
                      style: const TextStyle(
                          color: GuideCommonScaffold.subtitleColor,
                          fontSize: 12,
                          letterSpacing: 0)),
                  WidgetSpan(
                      child: Image.asset(
                          width: 12,
                          height: 12,
                          isHRVup
                              ? 'assets/images/common/ic_arrow_green_up.png'
                              : 'assets/images/common/ic_arrow_red_down.png'),
                      alignment: PlaceholderAlignment.middle),
                ])),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class GiftIllustration extends StatelessWidget {
  const GiftIllustration({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 332,
      width: double.infinity,
      color: const Color(0xFFF17F96),
      child: Center(
        child: SizedBox(
          width: 240,
          height: 240,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                top: 36,
                child: Container(
                  width: 190,
                  height: 52,
                  decoration: BoxDecoration(
                    color: const Color(0xFFFF4F21),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              Positioned(
                top: 76,
                child: Container(
                  width: 184,
                  height: 132,
                  decoration: BoxDecoration(
                    color: const Color(0xFFFF4F21),
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
              Positioned(
                top: 72,
                bottom: 28,
                child: Container(
                  width: 12,
                  color: const Color(0xFFFF8D1A),
                ),
              ),
              Positioned(
                top: 44,
                child: Transform.rotate(
                  angle: -0.08,
                  child: Container(
                    width: 168,
                    height: 100,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: const Color(0xFFB538A6),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Text(
                      '50%',
                      style: TextStyle(
                        color: Color(0xFFFFC38E),
                        fontSize: 56,
                        fontWeight: FontWeight.w800,
                        letterSpacing: 0,
                      ),
                    ),
                  ),
                ),
              ),
              const Positioned(
                top: 0,
                child: Icon(
                  Icons.card_giftcard_rounded,
                  color: Color(0xFFFF8D1A),
                  size: 84,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}