<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Plus, Search } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import Pagination from '@/components/Pagination.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Group {
    id: number;
    name: string;
}

interface UserRow {
    id: number;
    name: string;
    email: string;
    username: string | null;
    credit: number;
    status: string;
    groups: Group[];
    created_at: string;
}

interface PaginatedUsers {
    data: UserRow[];
    from: number;
    to: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
}

const props = defineProps<{
    users: PaginatedUsers;
    filters: { search?: string };
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Pengguna', href: '/users' },
        ] as BreadcrumbItem[],
    },
});

const groupColor: Record<string, string> = {
    admin: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
    developer: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
    members: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
};

const statusLabel: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
    active: { label: 'Aktif', variant: 'default' },
    suspended: { label: 'Diskors', variant: 'destructive' },
    deactivated: { label: 'Dinonaktifkan', variant: 'secondary' },
};
</script>

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

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Pengguna" description="Kelola akun pengguna & keanggotaan grup" />
            <Button as-child>
                <Link href="/users/create">
                    <Plus class="size-4" />
                    Tambah Pengguna
                </Link>
            </Button>
        </div>

        <div class="w-full max-w-sm">
            <form method="GET" action="/users">
                <div class="relative">
                    <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <Input
                        name="search"
                        :default-value="props.filters.search ?? ''"
                        placeholder="Cari nama, email, username…"
                        class="pl-9"
                    />
                </div>
            </form>
        </div>

        <div class="overflow-hidden rounded-xl border">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-left text-xs uppercase text-muted-foreground">
                    <tr>
                        <th class="px-4 py-3 font-medium">Nama</th>
                        <th class="px-4 py-3 font-medium">Email</th>
                        <th class="px-4 py-3 font-medium">Grup</th>
                        <th class="px-4 py-3 font-medium text-right">Kredit</th>
                        <th class="px-4 py-3 font-medium text-center">Status</th>
                        <th class="px-4 py-3 font-medium text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="user in props.users.data" :key="user.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 font-medium">
                            {{ user.name }}
                            <div v-if="user.username" class="text-xs text-muted-foreground">@{{ user.username }}</div>
                        </td>
                        <td class="px-4 py-3 text-muted-foreground">{{ user.email }}</td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1">
                                <Badge
                                    v-for="g in user.groups"
                                    :key="g.id"
                                    variant="secondary"
                                    :class="groupColor[g.name] ?? ''"
                                >
                                    {{ g.name }}
                                </Badge>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ user.credit.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-center">
                            <Badge :variant="statusLabel[user.status]?.variant ?? 'outline'">
                                {{ statusLabel[user.status]?.label ?? user.status }}
                            </Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex justify-end gap-1">
                                <Button as-child variant="ghost" size="sm">
                                    <Link :href="`/users/${user.id}/edit`">Edit</Link>
                                </Button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="props.users.data.length === 0">
                        <td colspan="6" class="px-4 py-8 text-center text-muted-foreground">
                            Tidak ada pengguna ditemukan.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Pagination
            :links="props.users.links"
            :from="props.users.from"
            :to="props.users.to"
            :total="props.users.total"
        />
    </div>
</template>
