<script setup>
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, router } from "@inertiajs/vue3";
import {
    DatabaseIcon,
    GitBranchIcon,
    ListChecksIcon,
    PlusIcon,
    RocketIcon,
    ServerIcon,
    SettingsIcon,
} from "lucide-vue-next";

const props = defineProps({
    application: {
        type: Object,
        required: true,
    },
    environment: {
        type: Object,
        required: true,
    },
});
</script>

<template>
    <Head :title="`${environment.name} Environment`" />

    <AppLayout
        :breadcrumbs="[
            {
                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 },
        ]"
    >
        <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">{{ environment.name }}</h2>
                        <Badge
                            :variant="environment.status === 'active' ? 'success' : 'secondary'"
                            >{{ environment.status.replace("-", " ") }}</Badge
                        >
                    </div>
                    <p class="mt-1 text-sm text-muted-foreground">
                        <GitBranchIcon class="mr-1 inline size-4" />{{ environment.branch }}
                    </p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <Button
                        @click="
                            router.post(
                                route('environment-deployments.store', {
                                    organisation: $page.props.organisation.id,
                                    application: application.id,
                                    environment: environment.id,
                                }),
                            )
                        "
                    >
                        <RocketIcon class="size-4" />
                        Deploy
                    </Button>
                    <Button
                        variant="secondary"
                        @click="
                            router.post(
                                route('environment-migrations.store', {
                                    organisation: $page.props.organisation.id,
                                    application: application.id,
                                    environment: environment.id,
                                }),
                            )
                        "
                    >
                        <ListChecksIcon class="size-4" />
                        Migrate
                    </Button>
                    <Button
                        :as="Link"
                        variant="secondary"
                        :href="
                            route('environment-attachments.create', {
                                organisation: $page.props.organisation.id,
                                application: application.id,
                                environment: environment.id,
                            })
                        "
                    >
                        <PlusIcon class="size-4" />
                        Attach
                    </Button>
                </div>
            </div>

            <div class="grid gap-4 lg:grid-cols-[2fr_1fr]">
                <div class="space-y-4">
                    <Card>
                        <CardHeader>
                            <CardTitle>Services</CardTitle>
                            <CardDescription
                                >{{ environment.services?.length ?? 0 }} runtime and managed
                                services</CardDescription
                            >
                        </CardHeader>
                        <CardContent class="grid gap-3">
                            <div
                                v-for="service in environment.services"
                                :key="service.id"
                                class="rounded-md border p-3"
                            >
                                <div class="flex flex-wrap items-start justify-between gap-3">
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <ServerIcon class="size-4" />
                                            <h3 class="font-semibold">{{ service.name }}</h3>
                                            <Badge variant="outline">{{ service.type }}</Badge>
                                        </div>
                                        <p class="mt-1 text-sm text-muted-foreground">
                                            {{ service.replicas?.length ?? 0 }} replicas ·
                                            {{ service.slices?.length ?? 0 }} slices ·
                                            {{ service.status?.replace("-", " ") }}
                                        </p>
                                    </div>
                                    <Button
                                        v-if="service.server_id"
                                        :as="Link"
                                        size="sm"
                                        variant="secondary"
                                        :href="
                                            route('services.show', {
                                                organisation: $page.props.organisation.id,
                                                server: service.server_id,
                                                service: service.id,
                                            })
                                        "
                                    >
                                        <SettingsIcon class="size-4" />
                                        Open
                                    </Button>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Operations</CardTitle>
                        </CardHeader>
                        <CardContent class="grid gap-2">
                            <div
                                v-for="operation in environment.operations"
                                :key="operation.id"
                                class="flex items-center justify-between rounded-md border p-3"
                            >
                                <span class="font-medium">{{
                                    operation.kind.replace("_", " ")
                                }}</span>
                                <Badge
                                    :variant="
                                        operation.status === 'completed' ? 'success' : 'secondary'
                                    "
                                    >{{ operation.status.replace("_", " ") }}</Badge
                                >
                            </div>
                        </CardContent>
                    </Card>
                </div>

                <div class="space-y-4">
                    <Card>
                        <CardHeader>
                            <CardTitle>Attachments</CardTitle>
                        </CardHeader>
                        <CardContent class="grid gap-2">
                            <div
                                v-for="attachment in environment.attachments"
                                :key="attachment.id"
                                class="rounded-md border p-3 text-sm"
                            >
                                <div class="flex items-center gap-2 font-medium">
                                    <DatabaseIcon class="size-4" />
                                    {{ attachment.role.replace("_", " ") }}
                                </div>
                                <p class="mt-1 text-muted-foreground">
                                    {{ attachment.service?.name }} ·
                                    {{ attachment.service_slice?.name ?? "service level" }}
                                </p>
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Variables</CardTitle>
                        </CardHeader>
                        <CardContent class="flex flex-wrap gap-2">
                            <Badge
                                v-for="variable in environment.variables"
                                :key="variable.id"
                                :variant="variable.source === 'user' ? 'secondary' : 'outline'"
                            >
                                {{ variable.key }} · {{ variable.source.replace("_", " ") }}
                                <span v-if="!variable.overridable"> · locked</span>
                            </Badge>
                            <Button
                                :as="Link"
                                size="sm"
                                variant="secondary"
                                :href="
                                    route('environment-variables.create', {
                                        organisation: $page.props.organisation.id,
                                        application: application.id,
                                        environment: environment.id,
                                    })
                                "
                            >
                                <PlusIcon class="size-4" />
                                Add
                            </Button>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    </AppLayout>
</template>
