<script setup lang="ts">
import { Loader2, Users } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'

import api from '@/services/api'

const { t } = useI18n()

interface User {
  id: number
  username: string
  email: string
  status: string
  created_at: string
  last_login_at: string | null
}

const loading = ref(true)
const users = ref<User[]>([])

onMounted(async () => {
  try {
    const data = await api.get<User[]>('/agent/users')
    users.value = data || []
  }
  catch (error) {
    console.error('Load users failed:', error)
  }
  finally {
    loading.value = false
  }
})

function formatDate(dateStr: string | null) {
  if (!dateStr)
    return '-'
  return new Date(dateStr).toLocaleDateString()
}
</script>

<template>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold">
        {{ t('agent.users.title') }}
      </h1>
      <p class="text-muted-foreground">
        {{ t('agent.users.description') }}
      </p>
    </div>

    <UiCard>
      <UiCardContent class="p-0">
        <div v-if="loading" class="flex items-center justify-center py-12">
          <Loader2 class="size-8 animate-spin text-muted-foreground" />
        </div>

        <div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
          <Users class="size-16 mx-auto mb-4 opacity-30" />
          <p>{{ t('agent.users.noUsers') }}</p>
        </div>

        <div v-else class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-muted/50">
              <tr>
                <th class="px-4 py-3 text-left text-sm font-medium">
                  {{ t('agent.users.username') }}
                </th>
                <th class="px-4 py-3 text-left text-sm font-medium">
                  {{ t('agent.users.email') }}
                </th>
                <th class="px-4 py-3 text-left text-sm font-medium">
                  {{ t('agent.users.status') }}
                </th>
                <th class="px-4 py-3 text-left text-sm font-medium">
                  {{ t('agent.users.registerTime') }}
                </th>
                <th class="px-4 py-3 text-left text-sm font-medium">
                  {{ t('agent.users.lastLogin') }}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y">
              <tr v-for="user in users" :key="user.id" class="hover:bg-muted/30">
                <td class="px-4 py-3 font-medium">
                  {{ user.username }}
                </td>
                <td class="px-4 py-3 text-sm text-muted-foreground">
                  {{ user.email || '-' }}
                </td>
                <td class="px-4 py-3">
                  <UiBadge
                    :class="user.status === 'active' ? 'bg-green-500/10 text-green-500' : ''"
                    variant="outline"
                  >
                    {{ user.status === 'active' ? t('agent.users.active') : user.status }}
                  </UiBadge>
                </td>
                <td class="px-4 py-3 text-sm text-muted-foreground">
                  {{ formatDate(user.created_at) }}
                </td>
                <td class="px-4 py-3 text-sm text-muted-foreground">
                  {{ formatDate(user.last_login_at) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </UiCardContent>
    </UiCard>
  </div>
</template>
