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

interface StartupVariable {
  name: string
  description: string
  env_variable: string
  default_value: string
  server_value: string
  is_editable: boolean
}

interface StartupConfig {
  startup_command: string
  variables: StartupVariable[]
}

interface Props {
  service: Service
  startupConfig: StartupConfig
}

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/startup`"
  >
    <VCard class="mb-6" elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-rocket" color="primary" />
        Startup Configuration
      </VCardTitle>
      <VCardText>
        <div class="text-subtitle-2 text-medium-emphasis mb-2">STARTUP COMMAND</div>
        <VTextField
          :model-value="startupConfig.startup_command"
          variant="outlined"
          readonly
          class="mb-6"
          persistent-hint
          hint="The startup command is configured by your server template"
        />

        <div v-if="startupConfig.variables.length > 0">
          <div class="text-subtitle-2 text-medium-emphasis mb-4">STARTUP VARIABLES</div>
          <VRow>
            <VCol
              v-for="variable in startupConfig.variables"
              :key="variable.env_variable"
              cols="12"
              md="6"
            >
              <VTextField
                :model-value="variable.server_value || variable.default_value"
                :label="variable.name"
                :hint="variable.description"
                :readonly="!variable.is_editable"
                variant="outlined"
                persistent-hint
              />
            </VCol>
          </VRow>
        </div>

        <VAlert v-else type="info" variant="tonal" class="mt-4">
          Startup configuration requires Pterodactyl API configuration.
        </VAlert>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
