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

defineProps<{
    server?: Record<string, any> | null;
    service: Record<string, any>;
    environment?: Record<string, any> | null;
    application?: Record<string, any> | null;
}>();
</script>

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

    <AppLayout
        :breadcrumbs="[
            ...(application && environment
                ? [
                      {
                          title: 'Applications',
                          href: route('applications.index', {
                              organisation: $page.props.organisation.id,
                          }),
                      },
                      {
                          title: application.name,
                          href: route('applications.show', {
                              organisation: $page.props.organisation.id,
                              application: application.id,
                          }),
                      },
                      {
                          title: environment.name,
                          href: route('environments.show', {
                              organisation: $page.props.organisation.id,
                              application: application.id,
                              environment: environment.id,
                          }),
                      },
                  ]
                : [
                      {
                          title: 'Servers',
                          href: route('servers.index', {
                              organisation: $page.props.organisation.id,
                          }),
                      },
                      {
                          title: server?.name ?? 'Server',
                          href: route('servers.show', {
                              organisation: $page.props.organisation.id,
                              server: server?.id,
                          }),
                      },
                  ]),
            { title: service.name },
        ]"
    >
        <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>
                    <div class="flex items-center gap-2">
                        <h2 class="text-3xl font-bold tracking-tight">{{ service.name }}</h2>
                        <Badge variant="outline">{{ service.type }}</Badge>
                    </div>
                    <p class="mt-1 text-sm text-muted-foreground">
                        {{ service.category }} · {{ service.version }}
                    </p>
                </div>
                <Button
                    v-if="server"
                    :as="Link"
                    variant="secondary"
                    :href="
                        route('services.edit', {
                            organisation: $page.props.organisation.id,
                            server: server.id,
                            service: service.id,
                        })
                    "
                >
                    <PencilIcon class="size-4" />
                    Edit
                </Button>
            </div>

            <div class="grid gap-4 lg:grid-cols-3">
                <Card>
                    <CardHeader>
                        <CardTitle>Replicas</CardTitle>
                        <CardDescription>Desired: {{ service.desired_replicas }}</CardDescription>
                    </CardHeader>
                    <CardContent class="grid gap-2">
                        <div
                            v-for="replica in service.replicas"
                            :key="replica.id"
                            class="rounded-md border p-3 text-sm"
                        >
                            <Link
                                v-if="server"
                                :href="
                                    route('service-replicas.show', {
                                        organisation: $page.props.organisation.id,
                                        server: server?.id,
                                        service: service.id,
                                        replica: replica.id,
                                    })
                                "
                                class="font-medium hover:underline"
                            >
                                {{ replica.container_name }}
                            </Link>
                            <div v-else class="font-medium">{{ replica.container_name }}</div>
                            <div class="text-muted-foreground">
                                {{ replica.status }} · {{ replica.health_status }}
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <div class="flex items-center justify-between gap-3">
                            <CardTitle>Slices</CardTitle>
                            <div v-if="server" class="flex items-center gap-2">
                                <Button
                                    :as="Link"
                                    size="xs"
                                    variant="ghost"
                                    :href="
                                        route('service-slices.index', {
                                            organisation: $page.props.organisation.id,
                                            server: server?.id,
                                            service: service.id,
                                        })
                                    "
                                >
                                    View all
                                </Button>
                                <Button
                                    :as="Link"
                                    size="xs"
                                    variant="secondary"
                                    :href="
                                        route('service-slices.create', {
                                            organisation: $page.props.organisation.id,
                                            server: server?.id,
                                            service: service.id,
                                        })
                                    "
                                >
                                    <PlusIcon class="size-4" />
                                    Add
                                </Button>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent class="grid gap-2">
                        <div
                            v-for="slice in service.slices"
                            :key="slice.id"
                            class="rounded-md border p-3 text-sm"
                        >
                            <Link
                                v-if="server"
                                :href="
                                    route('service-slices.show', {
                                        organisation: $page.props.organisation.id,
                                        server: server?.id,
                                        service: service.id,
                                        slice: slice.id,
                                    })
                                "
                                class="font-medium hover:underline"
                            >
                                {{ slice.name }}
                            </Link>
                            <div v-else class="font-medium">{{ slice.name }}</div>
                            <div class="text-muted-foreground">{{ slice.type }}</div>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Operations</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <OperationTimeline :operations="service.operations" />
                    </CardContent>
                </Card>
            </div>

            <div class="grid gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>Endpoints</CardTitle>
                        <CardDescription
                            >Network endpoints registered for this service.</CardDescription
                        >
                    </CardHeader>
                    <CardContent class="grid gap-2">
                        <div
                            v-for="endpoint in service.endpoints"
                            :key="endpoint.id"
                            class="rounded-md border p-3 text-sm"
                        >
                            <div class="font-medium">
                                {{ endpoint.scope }} · {{ endpoint.hostname }}:{{ endpoint.port }}
                            </div>
                            <div class="text-muted-foreground">
                                {{ endpoint.ip_address ?? "no IP" }} · priority
                                {{ endpoint.priority }} · {{ endpoint.health_status }}
                            </div>
                        </div>
                        <div
                            v-if="service.endpoints.length === 0"
                            class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
                        >
                            No endpoints registered.
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Compose</CardTitle>
                        <CardDescription
                            >Generated artifact location on the target server.</CardDescription
                        >
                    </CardHeader>
                    <CardContent>
                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">
/home/keystone/services/{{ service.id }}/compose.yml</pre
                        >
                    </CardContent>
                </Card>

                <Card v-if="service.type === 'caddy'">
                    <CardHeader>
                        <CardTitle>Caddyfile</CardTitle>
                        <CardDescription
                            >Gateway route configuration generated on the server.</CardDescription
                        >
                    </CardHeader>
                    <CardContent>
                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">
/home/keystone/gateway/Caddyfile</pre
                        >
                    </CardContent>
                </Card>
            </div>
        </div>
    </AppLayout>
</template>
