'use client'
import React from 'react'
import type { Badge, EmployeeBadge } from '@/types'

interface BadgeGridProps {
  allBadges: Badge[]
  earned: EmployeeBadge[]
}

const TIER_COLORS: Record<Badge['tier'], { bg: string; border: string; label: string }> = {
  bronze: { bg: '#f5e0c8', border: '#c8914f', label: '#7a4f2a' },
  silver: { bg: '#ececec', border: '#a8a8a8', label: '#555' },
  gold: { bg: '#fff3cc', border: '#e6b800', label: '#6b5000' },
  legendary: { bg: '#ede0ff', border: 'var(--purple)', label: 'var(--purple-700)' },
  content: { bg: 'var(--bg-warm)', border: 'var(--cream)', label: 'var(--fg-muted)' },
}

export function BadgeGrid({ allBadges, earned }: BadgeGridProps) {
  const earnedKeys = new Set(earned.map((e) => e.badge))

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: 'var(--s-3)',
      }}
    >
      {allBadges.map((badge) => {
        const isEarned = earnedKeys.has(badge.id)
        const tier = TIER_COLORS[badge.tier]
        return (
          <div
            key={badge.id}
            style={{
              background: isEarned ? tier.bg : 'var(--bg-warm)',
              border: `2px solid ${isEarned ? tier.border : 'var(--cream)'}`,
              borderRadius: 'var(--r-md)',
              padding: 'var(--s-4)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: 'var(--s-2)',
              textAlign: 'center',
              opacity: isEarned ? 1 : 0.45,
              transition: 'opacity 200ms',
            }}
          >
            <span style={{ fontSize: '28px', lineHeight: 1 }}>{badge.icon}</span>
            <span
              style={{
                fontSize: 'var(--t-small)',
                fontWeight: 600,
                color: isEarned ? tier.label : 'var(--fg-muted)',
                lineHeight: 1.3,
              }}
            >
              {badge.label}
            </span>
            <span
              style={{
                fontSize: 'var(--t-label)',
                fontFamily: 'var(--font-mono)',
                textTransform: 'uppercase',
                letterSpacing: 'var(--label-ls)',
                color: isEarned ? tier.label : 'var(--fg-subtle)',
                opacity: 0.75,
              }}
            >
              {badge.tier}
            </span>
            {isEarned && (
              <span
                style={{
                  fontSize: 'var(--t-label)',
                  fontFamily: 'var(--font-mono)',
                  color: isEarned ? tier.label : 'var(--fg-subtle)',
                  opacity: 0.7,
                }}
              >
                {badge.description}
              </span>
            )}
          </div>
        )
      })}
    </div>
  )
}
