import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../providers/theme_provider.dart';


class BadgeCase extends ConsumerWidget {
  const BadgeCase({super.key});

  static const List<Map<String, dynamic>> _badges = [
    {'id': 'regional_tohoku', 'name': '東北制覇', 'icon': '👹', 'desc': '東北6県の日本酒を登録'},
    {'id': 'flavor_dry', 'name': '辛口党', 'icon': '🌶️', 'desc': '辛口(+5以上)を10本登録'},
    // Add more future badges here
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userProfile = ref.watch(userProfileProvider);
    final unlocked = userProfile.unlockedBadges.toSet();

    return Container(
       padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Theme.of(context).cardColor,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: Theme.of(context).dividerColor.withValues(alpha: 0.1),
          ),
        ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                    'バッジケース',
                    style: Theme.of(context).textTheme.titleSmall?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
                 ),
                 Text(
                   '${unlocked.length} / ${_badges.length}',
                   style: const TextStyle(fontSize: 12, color: Colors.grey),
                 ),
              ],
            ),
             const SizedBox(height: 16),
             Wrap(
               spacing: 12,
               runSpacing: 12,
               children: _badges.map((badge) {
                 final isUnlocked = unlocked.contains(badge['id']);
                 return Tooltip(
                   message: '${badge['name']}\n${badge['desc']}',
                   triggerMode: TooltipTriggerMode.tap,
                   child: AnimatedContainer(
                     duration: const Duration(milliseconds: 300),
                     width: 64,
                     height: 80,
                     child: Column(
                       children: [
                         Container(
                           width: 50,
                           height: 50,
                           alignment: Alignment.center,
                           decoration: BoxDecoration(
                             color: isUnlocked 
                                 ? Colors.orange.withValues(alpha: 0.1) 
                                 : Colors.grey.withValues(alpha: 0.1),
                             shape: BoxShape.circle,
                             border: Border.all(
                               color: isUnlocked 
                                  ? Colors.orange 
                                  : Colors.grey.withValues(alpha: 0.3),
                               width: 2,
                             ),
                             boxShadow: isUnlocked ? [
                               BoxShadow(
                                 color: Colors.orange.withValues(alpha: 0.3),
                                 blurRadius: 8,
                               )
                             ] : [],
                           ),
                           child: Text(
                             isUnlocked ? badge['icon'] : '🔒',
                             style: const TextStyle(fontSize: 24),
                           ),
                         ),
                         const SizedBox(height: 4),
                         Text(
                           badge['name'],
                           style: TextStyle(
                             fontSize: 10,
                             fontWeight: isUnlocked ? FontWeight.bold : FontWeight.normal,
                             color: isUnlocked ? Theme.of(context).colorScheme.onSurface : Colors.grey,
                           ),
                           overflow: TextOverflow.ellipsis,
                         ),
                       ],
                     ),
                   ),
                 );
               }).toList(),
             ),
         ],
       ),
    );
  }
}