<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    structures: Array,
    current_structure_id: Number
});

const switchTo = (id) => {
    router.post(route('superadmin.switch', id));
};

const resetSession = () => {
    router.post(route('superadmin.reset'));
};

const deleteStructure = (id) => {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette structure (Tenant) et toutes ses données associées ?')) {
        router.delete(route('superadmin.destroy', id));
    }
};
</script>

<template>
    <Head title="Super Administration SaaS" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                    Super Administration SaaS
                </h2>
                <div class="flex space-x-4">
                    <Link :href="route('superadmin.create')" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700">
                        + Créer une Structure
                    </Link>
                    <button v-if="current_structure_id" @click="resetSession" class="px-4 py-2 bg-red-600 text-white rounded-md text-sm hover:bg-red-700">
                        Arrêter la simulation (Vue Globale)
                    </button>
                </div>
            </div>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900 dark:text-gray-100">
                        <h3 class="text-lg font-medium mb-4">Gestion des Structures (Tenants)</h3>

                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                                        <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500">Nom</th>
                                        <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500">Slug (URL)</th>
                                        <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500">Utilisateurs</th>
                                        <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500">Statut</th>
                                        <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="structure in structures" :key="structure.id" class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/30">
                                        <td class="px-6 py-4 font-medium">{{ structure.name }}</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">{{ structure.slug }}</td>
                                        <td class="px-6 py-4">{{ structure.users_count }}</td>
                                        <td class="px-6 py-4">
                                            <span v-if="structure.is_active" class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Actif</span>
                                            <span v-else class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Inactif</span>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="flex items-center space-x-3">
                                                <button 
                                                    v-if="current_structure_id !== structure.id"
                                                    @click="switchTo(structure.id)" 
                                                    title="Simuler (Impersonate)"
                                                    class="text-blue-600 hover:text-blue-900 text-sm font-medium">
                                                    Gérer ce SaaS
                                                </button>
                                                <span v-else class="text-green-600 text-sm font-bold w-[100px]">✓ En cours</span>
                                                
                                                <span class="text-gray-300">|</span>

                                                <Link :href="route('superadmin.edit', structure.id)" class="text-indigo-600 hover:text-indigo-900">
                                                    Modifier
                                                </Link>
                                                
                                                <button @click="deleteStructure(structure.id)" class="text-red-600 hover:text-red-900">
                                                    Supprimer
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
