<script setup lang="ts">
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
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, usePage, usePoll } from "@inertiajs/vue3";
import { computed } from "vue";

const props = defineProps<{
    operations: Record<string, any>;
    filters: Record<string, string>;
    operationKinds: Record<string, string>;
    operationStatuses: Record<string, string>;
}>();

const operationRows = computed(() => props.operations.data ?? []);
const page = usePage();

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

const setFilter = (key: string, value: string | null): void => {
    router.get(
        route("operations.index", { organisation: page.props.organisation.id }),
        { ...props.filters, [key]: value || undefined },
        { preserveState: true, replace: true },
    );
};
</script>

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

    <AppLayout
        :breadcrumbs="[
            {
                title: 'Operations',
                href: route('operations.index', { organisation: $page.props.organisation.id }),
            },
        ]"
    >
        <div class="flex h-full flex-1 flex-col gap-4 p-4">
            <div>
                <h2 class="text-3xl font-bold tracking-tight">Operations</h2>
                <p class="mt-1 text-sm text-muted-foreground">
                    Organisation-wide execution history and logs.
                </p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Filters</CardTitle>
                </CardHeader>
                <CardContent class="flex flex-wrap gap-2">
                    <Button
                        size="sm"
                        :variant="!filters.kind ? 'default' : 'secondary'"
                        @click="setFilter('kind', null)"
                    >
                        All kinds
                    </Button>
                    <Button
                        v-for="kind in operationKinds"
                        :key="kind"
                        size="sm"
                        :variant="filters.kind === kind ? 'default' : 'secondary'"
                        @click="setFilter('kind', kind)"
                    >
                        {{ kind.replace('_', ' ') }}
                    </Button>
                    <Button
                        v-for="status in operationStatuses"
                        :key="status"
                        size="sm"
                        :variant="filters.status === status ? 'default' : 'outline'"
                        @click="setFilter('status', filters.status === status ? null : status)"
                    >
                        {{ status.replace('-', ' ') }}
                    </Button>
                </CardContent>
            </Card>

            <OperationTimeline :operations="operationRows" show-target />

            <div v-if="operations.links?.length > 3" class="flex flex-wrap gap-2">
                <Button
                    v-for="link in operations.links"
                    :key="link.label"
                    :as="link.url ? Link : 'button'"
                    :href="link.url ?? undefined"
                    size="sm"
                    :variant="link.active ? 'default' : 'secondary'"
                    :disabled="!link.url"
                    v-html="link.label"
                />
            </div>
        </div>
    </AppLayout>
</template>
