<script lang="ts" setup>
import { computed } from 'vue'
import { Link } from '@inertiajs/vue3'
import ServiceTabLayout from '@/Components/Panel/ServiceTabLayout.vue'
import ActivityLog from '@/Components/Panel/ActivityLog.vue'
import { resolveServiceStatusColor } from '@/utils/resolvers'
import type { Service } from '@/types'

interface ActivityEntry {
  action: string
  timestamp: string
  details: string
}

interface Props {
  service: Service
  recentActivity: ActivityEntry[]
}

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` },
])

const connectionString = computed<string | null>(() => {
  const info = props.service.provisioning_info
  if (!info) return null
  const port = info.port ?? info.game_port
  if (props.service.ipv4_address && port) {
    return `${props.service.ipv4_address}:${port}`
  }
  return props.service.ipv4_address
})
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/game-panel`"
  >
    <VRow>
      <VCol cols="12" lg="8">
        <!-- Status -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-device-gamepad-2" color="primary" />
            Server Overview
          </VCardTitle>
          <VCardText>
            <VRow>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">STATUS</div>
                <VChip
                  :color="resolveServiceStatusColor(service.status)"
                  class="text-capitalize"
                >
                  <VIcon icon="tabler-circle-filled" size="8" start />
                  {{ service.status }}
                </VChip>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">CONNECTION</div>
                <code v-if="connectionString">{{ connectionString }}</code>
                <span v-else class="text-medium-emphasis">Not available</span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">GAME TYPE</div>
                <span class="font-weight-medium text-capitalize">
                  {{ service.provisioning_info?.game_type ?? service.plan?.name ?? '--' }}
                </span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">PLAYER SLOTS</div>
                <span class="font-weight-medium">
                  {{ service.provisioning_info?.slots ?? service.provisioning_info?.max_players ?? '--' }}
                </span>
              </VCol>
            </VRow>
          </VCardText>
        </VCard>

        <!-- Quick Actions -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-bolt" color="primary" />
            Quick Actions
          </VCardTitle>
          <VCardText>
            <div class="d-flex flex-wrap gap-3">
              <Link :href="`/services/${service.id}/game-panel/console`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-terminal-2" start />
                  Console
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/game-panel/files`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-folder" start />
                  File Manager
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/game-panel/backups`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-archive" start />
                  Backups
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/game-panel/settings`" class="text-decoration-none">
                <VBtn color="primary" variant="tonal" class="text-none">
                  <VIcon icon="tabler-settings" start />
                  Settings
                </VBtn>
              </Link>
            </div>
          </VCardText>
        </VCard>
      </VCol>

      <VCol cols="12" lg="4">
        <VCard elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-history" color="primary" />
            Recent Activity
          </VCardTitle>
          <VCardText>
            <ActivityLog :activities="recentActivity" />
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </ServiceTabLayout>
</template>
