import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:english_learning/core/services/repositories/constants.dart';
import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:english_learning/features/home/models/completed_topics_model.dart';
import 'package:english_learning/features/home/widgets/progress_bar.dart';
import 'package:flutter/material.dart';

class ProgressCard extends StatelessWidget {
  final List<CompletedTopic> completedTopic;

  const ProgressCard({super.key, required this.completedTopic});

  String _getFullImageUrl(String thumbnail) {
    return thumbnail.startsWith('http')
        ? thumbnail
        : '${baseUrl}uploads/section/$thumbnail';
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ...completedTopic.asMap().entries.map(
          (entry) {
            CompletedTopic topic = entry.value;
            return Padding(
              padding: const EdgeInsets.only(bottom: 12),
              child: _buildTopicItem(topic),
            );
          },
        ),
      ],
    );
  }

  Widget _buildTopicItem(CompletedTopic topic) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                _getFullImageUrl(topic.thumbnail),
                width: 90,
                height: 130,
                fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) {
                  return Container(
                    width: 90,
                    height: 130,
                    color: Colors.grey[300],
                    child: const Icon(
                      Icons.image_not_supported,
                      color: Colors.grey,
                    ),
                  );
                },
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    topic.nameSection,
                    style: AppTextStyles.blackTextStyle.copyWith(
                      fontSize: 16,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    topic.descriptionSection,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: AppTextStyles.disableTextStyle.copyWith(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 24),
                  ProgressBar(
                    completedTopics: topic.completedTopics,
                    totalTopics: topic.totalTopics,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}