<script setup lang="ts">
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
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 { PlusIcon } from "lucide-vue-next";

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

<template>
    <Head :title="`${service.name} slices`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Servers',
                href: route('servers.index', { organisation: $page.props.organisation.id }),
            },
            {
                title: server.name,
                href: route('servers.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                }),
            },
            {
                title: service.name,
                href: route('services.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                    service: service.id,
                }),
            },
            { title: 'Slices' },
        ]"
    >
        <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">Slices</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        {{ service.name }} · {{ slices.length }} slices
                    </p>
                </div>
                <Button
                    :as="Link"
                    :href="
                        route('service-slices.create', {
                            organisation: $page.props.organisation.id,
                            server: server.id,
                            service: service.id,
                        })
                    "
                >
                    <PlusIcon class="size-4" />
                    Add slice
                </Button>
            </div>

            <div class="grid gap-4">
                <Card v-for="slice in slices" :key="slice.id">
                    <CardHeader>
                        <div class="flex flex-wrap items-start justify-between gap-3">
                            <div>
                                <CardTitle>
                                    <Link
                                        :href="
                                            route('service-slices.show', {
                                                organisation: $page.props.organisation.id,
                                                server: server.id,
                                                service: service.id,
                                                slice: slice.id,
                                            })
                                        "
                                        class="hover:underline"
                                    >
                                        {{ slice.name }}
                                    </Link>
                                </CardTitle>
                                <CardDescription>
                                    {{ slice.environment?.application?.name ?? "Service" }}
                                    <span v-if="slice.environment"
                                        >/ {{ slice.environment.name }}</span
                                    >
                                </CardDescription>
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <Badge variant="outline">{{ slice.type }}</Badge>
                                <Badge
                                    :variant="slice.status === 'active' ? 'success' : 'secondary'"
                                >
                                    {{ slice.status }}
                                </Badge>
                                <Badge variant="outline"
                                    >{{ slice.attachments.length }} attachments</Badge
                                >
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent
                        class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
                    >
                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{
                            JSON.stringify(slice.config ?? {}, null, 2)
                        }}</pre>
                        <div>
                            <div class="mb-2 text-sm font-medium">Recent operations</div>
                            <OperationTimeline :operations="slice.operations" />
                        </div>
                    </CardContent>
                </Card>

                <Card v-if="slices.length === 0" class="border-dashed">
                    <CardHeader>
                        <CardTitle>No slices</CardTitle>
                        <CardDescription
                            >Create a slice for a service-level capability or managed
                            attachment.</CardDescription
                        >
                    </CardHeader>
                    <CardContent>
                        <Button
                            :as="Link"
                            variant="secondary"
                            :href="
                                route('service-slices.create', {
                                    organisation: $page.props.organisation.id,
                                    server: server.id,
                                    service: service.id,
                                })
                            "
                        >
                            <PlusIcon class="size-4" />
                            Add slice
                        </Button>
                    </CardContent>
                </Card>
            </div>
        </div>
    </AppLayout>
</template>
