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

interface Tab {
  label: string
  icon: string
  to: string
}

interface Props {
  service: Service
  tabs: Tab[]
  currentTab: string
}

defineOptions({ layout: AccountLayout })

const props = defineProps<Props>()

const serviceLabel = computed<string>(() => {
  return props.service.hostname || props.service.domain || `Service #${props.service.id}`
})

const activeTabIndex = computed<number>(() => {
  return props.tabs.findIndex(t => t.to === props.currentTab)
})
</script>

<template>
  <div>
    <!-- Breadcrumb -->
    <div class="mb-4">
      <VBreadcrumbs
        :items="[
          { title: 'Services', to: '/services', disabled: false },
          { title: serviceLabel, to: `/services/${service.id}`, disabled: false },
          { title: tabs.find(t => t.to === currentTab)?.label ?? 'Panel', disabled: true },
        ]"
        class="pa-0"
      >
        <template #divider>
          <VIcon icon="tabler-chevron-right" size="16" />
        </template>
      </VBreadcrumbs>
    </div>

    <!-- Service Header -->
    <VCard class="mb-6 panel-header" elevation="0">
      <VCardText class="d-flex flex-wrap align-center gap-4 pa-4">
        <VAvatar color="primary" variant="flat" size="48">
          <VIcon icon="tabler-server" size="24" color="white" />
        </VAvatar>
        <div class="flex-grow-1">
          <div class="d-flex flex-wrap align-center gap-3 mb-1">
            <h2 class="text-h5 font-weight-bold">
              {{ serviceLabel }}
            </h2>
            <VChip
              :color="resolveServiceStatusColor(service.status)"
              size="small"
              class="text-capitalize"
            >
              <VIcon icon="tabler-circle-filled" size="8" start />
              {{ service.status }}
            </VChip>
          </div>
          <div class="d-flex flex-wrap gap-4 text-body-2 text-medium-emphasis">
            <span v-if="service.ipv4_address">
              <VIcon icon="tabler-network" size="16" class="me-1" />
              {{ service.ipv4_address }}
            </span>
            <span v-if="service.hostname">
              <VIcon icon="tabler-world" size="16" class="me-1" />
              {{ service.hostname }}
            </span>
          </div>
        </div>
      </VCardText>
    </VCard>

    <!-- Tab Navigation -->
    <VCard elevation="0" class="mb-6">
      <VTabs
        :model-value="activeTabIndex >= 0 ? activeTabIndex : 0"
        color="primary"
        show-arrows
      >
        <Link
          v-for="tab in tabs"
          :key="tab.to"
          :href="tab.to"
          class="text-decoration-none"
          preserve-state
        >
          <VTab :value="tabs.indexOf(tab)">
            <VIcon :icon="tab.icon" start size="20" />
            {{ tab.label }}
          </VTab>
        </Link>
      </VTabs>
    </VCard>

    <!-- Tab Content -->
    <slot />
  </div>
</template>

<style scoped>
.panel-header {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.03) 0%, rgba(var(--v-theme-surface), 1) 100%);
}
</style>
