<script setup lang="ts">
import { ref } from 'vue';
import { Head } from "@inertiajs/vue3";
import AppLayout from "@/layouts/AppLayout.vue";
import UserFormModal from '@/components/UserFormModal.vue';
import { router } from '@inertiajs/vue3';

const props = defineProps<{
    users: { id: number; name: string; email: string; role: string, city: string, is_online: boolean; }[];
}>();

const users = ref(props.users);
const modalOpen = ref(false);
const selectedUser = ref(null);

const openCreate = () => {
    selectedUser.value = null;
    modalOpen.value = true;
};

const openEdit = (user) => {
    selectedUser.value = { ...user };
    modalOpen.value = true;
};

const deleteUser = (id: number) => {
    if (confirm('Удалить пользователя?')) {
        router.delete(`/users/${id}`, {
            onSuccess: () => {
                users.value = users.value.filter(u => u.id !== id);
            },
        });
    }
};

const refresh = () => {
    router.reload({
        only: ['users'],
        onSuccess: (page) => {
            users.value = page.props.users;
        },
    });
};

const roleLabels: Record<string, string> = {
    admin: 'Администратор',
    engineer: 'Инженер',
    installer: 'Монтажник',
    storekeeper: 'Кладовщик', // если нужно
};
</script>

<template>
    <Head title="Пользователи" />

    <AppLayout :breadcrumbs="[{ title: 'Пользователи', href: '/users' }]">
        <div class="p-4">
            <div class="flex justify-between items-center mb-4">
                <h1 class="text-2xl font-bold">Пользователи</h1>
                <button
                    @click="openCreate"
                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3"
                >
                    Добавить
                </button>
            </div>

            <table class="w-full text-sm text-left text-gray-700">
                <thead class="text-xs text-gray-500 uppercase bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-4 py-3">Имя</th>
                    <th class="px-4 py-3">Email</th>
                    <th class="px-4 py-3">Роль</th>
                    <th class="px-4 py-3">Статус</th>
                    <th class="px-4 py-3">Действия</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                <tr v-for="user in users" :key="user.id" class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">{{ user.name }}</td>
                    <td class="px-4 py-3">{{ user.email }}</td>
                    <td class="px-4 py-3 capitalize">{{ roleLabels[user.role] ?? user.role }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <span
                                class="w-2.5 h-2.5 rounded-full"
                                :class="user.is_online ? 'bg-green-500' : 'bg-gray-400'"
                            />
                            <span
                                class="text-sm font-medium"
                                :class="user.is_online ? 'text-green-600' : 'text-gray-500'"
                            >
                              {{ user.is_online ? 'Онлайн' : 'Офлайн' }}
                            </span>
                        </div>
                    </td>
                    <td class="px-4 py-3 space-x-2">
                        <button class="text-blue-600 hover:underline" @click="openEdit(user)">Ред.</button>
                        <button class="text-red-600 hover:underline" @click="deleteUser(user.id)">Удалить</button>
                    </td>
                </tr>
                </tbody>
            </table>

            <!-- Модалка -->
            <UserFormModal
                :open="modalOpen"
                :user="selectedUser"
                @close="modalOpen = false"
                @saved="refresh"
            />
        </div>
    </AppLayout>
</template>

<style scoped>

</style>
