'use client'

import { useApp } from '@/contexts/AppContext'
import { CuratedItem } from '@/types'

interface CollectorMotivationProps {
  item: CuratedItem
}

export function CollectorMotivation({ item }: CollectorMotivationProps) {
  const { state } = useApp()
  
  // Based on research: collector psychology and motivation triggers
  const getMotivationTriggers = () => {
    const triggers = []
    
    // Scarcity trigger
    if (item.rarity >= 4) {
      triggers.push({
        type: 'scarcity',
        icon: '⚡',
        title: 'Rare Find',
        message: 'Only a few of these exist in this condition',
        color: '#7B2E2E'
      })
    }
    
    // Heritage/History trigger
    if (item.dateAdded && new Date(item.dateAdded).getFullYear() < 1980) {
      triggers.push({
        type: 'heritage',
        icon: '🏛️',
        title: 'Historical Significance',
        message: 'Connects you to a rich cultural heritage',
        color: '#2D6A6A'
      })
    }
    
    // Investment trigger
    if (item.originalPrice && item.price < item.originalPrice * 0.8) {
      triggers.push({
        type: 'investment',
        icon: '💎',
        title: 'Investment Potential',
        message: 'Undervalued compared to market trends',
        color: '#C89C2B'
      })
    }
    
    // Completion trigger (if user has similar items)
    const userCategoryItems = state.wishlist.filter(id => {
      const wishlistItem = state.items.find(i => i.id === id)
      return wishlistItem?.category === item.category
    })
    
    if (userCategoryItems.length >= 2) {
      triggers.push({
        type: 'completion',
        icon: '🧩',
        title: 'Collection Builder',
        message: `Perfect addition to your ${item.category} collection`,
        color: '#4A7C59'
      })
    }
    
    // Authenticity trust trigger
    if (item.authenticity.verified) {
      triggers.push({
        type: 'trust',
        icon: '🛡️',
        title: 'Verified Authentic',
        message: 'Buy with confidence - authenticity guaranteed',
        color: '#2D6A6A'
      })
    }
    
    return triggers.slice(0, 3) // Show max 3 triggers
  }

  const getCollectorPersonality = () => {
    const categoryCount = state.wishlist.reduce((acc, id) => {
      const item = state.items.find(i => i.id === id)
      if (item) {
        acc[item.category] = (acc[item.category] || 0) + 1
      }
      return acc
    }, {} as Record<string, number>)
    
    const dominantCategory = Object.entries(categoryCount)
      .sort(([,a], [,b]) => b - a)[0]?.[0]
    
    const personalities = {
      photography: {
        type: 'Visual Historian',
        description: 'You preserve moments and appreciate craftsmanship',
        motivation: 'Each camera tells a story of innovation'
      },
      music: {
        type: 'Audio Archivist',
        description: 'You value authentic sound and musical heritage',
        motivation: 'Original pressings capture the artist\'s true vision'
      },
      books: {
        type: 'Literary Curator',
        description: 'You collect knowledge and cultural significance',
        motivation: 'First editions connect you to literary history'
      },
      design: {
        type: 'Aesthetic Connoisseur',
        description: 'You appreciate timeless design and functionality',
        motivation: 'Mid-century pieces represent design perfection'
      }
    }
    
    return personalities[dominantCategory as keyof typeof personalities] || {
      type: 'Eclectic Collector',
      description: 'You appreciate quality across all categories',
      motivation: 'Diverse collections tell richer stories'
    }
  }

  const triggers = getMotivationTriggers()
  const personality = getCollectorPersonality()

  if (triggers.length === 0) return null

  return (
    <div style={{
      backgroundColor: 'rgba(123, 46, 46, 0.05)',
      border: '1px solid rgba(123, 46, 46, 0.2)',
      borderRadius: '8px',
      padding: '16px',
      marginBottom: '16px'
    }}>
      {/* Collector Personality */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        marginBottom: '12px',
        paddingBottom: '8px',
        borderBottom: '1px solid rgba(123, 46, 46, 0.1)'
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          backgroundColor: '#7B2E2E',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '12px'
        }}>
          🎯
        </div>
        <div>
          <div style={{
            fontFamily: 'Space Mono, monospace',
            fontSize: '11px',
            textTransform: 'uppercase',
            letterSpacing: '0.1em',
            color: '#7B2E2E',
            fontWeight: 'bold'
          }}>
            {personality.type}
          </div>
          <div style={{
            fontFamily: 'Spectral, serif',
            fontSize: '10px',
            color: '#8B7D6B',
            fontStyle: 'italic'
          }}>
            {personality.motivation}
          </div>
        </div>
      </div>

      {/* Motivation Triggers */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '8px'
      }}>
        {triggers.map((trigger, index) => (
          <div
            key={trigger.type}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '6px 8px',
              backgroundColor: 'rgba(255, 255, 255, 0.5)',
              borderRadius: '4px',
              borderLeft: `3px solid ${trigger.color}`
            }}
          >
            <span style={{ fontSize: '14px' }}>{trigger.icon}</span>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '10px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: trigger.color,
                fontWeight: 'bold',
                marginBottom: '2px'
              }}>
                {trigger.title}
              </div>
              <div style={{
                fontFamily: 'Spectral, serif',
                fontSize: '11px',
                color: '#1E1A17'
              }}>
                {trigger.message}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Call to Action */}
      <div style={{
        marginTop: '12px',
        padding: '8px',
        backgroundColor: 'rgba(123, 46, 46, 0.1)',
        borderRadius: '4px',
        textAlign: 'center'
      }}>
        <div style={{
          fontFamily: 'Pacifico, cursive',
          fontSize: '12px',
          color: '#7B2E2E',
          marginBottom: '4px'
        }}>
          Why collectors love this piece
        </div>
        <div style={{
          fontFamily: 'Spectral, serif',
          fontSize: '11px',
          color: '#1E1A17',
          fontStyle: 'italic'
        }}>
          "{personality.description}"
        </div>
      </div>
    </div>
  )
}