'use client'

import { CuratedItem } from '@/types'

interface MarketInsightsProps {
  item: CuratedItem
}

export function MarketInsights({ item }: MarketInsightsProps) {
  // Based on research: collectibles market growing at 5.75% CAGR
  const getMarketTrend = () => {
    const categoryTrends = {
      photography: { trend: 'up', percentage: 12, reason: 'Film photography revival' },
      music: { trend: 'up', percentage: 8, reason: 'Vinyl resurgence continues' },
      books: { trend: 'stable', percentage: 3, reason: 'Steady collector interest' },
      design: { trend: 'up', percentage: 15, reason: 'Mid-century modern demand' }
    }
    
    return categoryTrends[item.category] || { trend: 'stable', percentage: 5, reason: 'Market average' }
  }

  const getPriceAnalysis = () => {
    if (!item.originalPrice) return null
    
    const discount = Math.round(((item.originalPrice - item.price) / item.originalPrice) * 100)
    const isGoodDeal = discount > 15
    
    return { discount, isGoodDeal }
  }

  const getInvestmentScore = () => {
    let score = 5 // Base score
    
    // Rarity bonus
    score += item.rarity * 1.5
    
    // Authentication bonus
    if (item.authenticity.verified) score += 2
    
    // Category trend bonus
    const trend = getMarketTrend()
    if (trend.trend === 'up') score += 1.5
    
    // Condition bonus
    const conditionBonus = {
      'new': 2,
      'like-new': 1.5,
      'excellent': 1,
      'very-good': 0.5,
      'good': 0,
      'acceptable': -0.5
    }
    score += conditionBonus[item.condition] || 0
    
    return Math.min(Math.max(Math.round(score), 1), 10)
  }

  const trend = getMarketTrend()
  const priceAnalysis = getPriceAnalysis()
  const investmentScore = getInvestmentScore()

  const getTrendIcon = (trendType: string) => {
    switch (trendType) {
      case 'up': return '📈'
      case 'down': return '📉'
      default: return '➡️'
    }
  }

  const getScoreColor = (score: number) => {
    if (score >= 8) return '#2D6A6A'
    if (score >= 6) return '#C89C2B'
    if (score >= 4) return '#8B7D6B'
    return '#7B2E2E'
  }

  return (
    <div style={{
      backgroundColor: 'rgba(45, 106, 106, 0.05)',
      border: '1px solid rgba(45, 106, 106, 0.2)',
      borderRadius: '8px',
      padding: '16px',
      marginBottom: '16px'
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        marginBottom: '12px'
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          backgroundColor: '#2D6A6A',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '12px'
        }}>
          📊
        </div>
        <h4 style={{
          fontFamily: 'Space Mono, monospace',
          fontSize: '12px',
          textTransform: 'uppercase',
          letterSpacing: '0.1em',
          color: '#2D6A6A',
          margin: 0,
          fontWeight: 'bold'
        }}>
          Market Intelligence
        </h4>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
        gap: '12px'
      }}>
        {/* Investment Score */}
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontSize: '20px',
            fontWeight: 'bold',
            color: getScoreColor(investmentScore),
            marginBottom: '4px'
          }}>
            {investmentScore}/10
          </div>
          <div style={{
            fontFamily: 'Space Mono, monospace',
            fontSize: '10px',
            textTransform: 'uppercase',
            letterSpacing: '0.1em',
            color: '#8B7D6B'
          }}>
            Investment Score
          </div>
        </div>

        {/* Market Trend */}
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontSize: '16px',
            marginBottom: '4px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px'
          }}>
            <span>{getTrendIcon(trend.trend)}</span>
            <span style={{
              fontWeight: 'bold',
              color: trend.trend === 'up' ? '#2D6A6A' : trend.trend === 'down' ? '#7B2E2E' : '#8B7D6B'
            }}>
              +{trend.percentage}%
            </span>
          </div>
          <div style={{
            fontFamily: 'Space Mono, monospace',
            fontSize: '10px',
            textTransform: 'uppercase',
            letterSpacing: '0.1em',
            color: '#8B7D6B'
          }}>
            Category Trend
          </div>
        </div>

        {/* Price Analysis */}
        {priceAnalysis && (
          <div style={{ textAlign: 'center' }}>
            <div style={{
              fontSize: '16px',
              fontWeight: 'bold',
              color: priceAnalysis.isGoodDeal ? '#2D6A6A' : '#8B7D6B',
              marginBottom: '4px'
            }}>
              -{priceAnalysis.discount}%
            </div>
            <div style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '10px',
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
              color: '#8B7D6B'
            }}>
              {priceAnalysis.isGoodDeal ? 'Great Deal' : 'Fair Price'}
            </div>
          </div>
        )}
      </div>

      {/* Trend Reason */}
      <div style={{
        marginTop: '12px',
        padding: '8px',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        borderRadius: '4px',
        fontSize: '11px',
        fontFamily: 'Spectral, serif',
        color: '#1E1A17',
        fontStyle: 'italic'
      }}>
        💡 {trend.reason}
      </div>
    </div>
  )
}