import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../../constants/color_constants.dart';
import '../../constants/font_constants.dart';
import '../../widgets/text_widget.dart';

// ─────────────────────────────────────────────────────────────────────────────
// ReferEarnScreen  (StatefulWidget)
// ─────────────────────────────────────────────────────────────────────────────

class ReferEarnScreen extends StatefulWidget {
  const ReferEarnScreen({super.key});

  @override
  State<ReferEarnScreen> createState() => _ReferEarnScreenState();
}

class _ReferEarnScreenState extends State<ReferEarnScreen> {
  bool _codeCopied = false;

  static const String _referralCode = 'ANBU123';
  static const int _totalCoins = 1250;


  // ── helpers ────────────────────────────────────────────────────────────────
  void _copyCode() async {
    await Clipboard.setData(const ClipboardData(text: _referralCode));
    setState(() => _codeCopied = true);
    await Future.delayed(const Duration(seconds: 2));
    if (mounted) setState(() => _codeCopied = false);
  }


  // ── build ──────────────────────────────────────────────────────────────────
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: true,
      child: Scaffold(
        backgroundColor: Color(0xFFF6F6F6),
        appBar: AppBar(

          surfaceTintColor: Colors.transparent,

          // 🔥 Prevent color overlay when scrolled
          scrolledUnderElevation: 0,
          animateColor: false,            // ✨ prevent color change on scroll
          elevation: 0,
          backgroundColor: Colors.white,

          leading: const BackButton(color: Color(0xFF1A1A2E)),

          title: ReusableTextWidget(
            text: 'Refer & Earn',
            color: const Color(0xFF1A1A2E),
            fontFamily: FontConstants.fontFamily,
            fontSize: 18,
            fontWeight: FontWeight.w700,
          ),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildTotalCoinsBanner(),
              const SizedBox(height: 16),
              _buildReferralCodeCard(),
              const SizedBox(height: 20),

              Center(
                child: ReusableTextWidget(
                  text: 'How It Works',
                  color: const Color(0xFF1A1A2E),
                  fontFamily: FontConstants.fontFamily,
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
              SizedBox(height: 16),
              _buildHowItWorksRow(),
              const SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }

  // ── Total Coins Banner ─────────────────────────────────────────────────────

  Widget _buildTotalCoinsBanner() {


    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        gradient: LinearGradient(
          colors: [
            ColorConstants.primaryColor.withOpacity(0.85),
            ColorConstants.primaryColor,
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ReusableTextWidget(
                      text: 'Total Coins',
                      color: Colors.white,
                      fontFamily: FontConstants.fontFamily,
                      fontSize: 13,
                      fontWeight: FontWeight.w800,
                    ),
                    const SizedBox(height: 4),
                    ReusableTextWidget(
                      text: '$_totalCoins Coins',
                      color: Colors.white,
                      fontFamily: FontConstants.fontFamily,
                      fontSize: 28,
                      fontWeight: FontWeight.w800,
                    ),
                    const SizedBox(height: 4),
                    ReusableTextWidget(
                      text: 'Earn more by referring friends',
                      color: Colors.white60,
                      fontFamily: FontConstants.fontFamily,
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                    ),
                  ],
                ),
              ),
              Container(
                width: 80,
                height: 70,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Colors.white.withOpacity(0.15),
                ),
                child: const Center(
                  child: Text('🪙', style: TextStyle(fontSize: 36)),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  // ── Referral Code Card ─────────────────────────────────────────────────────

  Widget _buildReferralCodeCard() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),

      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ReusableTextWidget(
            text: 'Your Referral Code',
            color: Colors.black.withOpacity(0.7),
            fontFamily: FontConstants.fontFamily,
            fontSize: 14,
            fontWeight: FontWeight.w600,
          ),
          const SizedBox(height: 12),
          Container(
            decoration: BoxDecoration(
              border: Border.all(
                  color: Colors.black.withOpacity(0.7),
                  width: 1.5),
              borderRadius: BorderRadius.circular(10),
            ),
            padding:
            const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ReusableTextWidget(
                  text: _referralCode,
                  color: Colors.black.withOpacity(0.7),
                  fontFamily: FontConstants.fontFamily,
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                ),
                GestureDetector(
                  onTap: _copyCode,
                  child: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 200),
                    child: _codeCopied
                        ? Row(
                      key: const ValueKey('copied'),
                      children: [
                        const Icon(Icons.check_circle,
                            size: 18, color: Color(0xFF2ECC71)),
                        const SizedBox(width: 4),
                        ReusableTextWidget(
                          text: 'Copied!',
                          color: const Color(0xFF2ECC71),
                          fontFamily: FontConstants.fontFamily,
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ],
                    )
                        : Row(
                      key: const ValueKey('copy'),
                      children: [
                        Icon(Icons.copy,
                            size: 18,
                            color: ColorConstants.primaryColor),
                        const SizedBox(width: 4),
                        ReusableTextWidget(
                          text: 'Copy',
                          color: ColorConstants.primaryColor,
                          fontFamily: FontConstants.fontFamily,
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 14),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.share_rounded, color: Colors.white),
              label: ReusableTextWidget(
                text: 'Invite Friends & Earn',
                color: Colors.white,
                fontFamily: FontConstants.fontFamily,
                fontSize: 15,
                fontWeight: FontWeight.w700,
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: ColorConstants.primaryColor,
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                elevation: 0,
              ),
            ),
          ),
          const SizedBox(height: 10),
          Center(
            child: ReusableTextWidget(
              text: 'Share your code or link with friends',
              color: Colors.grey,
              fontFamily: FontConstants.fontFamily,
              fontSize: 12,
              fontWeight: FontWeight.w600,
            ),
          ),
        ],
      ),
    );
  }


  // ── How It Works ───────────────────────────────────────────────────────────

  Widget _buildHowItWorksRow() {
    final steps = [
      {
        'step': 1,
        'icon': Icons.share_rounded,
        'label': 'Share',
        'color': ColorConstants.primaryColor,
      },
      {
        'step': 2,
        'icon': Icons.download_rounded,
        'label': 'Install',
        'color': const Color(0xFF3498DB),
      },
      {
        'step': 3,
        'icon': Icons.how_to_reg_rounded,
        'label': 'Register',
        'color': const Color(0xFF2ECC71),
      },
      {
        'step': 4,
        'icon': Icons.card_giftcard_rounded,
        'label': 'Reward',
        'color': const Color(0xFFE67E22),
      },
    ];

    return Row(
      children: steps.map((s) {
        final color = s['color'] as Color;

        return Expanded(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 4),
            padding: const EdgeInsets.symmetric(
              vertical: 10,
              horizontal: 4,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(14),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 10,
                  offset: const Offset(0, 3),
                ),
              ],
            ),
            child: Column(
              children: [
                Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Container(
                      width: 42,
                      height: 42,
                      decoration: BoxDecoration(
                        color: color.withOpacity(0.12),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        s['icon'] as IconData,
                        color: color,
                        size: 20,
                      ),
                    ),
                    Positioned(
                      top: -3,
                      left: -3,
                      child: Container(
                        width: 16,
                        height: 16,
                        decoration: BoxDecoration(
                          color: color,
                          shape: BoxShape.circle,
                        ),
                        child: Center(
                          child: Text(
                            '${s['step']}',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 8,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                ReusableTextWidget(
                  text: s['label'] as String,
                  color: const Color(0xFF555555),
                  fontFamily: FontConstants.fontFamily,
                  fontSize: 9,
                  fontWeight: FontWeight.w600,
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        );
      }).toList(),
    );
  }

}