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

interface Backup {
  id: number
  name: string
  size: number
  status: string
  created_at: string
}

interface Props {
  service: Service
  backups: Backup[]
}

const props = defineProps<Props>()

const tabs = computed(() => [
  { label: 'Dashboard', icon: 'tabler-dashboard', to: `/services/${props.service.id}/vps-panel` },
  { label: 'Console', icon: 'tabler-terminal-2', to: `/services/${props.service.id}/vps-panel/console` },
  { label: 'Graphs', icon: 'tabler-chart-line', to: `/services/${props.service.id}/vps-panel/graphs` },
  { label: 'Firewall', icon: 'tabler-shield', to: `/services/${props.service.id}/vps-panel/firewall` },
  { label: 'Snapshots', icon: 'tabler-camera', to: `/services/${props.service.id}/vps-panel/snapshots` },
  { label: 'Backups', icon: 'tabler-database', to: `/services/${props.service.id}/vps-panel/backups` },
  { label: 'Network', icon: 'tabler-network', to: `/services/${props.service.id}/vps-panel/network` },
  { label: 'Rebuild', icon: 'tabler-reload', to: `/services/${props.service.id}/vps-panel/rebuild` },
  { label: 'Settings', icon: 'tabler-settings', to: `/services/${props.service.id}/vps-panel/settings` },
  { label: 'Activity', icon: 'tabler-history', to: `/services/${props.service.id}/vps-panel/activity` },
])

function formatSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleString()
}
</script>

<template>
  <ServiceTabLayout
    :service="service"
    :tabs="tabs"
    :current-tab="`/services/${service.id}/vps-panel/backups`"
  >
    <VCard elevation="0">
      <VCardTitle class="d-flex align-center gap-2">
        <VIcon icon="tabler-database" color="primary" />
        Backups
      </VCardTitle>
      <VCardText>
        <VTable v-if="backups.length > 0" hover>
          <thead>
            <tr>
              <th class="font-weight-bold">Name</th>
              <th class="font-weight-bold">Size</th>
              <th class="font-weight-bold">Status</th>
              <th class="font-weight-bold">Created</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="backup in backups" :key="backup.id">
              <td class="font-weight-medium">{{ backup.name }}</td>
              <td>{{ formatSize(backup.size) }}</td>
              <td>
                <VChip
                  :color="backup.status === 'complete' ? 'success' : 'warning'"
                  size="small"
                  class="text-capitalize"
                >
                  {{ backup.status }}
                </VChip>
              </td>
              <td>{{ formatDate(backup.created_at) }}</td>
            </tr>
          </tbody>
        </VTable>

        <div v-else class="text-center pa-8 text-medium-emphasis">
          <VIcon icon="tabler-database-off" size="48" class="mb-2" />
          <div class="text-body-1 mb-2">No backups available</div>
          <div class="text-body-2">Automated backups will appear here when configured by your plan.</div>
        </div>
      </VCardText>
    </VCard>
  </ServiceTabLayout>
</template>
