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

class LevelProgressWidget extends StatelessWidget {
  final GamificationController controller;
  const LevelProgressWidget({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final level = controller.currentLevel;
    final next = controller.nextLevel;
    final isAr = Get.locale?.languageCode == 'ar';

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            level.color.withOpacity(0.08),
            level.gradientEnd.withOpacity(0.04)
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
        border: Border.all(color: level.color.withOpacity(0.2), width: 1.5),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Driver Level'.tr,
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: FinanceDesignSystem.primaryDark)),
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
                decoration: BoxDecoration(
                  gradient:
                      LinearGradient(colors: [level.color, level.gradientEnd]),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Row(mainAxisSize: MainAxisSize.min, children: [
                  Text(level.emoji, style: const TextStyle(fontSize: 16)),
                  const SizedBox(width: 6),
                  Text(isAr ? level.nameAr : level.nameEn,
                      style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 13)),
                ]),
              ),
            ],
          ),
          const SizedBox(height: 20),
          Row(
            children: List.generate(DriverLevels.all.length, (i) {
              final lvl = DriverLevels.all[i];
              final isCurrent = lvl.id == level.id;
              final isPast = DriverLevels.all.indexOf(level) > i;
              return Expanded(
                  child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 2),
                height: 8,
                decoration: BoxDecoration(
                  color: isCurrent
                      ? lvl.color
                      : isPast
                          ? lvl.color.withOpacity(0.6)
                          : FinanceDesignSystem.backgroundColor,
                  borderRadius: BorderRadius.circular(4),
                ),
              ));
            }),
          ),
          const SizedBox(height: 6),
          Row(
              children: DriverLevels.all
                  .map((l) => Expanded(
                      child: Text(l.emoji,
                          textAlign: TextAlign.center,
                          style:
                              TextStyle(fontSize: l.id == level.id ? 16 : 12))))
                  .toList()),
          const SizedBox(height: 16),
          if (next != null) ...[
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text('${'Next Level:'.tr} ${isAr ? next.nameAr : next.nameEn}',
                  style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w600,
                      color: FinanceDesignSystem.textSecondary)),
              Text('${(controller.progressToNext * 100).toStringAsFixed(0)}%',
                  style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                      color: level.color)),
            ]),
            const SizedBox(height: 8),
            Stack(children: [
              Container(
                  height: 10,
                  decoration: BoxDecoration(
                      color: FinanceDesignSystem.backgroundColor,
                      borderRadius: BorderRadius.circular(5))),
              LayoutBuilder(
                  builder: (ctx, c) => AnimatedContainer(
                        duration: const Duration(milliseconds: 800),
                        curve: Curves.easeOutCubic,
                        height: 10,
                        width: c.maxWidth * controller.progressToNext,
                        decoration: BoxDecoration(
                            gradient: LinearGradient(
                                colors: [level.color, level.gradientEnd]),
                            borderRadius: BorderRadius.circular(5)),
                      )),
            ]),
            const SizedBox(height: 6),
            Text('${controller.totalPoints} / ${next.minPoints} ${'Points'.tr}',
                style: TextStyle(
                    fontSize: 11,
                    color: FinanceDesignSystem.textMuted,
                    fontFamily: 'digit')),
          ] else
            Center(
                child: Text('🏆 ${'Maximum Level Reached!'.tr}',
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: level.color))),
          const SizedBox(height: 16),
          Wrap(
              spacing: 6,
              runSpacing: 6,
              children: level.perks
                  .map((p) => Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 10, vertical: 5),
                        decoration: BoxDecoration(
                            color: level.color.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(12)),
                        child: Text(p.tr,
                            style: TextStyle(
                                fontSize: 10,
                                fontWeight: FontWeight.w600,
                                color: level.color.withOpacity(0.8))),
                      ))
                  .toList()),
        ],
      ),
    );
  }
}
