<script setup lang="ts">
import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, router, useForm } from "@inertiajs/vue3";
import { AlertTriangleIcon } from "lucide-vue-next";

const props = defineProps<{
    server: Record<string, any>;
    service: Record<string, any>;
    backupAvailable: boolean;
}>();

const form = useForm({
    image_digest: props.service.available_image_digest ?? props.service.current_image_digest ?? "",
    backup_requested: false,
    confirmation: "",
});

const useAvailableDigest = () => {
    form.image_digest = props.service.available_image_digest ?? form.image_digest;
};

const resolveLatestDigest = (): void => {
    router.post(
        route("service-updates.resolve", {
            organisation: route().params.organisation,
            server: props.server.id,
            service: props.service.id,
        }),
        {},
        { preserveScroll: true },
    );
};
</script>

<template>
    <Head :title="`Update ${service.name}`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Servers',
                href: route('servers.index', {
                    organisation: $page.props.organisation.id,
                }),
            },
            {
                title: server.name,
                href: route('servers.show', {
                    organisation: $page.props.organisation.id,
                    server: server.id,
                }),
            },
            {
                title: service.name,
            },
            {
                title: 'Update',
            },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <Card>
                <CardHeader>
                    <div class="flex items-center gap-3">
                        <AlertTriangleIcon class="size-5 text-amber-600" />
                        <CardTitle>Stateful service update</CardTitle>
                    </div>
                </CardHeader>
                <CardContent class="space-y-4">
                    <div
                        class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100"
                    >
                        This update stops the running container, keeps the named Docker volume in
                        place, starts the new image, and then runs a health check.
                    </div>

                    <div class="rounded-md border bg-muted/30 p-3 text-sm">
                        Latest known digest:
                        <code>{{ service.available_image_digest ?? "not resolved yet" }}</code>
                        <Button
                            size="xs"
                            variant="secondary"
                            class="ml-2"
                            @click="resolveLatestDigest"
                        >
                            Resolve latest minor
                        </Button>
                        <Button
                            v-if="service.available_image_digest"
                            size="xs"
                            variant="secondary"
                            class="ml-2"
                            @click="useAvailableDigest"
                        >
                            Use latest known
                        </Button>
                    </div>

                    <div class="grid gap-2">
                        <Label for="image_digest">Image digest</Label>
                        <Input
                            id="image_digest"
                            v-model="form.image_digest"
                            placeholder="sha256:..."
                        />
                        <InputError :message="form.errors.image_digest" />
                    </div>

                    <div class="grid gap-2">
                        <Label for="confirmation">Type {{ service.name }} to confirm downtime</Label>
                        <Input id="confirmation" v-model="form.confirmation" />
                        <InputError :message="form.errors.confirmation" />
                    </div>

                    <label v-if="backupAvailable" class="flex items-center gap-2 text-sm">
                        <input
                            v-model="form.backup_requested"
                            type="checkbox"
                            class="size-4 rounded border-input"
                        />
                        Run configured backup first
                    </label>

                    <div class="flex justify-end">
                        <Button
                            :disabled="form.processing || form.confirmation !== service.name"
                            @click="
                                form.post(
                                    route('service-updates.store', {
                                        organisation: $page.props.organisation.id,
                                        server: server.id,
                                        service: service.id,
                                    }),
                                )
                            "
                        >
                            Create update operation
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>
