<script setup>
import { ref, onMounted } from 'vue';
import AdminAppLayout from "../../../../resources/js/layouts/AdminAppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
import { toast } from "vue3-toastify";

const { request } = useAjax()

function openTenant(slug) {
    window.location.href = '/admin/tenants/' + slug
}

const tenants = ref([])
const showCreate = ref(false)
const createForm = ref({
    name: '',
    slug: '',
    url: '',
})

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

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

async function createTenant() {
    const response = await request('/api/v1/admin/tenants/create', {
        method: 'POST',
        body: createForm.value,
    })

    if (response && response.status === 'success') {
        toast.success(response.message)
        showCreate.value = false
        createForm.value = { name: '', slug: '', url: '' }
        await loadTenants()
    } else {
        toast.error(response?.message ?? 'Fehler beim Anlegen')
    }
}
</script>

<template>
    <AdminAppLayout title="Stämme">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <table class="tenant-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Slug</th>
                        <th>URL</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="tenant in tenants" :key="tenant.slug" class="tenant-row" @click="openTenant(tenant.slug)">
                        <td>{{ tenant.name }}</td>
                        <td>{{ tenant.slug }}</td>
                        <td>{{ tenant.url }}</td>
                        <td>
                            <span :class="tenant.is_active_local_group ? 'badge-active' : 'badge-inactive'">
                                {{ tenant.is_active_local_group ? 'Aktiv' : 'Inaktiv' }}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div style="margin-top: 20px;">
                <button v-if="!showCreate" class="btn-create" @click="showCreate = true">Neuen Stamm anlegen</button>

                <div v-if="showCreate" class="create-form">
                    <h3>Neuen Stamm anlegen</h3>
                    <table class="form-table">
                        <tr>
                            <th>Name</th>
                            <td><input type="text" v-model="createForm.name" class="form-input" /></td>
                        </tr>
                        <tr>
                            <th>Slug</th>
                            <td><input type="text" v-model="createForm.slug" class="form-input" /></td>
                        </tr>
                        <tr>
                            <th>URL</th>
                            <td><input type="text" v-model="createForm.url" class="form-input" /></td>
                        </tr>
                    </table>
                    <div class="btn-group">
                        <button class="btn-save" @click="createTenant">Anlegen</button>
                        <button class="btn-cancel" @click="showCreate = false">Abbrechen</button>
                    </div>
                </div>
            </div>
        </shadowed-box>
    </AdminAppLayout>
</template>

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

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

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

.tenant-row {
    cursor: pointer;
}

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

.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;
}

.create-form {
    margin-top: 15px;
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #f9fafb;
}

.create-form h3 {
    margin: 0 0 15px 0;
    color: #374151;
}

.form-table {
    width: 100%;
    border-collapse: collapse;
}

.form-table th {
    text-align: left;
    padding: 8px 12px;
    width: 100px;
    color: #374151;
}

.form-table td {
    padding: 8px 12px;
}

.form-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.btn-create {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    background-color: #1d4899;
    color: #ffffff;
}

.btn-create:hover {
    background-color: #163a7a;
}

.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-save, .btn-cancel {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}

.btn-save {
    background-color: #16a34a;
    color: #ffffff;
}

.btn-save:hover {
    background-color: #15803d;
}

.btn-cancel {
    background-color: #e5e7eb;
    color: #374151;
}

.btn-cancel:hover {
    background-color: #d1d5db;
}
</style>
