import React from 'react';
import { 
  CalendarProps, 
  useCalendar,
  CalendarHeader,
  CalendarGrid,
  EventList,
  TrendingEvents,
  UpcomingEvents
} from './calendar';

const Calendar: React.FC<CalendarProps> = ({ 
  events, 
  onEventClick, 
  showLocationFeatures = false, 
  showTrending = false,
  initialView = 'month',
  className = ''
}) => {
  // Use our custom calendar hook for state management
  const {
    currentDate,
    view,
    trendingEvents,
    nearbyEvents,
    userLocation,
    isMobile,
    isLoading,
    setView,
    previousMonth,
    nextMonth,
    goToToday
  } = useCalendar({
    initialView,
    showLocationFeatures,
    showTrending,
    events
  });

  return (
    <div className={`shadow-lg rounded-lg overflow-hidden backdrop-blur-xl ${className}`} 
         style={{ background: 'var(--glass-bg-lg)', border: '1px solid var(--glass-border)' }}>
      
      <CalendarHeader
        currentDate={currentDate}
        view={view}
        onViewChange={setView}
        onPreviousMonth={previousMonth}
        onNextMonth={nextMonth}
        onToday={goToToday}
        isMobile={isMobile}
      />

      {/* Calendar Grid for Month View */}
      {view === 'month' && (
        <CalendarGrid
          currentDate={currentDate}
          events={events}
          onEventClick={onEventClick}
          isMobile={isMobile}
        />
      )}
      
      {/* List View */}
      {view === 'list' && (
        <EventList
          events={events}
          onEventClick={onEventClick}
          showDistance={Boolean(userLocation)}
        />
      )}

      {/* Trending Events Section */}
      {showTrending && trendingEvents.length > 0 && view !== 'list' && (
        <TrendingEvents
          events={trendingEvents}
          userLocation={userLocation || undefined}
          onEventClick={onEventClick}
          radius={50}
        />
      )}
      
      {/* Nearby Events Section */}
      {showLocationFeatures && nearbyEvents.length > 0 && view !== 'list' && (
        <TrendingEvents
          events={nearbyEvents}
          userLocation={userLocation || undefined}
          onEventClick={onEventClick}
          title="📍 Near You"
          radius={25}
        />
      )}

      {/* Upcoming Events List */}
      {view !== 'list' && (
        <UpcomingEvents
          events={events}
          onEventClick={onEventClick}
          limit={5}
        />
      )}
      
      {/* Loading State */}
      {isLoading && (
        <div className="p-6" style={{ borderTop: '1px solid var(--glass-border)' }}>
          <div className="flex items-center justify-center">
            <div className="animate-spin rounded-full h-6 w-6 border-b-2" style={{ borderColor: 'var(--glass-text-accent)' }}></div>
            <span className="ml-2 text-sm font-medium" style={{ color: 'var(--glass-text-secondary)' }}>
              Loading location-based events...
            </span>
          </div>
        </div>
      )}
    </div>
  );
};

export default Calendar;