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

class ChallengesPage extends StatelessWidget {
  ChallengesPage({super.key});
  final ChallengesController controller = Get.put(ChallengesController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: FinanceDesignSystem.backgroundColor,
      body: GetBuilder<ChallengesController>(builder: (cc) {
        if (cc.isLoading) {
          return Center(
              child: CircularProgressIndicator(
                  color: FinanceDesignSystem.primaryDark));
        }
        return CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: [
              SliverAppBar(
                expandedHeight: 160,
                pinned: true,
                backgroundColor: Get.isDarkMode ? FinanceDesignSystem.primaryDark : const Color(0xFF1A237E),
                leading: IconButton(
                    icon: const Icon(Icons.arrow_back_ios_new_rounded,
                        color: Colors.white, size: 20),
                    onPressed: () => Get.back()),
                actions: [
                  IconButton(
                      icon: const Icon(Icons.refresh_rounded,
                          color: Colors.white),
                      onPressed: () => cc.fetchChallengeProgress())
                ],
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text('Challenges'.tr,
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18)),
                  background: Stack(fit: StackFit.expand, children: [
                    Container(
                        decoration: BoxDecoration(
                            gradient: LinearGradient(colors: Get.isDarkMode 
                              ? [FinanceDesignSystem.primaryDark, const Color(0xFF1E1E2E)]
                              : [const Color(0xFF0A0E21), const Color(0xFF1A237E)]
                            ))),
                    Positioned(
                        right: -30,
                        top: -10,
                        child: Icon(Icons.bolt_rounded,
                            size: 160, color: Colors.white.withValues(alpha: 0.04))),
                  ]),
                ),
              ),
              SliverPadding(
                  padding: const EdgeInsets.fromLTRB(16, 24, 16, 40),
                  sliver: SliverList(
                      delegate: SliverChildListDelegate([
                    // Daily Challenges
                    _sectionHeader(
                        'Daily Challenges'.tr,
                        '🔥',
                        cc.dailyChallenges.where((c) => c.isCompleted).length,
                        cc.dailyChallenges.length),
                    const SizedBox(height: 12),
                    ...cc.dailyChallenges.map((c) => _challengeCard(c, cc)),
                    const SizedBox(height: 28),
                    // Weekly Challenges
                    _sectionHeader(
                        'Weekly Challenges'.tr,
                        '🏆',
                        cc.weeklyChallenges.where((c) => c.isCompleted).length,
                        cc.weeklyChallenges.length),
                    const SizedBox(height: 12),
                    ...cc.weeklyChallenges.map((c) => _challengeCard(c, cc)),
                  ]))),
            ]);
      }),
    );
  }

  Widget _sectionHeader(String title, String emoji, int done, int total) {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Row(children: [
        Text(emoji, style: const TextStyle(fontSize: 20)),
        const SizedBox(width: 8),
        Text(title, style: FinanceDesignSystem.headingStyle),
      ]),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
        decoration: BoxDecoration(
            color: FinanceDesignSystem.accentBlue.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(20)),
        child: Text('$done/$total',
            style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: FinanceDesignSystem.accentBlue)),
      ),
    ]);
  }

  Widget _challengeCard(Challenge c, ChallengesController cc) {
    final isAr = Get.locale?.languageCode == 'ar';
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
        border: c.isCompleted
            ? Border.all(color: c.color.withValues(alpha: 0.3), width: 1.5)
            : null,
        boxShadow: [
          BoxShadow(
              color: Colors.black.withValues(alpha: 0.03),
              blurRadius: 10,
              offset: const Offset(0, 4))
        ],
      ),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Row(children: [
          Container(
            width: 44,
            height: 44,
            decoration: BoxDecoration(
                color: c.color.withValues(alpha: 0.12),
                borderRadius: BorderRadius.circular(12)),
            child: Icon(c.icon, color: c.color, size: 22),
          ),
          const SizedBox(width: 12),
          Expanded(
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                Text(isAr ? c.titleAr : c.titleEn,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: FinanceDesignSystem.primaryDark)),
                Text(isAr ? c.descriptionAr : c.descriptionEn,
                    style:
                        TextStyle(fontSize: 11, color: FinanceDesignSystem.textSecondary)),
              ])),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            decoration: BoxDecoration(
                color: const Color(0xFFFFD700).withValues(alpha: 0.15),
                borderRadius: BorderRadius.circular(12)),
            child: Text('+${c.reward}',
                style: const TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFFFF8F00))),
          ),
        ]),
        const SizedBox(height: 14),
        // Progress bar
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text('${c.currentProgress}/${c.target}',
              style: TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.w600,
                  color: FinanceDesignSystem.textSecondary)),
          Text('${(c.progress * 100).toStringAsFixed(0)}%',
              style: TextStyle(
                  fontSize: 11, fontWeight: FontWeight.bold, color: c.color)),
        ]),
        const SizedBox(height: 6),
        Stack(children: [
          Container(
              height: 8,
              decoration: BoxDecoration(
                  color: FinanceDesignSystem.backgroundColor,
                  borderRadius: BorderRadius.circular(4))),
          LayoutBuilder(
              builder: (ctx, cons) => AnimatedContainer(
                    duration: const Duration(milliseconds: 600),
                    curve: Curves.easeOutCubic,
                    height: 8,
                    width: cons.maxWidth * c.progress,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [c.color, c.color.withValues(alpha: 0.6)]),
                      borderRadius: BorderRadius.circular(4),
                    ),
                  )),
        ]),
        // Claim button
        if (c.isCompleted && !c.isClaimed) ...[
          const SizedBox(height: 12),
          SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: () => cc.claimReward(c),
                icon: const Icon(Icons.card_giftcard_rounded, size: 18),
                label: Text('Claim Reward'.tr),
                style: ElevatedButton.styleFrom(
                  backgroundColor: c.color,
                  foregroundColor: Colors.white,
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12)),
                  padding: const EdgeInsets.symmetric(vertical: 12),
                ),
              )),
        ],
        if (c.isClaimed) ...[
          const SizedBox(height: 8),
          Center(
              child: Row(mainAxisSize: MainAxisSize.min, children: [
            Icon(Icons.check_circle_rounded,
                color: FinanceDesignSystem.successGreen, size: 16),
            const SizedBox(width: 4),
            Text('Claimed'.tr,
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: FinanceDesignSystem.successGreen)),
          ])),
        ],
      ]),
    );
  }
}