<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, router } from "@inertiajs/vue3";
import { EyeIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-vue-next";

defineProps<{
    registries: Record<string, any>[];
}>();

const destroyRegistry = (registry: Record<string, any>): void => {
    if (!window.confirm(`Delete ${registry.name}?`)) {
        return;
    }

    router.delete(
        route("registries.destroy", {
            organisation: route().params.organisation,
            registry: registry.id,
        }),
    );
};
</script>

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

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Organisation',
                href: route('organisations.show', { organisation: $page.props.organisation.id }),
            },
            { title: 'Registries' },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="text-3xl font-bold tracking-tight">Registries</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Container registries used for multi-server environment deployments.
                    </p>
                </div>
                <Button
                    :as="Link"
                    :href="
                        route('registries.create', { organisation: $page.props.organisation.id })
                    "
                >
                    <PlusIcon class="size-4" />
                    Add registry
                </Button>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Configured Registries</CardTitle>
                    <CardDescription>{{ registries.length }} registries</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-2">
                    <div
                        v-for="registry in registries"
                        :key="registry.id"
                        class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm"
                    >
                        <div>
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="font-medium">{{ registry.name }}</span>
                                <Badge variant="outline">{{
                                    registry.type?.replace("_", " ")
                                }}</Badge>
                            </div>
                            <div class="mt-1 text-muted-foreground">
                                {{ registry.url ?? "No registry URL configured" }}
                            </div>
                        </div>
                        <div class="flex gap-1">
                            <Button
                                :as="Link"
                                size="iconxs"
                                variant="ghost"
                                :href="
                                    route('registries.show', {
                                        organisation: $page.props.organisation.id,
                                        registry: registry.id,
                                    })
                                "
                            >
                                <EyeIcon class="size-3" />
                            </Button>
                            <Button
                                :as="Link"
                                size="iconxs"
                                variant="ghost"
                                :href="
                                    route('registries.edit', {
                                        organisation: $page.props.organisation.id,
                                        registry: registry.id,
                                    })
                                "
                            >
                                <PencilIcon class="size-3" />
                            </Button>
                            <Button
                                size="iconxs"
                                variant="ghost"
                                @click="destroyRegistry(registry)"
                            >
                                <Trash2Icon class="size-3" />
                            </Button>
                        </div>
                    </div>
                    <div
                        v-if="registries.length === 0"
                        class="rounded-md border border-dashed p-4 text-sm text-muted-foreground"
                    >
                        No registries configured.
                    </div>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
