import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:english_learning/features/learning/modules/exercises/providers/exercise_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:english_learning/core/utils/styles/theme.dart';

class SeeProgressModal extends StatelessWidget {
  const SeeProgressModal({super.key});

  @override
  Widget build(BuildContext context) {
    final exerciseProvider = Provider.of<ExerciseProvider>(context);
    final exercises = exerciseProvider.exercises;

    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 32.0,
        vertical: 24.0,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Your Progress',
                style: AppTextStyles.blackTextStyle.copyWith(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              IconButton(
                icon: const Icon(BootstrapIcons.x),
                iconSize: 36,
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          const Divider(
            color: AppColors.disableColor,
            thickness: 1,
          ),
          const SizedBox(height: 20),
          GridView.builder(
            shrinkWrap: true, // Important to wrap GridView inside a modal
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 5, // Number of columns
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 1,
            ),
            itemCount: exercises.length,
            itemBuilder: (context, index) {
              final isCompleted = exerciseProvider.isExerciseCompleted(index);
              return ElevatedButton(
                onPressed: () {
                  Navigator.pop(context); // Close modal
                  exerciseProvider
                      .goToExercise(index); // Navigate to the selected exercise
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor:
                      isCompleted ? AppColors.blueColor : Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                    side: const BorderSide(
                      color: AppColors.blueColor,
                      width: 1,
                    ),
                  ),
                  elevation: 0, // Remove shadow
                  padding: const EdgeInsets.all(0),
                  minimumSize: const Size(50, 50),
                ),
                child: Text(
                  '${index + 1}',
                  style: TextStyle(
                    color: isCompleted ? Colors.white : AppColors.blueColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}
