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

interface Props {
  service: Service
}

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/settings`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-settings" color="primary" />
        Server Settings
      </VCardTitle>
      <VCardText>
        <VRow>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="service.hostname ?? ''"
              label="Server Name"
              variant="outlined"
              readonly
              hint="Server name is managed by the platform"
              persistent-hint
            />
          </VCol>
          <VCol cols="12" md="6">
            <VTextField
              :model-value="service.plan?.name ?? '--'"
              label="Current Plan"
              variant="outlined"
              readonly
            />
          </VCol>
        </VRow>

        <VAlert type="info" variant="tonal" class="mt-4">
          Server settings management requires Pterodactyl API configuration.
          For advanced settings, use the Pterodactyl panel directly.
        </VAlert>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
