<template>
  <div class="flex flex-col h-full">
    <LayoutHeader>
      <template #left>
        <div class="flex items-center gap-3">
          <Button variant="ghost" @click="router.back()">
            <FeatherIcon name="arrow-left" class="h-4 w-4" />
          </Button>
          <div>
            <h1 class="text-xl font-semibold text-ink-gray-9">{{ container.container_name || siteId }}</h1>
            <div class="flex items-center gap-2">
              <Badge
                :variant="badgeVariant"
                :label="container.status || 'Loading'"
              />
            </div>
          </div>
        </div>
      </template>
    </LayoutHeader>

    <div class="flex-1 overflow-auto p-5">
      <div v-if="loading" class="flex items-center justify-center h-64">
        <LoadingIndicator class="h-8 w-8" />
      </div>

      <div v-else class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-6">
          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">Overview</h2>
            <div class="grid gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-ink-gray-5">Container Name</p>
                <p class="text-sm font-medium text-ink-gray-9 font-mono">{{ container.container_name }}</p>
              </div>
              <div>
                <p class="text-sm text-ink-gray-5">Image</p>
                <p class="text-sm font-medium text-ink-gray-9">{{ container.image }}</p>
              </div>
              <div>
                <p class="text-sm text-ink-gray-5">IP Address</p>
                <p class="text-sm font-medium text-ink-gray-9 font-mono">{{ container.ip_address || 'Not assigned' }}</p>
              </div>
              <div>
                <p class="text-sm text-ink-gray-5">Architecture</p>
                <p class="text-sm font-medium text-ink-gray-9">{{ container.architecture || 'N/A' }}</p>
              </div>
              <div>
                <p class="text-sm text-ink-gray-5">Created</p>
                <p class="text-sm font-medium text-ink-gray-9">{{ formattedDate }}</p>
              </div>
            </div>
          </div>

          <div v-if="container.error_message" class="rounded-lg border border-red-200 bg-red-50 p-5">
            <h2 class="text-lg font-semibold text-red-700 mb-2">Error</h2>
            <p class="text-sm text-red-600">{{ container.error_message }}</p>
          </div>

          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">Container Status</h2>
            <div class="flex items-center gap-4">
              <div
                class="flex h-16 w-16 items-center justify-center rounded-full"
                :class="statusBgClass"
              >
                <FeatherIcon :name="statusIcon" class="h-8 w-8" :class="statusIconClass" />
              </div>
              <div>
                <p class="text-2xl font-semibold" :class="statusTextClass">{{ container.status }}</p>
                <p class="text-sm text-ink-gray-5">Incus Status: {{ container.incus_status || 'Unknown' }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="space-y-6">
          <div v-if="container.status === 'Creating'" class="rounded-lg border border-blue-200 bg-blue-50 p-5">
            <div class="flex items-center gap-3">
              <LoadingIndicator class="h-5 w-5 text-blue-600" />
              <div>
                <p class="font-medium text-blue-700">Creating Container</p>
                <p class="text-sm text-blue-600">This may take a moment...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Button, Badge, FeatherIcon, LoadingIndicator, createResource } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'
import { getStatusStyles } from '@/utils/statusStyles'

const props = defineProps({
  siteId: {
    type: String,
    required: true,
  },
})

const router = useRouter()
const container = ref({})
const loading = ref(true)

const containerResource = createResource({
  url: 'frappe.client.get',
  onSuccess(data) {
    container.value = data
    loading.value = false
  },
  onError(error) {
    console.error('Failed to fetch container:', error)
    loading.value = false
  }
})

function fetchContainer() {
  containerResource.fetch({
    doctype: 'Cloud Container',
    name: props.siteId,
  })
}

// Computed properties using centralized status styles
const statusStyles = computed(() => getStatusStyles(container.value.status))
const badgeVariant = computed(() => statusStyles.value.badgeVariant)
const statusIcon = computed(() => statusStyles.value.icon)
const statusBgClass = computed(() => statusStyles.value.bgClass)
const statusIconClass = computed(() => statusStyles.value.iconClass)
const statusTextClass = computed(() => statusStyles.value.textClass)

const formattedDate = computed(() => {
  if (!container.value.creation) return 'N/A'
  return new Date(container.value.creation).toLocaleString()
})

onMounted(() => {
  fetchContainer()
})
</script>
