<script setup>
import { Head, Link, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import AppCard from '@/Components/ui/AppCard.vue';
import AppTable from '@/Components/ui/AppTable.vue';
import StatusBadge from '@/Components/ui/StatusBadge.vue';

const props = defineProps({
    vendors: Object,
    counts: Object,
});

const testConnection = (vendorId) => {
    router.post(route('admin.vendors.test-connection', vendorId), {}, { preserveScroll: true });
};
</script>

<template>
    <Head title="Vendors" />

    <AdminLayout>
        <template #header>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <h2 class="text-xl font-semibold text-gray-800">Vendors</h2>
                    <p class="mt-1 text-sm text-gray-500">
                        No vendor count cap is enforced. You can add as many vendors as needed.
                    </p>
                </div>
                <Link
                    :href="route('admin.vendors.create')"
                    class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white hover:bg-gray-800"
                >
                    Add Vendor
                </Link>
            </div>
        </template>

        <div class="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
            <div class="grid gap-4 md:grid-cols-4">
                <AppCard title="MSORG" :subtitle="`${counts.msorg_used || 0} configured`" />
                <AppCard title="VTBox" :subtitle="`${counts.vtbox_used || 0} configured`" />
                <AppCard title="SMEPlug" :subtitle="`${counts.smeplug_used || 0} configured`" />
                <AppCard title="VTpass" :subtitle="`${counts.vtpass_used || 0} configured`" />
            </div>

            <AppTable>
                <thead class="bg-gray-50">
                    <tr class="text-left text-xs font-semibold uppercase tracking-wide text-gray-500">
                        <th class="px-4 py-3">Vendor</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Timeout</th>
                        <th class="px-4 py-3">Balance</th>
                        <th class="px-4 py-3">Health</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white text-sm">
                    <tr v-for="vendor in vendors.data" :key="vendor.id">
                        <td class="px-4 py-3">
                            <div class="font-medium text-gray-900">{{ vendor.name }}</div>
                            <div class="text-xs text-gray-500">{{ vendor.base_url || (vendor.type === 'smeplug' ? 'Default SMEPlug URL' : 'No base URL') }}</div>
                        </td>
                        <td class="px-4 py-3 capitalize">{{ vendor.type }}</td>
                        <td class="px-4 py-3"><StatusBadge :status="vendor.status" /></td>
                        <td class="px-4 py-3">{{ vendor.timeout_seconds }}s</td>
                        <td class="px-4 py-3">
                            <div class="text-sm font-medium text-gray-900">{{ vendor.last_balance_display || 'Not tested yet' }}</div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="text-xs text-gray-600">
                                <div>Latency: {{ vendor.last_latency_ms ?? '-' }}ms</div>
                                <div>Last check: {{ vendor.last_checked_at ?? '-' }}</div>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex justify-end gap-2">
                                <button
                                    type="button"
                                    class="rounded border border-gray-300 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50"
                                    @click="testConnection(vendor.id)"
                                >
                                    Test
                                </button>
                                <Link
                                    :href="route('admin.vendors.edit', vendor.id)"
                                    class="rounded border border-gray-300 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50"
                                >
                                    Edit
                                </Link>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </AppTable>
        </div>
    </AdminLayout>
</template>
