<script setup>
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 } from '@inertiajs/vue3';
import { CheckIcon, CircleIcon } from 'lucide-vue-next';

defineProps({
    organisation: { type: Object, required: true },
    steps: { type: Array, required: true },
    nextStep: { type: Object, required: true },
});
</script>

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

    <AppLayout
        :breadcrumbs="[
            { title: organisation.name, href: route('organisations.show', { organisation: organisation.id }) },
            { title: 'Onboarding' },
        ]"
    >
        <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">Onboarding</h2>
                    <p class="mt-1 text-sm text-muted-foreground">{{ organisation.name }}</p>
                </div>
                <Button :as="Link" :href="nextStep.href">{{ nextStep.label }}</Button>
            </div>

            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                <Card v-for="step in steps" :key="step.key">
                    <CardHeader>
                        <div class="flex items-center justify-between gap-3">
                            <CardTitle>{{ step.label }}</CardTitle>
                            <Badge :variant="step.complete ? 'success' : 'secondary'">
                                <CheckIcon v-if="step.complete" class="size-3" />
                                <CircleIcon v-else class="size-3" />
                                {{ step.complete ? 'Ready' : 'Open' }}
                            </Badge>
                        </div>
                    </CardHeader>
                    <CardContent>
                        <Button :as="Link" variant="secondary" :href="step.href" class="w-full">{{ step.label }}</Button>
                    </CardContent>
                </Card>
            </div>
        </div>
    </AppLayout>
</template>
