import 'package:doublefeel_flutter/app/ext/font_ext.dart';
import 'package:doublefeel_flutter/core/util/size_extensions.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
import 'package:doublefeel_flutter/r.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../controllers/premium_activated_controller.dart';

class PremiumActivatedView extends GetView<PremiumActivatedController> {
  const PremiumActivatedView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color(0xFFE6DBFF),
            Color(0xFFEDE4FF),
            Color(0xFFEEE6FF),
            Color(0xFFF9F6FF)
          ],
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          toolbarHeight: 44.w,
          centerTitle: true,
          title: Text(
            "",
            style: TextStyle(
              fontSize: 16,
              color: Color(0xFF000000),
              fontWeight: FontWeightExt.semibold,
            ),
          ),
          leading: IconButton(
            highlightColor: Colors.transparent,
            padding: EdgeInsets.zero,
            onPressed: () {
              controller.executeBackLogic(context);
            },
            icon: Image(
              width: 24.w,
              height: 24.w,
              alignment: Alignment.centerLeft,
              image: AssetImage(R.assetsImagesNavBackIcon),
            ),
          ),
        ),
        body: _buildContentView(context),
      ),
    );
  }

  Widget _buildContentView(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(height: 150.h),
        const _FloatingPremiumIcon(),
        SizedBox(height: 84.h),
        Text(
          context.l10n.premiumActivatedTitle,
          style: const TextStyle(
              fontSize: 20,
              color: Color(0xFF0F0F11),
              fontWeight: FontWeightExt.semibold),
          textAlign: TextAlign.center,
        ),
        SizedBox(height: 8),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          child: Text(context.l10n.premiumActivatedDescription,
              style: const TextStyle(fontSize: 14, color: Color(0xFF0F0F11)),
              textAlign: TextAlign.center),
        ),
        Expanded(child: Container()),
        GestureDetector(
          onTap: () {
            controller.executeContinueLogic(context);
          },
          child: Container(
            width: 280.dp,
            height: 48.dp,
            decoration: BoxDecoration(
              color: Color(0xFF845EEE),
              borderRadius: BorderRadius.circular(24.dp),
            ),
            alignment: Alignment.center,
            child: Text(context.l10n.premiumActivatedContinue,
                style: const TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                    fontWeight: FontWeightExt.bold)),
          ),
        ),
        SizedBox(height: 36),
      ],
    );
  }
}

class _FloatingPremiumIcon extends StatefulWidget {
  const _FloatingPremiumIcon();

  @override
  State<_FloatingPremiumIcon> createState() => _FloatingPremiumIconState();
}

class _FloatingPremiumIconState extends State<_FloatingPremiumIcon>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _offsetY;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    )..repeat(reverse: true);
    _offsetY = Tween<double>(begin: 0, end: -10).animate(
      CurvedAnimation(parent: _controller, curve: Curves.linear),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _offsetY,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(0, _offsetY.value),
          child: child,
        );
      },
      child: Container(
        width: 88,
        height: 88,
        decoration: const BoxDecoration(
          color: Color(0xFF845EEE),
          shape: BoxShape.circle,
        ),
        padding: const EdgeInsets.all(5.0),
        child: Image.asset(
          R.assetsImagesProIcon,
          width: double.infinity,
          height: double.infinity,
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}