<script lang="ts" setup>
import { computed } from 'vue'
import ServiceTabLayout from '@/Components/Panel/ServiceTabLayout.vue'
import type { Service } from '@/types'

interface SubUser {
  id: string
  username: string
  email: string
  permissions: string[]
  created_at: string
}

interface Props {
  service: Service
  subUsers: SubUser[]
}

const props = defineProps<Props>()

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/game-panel` },
  { label: 'Console', icon: 'tabler-terminal-2', to: `/services/${props.service.id}/game-panel/console` },
  { label: 'Files', icon: 'tabler-folder', to: `/services/${props.service.id}/game-panel/files` },
  { label: 'Databases', icon: 'tabler-database', to: `/services/${props.service.id}/game-panel/databases` },
  { label: 'Backups', icon: 'tabler-archive', to: `/services/${props.service.id}/game-panel/backups` },
  { label: 'Schedules', icon: 'tabler-clock', to: `/services/${props.service.id}/game-panel/schedules` },
  { label: 'Startup', icon: 'tabler-rocket', to: `/services/${props.service.id}/game-panel/startup` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/game-panel/settings` },
  { label: 'Sub-Users', icon: 'tabler-users', to: `/services/${props.service.id}/game-panel/sub-users` },
])
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/game-panel/sub-users`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-users" color="primary" />
        Sub-Users
      </VCardTitle>
      <VCardText>
        <VTable v-if="subUsers.length > 0" hover>
          <thead>
            <tr>
              <th class="font-weight-bold">Email</th>
              <th class="font-weight-bold">Permissions</th>
              <th class="font-weight-bold">Added</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in subUsers" :key="user.id">
              <td class="font-weight-medium">{{ user.email }}</td>
              <td>
                <VChip
                  v-for="perm in user.permissions.slice(0, 3)"
                  :key="perm"
                  size="x-small"
                  class="me-1 text-capitalize"
                >
                  {{ perm.replace(/_/g, ' ') }}
                </VChip>
                <VChip v-if="user.permissions.length > 3" size="x-small" color="primary">
                  +{{ user.permissions.length - 3 }} more
                </VChip>
              </td>
              <td>{{ new Date(user.created_at).toLocaleDateString() }}</td>
            </tr>
          </tbody>
        </VTable>

        <div v-else class="text-center pa-8 text-medium-emphasis">
          <VIcon icon="tabler-users-minus" size="48" class="mb-2" />
          <div class="text-body-1 mb-2">No sub-users</div>
          <div class="text-body-2">Sub-user management requires Pterodactyl API configuration.</div>
        </div>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
