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

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

<template>
    <Head :title="artifact.commit_sha" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Builds',
                href: route('build-artifacts.index', {
                    organisation: $page.props.organisation.id,
                    application: application.id,
                    environment: environment.id,
                }),
            },
            { title: artifact.commit_sha },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div class="flex flex-wrap items-center gap-2">
                <h2 class="text-3xl font-bold tracking-tight">{{ artifact.commit_sha }}</h2>
                <Badge variant="outline">{{ artifact.status }}</Badge>
            </div>

            <div class="grid gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>Image</CardTitle>
                    </CardHeader>
                    <CardContent class="grid gap-2 text-sm">
                        <div>Tag: {{ artifact.image_tag }}</div>
                        <div>Digest: {{ artifact.image_digest ?? "not available" }}</div>
                        <div>Registry: {{ artifact.registry_ref ?? "not pushed" }}</div>
                        <div>Built by service: {{ artifact.built_by_service?.name ?? "none" }}</div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Metadata</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(artifact.metadata ?? {}, null, 2) }}</pre>
                    </CardContent>
                </Card>
            </div>

            <Card v-if="artifact.built_by_operation">
                <CardHeader>
                    <CardTitle>Build Operation</CardTitle>
                </CardHeader>
                <CardContent>
                    <OperationTimeline :operations="[artifact.built_by_operation]" />
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
