<script setup>
import ResellerLayout from '@/Layouts/ResellerLayout.vue'
import { Link } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'

const props = defineProps({ accounts: Array })

const search = ref('')

const filtered = computed(() => {
    const q = search.value.toLowerCase()
    if (!q) return props.accounts
    return props.accounts.filter(
        a => a.username.toLowerCase().includes(q)
            || (a.primary_domain || '').toLowerCase().includes(q)
            || (a.email || '').toLowerCase().includes(q),
    )
})

const statusColor = {
    active:     'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-300',
    suspended:  'bg-amber-100 text-amber-700 dark:bg-amber-900/20 dark:text-amber-300',
    pending:    'bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300',
    terminated: 'bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-300',
}

const fmtBytes = (bytes) => {
    if (!bytes) return '0 MB'
    const gb = bytes / 1024 / 1024 / 1024
    return gb >= 1 ? gb.toFixed(2) + ' GB' : (bytes / 1024 / 1024).toFixed(0) + ' MB'
}
</script>

<template>
    <ResellerLayout>
        <template #header>Müşteri Hesapları</template>

        <!-- Arama -->
        <div class="mb-4 flex items-center gap-3">
            <div class="relative flex-1 max-w-sm">
                <MagnifyingGlassIcon class="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
                <input
                    v-model="search"
                    type="text"
                    placeholder="Kullanıcı / alan adı ara…"
                    class="w-full rounded-lg border border-slate-300 py-2 pl-9 pr-3 text-sm focus:border-blue-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"
                />
            </div>
            <span class="text-sm text-slate-500">{{ filtered.length }} hesap</span>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
            <div v-if="filtered.length === 0" class="py-12 text-center text-sm text-slate-400">
                Hesap bulunamadı.
            </div>
            <table v-else class="w-full text-sm">
                <thead>
                    <tr class="text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                        <th class="px-5 py-3">Kullanıcı</th>
                        <th class="px-5 py-3 hidden md:table-cell">Alan Adı</th>
                        <th class="px-5 py-3 hidden sm:table-cell">Paket</th>
                        <th class="px-5 py-3 hidden lg:table-cell">Disk</th>
                        <th class="px-5 py-3">Durum</th>
                        <th class="px-5 py-3 hidden xl:table-cell">Oluşturulma</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    <tr
                        v-for="acc in filtered"
                        :key="acc.id"
                        class="hover:bg-slate-50 dark:hover:bg-slate-800/50"
                    >
                        <td class="px-5 py-3">
                            <div class="font-mono text-xs font-medium text-slate-900 dark:text-slate-100">{{ acc.username }}</div>
                            <div class="text-xs text-slate-400">{{ acc.email }}</div>
                        </td>
                        <td class="px-5 py-3 hidden md:table-cell text-slate-600 dark:text-slate-400">
                            {{ acc.primary_domain || '—' }}
                        </td>
                        <td class="px-5 py-3 hidden sm:table-cell text-slate-600 dark:text-slate-400">
                            {{ acc.package_name || '—' }}
                        </td>
                        <td class="px-5 py-3 hidden lg:table-cell">
                            <div class="text-xs text-slate-600 dark:text-slate-400">{{ fmtBytes(acc.disk_usage_bytes) }}</div>
                            <div v-if="acc.disk_percent !== null" class="mt-1 h-1.5 w-20 rounded-full bg-slate-200 dark:bg-slate-700">
                                <div
                                    class="h-1.5 rounded-full"
                                    :class="acc.disk_percent > 90 ? 'bg-red-500' : acc.disk_percent > 70 ? 'bg-amber-400' : 'bg-emerald-500'"
                                    :style="{ width: Math.min(acc.disk_percent, 100) + '%' }"
                                />
                            </div>
                        </td>
                        <td class="px-5 py-3">
                            <span :class="['inline-flex rounded-full px-2 py-0.5 text-xs font-medium', statusColor[acc.status] || 'bg-slate-100 text-slate-600']">
                                {{ acc.status_label }}
                            </span>
                        </td>
                        <td class="px-5 py-3 hidden xl:table-cell text-slate-500 text-xs">{{ acc.created_at }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </ResellerLayout>
</template>
