<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import { Users } from 'lucide-vue-next';
import Heading from '@/components/Heading.vue';
import AppLayout from '@/layouts/AppLayout.vue';
import Pagination from '@/components/Pagination.vue';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

type User = {
    id: number;
    name: string;
    email: string;
    group: string;
    created_at?: string;
    editUrl: string;
    destroyUrl: string;
};

type PaginatedData<T> = {
    data: T[];
    from: number | null;
    to: number | null;
    total: number;
    current_page: number;
    last_page: number;
    per_page: number;
    path: string;
    first_page_url: string;
    prev_page_url: string | null;
    next_page_url: string | null;
    last_page_url: string;
};

type Props = {
    users: PaginatedData<User>;
    createUrl: string;
};

defineProps<Props>();

function destroy(user: User) {
    if (window.confirm(`Are you sure you want to delete ${user.name}?`)) {
        router.delete(user.destroyUrl);
    }
}

function formatGroup(group: string): string {
    return group.charAt(0).toUpperCase() + group.slice(1);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Users' },
        ]"
    >
        <Head title="Users" />

        <div class="flex flex-col space-y-6 p-4">
            <div class="flex items-center justify-between">
                <Heading
                    variant="small"
                    title="Users"
                    description="Manage application users"
                />
                <Button as-child>
                    <Link :href="createUrl">Create user</Link>
                </Button>
            </div>

            <div
                class="rounded-xl border border-sidebar-border/70 dark:border-sidebar-border overflow-hidden"
            >
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="border-b border-sidebar-border/70 bg-muted/50">
                            <tr>
                                <th
                                    class="h-10 px-4 text-left font-medium align-middle"
                                >
                                    Name
                                </th>
                                <th
                                    class="h-10 px-4 text-left font-medium align-middle"
                                >
                                    Email
                                </th>
                                <th
                                    class="h-10 px-4 text-left font-medium align-middle"
                                >
                                    Group
                                </th>
                                <th
                                    class="h-10 px-4 text-right font-medium align-middle"
                                >
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="user in users.data"
                                :key="user.id"
                                class="border-b border-sidebar-border/50 last:border-0"
                            >
                                <td class="px-4 py-3 font-medium">
                                    {{ user.name }}
                                </td>
                                <td class="px-4 py-3">{{ user.email }}</td>
                                <td class="px-4 py-3">
                                    <Badge variant="secondary">
                                        {{ formatGroup(user.group) }}
                                    </Badge>
                                </td>
                                <td class="px-4 py-3 text-right space-x-2">
                                    <Button variant="outline" size="sm" as-child>
                                        <Link :href="user.editUrl">Edit</Link>
                                    </Button>
                                    <Button
                                        variant="destructive"
                                        size="sm"
                                        @click="destroy(user)"
                                    >
                                        Delete
                                    </Button>
                                </td>
                            </tr>
                            <tr v-if="!users.data.length">
                                <td
                                    colspan="4"
                                    class="px-4 py-8 text-center text-muted-foreground"
                                >
                                    <div class="flex flex-col items-center gap-2">
                                        <Users class="h-10 w-10" />
                                        <p>No users yet.</p>
                                        <Button as-child>
                                            <Link :href="createUrl"
                                                >Create your first user</Link
                                            >
                                        </Button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <Pagination
                :pagination="{
                    from: users.from ?? 0,
                    to: users.to ?? 0,
                    total: users.total,
                    current_page: users.current_page,
                    last_page: users.last_page,
                    per_page: users.per_page,
                }"
            />
        </div>
    </AppLayout>
</template>
