import React from 'react';
import { CalendarGridProps } from './types';
import { generateCalendarDays, getDayNames, getCategoryColor } from './utils';
import { EventCard } from './EventCard';

/**
 * Calendar grid component showing days and events
 */
export const CalendarGrid: React.FC<CalendarGridProps> = ({
  currentDate,
  events,
  onEventClick,
  isMobile
}) => {
  const calendarDays = generateCalendarDays(currentDate, events);
  const dayNames = getDayNames(isMobile);

  const handleDayClick = (events: any[], date: Date) => {
    if (events.length > 0) {
      // Could implement day modal or other interaction
      console.log('Day clicked:', date, events);
    }
  };

  return (
    <div className="p-3 md:p-6">
      {/* Day Headers */}
      <div className="grid grid-cols-7 gap-px md:gap-1 mb-2">
        {dayNames.map((day, index) => (
          <div key={`${day}-${index}`} className="text-center text-xs md:text-sm font-semibold py-2" 
               style={{ color: 'var(--glass-text-secondary)' }}>
            {day}
          </div>
        ))}
      </div>

      {/* Calendar Days */}
      <div className="grid grid-cols-7 gap-px md:gap-1">
        {calendarDays.map((calendarDay, index) => {
          const { day, isCurrentMonth, isToday, date, events: dayEvents } = calendarDay;
          
          return (
            <div
              key={`${date.getTime()}-${index}`}
              className="aspect-square rounded-lg p-1 transition-all hover:scale-105 cursor-pointer backdrop-blur-sm"
              style={{
                background: isToday ? 'var(--glass-bg-elevated)' : 'var(--glass-bg)',
                border: `2px solid ${isToday ? 'var(--glass-text-accent)' : 'var(--glass-border)'}`,
              }}
              onClick={() => handleDayClick(dayEvents, date)}
            >
              <div className="text-xs md:text-sm font-bold mb-1" style={{
                color: isCurrentMonth 
                  ? (isToday ? 'var(--glass-text-accent)' : 'var(--glass-text-primary)')
                  : 'var(--ui-text-muted)'
              }}>
                {day}
              </div>
              
              {/* Events for this day */}
              {isCurrentMonth && (
                <div className="space-y-1">
                  {dayEvents.slice(0, isMobile ? 1 : 2).map(event => (
                    <EventCard
                      key={event.id}
                      event={event}
                      onClick={onEventClick}
                      variant="grid"
                    />
                  ))}
                  
                  {dayEvents.length > (isMobile ? 1 : 2) && (
                    <div 
                      className="text-xs font-medium px-1 py-0.5 rounded-md transition-colors cursor-pointer"
                      style={{ 
                        color: 'var(--ui-text-secondary)',
                        background: 'var(--ui-bg-secondary)'
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = 'var(--ui-bg-elevated)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = 'var(--ui-bg-secondary)';
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDayClick(dayEvents, date);
                      }}
                    >
                      +{dayEvents.length - (isMobile ? 1 : 2)} more
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};