<script lang="ts">
    import type { ExtendedEvent } from "../types/event";
    import dayjs from "dayjs";
    import * as Card from "../ui/card";

    const { events }: { events: { slug: string; data: { event: ExtendedEvent } }[] } = $props();
    // Categorize events into current, upcoming and past.
    const now = dayjs();
    const sorted = [...events].sort((a, b) => a.data.event.event.start - b.data.event.event.start);

    const currentEvents = sorted
        .filter((e) => {
            const start = dayjs(e.data.event.event.start);
            const end = dayjs(e.data.event.event.end);
            return start.isBefore(now) && end.isAfter(now);
        })
        .sort((a, b) => a.data.event.event.end - b.data.event.event.end);

    const currentEvent = currentEvents[0];
    const upcomingEvents = sorted.filter((e) => dayjs(e.data.event.event.start).isAfter(now));
    const pastEvents = sorted.filter((e) => dayjs(e.data.event.event.end).isBefore(now)).sort((a, b) => b.data.event.event.end - a.data.event.event.end);
</script>

{#if currentEvent}
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-white mb-4">Aktuelles Event</h2>
        <div class="grid grid-cols-1">
            <a href={`/events/${currentEvent.slug}/`} class="group block h-full">
                <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
                    <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
                        <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
                            <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
                                {dayjs(currentEvent.data.event.event.start).format("DD.MM.YYYY")}
                            </div>
                        </div>
                    </div>
                    <Card.Header>
                        <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
                            {currentEvent.data.event.event.name}
                        </Card.Title>
                    </Card.Header>
                    <Card.Content>
                        <p class="text-gray-400 text-sm line-clamp-2">
                            Läuft seit {dayjs(currentEvent.data.event.event.start).format("HH:mm")}
                        </p>
                        <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
                            Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
                        </div>
                    </Card.Content>
                </Card.Root>
            </a>
        </div>
    </div>
{/if}

{#if upcomingEvents.length}
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-white mb-4">Bevorstehende Events</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {#each upcomingEvents as event}
                <a href={`/events/${event.slug}/`} class="group block h-full">
                    <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
                        <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
                            <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
                                <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
                                    {dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
                                </div>
                            </div>
                        </div>
                        <Card.Header>
                            <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
                                {event.data.event.event.name}
                            </Card.Title>
                        </Card.Header>
                        <Card.Content>
                            <p class="text-gray-400 text-sm line-clamp-2">
                                Startet um {dayjs(event.data.event.event.start).format("HH:mm")}
                            </p>
                            <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
                                Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
                            </div>
                        </Card.Content>
                    </Card.Root>
                </a>
            {/each}
        </div>
    </div>
{/if}

{#if pastEvents.length}
    <div class="mb-4">
        <h2 class="text-xl font-semibold text-white mb-4">Vergangene Events</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 opacity-70">
            {#each pastEvents as event}
                <a href={`/events/${event.slug}/`} class="group block h-full">
                    <Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
                        <div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
                            <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
                                <div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
                                    {dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
                                </div>
                            </div>
                        </div>
                        <Card.Header>
                            <Card.Title class="text-white group-hover:text-blue-400 transition-colors">
                                {event.data.event.event.name}
                            </Card.Title>
                        </Card.Header>
                        <Card.Content>
                            <p class="text-gray-400 text-sm line-clamp-2">
                                Stattgefunden um {dayjs(event.data.event.event.start).format("HH:mm")}
                            </p>
                            <div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
                                Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
                            </div>
                        </Card.Content>
                    </Card.Root>
                </a>
            {/each}
        </div>
    </div>
{/if}
