<script setup>
import { ref, onMounted } from 'vue';
import AdminAppLayout from "../../../../resources/js/layouts/AdminAppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import FullScreenModal from "../../../Views/Components/FullScreenModal.vue";
import UserDetail from "./Partials/UserDetail.vue";
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";

const { request } = useAjax()

const props = defineProps({
    isLvTenant: Boolean,
})

const users = ref([])
const selectedUserId = ref(null)
const userDetail = ref(null)

onMounted(async () => {
    await loadUsers()
})

async function loadUsers() {
    const response = await fetch('/api/v1/admin/users/list', {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
    })
    const data = await response.json()
    users.value = data.users
}

async function selectUser(userId) {
    if (selectedUserId.value === userId) {
        selectedUserId.value = null
        userDetail.value = null
        return
    }

    selectedUserId.value = userId
    const response = await fetch('/api/v1/admin/users/' + userId, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        credentials: 'same-origin',
    })
    userDetail.value = await response.json()
}

function onUserUpdated() {
    loadUsers()
    if (selectedUserId.value) {
        selectUser(selectedUserId.value)
    }
}

function onDetailClosed() {
    selectedUserId.value = null
    userDetail.value = null
    loadUsers()
}
</script>

<template>
    <AdminAppLayout title="Benutzer*innen">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <table class="user-table">
                <thead>
                    <tr>
                        <th>Nachname</th>
                        <th>Vorname</th>
                        <th>Pfadiname</th>
                        <th v-if="props.isLvTenant">Stamm</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users"
                        :key="user.id"
                        :class="['user-row', { 'user-row-selected': selectedUserId === user.id }]"
                        @click="selectUser(user.id)">
                        <td>{{ user.lastname }}</td>
                        <td>{{ user.firstname }}</td>
                        <td>{{ user.nickname }}</td>
                        <td v-if="props.isLvTenant">{{ user.local_group_name }}</td>
                        <td>
                            <span :class="user.active ? 'badge-active' : 'badge-inactive'">
                                {{ user.active ? 'Aktiv' : 'Inaktiv' }}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>

        </shadowed-box>

        <FullScreenModal :show="userDetail !== null" @close="onDetailClosed">
            <UserDetail
                v-if="userDetail"
                :data="userDetail"
                @updated="onUserUpdated"
                @closed="onDetailClosed"
            />
        </FullScreenModal>
    </AdminAppLayout>
</template>

<style scoped>
.user-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}

.user-table thead th {
    text-align: left;
    padding: 10px 16px;
    background-color: #f9fafb;
    color: #374151;
    font-weight: bold;
    border-bottom: 2px solid #d1d5db;
}

.user-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-row {
    cursor: pointer;
}

.user-row:hover {
    background-color: #f3f4f6;
}

.user-row-selected {
    background-color: #eff6ff;
}

.badge-active {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #166534;
    background-color: #dcfce7;
    border: 1px solid #22c55e;
}

.badge-inactive {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #ef4444;
}
</style>
