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

interface Usage {
  disk_used: number
  disk_limit: number
  bandwidth_used: number
  bandwidth_limit: number
  email_accounts: number
  databases: number
  domains: number
  subdomains: number
}

interface Props {
  service: Service
  usage: Usage
}

const props = defineProps<Props>()

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/hosting-panel` },
  { label: 'Files', icon: 'tabler-folder', to: `/services/${props.service.id}/hosting-panel/files` },
  { label: 'Databases', icon: 'tabler-database', to: `/services/${props.service.id}/hosting-panel/databases` },
  { label: 'Email', icon: 'tabler-mail', to: `/services/${props.service.id}/hosting-panel/email` },
  { label: 'Domains', icon: 'tabler-world', to: `/services/${props.service.id}/hosting-panel/domains` },
  { label: 'DNS', icon: 'tabler-dns', to: `/services/${props.service.id}/hosting-panel/dns` },
  { label: 'SSL', icon: 'tabler-lock', to: `/services/${props.service.id}/hosting-panel/ssl` },
  { label: 'PHP', icon: 'tabler-brand-php', to: `/services/${props.service.id}/hosting-panel/php` },
  { label: 'Cron', icon: 'tabler-clock', to: `/services/${props.service.id}/hosting-panel/cron` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/hosting-panel/settings` },
])

const diskPercent = computed<number>(() => {
  if (!props.usage.disk_limit) return 0
  return Math.round((props.usage.disk_used / props.usage.disk_limit) * 100)
})

const bandwidthPercent = computed<number>(() => {
  if (!props.usage.bandwidth_limit) return 0
  return Math.round((props.usage.bandwidth_used / props.usage.bandwidth_limit) * 100)
})

function formatMb(mb: number): string {
  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
  return `${mb} MB`
}
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/hosting-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-world-www" color="primary" />
            Hosting 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">DOMAIN</div>
                <code v-if="service.domain">{{ service.domain }}</code>
                <span v-else class="text-medium-emphasis">Not set</span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">IP ADDRESS</div>
                <code v-if="service.ipv4_address">{{ service.ipv4_address }}</code>
                <span v-else class="text-medium-emphasis">Not assigned</span>
              </VCol>
              <VCol cols="12" sm="6" md="3">
                <div class="text-caption text-medium-emphasis mb-1">PLAN</div>
                <span class="font-weight-medium">{{ service.plan?.name ?? '--' }}</span>
              </VCol>
            </VRow>
          </VCardText>
        </VCard>

        <!-- Resource Usage -->
        <VCard class="mb-6" elevation="0">
          <VCardTitle class="d-flex align-center gap-2">
            <VIcon icon="tabler-chart-pie" color="primary" />
            Resource Usage
          </VCardTitle>
          <VCardText>
            <div class="d-flex flex-wrap justify-space-around gap-4 mb-6">
              <ResourceGauge label="Disk" :value="diskPercent" color="info" />
              <ResourceGauge label="Bandwidth" :value="bandwidthPercent" color="success" />
            </div>

            <VRow>
              <VCol cols="6" sm="3">
                <div class="text-center">
                  <div class="text-h5 font-weight-bold">{{ usage.email_accounts }}</div>
                  <div class="text-caption text-medium-emphasis">Email Accounts</div>
                </div>
              </VCol>
              <VCol cols="6" sm="3">
                <div class="text-center">
                  <div class="text-h5 font-weight-bold">{{ usage.databases }}</div>
                  <div class="text-caption text-medium-emphasis">Databases</div>
                </div>
              </VCol>
              <VCol cols="6" sm="3">
                <div class="text-center">
                  <div class="text-h5 font-weight-bold">{{ usage.domains }}</div>
                  <div class="text-caption text-medium-emphasis">Domains</div>
                </div>
              </VCol>
              <VCol cols="6" sm="3">
                <div class="text-center">
                  <div class="text-h5 font-weight-bold">{{ usage.subdomains }}</div>
                  <div class="text-caption text-medium-emphasis">Subdomains</div>
                </div>
              </VCol>
            </VRow>

            <VAlert
              v-if="!usage.disk_limit && !usage.bandwidth_limit"
              type="info"
              variant="tonal"
              class="mt-4"
            >
              Resource usage data requires Enhance API configuration.
            </VAlert>
          </VCardText>
        </VCard>
      </VCol>

      <VCol cols="12" lg="4">
        <!-- Quick Actions -->
        <VCard 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-column gap-2">
              <Link :href="`/services/${service.id}/hosting-panel/files`" class="text-decoration-none">
                <VBtn block variant="tonal" class="text-none">
                  <VIcon icon="tabler-folder" start />
                  File Manager
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/hosting-panel/databases`" class="text-decoration-none">
                <VBtn block variant="tonal" class="text-none">
                  <VIcon icon="tabler-database" start />
                  Databases
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/hosting-panel/email`" class="text-decoration-none">
                <VBtn block variant="tonal" class="text-none">
                  <VIcon icon="tabler-mail" start />
                  Email Accounts
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/hosting-panel/ssl`" class="text-decoration-none">
                <VBtn block variant="tonal" class="text-none">
                  <VIcon icon="tabler-lock" start />
                  SSL Certificates
                </VBtn>
              </Link>
              <Link :href="`/services/${service.id}/hosting-panel/dns`" class="text-decoration-none">
                <VBtn block variant="tonal" class="text-none">
                  <VIcon icon="tabler-dns" start />
                  DNS Editor
                </VBtn>
              </Link>
            </div>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </ServiceTabLayout>
</template>
