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

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

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

    <AppLayout
        :breadcrumbs="[
            {
                title: service.name,
                href: route('services.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                    service: service.id,
                }),
            },
            { title: slice.name },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div>
                <div class="flex flex-wrap items-center gap-2">
                    <h2 class="text-3xl font-bold tracking-tight">{{ slice.name }}</h2>
                    <Badge variant="outline">{{ slice.type }}</Badge>
                    <Badge :variant="slice.status === 'active' ? 'success' : 'secondary'">
                        {{ slice.status }}
                    </Badge>
                </div>
                <p class="mt-1 text-sm text-muted-foreground">
                    {{ slice.environment?.name ?? "Service-level slice" }}
                </p>
            </div>

            <div class="grid gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>Configuration</CardTitle>
                        <CardDescription>Credentials are stored encrypted and not revealed here.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(slice.config ?? {}, null, 2) }}</pre>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Attachments</CardTitle>
                    </CardHeader>
                    <CardContent class="grid gap-2">
                        <Link
                            v-for="attachment in slice.attachments"
                            :key="attachment.id"
                            :href="
                                route('environment-attachments.edit', {
                                    organisation: $page.props.organisation.id,
                                    application: attachment.environment.application.id,
                                    environment: attachment.environment.id,
                                    attachment: attachment.id,
                                })
                            "
                            class="rounded-md border p-3 text-sm hover:bg-muted/50"
                        >
                            <div class="font-medium">{{ attachment.role.replace('_', ' ') }}</div>
                            <div class="text-muted-foreground">
                                {{ attachment.environment.name }} ·
                                {{ attachment.env_prefix ?? "default prefix" }}
                            </div>
                        </Link>
                        <div
                            v-if="slice.attachments.length === 0"
                            class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
                        >
                            No attachments use this slice.
                        </div>
                    </CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Slice Operations</CardTitle>
                </CardHeader>
                <CardContent>
                    <OperationTimeline :operations="slice.operations" />
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
