'use client';
import { Badge } from '@/components/ui/badge';
import { CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

interface EventRow {
    uid: string;
    title: string;
    type: string;
    startDate: string;
    endDate: string;
    academicYear: string;
    isHoliday: boolean;
}

const typeStyles: Record<string, string> = {
    holiday: 'bg-red-100 text-red-700',
    exam: 'bg-purple-100 text-purple-700',
    event: 'bg-blue-100 text-blue-700',
    activity: 'bg-emerald-100 text-emerald-700',
};

export function RecentEventsTable({ data = [] }: { data?: EventRow[] }) {
    return (
        <div className="w-80 sm:w-full">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Recent Academic Events</CardTitle>
                    <p className="text-xs text-foreground/70">Last 10 calendar events</p>
                </div>
            </CardHeader>
            <div className="overflow-hidden rounded-xl border bg-card">
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader className="sticky top-0 z-10 bg-card">
                            <TableRow className="border-b hover:bg-transparent">
                                <TableHead className="px-6 whitespace-nowrap">UID</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Title</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Type</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Start Date</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">End Date</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Academic Year</TableHead>
                                <TableHead className="px-6 text-center whitespace-nowrap">Holiday</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={7} className="px-6 py-8 text-center text-muted-foreground">
                                        No recent events found.
                                    </TableCell>
                                </TableRow>
                            ) : (
                                data.map((event) => (
                                    <TableRow key={event.uid} className="hover:bg-muted/50">
                                        <TableCell className="px-6 font-medium whitespace-nowrap">{event.uid}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap">{event.title}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap">
                                            <Badge
                                                variant="secondary"
                                                className={`px-3 py-1 font-medium capitalize ${typeStyles[event.type] ?? 'bg-gray-100 text-gray-700'}`}
                                            >
                                                {event.type}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{event.startDate}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{event.endDate}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap">{event.academicYear}</TableCell>
                                        <TableCell className="px-6 text-center whitespace-nowrap">
                                            <Badge
                                                variant="secondary"
                                                className={event.isHoliday ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-500'}
                                            >
                                                {event.isHoliday ? 'Yes' : 'No'}
                                            </Badge>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    );
}