'use client'

import { CuratedItem } from '@/types'

interface AuthenticationBadgeProps {
  item: CuratedItem
  detailed?: boolean
}

export function AuthenticationBadge({ item, detailed = false }: AuthenticationBadgeProps) {
  const getAuthenticationLevel = () => {
    if (!item.authenticity.verified) return 'unverified'
    
    // Based on research: different authentication levels
    const hasSerialNumber = item.authenticity.notes?.includes('serial')
    const hasExpertVerification = item.authenticity.notes?.includes('expert')
    const hasDocumentation = item.authenticity.notes?.includes('verified')
    
    if (hasSerialNumber && hasExpertVerification && hasDocumentation) {
      return 'premium'
    } else if (hasExpertVerification || hasSerialNumber) {
      return 'verified'
    } else {
      return 'basic'
    }
  }

  const authLevel = getAuthenticationLevel()
  
  const getAuthConfig = () => {
    switch (authLevel) {
      case 'premium':
        return {
          color: '#2D6A6A',
          icon: '🏆',
          label: 'Premium Verified',
          description: 'Expert authenticated with full documentation'
        }
      case 'verified':
        return {
          color: '#C89C2B',
          icon: '✓',
          label: 'Verified Authentic',
          description: 'Authenticated by specialist'
        }
      case 'basic':
        return {
          color: '#8B7D6B',
          icon: '◐',
          label: 'Basic Check',
          description: 'Standard verification completed'
        }
      default:
        return {
          color: '#7B2E2E',
          icon: '?',
          label: 'Unverified',
          description: 'Authentication pending'
        }
    }
  }

  const config = getAuthConfig()

  if (!detailed) {
    return (
      <div
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '4px',
          backgroundColor: config.color,
          color: '#F7F1E1',
          padding: '2px 8px',
          borderRadius: '12px',
          fontSize: '10px',
          fontFamily: 'Space Mono, monospace',
          textTransform: 'uppercase',
          letterSpacing: '0.1em'
        }}
        title={config.description}
      >
        <span>{config.icon}</span>
        {authLevel !== 'unverified' && 'Auth'}
      </div>
    )
  }

  return (
    <div
      style={{
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        border: `2px solid ${config.color}`,
        borderRadius: '8px',
        padding: '12px',
        marginBottom: '16px'
      }}
    >
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        marginBottom: '8px'
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          backgroundColor: config.color,
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#F7F1E1',
          fontSize: '12px'
        }}>
          {config.icon}
        </div>
        <div>
          <div style={{
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            fontWeight: 'bold',
            color: config.color,
            textTransform: 'uppercase',
            letterSpacing: '0.1em'
          }}>
            {config.label}
          </div>
          <div style={{
            fontFamily: 'Spectral, serif',
            fontSize: '11px',
            color: '#8B7D6B'
          }}>
            {config.description}
          </div>
        </div>
      </div>
      
      {item.authenticity.notes && (
        <div style={{
          fontFamily: 'Spectral, serif',
          fontSize: '12px',
          color: '#1E1A17',
          fontStyle: 'italic',
          paddingLeft: '32px'
        }}>
          "{item.authenticity.notes}"
        </div>
      )}
    </div>
  )
}