<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { cva } from 'class-variance-authority';
import { computed } from 'vue';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

type Props = {
    label: string;
    count: number;
    status: 'danger' | 'warning' | 'info' | 'success';
    href: string;
    loading?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
    loading: false,
});

const cardVariants = cva(
    'cursor-pointer transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
    {
        variants: {
            status: {
                danger: 'border-red-500/50 bg-red-500/5 hover:bg-red-500/10',
                warning:
                    'border-amber-500/50 bg-amber-500/5 hover:bg-amber-500/10',
                info: 'border-blue-500/50 bg-blue-500/5 hover:bg-blue-500/10',
                success:
                    'border-green-500/50 bg-green-500/5 hover:bg-green-500/10',
            },
        },
    },
);

const countColorClass = computed(() => {
    const map: Record<string, string> = {
        danger: 'text-red-600',
        warning: 'text-amber-600',
        info: 'text-blue-600',
        success: 'text-green-600',
    };
    return map[props.status] ?? '';
});

function navigate(): void {
    router.get(props.href);
}

function handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        navigate();
    }
}
</script>

<template>
    <Card
        :class="cn(cardVariants({ status }))"
        role="button"
        tabindex="0"
        aria-pressed="false"
        @click="navigate"
        @keydown="handleKeydown"
    >
        <CardHeader class="pb-2">
            <CardTitle class="text-sm font-medium text-muted-foreground">
                <Skeleton v-if="loading" class="h-4 w-20" />
                <template v-else>{{ label }}</template>
            </CardTitle>
        </CardHeader>
        <CardContent>
            <Skeleton v-if="loading" class="h-8 w-16" />
            <div v-else :class="cn('text-3xl font-bold', countColorClass)">
                {{ count }}
            </div>
        </CardContent>
    </Card>
</template>
