<script setup lang="ts">
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 { BoxesIcon, PlusIcon } from "lucide-vue-next";

defineProps<{
    applications: Record<string, any>[];
}>();
</script>

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

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Environments',
                href: route('environments.index', { organisation: $page.props.organisation.id }),
            },
        ]"
    >
        <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>
                    <h2 class="text-3xl font-bold tracking-tight">Environments</h2>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Deployment units across all applications.
                    </p>
                </div>
                <Button
                    :as="Link"
                    :href="route('applications.create', { organisation: $page.props.organisation.id })"
                >
                    <PlusIcon class="size-4" />
                    Application
                </Button>
            </div>

            <div class="grid gap-4">
                <Card v-for="application in applications" :key="application.id">
                    <CardHeader>
                        <CardTitle>{{ application.name }}</CardTitle>
                        <CardDescription>
                            {{ application.environments?.length ?? 0 }} environments
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                        <Link
                            v-for="environment in application.environments"
                            :key="environment.id"
                            :href="
                                route('environments.show', {
                                    organisation: $page.props.organisation.id,
                                    application: application.id,
                                    environment: environment.id,
                                })
                            "
                            class="rounded-md border p-3 hover:bg-muted/50"
                        >
                            <div class="flex items-center gap-2">
                                <BoxesIcon class="size-4" />
                                <span class="font-medium">{{ environment.name }}</span>
                                <Badge :variant="environment.status === 'active' ? 'success' : 'secondary'">
                                    {{ environment.status.replace('-', ' ') }}
                                </Badge>
                            </div>
                            <p class="mt-2 text-sm text-muted-foreground">
                                {{ environment.branch }} · {{ environment.services_count }} services ·
                                {{ environment.build_artifacts_count }} builds
                            </p>
                        </Link>
                    </CardContent>
                </Card>

                <Card v-if="applications.every((application) => !application.environments?.length)">
                    <CardHeader>
                        <CardTitle>No environments yet</CardTitle>
                        <CardDescription>
                            Create an application to provision its first environment.
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
        </div>
    </AppLayout>
</template>
