'use client'

import { useState } from 'react'
import { CuratedItem } from '@/types'
import { useApp } from '@/contexts/AppContext'
import { AuthenticationBadge } from './AuthenticationBadge'
import { ItemDetailModal } from './ItemDetailModal'

interface ItemCardProps {
  item: CuratedItem
  showWishlist?: boolean
  showExpertNotes?: boolean
  compact?: boolean
}

export function ItemCard({ 
  item, 
  showWishlist = true, 
  showExpertNotes = true, 
  compact = false 
}: ItemCardProps) {
  const { state, toggleWishlist, addToRecentlyViewed } = useApp()
  const [showDetailModal, setShowDetailModal] = useState(false)
  const isWishlisted = state.wishlist.includes(item.id)

  const handleItemClick = () => {
    addToRecentlyViewed(item.id)
    setShowDetailModal(true)
  }

  const handleWishlistClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    toggleWishlist(item.id)
  }

  const getRarityStars = (rarity: number) => {
    return '★'.repeat(rarity) + '☆'.repeat(5 - rarity)
  }

  const getConditionColor = (condition: string) => {
    switch (condition) {
      case 'new': return '#2D6A6A'
      case 'like-new': return '#4A7C59'
      case 'excellent': return '#C89C2B'
      case 'very-good': return '#D4A574'
      case 'good': return '#8B7D6B'
      case 'acceptable': return '#7B2E2E'
      default: return '#8B7D6B'
    }
  }

  return (
    <div 
      className="pick-card"
      style={{
        cursor: 'pointer',
        position: 'relative',
        height: compact ? 'auto' : '500px',
        display: 'flex',
        flexDirection: 'column',
        transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        transformStyle: 'preserve-3d'
      }}
      onClick={handleItemClick}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-8px) rotateX(2deg)'
        e.currentTarget.style.boxShadow = '0 20px 40px rgba(30, 26, 23, 0.15)'
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0px) rotateX(0deg)'
        e.currentTarget.style.boxShadow = '0 2px 4px rgba(30, 26, 23, 0.1)'
      }}
    >
      {/* Wishlist Button */}
      {showWishlist && (
        <button
          onClick={handleWishlistClick}
          style={{
            position: 'absolute',
            top: '12px',
            right: '12px',
            zIndex: 10,
            background: isWishlisted ? '#7B2E2E' : 'rgba(255, 255, 255, 0.9)',
            color: isWishlisted ? '#F7F1E1' : '#7B2E2E',
            border: '2px solid #7B2E2E',
            borderRadius: '50%',
            width: '40px',
            height: '40px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontSize: '18px',
            transition: 'all 0.3s ease',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
          }}
          title={isWishlisted ? 'Remove from wishlist' : 'Add to wishlist'}
        >
          {isWishlisted ? '❤️' : '🤍'}
        </button>
      )}

      {/* Featured Badge */}
      {item.featured && (
        <div style={{
          position: 'absolute',
          top: '12px',
          left: '12px',
          zIndex: 10,
          background: '#C89C2B',
          color: '#F7F1E1',
          padding: '4px 12px',
          fontFamily: 'Space Mono, monospace',
          fontSize: '10px',
          textTransform: 'uppercase',
          letterSpacing: '0.1em',
          fontWeight: 'bold',
          borderRadius: '0 8px 8px 0'
        }}>
          Featured
        </div>
      )}

      {/* Category Tab */}
      <div className="folder-tab">
        <div className="folder-tab-label" style={{ textTransform: 'capitalize' }}>
          {item.category}
        </div>
      </div>

      {/* Image */}
      <div style={{
        width: '100%',
        height: compact ? '150px' : '200px',
        backgroundImage: `url("${item.images[0]}")`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        border: '2px solid #8B7D6B',
        margin: '0 16px 16px 16px',
        borderRadius: '4px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* Price Overlay */}
        <div style={{
          position: 'absolute',
          bottom: '8px',
          left: '8px',
          background: 'rgba(30, 26, 23, 0.9)',
          color: '#F7F1E1',
          padding: '4px 8px',
          borderRadius: '4px',
          fontFamily: 'Space Mono, monospace',
          fontSize: '14px',
          fontWeight: 'bold'
        }}>
          ${item.price}
          {item.originalPrice && (
            <span style={{
              textDecoration: 'line-through',
              opacity: 0.7,
              marginLeft: '8px',
              fontSize: '12px'
            }}>
              ${item.originalPrice}
            </span>
          )}
        </div>

        {/* Authenticity Badge */}
        {item.authenticity.verified && (
          <div style={{
            position: 'absolute',
            top: '8px',
            right: '8px',
            background: '#2D6A6A',
            color: '#F7F1E1',
            borderRadius: '50%',
            width: '24px',
            height: '24px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '12px'
          }}>
            ✓
          </div>
        )}
      </div>

      {/* Content */}
      <div style={{ 
        padding: '0 16px 16px 16px', 
        display: 'flex', 
        flexDirection: 'column', 
        gap: '12px',
        flex: 1
      }}>
        {/* Title */}
        <h3 style={{
          fontFamily: 'Abril Fatface, serif',
          fontSize: compact ? '18px' : '20px',
          fontWeight: '900',
          color: '#1E1A17',
          lineHeight: '1.2',
          margin: 0,
          display: '-webkit-box',
          WebkitLineClamp: compact ? 2 : 3,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden'
        }}>
          {item.title}
        </h3>

        {/* Meta Info */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          flexWrap: 'wrap'
        }}>
          {/* Condition */}
          <span style={{
            fontFamily: 'Space Mono, monospace',
            fontSize: '11px',
            textTransform: 'uppercase',
            letterSpacing: '0.1em',
            backgroundColor: getConditionColor(item.condition),
            color: '#F7F1E1',
            padding: '2px 8px',
            borderRadius: '4px'
          }}>
            {item.condition}
          </span>

          {/* Rarity */}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '4px'
          }}>
            <span style={{ color: '#C89C2B', fontSize: '14px' }}>
              {getRarityStars(item.rarity)}
            </span>
            <span style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '11px',
              color: '#8B7D6B',
              textTransform: 'uppercase',
              letterSpacing: '0.1em'
            }}>
              Rarity {item.rarity}/5
            </span>
          </div>
        </div>

        {/* Expert Notes */}
        {showExpertNotes && !compact && (
          <p style={{
            fontFamily: 'Spectral, serif',
            fontSize: '14px',
            lineHeight: '1.5',
            color: '#1E1A17',
            margin: 0,
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden'
          }}>
            {item.expertNotes}
          </p>
        )}

        {/* Tags */}
        <div style={{ 
          display: 'flex', 
          flexWrap: 'wrap', 
          gap: '6px',
          marginTop: 'auto'
        }}>
          {item.tags.slice(0, compact ? 2 : 3).map(tag => (
            <span key={tag} style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '10px',
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
              backgroundColor: 'rgba(139, 125, 107, 0.1)',
              border: '1px solid #8B7D6B',
              color: '#8B7D6B',
              padding: '2px 6px',
              borderRadius: '4px'
            }}>
              {tag}
            </span>
          ))}
          {item.tags.length > (compact ? 2 : 3) && (
            <span style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '10px',
              color: '#8B7D6B'
            }}>
              +{item.tags.length - (compact ? 2 : 3)} more
            </span>
          )}
        </div>

        {/* Seller Info */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingTop: '8px',
          borderTop: '1px solid rgba(139, 125, 107, 0.2)',
          fontSize: '12px',
          color: '#8B7D6B'
        }}>
          <div>
            <span style={{ fontFamily: 'Space Mono, monospace' }}>
              {item.seller.name}
            </span>
            <span style={{ marginLeft: '8px' }}>
              ⭐ {item.seller.rating} ({item.seller.feedback})
            </span>
          </div>
          <div style={{ fontFamily: 'Space Mono, monospace' }}>
            +${item.shipping.cost} shipping
          </div>
        </div>

        {/* Action Buttons */}
        {!compact && (
          <div style={{ display: 'flex', gap: '8px', paddingTop: '8px' }}>
            <button 
              className="ticket-button" 
              style={{ 
                flex: 1, 
                fontSize: '10px', 
                padding: '8px 12px',
                textAlign: 'center'
              }}
              onClick={(e) => {
                e.stopPropagation()
                handleItemClick()
              }}
            >
              View on eBay
            </button>
            <button 
              className="stamp-button" 
              style={{ 
                fontSize: '10px', 
                padding: '8px 12px'
              }}
              onClick={(e) => {
                e.stopPropagation()
                // In real app, this would show more details
                alert('Item details coming soon!')
              }}
            >
              Details
            </button>
          </div>
        )}
      </div>

      {/* Detail Modal */}
      <ItemDetailModal 
        item={item}
        isOpen={showDetailModal}
        onClose={() => setShowDetailModal(false)}
      />
    </div>
  )
}