<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, router } from '@inertiajs/vue3';
import { BoxesIcon, ExternalLinkIcon, GitBranchIcon, KeyRoundIcon, RocketIcon } from 'lucide-vue-next';

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

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

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Applications',
                href: route('applications.index', { organisation: $page.props.organisation.id }),
            },
            {
                title: props.application.name,
                href: route('applications.show', {
                    organisation: $page.props.organisation.id,
                    application: props.application.id,
                }),
            },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            <div class="flex items-center gap-3">
                <h2 class="text-3xl font-bold tracking-tight">{{ application.name }}</h2>
            </div>

            <Card v-if="application.deploy_key_public && !application.deploy_key_installed_at">
                <CardHeader>
                    <div class="flex items-start justify-between gap-4">
                        <div class="min-w-0 space-y-3">
                            <div class="flex items-center gap-2">
                                <KeyRoundIcon class="size-4" />
                                <CardTitle>Repository Deploy Key</CardTitle>
                            </div>
                            <pre class="max-w-full overflow-x-auto rounded border bg-muted p-3 text-xs">{{ application.deploy_key_public }}</pre>
                        </div>
                        <Button
                            class="shrink-0"
                            @click="
                                router.post(
                                    route('applications.verify-repository', {
                                        organisation: $page.props.organisation.id,
                                        application: application.id,
                                    }),
                                )
                            "
                        >
                            <GitBranchIcon class="size-4" />
                            Verify
                        </Button>
                    </div>
                </CardHeader>
            </Card>

            <div>
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-2xl font-semibold tracking-tight">Environments</h3>
                </div>
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    <Card v-for="environment in application.environments" :key="environment.id" class="relative">
                        <CardHeader>
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <BoxesIcon class="size-4" />
                                        <CardTitle>{{ environment.name }}</CardTitle>
                                        <Badge :variant="environment.status === 'active' ? 'success' : 'secondary'">{{
                                            environment.status.replace('-', ' ')
                                        }}</Badge>
                                    </div>
                                    <CardDescription>
                                        Branch: {{ environment.branch }} &bull; {{ environment.services?.length ?? 0 }} services
                                    </CardDescription>
                                    <div v-if="environment.variables?.length" class="mt-3 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>
                                    </div>
                                </div>
                                <div class="flex shrink-0 gap-2">
                                    <Button
                                        :as="Link"
                                        size="xs"
                                        variant="secondary"
                                        :href="
                                            route('environments.show', {
                                                organisation: $page.props.organisation.id,
                                                application: application.id,
                                                environment: environment.id,
                                            })
                                        "
                                    >
                                        <ExternalLinkIcon class="size-4" />
                                        Open
                                    </Button>
                                    <Button
                                        size="xs"
                                        @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
                                        size="xs"
                                        variant="secondary"
                                        @click="
                                            router.post(
                                                route('environment-migrations.store', {
                                                    organisation: $page.props.organisation.id,
                                                    application: application.id,
                                                    environment: environment.id,
                                                }),
                                            )
                                        "
                                    >
                                        Migrate
                                    </Button>
                                    <Button
                                        :as="Link"
                                        size="xs"
                                        variant="secondary"
                                        :href="
                                            route('environment-variables.create', {
                                                organisation: $page.props.organisation.id,
                                                application: application.id,
                                                environment: environment.id,
                                            })
                                        "
                                    >
                                        Env
                                    </Button>
                                    <Button
                                        size="xs"
                                        variant="secondary"
                                        @click="
                                            router.post(
                                                route('environment-workers.store', {
                                                    organisation: $page.props.organisation.id,
                                                    application: application.id,
                                                    environment: environment.id,
                                                }),
                                            )
                                        "
                                    >
                                        Worker
                                    </Button>
                                    <Button
                                        :as="Link"
                                        size="xs"
                                        :href="
                                            route('environment-attachments.create', {
                                                organisation: $page.props.organisation.id,
                                                application: application.id,
                                                environment: environment.id,
                                            })
                                        "
                                    >
                                        Attach
                                    </Button>
                                </div>
                            </div>
                        </CardHeader>
                    </Card>
                </div>
            </div>
        </div>
    </AppLayout>
</template>
