import 'package:flutter/material.dart';

import '../../../theme/app_status_colors.dart';
import '../../../utils/programmer_stats.dart';

/// A horizontal wrap of badge chips for the programmer dashboard.
///
/// Earned badges use the success container colour; locked badges show neutral
/// styling and display `current/target` as their label. Tapping any chip opens
/// an [AlertDialog] with the badge title and description.
class BadgesStrip extends StatelessWidget {
  const BadgesStrip({
    super.key,
    required this.badges,
  });

  final List<BadgeProgress> badges;

  @override
  Widget build(BuildContext context) {
    if (badges.isEmpty) return const SizedBox.shrink();
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        for (final badge in badges) _BadgeChip(badge: badge),
      ],
    );
  }
}

class _BadgeChip extends StatelessWidget {
  const _BadgeChip({required this.badge});

  final BadgeProgress badge;

  @override
  Widget build(BuildContext context) {
    final statusColors = AppStatusColors.of(context);
    final earned = badge.earned;

    return ActionChip(
      avatar: Icon(badge.icon, size: 16),
      label: Text(earned ? badge.title : '${badge.current}/${badge.target}'),
      backgroundColor: earned ? statusColors.success.container : null,
      onPressed: () {
        showDialog<void>(
          context: context,
          builder: (ctx) => AlertDialog(
            title: Text(badge.title),
            content: Text(badge.description),
          ),
        );
      },
    );
  }
}