<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { Plus, Edit2, Trash2 } from 'lucide-vue-next';

defineProps<{
    users: Array<{
        id: number;
        name: string;
        email: string;
        role: string;
        created_at: string;
    }>;
}>();

const form = useForm({});

const deleteUser = (id: number) => {
    if (confirm('Are you sure you want to delete this user?')) {
        form.delete(`/admin/users/${id}`, {
            preserveScroll: true,
        });
    }
};
</script>

<template>
    <Head title="Users" />
    <div class="max-w-6xl mx-auto space-y-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">User Management</h1>
                <p class="text-gray-400 text-sm">Manage admin and moderator accounts</p>
            </div>
            <Link
                href="/admin/users/create"
                class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300"
            >
                <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                <Plus class="w-5 h-5 relative z-10" />
                <span class="relative z-10">Add User</span>
            </Link>
        </div>

        <div class="bg-[#0f172a] rounded-2xl border border-white/5 overflow-hidden shadow-xl">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-black/20 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
                            <th class="p-4 font-bold">ID</th>
                            <th class="p-4 font-bold">Name</th>
                            <th class="p-4 font-bold">Email</th>
                            <th class="p-4 font-bold">Role</th>
                            <th class="p-4 font-bold text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        <tr v-for="user in users" :key="user.id" class="hover:bg-white/[0.02] transition-colors">
                            <td class="p-4 text-gray-500 font-mono text-sm">#{{ user.id }}</td>
                            <td class="p-4 font-bold text-white">{{ user.name }}</td>
                            <td class="p-4 text-gray-400">{{ user.email }}</td>
                            <td class="p-4">
                                <span
                                    :class="[
                                        'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
                                        user.role === 'admin' ? 'bg-red-500/20 text-red-400 border border-red-500/20' :
                                        user.role === 'mod' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/20' :
                                        'bg-gray-500/20 text-gray-400 border border-gray-500/20'
                                    ]"
                                >
                                    {{ user.role }}
                                </span>
                            </td>
                            <td class="p-4 text-right space-x-2">
                                <Link
                                    :href="`/admin/users/${user.id}/edit`"
                                    class="inline-flex p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
                                    title="Edit"
                                >
                                    <Edit2 class="w-4 h-4" />
                                </Link>
                                <button
                                    @click="deleteUser(user.id)"
                                    class="inline-flex p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
                                    title="Delete"
                                >
                                    <Trash2 class="w-4 h-4" />
                                </button>
                            </td>
                        </tr>
                        <tr v-if="users.length === 0">
                            <td colspan="5" class="p-8 text-center text-gray-500">
                                No users found.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
