<script setup lang="ts">
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import AppLayout from "@/layouts/AppLayout.vue";
import { type BreadcrumbItem } from "@/types";
import { Head, Link } from "@inertiajs/vue3";
import { ChevronRightIcon } from "lucide-vue-next";

defineProps<{
    organisations: Record<string, any>[];
    recentOperations: Record<string, any>[];
    unhealthyServices: Record<string, any>[];
}>();

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: "Dashboard",
        href: "/dashboard",
    },
];
</script>

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

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="grid h-full flex-1 gap-4 rounded-xl p-4 lg:grid-cols-3">
            <Card class="lg:col-span-2">
                <CardHeader class="border-b-muted-background border-b">
                    <CardTitle>Organisations</CardTitle>
                    <CardDescription>Select an organisation to view its environments.</CardDescription>
                </CardHeader>
                <CardContent class="divide-y-muted-foreground divide-y p-0">
                    <Link
                        v-for="organisation in organisations"
                        :key="organisation.id"
                        :href="route('organisations.show', { organisation: organisation.id })"
                        class="flex items-center justify-between px-6 py-3 hover:bg-muted"
                    >
                        <div>
                            <div class="font-medium">{{ organisation.name }}</div>
                            <div class="text-sm text-muted-foreground">
                                {{ organisation.applications_count }} applications ·
                                {{ organisation.servers_count }} servers ·
                                {{ organisation.services_count }} services
                            </div>
                        </div>
                        <ChevronRightIcon class="size-4 text-muted-foreground" />
                    </Link>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Unhealthy services</CardTitle>
                    <CardDescription>Services that need attention across your organisations.</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-2">
                    <div
                        v-for="service in unhealthyServices"
                        :key="service.id"
                        class="rounded-md border p-3 text-sm"
                    >
                        <div class="font-medium">{{ service.name }}</div>
                        <div class="text-muted-foreground">{{ service.status }}</div>
                    </div>
                    <div
                        v-if="unhealthyServices.length === 0"
                        class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
                    >
                        No unhealthy services.
                    </div>
                </CardContent>
            </Card>

            <Card class="lg:col-span-3">
                <CardHeader>
                    <CardTitle>Recent operations</CardTitle>
                    <CardDescription>Latest service operations across your organisations.</CardDescription>
                </CardHeader>
                <CardContent class="grid gap-2">
                    <div
                        v-for="operation in recentOperations"
                        :key="operation.id"
                        class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm"
                    >
                        <div>
                            <div class="font-medium">{{ operation.kind.replace("_", " ") }}</div>
                            <div class="text-muted-foreground">{{ operation.hash }}</div>
                        </div>
                        <div class="text-muted-foreground">{{ operation.status.replace("-", " ") }}</div>
                    </div>
                    <div
                        v-if="recentOperations.length === 0"
                        class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
                    >
                        No operations recorded.
                    </div>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
