Academic Calendar

// Type definition from calendar-AC.ts
type CalendarEvent = {
    summary: string;
    start: { date: string };
    end: { date: string };
};

// Sort events chronologically
const sortedEvents = [...calendarData].sort(
    (a, b) => new Date(a.start.date).getTime() - new Date(b.start.date).getTime()
);

// Filter for holidays if enabled
const filteredEvents = showHolidaysOnly
    ? sortedEvents.filter((event) => event.summary.startsWith("Holiday -"))
    : sortedEvents;

// Separate past and upcoming
const today = new Date();
const upcomingEvents = filteredEvents.filter((event) => {
    const eventDate = new Date(event.start.date);
    return eventDate >= today;
});

const pastEvents = filteredEvents
    .filter((event) => {
        const eventDate = new Date(event.start.date);
        return eventDate < today;
    })
    .reverse(); // Most recent past events first

// Combine for display
const eventsToShow = [
    ...pastEvents.slice(0, visibleEventsCount).reverse(),
    ...upcomingEvents,
];

useEffect(() => {
    if (eventsToShow.length === 0) return;

    // Find first upcoming event index
    let targetIndex = eventsToShow.findIndex((event) => {
        const eventDate = new Date(event.start.date);
        return eventDate >= today;
    }) - 1; // Scroll to event just before upcoming

    if (targetIndex >= 0 && eventRefs.current[targetIndex]) {
        eventRefs.current[targetIndex].scrollIntoView({ behavior: "smooth" });
    }
}, [selectedYear]);

const calendarEvents = events.map(event => ({
    summary: event.summary,
    start: {
        date: event.start.date,
        timeZone: 'Asia/Kolkata'
    },
    end: {
        date: event.end.date,
        timeZone: 'Asia/Kolkata'
    },
    description: `Academic Calendar Event for JIIT 2024-25`,
    transparency: 'transparent', // All-day event, doesn't block time
    visibility: 'public',
    colorId: event.summary.toLowerCase().includes('holiday') ? '11' : '1',
}));

<select
    value={selectedYear}
    onChange={(e) => {
        setSelectedYear(e.target.value);
        setVisibleEventsCount(0); // Reset to show only upcoming events
    }}
    className="appearance-none bg-white/10 border border-[#F0BB78]/30 
               rounded-lg px-4 py-2 pr-8 text-[#F0BB78] font-semibold"
>
    {availableYears.map((year) => (
        <option key={year.value} value={year.value}>
            {year.label}
        </option>
    ))}
</select>

<button
    onClick={() => {
        setShowHolidaysOnly(!showHolidaysOnly);
        setVisibleEventsCount(0); // Reset view
    }}
    className={`fixed bottom-16 left-4 ... ${
        showHolidaysOnly
            ? "bg-red-500/20 border-red-500/50 text-red-300"
            : "bg-white/10 border-white/20 text-[#F0BB78]"
    }`}
>
    <Filter className="w-4 h-4 sm:w-5 sm:h-5" />
    <span>{showHolidaysOnly ? "All Events" : "Holidays Only"}</span>
</button>

{pastEvents.length > visibleEventsCount && (
    <button
        onClick={() => {
            setVisibleEventsCount(pastEvents.length);
            // Auto-scroll to "Upcoming Events" divider after loading
            setTimeout(() => {
                if (upcomingDividerRef.current) {
                    const rect = upcomingDividerRef.current.getBoundingClientRect();
                    const scrollTop = window.scrollY + rect.top - 80; // 80px header offset
                    window.scrollTo({ top: scrollTop, behavior: "smooth" });
                }
            }, 200);
        }}
    >
        Load All Previous Events ({pastEvents.length - visibleEventsCount} remaining)
    </button>
)}

fetch("/api/available-years")
    .then((res) => res.json())
    .then((years) => {
        setAvailableYears(years);
        if (years.length > 0) {
            setSelectedYear(years[years.length - 1].value);
        }
    })
    .catch((error) => {
        console.error("Failed to fetch available years:", error);
    });

const [availableYears, setAvailableYears] = useState([
    { value: "2425", label: "2024-25" },
    { value: "2526", label: "2025-26" },
]);

type GoogleCalendarResponse = {
    success: boolean;
    message: string;
    error?: string;
};

if (isDataLoading) {
    return (
        <main>
            <div className="bg-white/10 border border-[#F0BB78]/20 rounded-2xl">
                <div className="mb-6 flex flex-row items-end gap-2 h-10">
                    {[0, 1, 2].map((i) => (
                        <motion.div
                            key={i}
                            className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#F0BB78]"
                            animate={{ y: [0, -18, 0] }}
                            transition={{
                                repeat: Infinity,
                                duration: 0.9,
                                delay: i * 0.15,
                            }}
                        />
                    ))}
                </div>
                <p className="text-lg font-semibold text-[#F0BB78]">
                    Loading Academic Calendar...
                </p>
            </div>
        </main>
    );
}

<button
    onClick={handleAddToCalendar}
    disabled={isLoading}
>
    <span>{isLoading ? "Adding to Calendar..." : "Add to Calendar"}</span>
</button>