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

defineProps<{
    application: Record<string, any>;
    environment: Record<string, any>;
    artifacts: Record<string, any>;
}>();
</script>

<template>
    <Head :title="`${environment.name} Builds`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: environment.name,
                href: route('environments.show', {
                    organisation: $page.props.organisation.id,
                    application: application.id,
                    environment: environment.id,
                }),
            },
            { title: 'Builds' },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div>
                <h2 class="text-3xl font-bold tracking-tight">Build Artifacts</h2>
                <p class="mt-1 text-sm text-muted-foreground">
                    Planned and built images for this environment.
                </p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Artifacts</CardTitle>
                    <CardDescription>{{ artifacts.data.length }} shown</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-2">
                    <Link
                        v-for="artifact in artifacts.data"
                        :key="artifact.id"
                        :href="
                            route('build-artifacts.show', {
                                organisation: $page.props.organisation.id,
                                application: application.id,
                                environment: environment.id,
                                artifact: artifact.id,
                            })
                        "
                        class="rounded-md border p-3 text-sm hover:bg-muted/50"
                    >
                        <div class="flex flex-wrap items-center gap-2">
                            <Badge variant="outline">{{ artifact.status }}</Badge>
                            <span class="font-medium">{{ artifact.commit_sha }}</span>
                            <span class="text-muted-foreground">{{ artifact.image_tag }}</span>
                        </div>
                        <p class="mt-1 text-muted-foreground">
                            {{ artifact.registry_ref ?? "No registry ref" }}
                        </p>
                    </Link>
                    <div
                        v-if="artifacts.data.length === 0"
                        class="rounded-md border border-dashed p-4 text-sm text-muted-foreground"
                    >
                        No build artifacts recorded.
                    </div>
                </CardContent>
            </Card>

            <div v-if="artifacts.links?.length > 3" class="flex flex-wrap gap-2">
                <Button
                    v-for="link in artifacts.links"
                    :key="link.label"
                    :as="link.url ? Link : 'button'"
                    :href="link.url ?? undefined"
                    size="sm"
                    :variant="link.active ? 'default' : 'secondary'"
                    :disabled="!link.url"
                    v-html="link.label"
                />
            </div>
        </div>
    </AppLayout>
</template>
