import { useState, useEffect } from 'react'; import api from '../store/auth'; import { Plus, Calendar as CalendarIcon, Clock, MapPin, ChevronRight, ChevronLeft, Search, X, Download, Filter, Sparkles, School, Users, BookOpen, Bell, Trash2, Edit2, CheckCircle2, AlertCircle, Info, MoreHorizontal, CalendarDays, Coffee, Video, UserCircle } from 'lucide-react'; interface Event { id: number; title: string; description?: string; event_date: string; event_type: 'general' | 'holiday' | 'exam' | 'meeting' | 'class'; start_time?: string; end_time?: string; location?: string; status?: 'active' | 'upcoming' | 'completed'; } export default function Events() { const [events, setEvents] = useState([]); const [showModal, setShowModal] = useState(false); const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); const [form, setForm] = useState({ title: '', description: '', event_date: '', event_type: 'general' as Event['event_type'], start_time: '09:00', end_time: '10:00', location: '' }); useEffect(() => { loadEvents(); }, []); const loadEvents = async () => { setLoading(true); try { const res = await api.get('/events'); setEvents(res.data.map((e: any) => ({ ...e, status: new Date(e.event_date) < new Date() ? 'completed' : 'upcoming', start_time: e.start_time || '09:00', end_time: e.end_time || '10:00', location: e.location || 'Lecture Hall A' }))); } catch (err) { setEvents(mockEvents); } finally { setLoading(false); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { await api.post('/events', form); setShowModal(false); setForm({ title: '', description: '', event_date: '', event_type: 'general', start_time: '09:00', end_time: '10:00', location: '' }); loadEvents(); } catch (err) { alert('Failed to establish event record'); } }; const deleteEvent = async (id: number) => { if (!confirm('Cancel this scheduled event?')) return; try { await api.delete(`/events/${id}`); loadEvents(); } catch (err) { alert('Failed to remove record'); } }; const filteredEvents = events.filter(e => e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.description?.toLowerCase().includes(searchQuery.toLowerCase()) ); const stats = [ { label: 'Weekly Periods', value: '28', icon: BookOpen, color: 'blue', trend: 'Full' }, { label: 'Pending Meetings', value: events.filter(e => e.event_type === 'meeting').length, icon: Users, color: 'emerald', trend: 'Confirmed' }, { label: 'System Holidays', value: '2', icon: Coffee, color: 'orange', trend: 'Upcoming' }, { label: 'Exam Windows', value: events.filter(e => e.event_type === 'exam').length, icon: CalendarDays, color: 'purple', trend: 'Finals' }, ]; const getTypeStyles = (type: Event['event_type']) => { switch (type) { case 'exam': return { bg: 'bg-rose-50 dark:bg-rose-950/30', text: 'text-rose-600 dark:text-rose-400', border: 'border-rose-100 dark:border-rose-900/30', dot: 'bg-rose-500', icon: AlertCircle }; case 'meeting': return { bg: 'bg-purple-50 dark:bg-purple-950/30', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-100 dark:border-purple-900/30', dot: 'bg-purple-500', icon: Video }; case 'class': return { bg: 'bg-blue-50 dark:bg-blue-900/20', text: 'text-blue-600 dark:text-blue-400', border: 'border-blue-100 dark:border-blue-900/30', dot: 'bg-blue-500', icon: BookOpen }; case 'holiday': return { bg: 'bg-emerald-50 dark:bg-emerald-950/30', text: 'text-emerald-600 dark:text-emerald-400', border: 'border-emerald-100 dark:border-emerald-900/30', dot: 'bg-emerald-500', icon: Coffee }; default: return { bg: 'bg-slate-50 dark:bg-slate-900/20', text: 'text-slate-500 dark:text-slate-400', border: 'border-slate-100 dark:border-slate-800/30', dot: 'bg-slate-500', icon: Info }; } }; const formatTime = (time: string) => { const [hours, minutes] = time.split(':').map(Number); const period = hours >= 12 ? 'PM' : 'AM'; const displayHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`; }; return (
{/* Premium Header */}

Faculty Schedule

{/* Stats Bento Grid */}
{stats.map((stat) => (

{stat.label}

{stat.value}

{stat.trend}
))}
{/* Control Bar */}
June 2026 Week 23
setSearchQuery(e.target.value)} />
{/* Main Timeline Grid */}
{/* Timeline View (8/12) */}

Transmission Timeline

Today Upcoming
{/* Visual Line */}
{loading ? (
) : filteredEvents.length === 0 ? (

Queue clear for this period

) : filteredEvents.map((event) => { const styles = getTypeStyles(event.event_type); return (
{/* Dot */}
{event.event_type === 'holiday' ? : }

{event.title}

{event.event_type}

{event.description || 'System scheduled event for current academic period.'}

{new Date(event.event_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
{event.start_time} - {event.end_time}
{event.location}
); })}
{/* Right Sidebar (4/12) */}
{/* mini Calendar Card */}

Intelligence Log

{new Date().toLocaleDateString('en-US', { weekday: 'long' })}

{new Date().getDate()}

{new Date().toLocaleDateString('en-US', { month: 'long' })}

{['M','T','W','T','F','S','S'].map((d, i) => (
{d}
))} {Array.from({length: 31}).map((_, i) => (
{i + 1}
))}
{/* AI Assistant Card */}
NextGen Assist

Your Thursday is looking optimized.

You have a Meeting with the Science Dept at 2 PM. Prep materials are synced.

{/* Creation Modal */} {showModal && (

Establish Event

Configure schedule intelligence

setForm({...form, title: e.target.value})} placeholder="e.g., Departmental Sync: Term 3" required />
setForm({...form, event_date: e.target.value})} required />
setForm({...form, start_time: e.target.value})} />
setForm({...form, end_time: e.target.value})} />
setForm({...form, location: e.target.value})} placeholder="e.g., Room 402 or Zoom Link" />