<script setup lang="ts">
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, Link, router, usePoll } from "@inertiajs/vue3";

defineProps<{
    operation: Record<string, any>;
}>();

const label = (value?: string | null): string => value?.replaceAll("_", " ").replaceAll("-", " ") ?? "";

usePoll(5000, {}, { keepAlive: true });

const retryOperation = (operation: Record<string, any>): void => {
    router.post(
        route("operations.retry", {
            organisation: route().params.organisation,
            operation: operation.id,
        }),
    );
};

const cancelOperation = (operation: Record<string, any>): void => {
    router.post(
        route("operations.cancel", {
            organisation: route().params.organisation,
            operation: operation.id,
        }),
    );
};
</script>

<template>
    <Head :title="`Operation ${operation.hash}`" />

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Operations',
                href: route('operations.index', { organisation: $page.props.organisation.id }),
            },
            { title: operation.hash },
        ]"
    >
        <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 flex-wrap items-center gap-2">
                        <h2 class="text-3xl font-bold tracking-tight">{{ label(operation.kind) }}</h2>
                        <Badge variant="outline">{{ operation.hash }}</Badge>
                        <Badge :variant="operation.status === 'completed' ? 'success' : 'secondary'">
                            {{ label(operation.status) }}
                        </Badge>
                    </div>
                    <p class="mt-1 text-sm text-muted-foreground">
                        Started {{ operation.started_at ?? "not yet" }} · Finished
                        {{ operation.finished_at ?? "not yet" }}
                    </p>
                </div>
                <Button
                    v-if="operation.status === 'failed'"
                    variant="secondary"
                    @click="retryOperation(operation)"
                >
                    Re-run
                </Button>
                <Button
                    v-if="['pending', 'in-progress'].includes(operation.status)"
                    variant="secondary"
                    @click="cancelOperation(operation)"
                >
                    Cancel
                </Button>
                <Button
                    :as="Link"
                    variant="secondary"
                    :href="
                        route('operations.logs', {
                            organisation: $page.props.organisation.id,
                            operation: operation.id,
                        })
                    "
                >
                    Download logs
                </Button>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Target</CardTitle>
                </CardHeader>
                <CardContent class="grid gap-2 text-sm">
                    <div>{{ operation.target?.name ?? `#${operation.target_id}` }}</div>
                    <div class="text-muted-foreground">{{ operation.target_type }}</div>
                    <Link
                        v-if="operation.parent"
                        :href="
                            route('operations.show', {
                                organisation: $page.props.organisation.id,
                                operation: operation.parent.id,
                            })
                        "
                        class="hover:underline"
                    >
                        Parent: {{ operation.parent.hash }}
                    </Link>
                </CardContent>
            </Card>

            <OperationTimeline :operations="[operation]" />
        </div>
    </AppLayout>
</template>
