const { useState, useMemo, useEffect, useRef } = React;

window.CalendarView = function CalendarView({ events, onEventClick }) {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDay, setSelectedDay] = useState(null); // { dateString, events }
  const todayRef = useRef(null);
  
  // Filters
  const [teamFilter, setTeamFilter] = useState('All');
  const [eventTypeFilter, setEventTypeFilter] = useState('All');
  const [groundBookingFilter, setGroundBookingFilter] = useState(false);

  useEffect(() => {
    if (window.lucide) {
      window.lucide.createIcons();
    }
  });

  useEffect(() => {
    if (window.innerWidth < 768 && todayRef.current) {
      todayRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [currentDate, filteredEvents]);

  const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
  const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();

  const prevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
  const nextMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
  const goToday = () => setCurrentDate(new Date());

  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  const filteredEvents = useMemo(() => {
    return events.filter(e => {
      if (teamFilter !== 'All' && e.team !== teamFilter) return false;
      if (eventTypeFilter !== 'All' && e.eventType !== eventTypeFilter) return false;
      if (groundBookingFilter && !e.isGroundBooking) return false;
      return true;
    });
  }, [events, teamFilter, eventTypeFilter, groundBookingFilter]);

  const handleDayClick = (dateString, dayEvents) => {
    if (dayEvents.length > 0) {
      setSelectedDay({ dateString, events: dayEvents });
    }
  };

  const renderCells = () => {
    const cells = [];
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');

    // Empty cells for days before the 1st
    for (let i = 0; i < firstDayOfMonth; i++) {
      cells.push(<div key={`empty-${i}`} className="hidden md:block calendar-cell bg-gray-50/50"></div>);
    }

    for (let i = 1; i <= daysInMonth; i++) {
      const dayString = String(i).padStart(2, '0');
      const dateString = `${year}-${month}-${dayString}`;
      
      const dayEvents = filteredEvents
        .filter(e => e.date === dateString)
        .sort((a, b) => a.startTime.localeCompare(b.startTime));

      const hasEvents = dayEvents.length > 0;
      const todayString = new Date().toISOString().split('T')[0];
      const isToday = todayString === dateString;
      const isPast = dateString < todayString;

      cells.push(
        <div 
          key={i} 
          ref={isToday ? todayRef : null}
          onClick={() => handleDayClick(dateString, dayEvents)}
          className={`border-b border-gray-200 md:border-r min-h-[70px] md:min-h-[120px] p-2 transition-colors cursor-pointer hover:bg-gray-50 ${isToday ? 'bg-[#F5F5DC]' : isPast ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,#f3f4f6_10px,#f3f4f6_20px)] bg-gray-50' : 'bg-white'} ${!hasEvents ? 'hidden md:block' : ''}`}
        >
          <div className="flex justify-between items-start mb-1.5 sm:mb-2">
            <span className={`text-xs sm:text-sm font-semibold w-6 h-6 sm:w-7 sm:h-7 flex items-center justify-center rounded-full ${isToday ? 'bg-blue-600 text-white' : 'text-gray-700'}`}>
              {i}
            </span>
            <span className="md:hidden text-xs text-gray-400 font-medium mt-0.5">
               {dayNames[(firstDayOfMonth + i - 1) % 7]}
            </span>
          </div>
          <div className="space-y-1">
            {dayEvents.map(event => {
              const teamData = window.DataManager.getTeamByName(event.team);
              return (
                <div 
                  key={event.id}
                  onClick={(e) => { e.stopPropagation(); onEventClick(event); }}
                  className="text-[11px] sm:text-xs p-1 sm:p-1.5 rounded cursor-pointer event-card overflow-hidden text-ellipsis whitespace-nowrap"
                  style={{ backgroundColor: teamData.bgColor, color: teamData.textColor }}
                  title={`${event.startTime} - ${event.title}`}
                >
                  <span className="font-bold opacity-80 mr-1">{event.startTime}</span>
                  {event.title}
                </div>
              );
            })}
          </div>
        </div>
      );
    }
    return cells;
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 md:p-6">
      {/* Header and Controls */}
      <div className="flex flex-col xl:flex-row justify-between items-center mb-4 sm:mb-6 gap-3 sm:gap-4">
        <div className="flex items-center gap-2 sm:gap-4 w-full xl:w-auto justify-between xl:justify-start">
          <h2 className="text-base sm:text-xl md:text-2xl font-bold text-gray-800 tracking-tight">
            {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
          </h2>
          
          {/* Swapped: Today button first, then Prev/Next toggle */}
          <div className="flex items-center gap-1.5 sm:gap-2">
            <button 
              onClick={goToday} 
              className="px-2.5 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg shadow-sm transition-colors"
            >
              Today
            </button>
            <div className="flex bg-gray-100 rounded-lg p-0.5 sm:p-1">
              <button 
                onClick={prevMonth} 
                className="p-1 sm:p-1.5 hover:bg-white rounded shadow-sm transition-colors"
                title="Previous Month"
              >
                <i data-lucide="chevron-left" className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600"></i>
              </button>
              <button 
                onClick={nextMonth} 
                className="p-1 sm:p-1.5 hover:bg-white rounded shadow-sm transition-colors"
                title="Next Month"
              >
                <i data-lucide="chevron-right" className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600"></i>
              </button>
            </div>
          </div>
        </div>

        {/* Filters */}
        <div className="flex flex-wrap items-center gap-2 sm:gap-3 w-full xl:w-auto">
          <div className="flex-1 sm:flex-initial w-[calc(50%-4px)] sm:w-44 md:w-48">
            <window.CustomTeamSelect 
              value={teamFilter} 
              onChange={e => setTeamFilter(e.target.value)} 
              teams={window.DataManager.getTeams()}
              isFilter={true}
            />
          </div>
          
          <div className="flex-1 sm:flex-initial w-[calc(50%-4px)] sm:w-44 md:w-48">
            <window.CustomSelect 
              value={eventTypeFilter} 
              onChange={e => setEventTypeFilter(e.target.value)} 
              options={window.DataManager.getEventTypes()}
              isFilter={true}
              placeholderAll="All Types"
            />
          </div>

          <label className="w-full sm:w-auto flex items-center justify-center sm:justify-start gap-2 text-xs sm:text-sm text-gray-700 cursor-pointer bg-white px-2.5 sm:px-3 py-2 sm:py-2.5 rounded-lg border-2 border-gray-200 shadow-sm hover:border-gray-300 transition-colors select-none">
            <input 
              type="checkbox" 
              checked={groundBookingFilter} 
              onChange={e => setGroundBookingFilter(e.target.checked)}
              className="rounded text-blue-600 focus:ring-blue-500 w-3.5 h-3.5 sm:w-4 sm:h-4 cursor-pointer"
            />
            St Andrew's Ground Bookings
          </label>
        </div>
      </div>

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-7 border-t border-l-0 md:border-l border-gray-200 bg-white rounded-lg overflow-hidden">
        {/* Desktop Day Headers */}
        {dayNames.map(day => (
          <div key={day} className="hidden md:block text-center py-3 text-sm font-semibold text-gray-500 border-r border-b border-gray-200 bg-gray-50">
            {day}
          </div>
        ))}

        {/* Calendar Cells */}
        {renderCells()}
      </div>

      {/* Day Events Modal for clicked day */}
      {selectedDay && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 modal-overlay" onClick={() => setSelectedDay(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="p-4 bg-gray-900 text-white flex justify-between items-center">
              <h3 className="font-bold text-base sm:text-lg">Events for {selectedDay.dateString}</h3>
              <button onClick={() => setSelectedDay(null)} className="p-1 hover:bg-gray-800 rounded-full transition-colors">
                <i data-lucide="x" className="w-5 h-5"></i>
              </button>
            </div>
            <div className="p-4 max-h-[60vh] overflow-y-auto space-y-3">
              {selectedDay.events.map(event => {
                const teamData = window.DataManager.getTeamByName(event.team);
                return (
                  <div 
                    key={event.id}
                    onClick={() => { setSelectedDay(null); onEventClick(event); }}
                    className="p-3 rounded-lg border border-gray-200 hover:border-blue-500 cursor-pointer transition-all shadow-sm flex items-center justify-between"
                  >
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: teamData.bgColor }}></span>
                        <h4 className="font-bold text-sm text-gray-900">{event.title}</h4>
                      </div>
                      <p className="text-xs text-gray-500">
                        {event.startTime} - {event.endTime} • {event.team} • {event.location}
                      </p>
                    </div>
                    <i data-lucide="chevron-right" className="w-4 h-4 text-gray-400"></i>
                  </div>
                );
              })}
            </div>
            <div className="p-3 bg-gray-50 border-t border-gray-100 flex justify-end">
              <button onClick={() => setSelectedDay(null)} className="px-4 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs sm:text-sm font-medium rounded-lg transition-colors">
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};