<script setup lang="ts">
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, Link } from "@inertiajs/vue3";
import { PlusIcon } from "lucide-vue-next";

defineProps<{
    applications: Record<string, any>[];
}>();
</script>

<template>
    <Head title="Dashboard" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Applications',
                href: route('applications.index', {
                    organisation: $page.props.organisation.id,
                }),
            },
        ]"
    >
        <div class="flex items-center justify-between gap-3 p-4">
            <div>
                <h2 class="text-3xl font-bold tracking-tight">Applications</h2>
                <p class="mt-1 text-sm text-muted-foreground">
                    Source repositories and their deployment environments.
                </p>
            </div>
            <div>
                <Button
                    :as="Link"
                    :href="
                        route('applications.create', {
                            organisation: $page.props.organisation.id,
                        })
                    "
                >
                    <PlusIcon class="size-4" />
                    Create
                </Button>
            </div>
        </div>
        <div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
            <Card v-for="application in applications" :key="application.id" class="relative w-full">
                <CardHeader>
                    <CardTitle>{{ application.name }}</CardTitle>
                    <CardDescription
                        >{{ application.environments?.length ?? 0 }} environments</CardDescription
                    >
                </CardHeader>
                <Link
                    :href="
                        route('applications.show', {
                            organisation: $page.props.organisation.id,
                            application: application.id,
                        })
                    "
                    class="absolute inset-0"
                ></Link>
            </Card>
            <Card v-if="applications.length === 0" class="md:col-span-2 lg:col-span-3">
                <CardHeader>
                    <CardTitle>No applications yet</CardTitle>
                    <CardDescription>
                        Create an application to add the first environment, deploy key, and runtime
                        services.
                    </CardDescription>
                    <div>
                        <Button
                            :as="Link"
                            :href="
                                route('applications.create', {
                                    organisation: $page.props.organisation.id,
                                })
                            "
                        >
                            <PlusIcon class="size-4" />
                            Create application
                        </Button>
                    </div>
                </CardHeader>
            </Card>
        </div>
    </AppLayout>
</template>
