<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";
import { PencilIcon } from "lucide-vue-next";

defineProps<{
    registry: Record<string, any>;
    artifactCount: number;
    environmentCount: number;
    artifacts: Record<string, any>;
}>();
</script>

<template>
    <Head :title="registry.name" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Organisation',
                href: route('organisations.show', { organisation: $page.props.organisation.id }),
            },
            { title: registry.name },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <div class="flex flex-wrap items-center gap-2">
                        <h2 class="text-3xl font-bold tracking-tight">{{ registry.name }}</h2>
                        <Badge variant="outline">{{ registry.type.replace("_", " ") }}</Badge>
                    </div>
                    <p class="mt-1 text-sm text-muted-foreground">
                        {{ registry.url ?? "No registry URL configured" }}
                    </p>
                </div>
                <Button
                    :as="Link"
                    variant="secondary"
                    :href="
                        route('registries.edit', {
                            organisation: $page.props.organisation.id,
                            registry: registry.id,
                        })
                    "
                >
                    <PencilIcon class="size-4" />
                    Edit
                </Button>
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <Card>
                    <CardHeader>
                        <CardTitle>Artifacts</CardTitle>
                    </CardHeader>
                    <CardContent class="text-3xl font-semibold">{{ artifactCount }}</CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Environments</CardTitle>
                    </CardHeader>
                    <CardContent class="text-3xl font-semibold">{{ environmentCount }}</CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Credential</CardTitle>
                    </CardHeader>
                    <CardContent class="text-sm text-muted-foreground">
                        Stored encrypted. Rotate it from registry settings.
                    </CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Published Artifacts</CardTitle>
                    <CardDescription>
                        Artifacts whose registry reference starts with this registry URL.
                    </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: artifact.environment.application.id,
                                environment: artifact.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.environment.name }}</span>
                            <span class="text-muted-foreground">{{ artifact.commit_sha }}</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 artifacts have been published to this registry.
                    </div>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
