<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, 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<{
    servers: Record<string, any>;
    networks: Record<string, any>[];
}>();
</script>

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

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Servers',
                href: route('servers.index', {
                    organisation: $page.props.organisation.id,
                }),
            },
        ]"
    >
        <div class="flex items-center justify-between gap-3 p-4">
            <div>
                <h2 class="text-3xl font-bold tracking-tight">Servers</h2>
                <p class="mt-1 text-sm text-muted-foreground">
                    Compute nodes, private networking, firewall status, and hosted services.
                </p>
            </div>
            <div>
                <Button
                    :as="Link"
                    :href="
                        route('servers.create', {
                            organisation: $page.props.organisation.id,
                        })
                    "
                >
                    <PlusIcon class="size-4" />
                    Create
                </Button>
            </div>
        </div>
        <div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
            <Card v-for="server in servers.data" :key="server.id" class="relative w-full">
                <CardHeader>
                    <CardTitle>{{ server.name }}</CardTitle>
                    <CardDescription>
                        <Badge :variant="server.status === 'active' ? 'success' : 'secondary'">{{
                            server.status.replace("-", " ")
                        }}</Badge>
                        &bull; {{ server.ipv4 || server.ipv6 }}</CardDescription
                    >
                </CardHeader>
                <Link
                    :href="
                        route('servers.show', {
                            organisation: $page.props.organisation.id,
                            server: server.id,
                        })
                    "
                    class="absolute inset-0"
                ></Link>
            </Card>
            <Card v-if="servers.data.length === 0" class="md:col-span-2 lg:col-span-3">
                <CardHeader>
                    <CardTitle>No servers yet</CardTitle>
                    <CardDescription>
                        Create the first server or continue onboarding to configure providers,
                        source access, and registry details.
                    </CardDescription>
                    <div class="flex flex-wrap gap-2">
                        <Button
                            :as="Link"
                            :href="
                                route('servers.create', {
                                    organisation: $page.props.organisation.id,
                                })
                            "
                        >
                            <PlusIcon class="size-4" />
                            Create server
                        </Button>
                        <Button
                            :as="Link"
                            variant="secondary"
                            :href="
                                route('onboarding.show', {
                                    organisation: $page.props.organisation.id,
                                })
                            "
                        >
                            Onboarding
                        </Button>
                    </div>
                </CardHeader>
            </Card>
        </div>
        <section class="grid gap-4 p-4">
            <div>
                <h3 class="text-xl font-semibold tracking-tight">Private Networks</h3>
                <p class="mt-1 text-sm text-muted-foreground">
                    Provider network zones and the servers attached to each private range.
                </p>
            </div>
            <div class="grid gap-4 md:grid-cols-2">
                <Card v-for="network in networks" :key="network.id">
                    <CardHeader>
                        <CardTitle>{{ network.name }}</CardTitle>
                        <CardDescription>
                            {{ network.ip_range }} · {{ network.network_zone }} ·
                            {{ network.servers.length }} servers
                        </CardDescription>
                    </CardHeader>
                    <div class="grid gap-2 px-6 pb-6">
                        <Link
                            v-for="server in network.servers"
                            :key="server.id"
                            :href="
                                route('servers.show', {
                                    organisation: $page.props.organisation.id,
                                    server: server.id,
                                })
                            "
                            class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm hover:bg-muted/50"
                        >
                            <span class="font-medium">{{ server.name }}</span>
                            <span class="text-muted-foreground">
                                {{ server.private_ip ?? "no private IP" }} ·
                                {{ server.status.replace("-", " ") }}
                            </span>
                        </Link>
                        <div
                            v-if="network.servers.length === 0"
                            class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
                        >
                            No servers attached.
                        </div>
                    </div>
                </Card>
                <Card v-if="networks.length === 0" class="border-dashed">
                    <CardHeader>
                        <CardTitle>No private networks</CardTitle>
                        <CardDescription>
                            Networks are created when the first server is provisioned for a provider
                            zone.
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
        </section>
    </AppLayout>
</template>
