import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';

class PromoGamificationCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final int currentProgress;
  final int targetProgress;
  final String reward;
  final VoidCallback? onTap;

  const PromoGamificationCard({
    super.key,
    required this.title,
    required this.subtitle,
    required this.currentProgress,
    required this.targetProgress,
    required this.reward,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final double progress = (currentProgress / targetProgress).clamp(0.0, 1.0);
    final bool isCompleted = progress >= 1.0;

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: FinanceDesignSystem.primaryDark,
                      ),
                    ),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey.shade500,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  color: (isCompleted
                          ? FinanceDesignSystem.successGreen
                          : FinanceDesignSystem.accentBlue)
                      .withOpacity(0.1),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Text(
                  reward,
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: isCompleted
                        ? FinanceDesignSystem.successGreen
                        : FinanceDesignSystem.accentBlue,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "${'Progress:'.tr} $currentProgress / $targetProgress",
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.grey.shade700,
                ),
              ),
              if (isCompleted)
                Icon(Icons.check_circle_rounded,
                    color: FinanceDesignSystem.successGreen, size: 16),
            ],
          ),
          const SizedBox(height: 8),
          Stack(
            children: [
              Container(
                height: 10,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.grey.shade100,
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              AnimatedContainer(
                duration: const Duration(milliseconds: 500),
                height: 10,
                width: MediaQuery.of(context).size.width *
                    progress, // Simplified for now
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: isCompleted
                        ? [
                            FinanceDesignSystem.successGreen,
                            Colors.lightGreenAccent
                          ]
                        : [FinanceDesignSystem.accentBlue, Colors.blueAccent],
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
            ],
          ),
          if (isCompleted && onTap != null) ...[
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: onTap,
                style: ElevatedButton.styleFrom(
                  backgroundColor: FinanceDesignSystem.successGreen,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius:
                        BorderRadius.circular(FinanceDesignSystem.buttonRadius),
                  ),
                  elevation: 0,
                  padding: const EdgeInsets.symmetric(vertical: 12),
                ),
                child: Text("Claim Reward".tr),
              ),
            ),
          ],
        ],
      ),
    );
  }
}
