'use client'

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

interface ItemDetailModalProps {
  item: CuratedItem
  isOpen: boolean
  onClose: () => void
}

export function ItemDetailModal({ item, isOpen, onClose }: ItemDetailModalProps) {
  const { state, toggleWishlist } = useApp()
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const isWishlisted = state.wishlist.includes(item.id)

  if (!isOpen) return null

  const handleWishlistClick = () => {
    toggleWishlist(item.id)
  }

  const handleEbayClick = () => {
    window.open(item.ebayUrl, '_blank')
  }

  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
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(30, 26, 23, 0.8)',
        zIndex: 1000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px'
      }}
      onClick={onClose}
    >
      <div
        style={{
          backgroundColor: '#F7F1E1',
          borderRadius: '8px',
          maxWidth: '900px',
          width: '100%',
          maxHeight: '90vh',
          overflow: 'auto',
          position: 'relative',
          boxShadow: '0 20px 40px rgba(30, 26, 23, 0.3)'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close Button */}
        <button
          onClick={onClose}
          style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            background: 'rgba(30, 26, 23, 0.1)',
            border: 'none',
            borderRadius: '50%',
            width: '32px',
            height: '32px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontSize: '18px',
            color: '#1E1A17',
            zIndex: 10
          }}
        >
          ×
        </button>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px', padding: '32px' }}>
          {/* Left Column - Images */}
          <div>
            {/* Main Image */}
            <div style={{
              width: '100%',
              height: '300px',
              backgroundImage: `url("${item.images[currentImageIndex]}")`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              border: '2px solid #8B7D6B',
              borderRadius: '8px',
              marginBottom: '16px',
              position: 'relative'
            }}>
              {/* Image Navigation */}
              {item.images.length > 1 && (
                <>
                  <button
                    onClick={() => setCurrentImageIndex(Math.max(0, currentImageIndex - 1))}
                    disabled={currentImageIndex === 0}
                    style={{
                      position: 'absolute',
                      left: '8px',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      background: 'rgba(30, 26, 23, 0.7)',
                      color: '#F7F1E1',
                      border: 'none',
                      borderRadius: '50%',
                      width: '32px',
                      height: '32px',
                      cursor: currentImageIndex === 0 ? 'not-allowed' : 'pointer',
                      opacity: currentImageIndex === 0 ? 0.5 : 1
                    }}
                  >
                    ‹
                  </button>
                  <button
                    onClick={() => setCurrentImageIndex(Math.min(item.images.length - 1, currentImageIndex + 1))}
                    disabled={currentImageIndex === item.images.length - 1}
                    style={{
                      position: 'absolute',
                      right: '8px',
                      top: '50%',
                      transform: 'translateY(-50%)',
                      background: 'rgba(30, 26, 23, 0.7)',
                      color: '#F7F1E1',
                      border: 'none',
                      borderRadius: '50%',
                      width: '32px',
                      height: '32px',
                      cursor: currentImageIndex === item.images.length - 1 ? 'not-allowed' : 'pointer',
                      opacity: currentImageIndex === item.images.length - 1 ? 0.5 : 1
                    }}
                  >
                    ›
                  </button>
                </>
              )}
            </div>

            {/* Thumbnail Images */}
            {item.images.length > 1 && (
              <div style={{ display: 'flex', gap: '8px', overflowX: 'auto' }}>
                {item.images.map((image, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentImageIndex(index)}
                    style={{
                      width: '60px',
                      height: '60px',
                      backgroundImage: `url("${image}")`,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center',
                      border: index === currentImageIndex ? '2px solid #C89C2B' : '2px solid #8B7D6B',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      flexShrink: 0
                    }}
                  />
                ))}
              </div>
            )}

            {/* Authentication Badge */}
            <div style={{ marginTop: '16px' }}>
              <AuthenticationBadge item={item} detailed={true} />
            </div>
          </div>

          {/* Right Column - Details */}
          <div>
            {/* Category Badge */}
            <div style={{
              display: 'inline-block',
              backgroundColor: '#C89C2B',
              color: '#F7F1E1',
              padding: '4px 12px',
              borderRadius: '4px',
              fontFamily: 'Space Mono, monospace',
              fontSize: '10px',
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
              marginBottom: '12px'
            }}>
              {item.category}
            </div>

            {/* Title */}
            <h1 style={{
              fontFamily: 'Abril Fatface, serif',
              fontSize: '32px',
              fontWeight: '900',
              color: '#1E1A17',
              lineHeight: '1.2',
              marginBottom: '16px'
            }}>
              {item.title}
            </h1>

            {/* Price */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              marginBottom: '16px'
            }}>
              <span style={{
                fontFamily: 'Abril Fatface, serif',
                fontSize: '28px',
                color: '#1E1A17'
              }}>
                ${item.price}
              </span>
              {item.originalPrice && (
                <span style={{
                  fontFamily: 'Spectral, serif',
                  fontSize: '18px',
                  color: '#8B7D6B',
                  textDecoration: 'line-through'
                }}>
                  ${item.originalPrice}
                </span>
              )}
              <span style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                color: '#8B7D6B'
              }}>
                + ${item.shipping.cost} shipping
              </span>
            </div>

            {/* Condition & Rarity */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '16px',
              marginBottom: '16px'
            }}>
              <span style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                backgroundColor: getConditionColor(item.condition),
                color: '#F7F1E1',
                padding: '4px 12px',
                borderRadius: '4px'
              }}>
                {item.condition}
              </span>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '4px'
              }}>
                <span style={{ color: '#C89C2B', fontSize: '16px' }}>
                  {getRarityStars(item.rarity)}
                </span>
                <span style={{
                  fontFamily: 'Space Mono, monospace',
                  fontSize: '12px',
                  color: '#8B7D6B',
                  textTransform: 'uppercase',
                  letterSpacing: '0.1em'
                }}>
                  Rarity {item.rarity}/5
                </span>
              </div>
            </div>

            {/* Market Insights */}
            <MarketInsights item={item} />

            {/* Collector Motivation */}
            <CollectorMotivation item={item} />

            {/* Expert Notes */}
            <div style={{
              backgroundColor: 'rgba(139, 125, 107, 0.1)',
              border: '1px solid rgba(139, 125, 107, 0.2)',
              borderRadius: '8px',
              padding: '16px',
              marginBottom: '16px'
            }}>
              <h4 style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                marginBottom: '8px'
              }}>
                Expert Notes
              </h4>
              <p style={{
                fontFamily: 'Spectral, serif',
                fontSize: '14px',
                lineHeight: '1.6',
                color: '#1E1A17',
                margin: 0,
                fontStyle: 'italic'
              }}>
                "{item.expertNotes}"
              </p>
            </div>

            {/* Tags */}
            <div style={{ marginBottom: '24px' }}>
              <h4 style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                marginBottom: '8px'
              }}>
                Tags
              </h4>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                {item.tags.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: '4px 8px',
                    borderRadius: '4px'
                  }}>
                    {tag}
                  </span>
                ))}
              </div>
            </div>

            {/* Action Buttons */}
            <div style={{ display: 'flex', gap: '12px' }}>
              <button
                onClick={handleEbayClick}
                className="ticket-button"
                style={{
                  flex: 1,
                  fontSize: '14px',
                  padding: '16px 24px',
                  textAlign: 'center'
                }}
              >
                View on eBay
              </button>
              <button
                onClick={handleWishlistClick}
                style={{
                  padding: '16px',
                  backgroundColor: isWishlisted ? '#7B2E2E' : 'transparent',
                  color: isWishlisted ? '#F7F1E1' : '#7B2E2E',
                  border: '2px solid #7B2E2E',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  fontSize: '20px',
                  transition: 'all 0.3s ease'
                }}
                title={isWishlisted ? 'Remove from wishlist' : 'Add to wishlist'}
              >
                {isWishlisted ? '❤️' : '🤍'}
              </button>
            </div>

            {/* Seller Info */}
            <div style={{
              marginTop: '24px',
              paddingTop: '16px',
              borderTop: '1px solid rgba(139, 125, 107, 0.2)'
            }}>
              <h4 style={{
                fontFamily: 'Space Mono, monospace',
                fontSize: '12px',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
                color: '#8B7D6B',
                marginBottom: '8px'
              }}>
                Seller Information
              </h4>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                fontSize: '14px',
                color: '#1E1A17'
              }}>
                <div>
                  <span style={{ fontFamily: 'Space Mono, monospace', fontWeight: 'bold' }}>
                    {item.seller.name}
                  </span>
                  <div style={{ fontSize: '12px', color: '#8B7D6B' }}>
                    ⭐ {item.seller.rating} ({item.seller.feedback} reviews)
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'Space Mono, monospace', fontSize: '12px' }}>
                    Ships from: {item.shipping.location}
                  </div>
                  <div style={{ fontSize: '12px', color: '#8B7D6B' }}>
                    {item.shipping.international ? 'International shipping' : 'Domestic only'}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}