<script lang="ts">
    import { Deferred, Link, page } from '@inertiajs/svelte';
    import AppLayout from '@/layouts/AppLayout.svelte';
    import { type BreadcrumbItem } from '@/types';
    import { Button } from '@/components/ui/button';
    import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
    import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
    import { Trophy, Users, Calendar, User } from 'lucide-svelte';

    let { publicTournaments, userTournaments } = $props();
    const breadcrumbs: BreadcrumbItem[] = [
        {
            title: 'Home',
            href: '/',
        },
    ];

    // Get authentication state from Inertia context
    let user = $derived($page.props.auth?.user ?? null);
    let isAuthenticated = $derived(!!user);

    // Date formatting helper
    function formatDate(dateStr: string): string {
        return new Date(dateStr).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
        });
    }
</script>

<svelte:head>
    <title>Home - FlbxCup</title>
</svelte:head>

<Deferred data="publicTournaments">
    {#snippet fallback()}
        <AppLayout {breadcrumbs}>
            <div>Loading...</div>
        </AppLayout>
    {/snippet}
    <AppLayout {breadcrumbs}>
        <div class="space-y-8 px-4 py-6 md:px-8">
            <div class="flex flex-col gap-4">
                <div class="flex items-center justify-between">
                    <h1 class="text-3xl font-bold tracking-tight">Welcome to FlbxCup</h1>
                    {#if isAuthenticated}
                        <Button>
                            <Link href="/tournaments/create" class="flex items-center gap-2">
                                <Trophy class="h-4 w-4" />
                                Create Tournament
                            </Link>
                        </Button>
                    {/if}
                </div>
                <p class="text-lg text-muted-foreground">Discover and manage tournaments with ease</p>
            </div>

            {#if isAuthenticated}
                <Tabs value="public" class="w-full">
                    <TabsList>
                        <TabsTrigger value="public">Public Tournaments</TabsTrigger>
                        <TabsTrigger value="my">My Tournaments</TabsTrigger>
                    </TabsList>
                    <TabsContent value="public" class="mt-6">
                        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            {#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
                                <div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
                                    <Trophy class="h-10 w-10 text-muted-foreground" />
                                    <h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
                                    <p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
                                    <Button class="mt-4">
                                        <Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
                                    </Button>
                                </div>
                            {/if}
                            {#each publicTournaments.original.data as tournament (tournament.id)}
                                <Card>
                                    <CardHeader>
                                        <CardTitle class="flex items-center gap-2">
                                            <Trophy class="h-5 w-5 text-primary" />
                                            {tournament.name}
                                        </CardTitle>
                                        <CardDescription>{tournament.description}</CardDescription>
                                    </CardHeader>
                                    <CardContent>
                                        <div class="flex flex-col gap-2 text-sm">
                                            <div class="flex items-center gap-2">
                                                <Calendar class="h-4 w-4 text-muted-foreground" />
                                                <span>{formatDate(tournament.start_date)}</span>
                                            </div>
                                            <div class="flex items-center gap-2">
                                                <Users class="h-4 w-4 text-muted-foreground" />
                                                <span>{tournament.max_teams} participants</span>
                                            </div>
                                        </div>
                                    </CardContent>
                                    <CardFooter>
                                        <Button variant="outline" class="w-full">
                                            <Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">
                                                View Details
                                            </Link>
                                        </Button>
                                    </CardFooter>
                                </Card>
                            {/each}
                        </div>
                    </TabsContent>
                    <TabsContent value="my" class="mt-6">
                        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full">
                            {#if !userTournaments.original.data || userTournaments.original.data.length === 0}
                                <div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
                                    <Trophy class="h-10 w-10 text-muted-foreground" />
                                    <h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
                                    <p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
                                    <Button class="mt-4">
                                        <Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
                                    </Button>
                                </div>
                            {:else}
                                {#each userTournaments.original.data as tournament (tournament.id)}
                                    <Card>
                                        <CardHeader>
                                            <CardTitle class="flex items-center gap-2">
                                                <Trophy class="h-5 w-5 text-primary" />
                                                {tournament.name}
                                            </CardTitle>
                                            <CardDescription>{tournament.description}</CardDescription>
                                        </CardHeader>
                                        <CardContent>
                                            <div class="flex flex-col gap-2 text-sm">
                                                <div class="flex items-center gap-2">
                                                    <Calendar class="h-4 w-4 text-muted-foreground" />
                                                    <span>{formatDate(tournament.start_date)}</span>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <Users class="h-4 w-4 text-muted-foreground" />
                                                    <span>{tournament.max_teams} participants</span>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <User class="h-4 w-4 text-muted-foreground" />
                                                    <span>Created by you</span>
                                                </div>
                                            </div>
                                        </CardContent>
                                        <CardFooter class="flex gap-2">
                                            <Button variant="outline" class="flex-1">
                                                <Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
                                                    >View</Link
                                                >
                                            </Button>
                                            <Button class="flex-1">
                                                <Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
                                                    Edit
                                                </Link>
                                            </Button>
                                        </CardFooter>
                                    </Card>
                                {/each}
                            {/if}
                        </div>
                    </TabsContent>
                </Tabs>
            {:else}
                <Card>
                    <CardHeader>
                        <CardTitle>Join FlbxCup</CardTitle>
                        <CardDescription>Create an account to create and manage your own tournaments</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div class="flex flex-col gap-4 sm:flex-row">
                            <Button>
                                <a href={route('auth.redirect')} class="flex items-center gap-2">Login with SSO</a>
                            </Button>
                        </div>
                    </CardContent>
                </Card>
                <div class="space-y-6">
                    <h2 class="text-2xl font-semibold tracking-tight">Public Tournaments</h2>
                    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        {#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
                            <div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
                                <Trophy class="h-10 w-10 text-muted-foreground" />
                                <h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
                                <p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
                                <Button class="mt-4">
                                    <Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
                                </Button>
                            </div>
                        {/if}
                        {#each publicTournaments.original.data as tournament (tournament.id)}
                            <Card>
                                <CardHeader>
                                    <CardTitle class="flex items-center gap-2">
                                        <Trophy class="h-5 w-5 text-primary" />
                                        {tournament.name}
                                    </CardTitle>
                                    <CardDescription>{tournament.description}</CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <div class="flex flex-col gap-2 text-sm">
                                        <div class="flex items-center gap-2">
                                            <Calendar class="h-4 w-4 text-muted-foreground" />
                                            <span>{formatDate(tournament.date)}</span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <Users class="h-4 w-4 text-muted-foreground" />
                                            <span>{tournament.participantsCount} participants</span>
                                        </div>
                                    </div>
                                </CardContent>
                                <CardFooter>
                                    <Button variant="outline" class="w-full">
                                        <Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
                                            >View Details</Link
                                        >
                                    </Button>
                                </CardFooter>
                            </Card>
                        {/each}
                    </div>
                </div>
            {/if}
        </div>
    </AppLayout>
</Deferred>
