<script setup lang="ts">
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, Link, router, WhenVisible } from "@inertiajs/vue3";
import {
    AppWindowIcon,
    GitBranchIcon,
    PencilIcon,
    ServerIcon,
    ShieldCheckIcon,
    Trash2Icon,
    UserIcon,
} from "lucide-vue-next";
import { ref, watch } from "vue";

defineProps({
    organisation: {
        type: Object,
        required: true,
    },
    providers: {
        type: Array,
        required: false,
    },
    registries: {
        type: Array,
        required: false,
    },
    sourceProviders: {
        type: Array,
        required: false,
    },
    health: {
        type: Object,
        required: true,
    },
});

const tabValue = ref(new URL(window.location.href).hash?.replace("#", "") || "dashboard");
watch(tabValue, () => {
    window.history.pushState({}, "", `#${tabValue.value}`);
});
watch(
    () => window.location.hash,
    (newHash) => {
        if (newHash) {
            tabValue.value = newHash.replace("#", "");
        }
    },
);

const destroyResource = (url: string, label: string): void => {
    if (!window.confirm(`Delete ${label}?`)) {
        return;
    }

    router.delete(url, { preserveScroll: true });
};
</script>

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

    <AppLayout>
        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
                <Button
                    v-if="
                        organisation.providers_count === 0 ||
                        organisation.source_providers_count === 0 ||
                        organisation.registries_count === 0 ||
                        organisation.servers_count === 0 ||
                        organisation.applications_count === 0
                    "
                    :as="Link"
                    :href="route('onboarding.show', { organisation: organisation.id })"
                >
                    Continue onboarding
                </Button>
            </div>
            <Tabs v-model="tabValue" :unmount-on-hide="false">
                <TabsList>
                    <TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
                    <TabsTrigger value="settings"> Settings </TabsTrigger>
                </TabsList>
                <TabsContent value="dashboard">
                    <h3 class="mt-4 text-2xl font-bold tracking-tight">Your Resources</h3>
                    <p class="mb-4 text-sm text-muted-foreground">
                        Your organisation, at a glance.
                    </p>
                    <div class="grid w-full gap-4 md:grid-cols-3">
                        <Card class="relative">
                            <Link
                                :href="
                                    route('applications.index', {
                                        organisation: organisation.id,
                                    })
                                "
                                class="absolute inset-0"
                            />
                            <CardContent class="flex items-center gap-4 p-4">
                                <AppWindowIcon class="size-6 text-muted-foreground" />
                                <div>
                                    <h4 class="mb-1 text-3xl font-medium leading-none">
                                        {{ organisation.applications_count }}
                                    </h4>
                                    <p class="text-sm text-muted-foreground">
                                        Application{{
                                            organisation.applications_count === 1 ? "" : "s"
                                        }}
                                    </p>
                                </div>
                            </CardContent>
                        </Card>
                        <Card class="relative">
                            <Link
                                class="absolute inset-0"
                                :href="
                                    route('servers.index', {
                                        organisation: organisation.id,
                                    })
                                "
                            />
                            <CardContent class="flex items-center gap-4 p-4">
                                <ServerIcon class="size-6 text-muted-foreground" />
                                <div>
                                    <h4 class="mb-1 text-3xl font-medium leading-none">
                                        {{ organisation.servers_count }}
                                    </h4>
                                    <p class="text-sm text-muted-foreground">
                                        Server{{ organisation.servers_count === 1 ? "" : "s" }}
                                    </p>
                                </div>
                            </CardContent>
                        </Card>
                        <Card class="relative">
                            <CardContent class="flex items-center gap-4 p-4">
                                <UserIcon class="size-6 text-muted-foreground" />
                                <div>
                                    <h4 class="mb-1 text-3xl font-medium leading-none">
                                        {{ organisation.members_count }}
                                    </h4>
                                    <p class="text-sm text-muted-foreground">
                                        Member{{ organisation.members_count === 1 ? "" : "s" }}
                                    </p>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                    <Card class="mt-4">
                        <CardHeader>
                            <CardTitle>Health</CardTitle>
                            <CardDescription
                                >Aggregate signals across this organisation.</CardDescription
                            >
                        </CardHeader>
                        <CardContent class="grid gap-3 md:grid-cols-3">
                            <div class="rounded-md border p-3">
                                <div class="text-2xl font-semibold">
                                    {{ health.unhealthy_services }}
                                </div>
                                <div class="text-sm text-muted-foreground">Unhealthy services</div>
                            </div>
                            <div class="rounded-md border p-3">
                                <div class="text-2xl font-semibold">
                                    {{ health.failed_operations }}
                                </div>
                                <div class="text-sm text-muted-foreground">Failed operations</div>
                            </div>
                            <div class="rounded-md border p-3">
                                <div class="text-2xl font-semibold">
                                    {{ health.locked_variables }}
                                </div>
                                <div class="text-sm text-muted-foreground">
                                    Environments with locked variables
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <Card class="mt-4">
                        <CardHeader>
                            <div class="flex items-center justify-between gap-3">
                                <div>
                                    <CardTitle>Members</CardTitle>
                                    <CardDescription>Current organisation roster.</CardDescription>
                                </div>
                                <Button
                                    :as="Link"
                                    size="sm"
                                    variant="secondary"
                                    :href="
                                        route('organisation-members.index', {
                                            organisation: organisation.id,
                                        })
                                    "
                                >
                                    Manage
                                </Button>
                            </div>
                        </CardHeader>
                        <CardContent class="grid gap-2">
                            <div
                                v-for="member in organisation.members"
                                :key="member.id"
                                class="flex items-center justify-between rounded-md border p-3 text-sm"
                            >
                                <div>
                                    <div class="font-medium">{{ member.name }}</div>
                                    <div class="text-muted-foreground">{{ member.email }}</div>
                                </div>
                                <span class="text-xs uppercase text-muted-foreground">
                                    {{ member.membership?.role ?? "member" }}
                                </span>
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>
                <TabsContent value="settings">
                    <WhenVisible data="registries">
                        <template #fallback> Loading... </template>
                        <div class="mt-4 flex items-center justify-between gap-3">
                            <h3 class="text-2xl font-bold tracking-tight">Registries</h3>
                            <Button
                                :as="Link"
                                :href="
                                    route('registries.create', {
                                        organisation: organisation.id,
                                    })
                                "
                            >
                                Add
                            </Button>
                        </div>
                        <div
                            class="border-muted-background divide-y-muted-background mb-6 max-w-96 divide-y rounded-md border"
                        >
                            <div
                                v-for="registry in registries"
                                :key="registry.id"
                                class="flex items-center gap-2 px-2 py-1"
                            >
                                <ShieldCheckIcon class="size-4 text-muted-foreground" />
                                <Link
                                    :href="
                                        route('registries.show', {
                                            organisation: organisation.id,
                                            registry: registry.id,
                                        })
                                    "
                                    class="hover:underline"
                                >
                                    {{ registry.name }}
                                </Link>
                                <span class="ml-auto text-xs uppercase text-muted-foreground">{{
                                    registry.type
                                }}</span>
                                <Button
                                    :as="Link"
                                    size="iconxs"
                                    variant="ghost"
                                    :href="
                                        route('registries.edit', {
                                            organisation: organisation.id,
                                            registry: registry.id,
                                        })
                                    "
                                >
                                    <PencilIcon class="size-3" />
                                </Button>
                                <Button
                                    size="iconxs"
                                    variant="ghost"
                                    @click="
                                        destroyResource(
                                            route('registries.destroy', {
                                                organisation: organisation.id,
                                                registry: registry.id,
                                            }),
                                            registry.name,
                                        )
                                    "
                                >
                                    <Trash2Icon class="size-3" />
                                </Button>
                            </div>
                            <div
                                v-if="!registries?.length"
                                class="px-2 py-1 text-sm text-muted-foreground"
                            >
                                No registries configured
                            </div>
                        </div>
                    </WhenVisible>
                    <WhenVisible data="sourceProviders">
                        <template #fallback> Loading... </template>
                        <div class="mb-6">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="text-2xl font-bold tracking-tight">Source Providers</h3>
                                <Button
                                    :as="Link"
                                    :href="
                                        route('source-providers.create', {
                                            organisation: organisation.id,
                                        })
                                    "
                                >
                                    Add
                                </Button>
                            </div>
                            <div
                                class="border-muted-background divide-y-muted-background max-w-96 divide-y rounded-md border"
                            >
                                <div
                                    v-for="sourceProvider in sourceProviders"
                                    :key="sourceProvider.id"
                                    class="flex items-center gap-2 px-2 py-1"
                                >
                                    <GitBranchIcon class="size-4 text-muted-foreground" />
                                    <Link
                                        :href="
                                            route('source-providers.edit', {
                                                organisation: organisation.id,
                                                source_provider: sourceProvider.id,
                                            })
                                        "
                                        class="hover:underline"
                                    >
                                        {{ sourceProvider.name }}
                                    </Link>
                                    <span class="ml-auto text-xs uppercase text-muted-foreground">{{
                                        sourceProvider.type
                                    }}</span>
                                    <Button
                                        size="iconxs"
                                        variant="ghost"
                                        @click="
                                            destroyResource(
                                                route('source-providers.destroy', {
                                                    organisation: organisation.id,
                                                    source_provider: sourceProvider.id,
                                                }),
                                                sourceProvider.name,
                                            )
                                        "
                                    >
                                        <Trash2Icon class="size-3" />
                                    </Button>
                                </div>
                                <div
                                    v-if="!sourceProviders?.length"
                                    class="px-2 py-1 text-sm text-muted-foreground"
                                >
                                    No source providers configured
                                </div>
                            </div>
                        </div>
                    </WhenVisible>
                    <WhenVisible data="providers">
                        <template #fallback> Loading... </template>
                        <div class="mt-4 flex items-center justify-between gap-3">
                            <div>
                                <h3 class="text-2xl font-bold tracking-tight">Server Providers</h3>
                                <p class="mb-4 text-sm text-muted-foreground">
                                    Manage your server providers.
                                </p>
                            </div>
                            <Button
                                :as="Link"
                                :href="route('providers.create', { organisation: organisation.id })"
                            >
                                Add
                            </Button>
                        </div>
                        <div
                            class="border-muted-background divide-y-muted-background max-w-80 divide-y rounded-md border"
                        >
                            <div
                                v-for="provider in providers"
                                :key="provider.id"
                                class="flex items-center gap-2 px-2 py-1"
                            >
                                {{ provider.name }}
                                <span class="ml-auto text-xs uppercase text-muted-foreground">{{
                                    provider.type
                                }}</span>
                                <Button
                                    size="iconxs"
                                    variant="ghost"
                                    @click="
                                        destroyResource(
                                            route('providers.destroy', {
                                                organisation: organisation.id,
                                                provider: provider.id,
                                            }),
                                            provider.name,
                                        )
                                    "
                                >
                                    <Trash2Icon class="size-3" />
                                </Button>
                            </div>
                            <div
                                v-if="!providers?.length"
                                class="px-2 py-1 text-sm text-muted-foreground"
                            >
                                No server providers configured
                            </div>
                        </div>
                    </WhenVisible>
                </TabsContent>
            </Tabs>
        </div>
    </AppLayout>
</template>
