import React from 'react';
import { EventCardProps } from './types';
import { formatDateTime, getCategoryColor, getCategoryIcon, truncateText } from './utils';

/**
 * Reusable event card component with multiple variants
 */
export const EventCard: React.FC<EventCardProps> = ({
  event,
  onClick,
  variant = 'grid',
  showDistance = false,
  className = ''
}) => {
  const handleClick = () => {
    onClick?.(event);
  };

  if (variant === 'trending') {
    return (
      <div
        onClick={handleClick}
        className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all hover:scale-105 backdrop-blur-sm ${className}`}
        style={{ 
          background: 'var(--warning-bg)',
          border: '1px solid var(--warning-border)'
        }}
      >
        <div className="flex-1 min-w-0">
          <div className="flex items-center space-x-2">
            <div className="text-sm font-bold truncate" style={{ color: 'var(--glass-text-primary)' }}>
              {event.title}
            </div>
            {event.is_featured && (
              <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-bold" 
                    style={{ background: 'var(--warning-color)', color: 'var(--glass-text-primary)' }}>
                ⭐
              </span>
            )}
          </div>
          <div className="text-xs mt-1" style={{ color: 'var(--glass-text-secondary)' }}>
            {event.venue}
            {showDistance && event.distanceMiles && (
              <span className="ml-2">• {event.distanceMiles.toFixed(1)} mi</span>
            )}
          </div>
          {event.popularityScore && (
            <div className="text-xs font-semibold mt-1" style={{ color: 'var(--warning-color)' }}>
              {event.popularityScore} popularity score
            </div>
          )}
        </div>
        <div className="text-xs text-right ml-2" style={{ color: 'var(--glass-text-tertiary)' }}>
          {new Date(event.start_time).toLocaleDateString('en-US', { 
            month: 'short', 
            day: 'numeric'
          })}
        </div>
      </div>
    );
  }

  if (variant === 'list') {
    const { date, time } = formatDateTime(event.start_time);
    const categoryColor = getCategoryColor(event.category);
    const categoryIcon = getCategoryIcon(event.category);

    return (
      <div
        onClick={handleClick}
        className={`event-card rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 cursor-pointer group backdrop-blur-lg ${className}`}
        style={{ 
          background: 'var(--ui-bg-elevated)',
          border: '1px solid var(--ui-border-primary)'
        }}
      >
        <div className="relative">
          <div className={`h-48 bg-gradient-to-br ${categoryColor} relative overflow-hidden`}>
            <div className="absolute inset-0" style={{ background: 'rgba(0, 0, 0, 0.2)' }}></div>
            <div className="absolute top-4 left-4">
              <span className="text-3xl">{categoryIcon}</span>
            </div>
            <div className="absolute top-4 right-4">
              <span className="backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium" 
                    style={{ background: 'rgba(255, 255, 255, 0.2)', color: 'var(--glass-text-primary)' }}>
                {event.category?.charAt(0).toUpperCase() + event.category?.slice(1) || 'Event'}
              </span>
            </div>
            <div className="absolute bottom-4 left-4 right-4">
              <h3 className="text-xl font-bold mb-2 line-clamp-2 group-hover:text-yellow-200 transition-colors" 
                  style={{ color: 'var(--glass-text-primary)' }}>
                {event.title}
              </h3>
            </div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent"></div>
          </div>
          
          <div className="p-6">
            <div className="flex items-center space-x-2 text-sm mb-3" style={{ color: 'var(--ui-text-secondary)' }}>
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              <span>{time}</span>
            </div>
            
            <div className="flex items-start space-x-2 text-sm mb-4" style={{ color: 'var(--ui-text-secondary)' }}>
              <svg className="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span className="line-clamp-2">{event.venue || 'Venue TBA'}</span>
            </div>
            
            {event.description && (
              <p className="text-sm mb-4 line-clamp-3" style={{ color: 'var(--ui-text-secondary)' }}>
                {event.description}
              </p>
            )}
            
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                {event.is_featured && (
                  <span className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">
                    ⭐ Featured
                  </span>
                )}
                {showDistance && event.distanceMiles && (
                  <span className="text-xs" style={{ color: 'var(--ui-text-tertiary)' }}>
                    {event.distanceMiles.toFixed(1)} mi away
                  </span>
                )}
              </div>
              
              <button className={`bg-gradient-to-r ${categoryColor} px-4 py-2 rounded-lg font-medium text-sm hover:shadow-lg transform hover:scale-105 transition-all duration-200`} 
                      style={{ color: 'var(--glass-text-primary)' }}>
                View Details
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Grid variant (compact for calendar day view)
  const categoryColor = getCategoryColor(event.category);
  const maxTitleLength = 20;
  
  return (
    <div
      onClick={handleClick}
      className={`text-xs font-medium rounded px-1 py-0.5 cursor-pointer transition-all hover:scale-105 truncate backdrop-blur-sm ${className}`}
      style={{ 
        background: 'var(--glass-bg-elevated)', 
        color: 'var(--glass-text-accent)',
        border: '1px solid var(--glass-border)'
      }}
      title={`${event.title} at ${event.venue}`}
    >
      {truncateText(event.title, maxTitleLength)}
    </div>
  );
};