import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../theme/app_theme.dart';

/// Displays all reactions for a post
/// Used in thread/detail views to show comprehensive reaction breakdown
class ReactionsDisplay extends StatelessWidget {
  final Map<String, int> reactionCounts;
  final Set<String> myReactions;
  final VoidCallback? onReactionTap;
  final bool showAll;

  const ReactionsDisplay({
    super.key,
    required this.reactionCounts,
    required this.myReactions,
    this.onReactionTap,
    this.showAll = true,
  });

  @override
  Widget build(BuildContext context) {
    if (reactionCounts.isEmpty) {
      return const SizedBox.shrink();
    }

    List<MapEntry<String, int>> reactions;
    if (showAll) {
      reactions = reactionCounts.entries.toList();
      reactions.sort((a, b) => b.value.compareTo(a.value));
    } else {
      reactions = reactionCounts.entries.take(3).toList();
      reactions.sort((a, b) => b.value.compareTo(a.value));
    }

    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: reactions.map((entry) {
          final emoji = entry.key;
          final count = entry.value;
          final isMyReaction = myReactions.contains(emoji);

          return GestureDetector(
            onTap: onReactionTap,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: isMyReaction 
                    ? AppTheme.brightNavy.withValues(alpha: 0.15)
                    : AppTheme.navyBlue.withValues(alpha: 0.08),
                borderRadius: BorderRadius.circular(16),
                border: isMyReaction 
                    ? Border.all(color: AppTheme.brightNavy.withValues(alpha: 0.3))
                    : null,
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    emoji,
                    style: const TextStyle(fontSize: 14),
                  ),
                  const SizedBox(width: 4),
                  Text(
                    count > 99 ? '99+' : '$count',
                    style: GoogleFonts.inter(
                      color: isMyReaction ? AppTheme.brightNavy : AppTheme.textSecondary,
                      fontSize: 12,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}