<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { Lucide } from '@/components/ui/lucide'
import { useExternalSystemDetail } from '../composables/useExternalSystemDetail'
import { useExternalSystemLaunch } from '../composables/useExternalSystemLaunch'
import {
  externalSystemStatusLabel,
  externalSystemStatusVariant,
  formatExternalSystemDateTime,
} from '../utils/external-system.utils'

const router = useRouter()
const { system, error, status, isAccessible } = useExternalSystemDetail()
const { launching, launchExternalSystem } = useExternalSystemLaunch()

function goBack() {
  router.push({ name: 'list-external-systems' })
}

function handleOpen() {
  if (!system.value) return
  launchExternalSystem(system.value)
}
</script>

<template>
  <div>
    <div class="mb-5 flex flex-wrap items-center gap-3">
      <Button variant="ghost" look="outline" @click="goBack">
        <Lucide icon="ArrowLeft" class="size-4" />
        Kembali
      </Button>
    </div>

    <AlertRoot v-if="error" class="mb-6" variant="danger">
      <AlertTitle>Ralat</AlertTitle>
      <AlertDescription>{{ error }}</AlertDescription>
    </AlertRoot>

    <template v-else-if="system && status">
      <Box class="p-5 sm:p-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div class="flex min-w-0 items-start gap-4">
            <div
              class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary"
            >
              <Lucide :icon="system.icon" class="size-6" />
            </div>
            <div class="min-w-0">
              <div class="text-sm opacity-70">Sistem Luaran</div>
              <h2 class="text-xl font-semibold">{{ system.name }}</h2>
              <div class="mt-1 text-sm font-medium text-primary/80">{{ system.code }}</div>
            </div>
          </div>

          <Badge look="outline" :variant="externalSystemStatusVariant(status)">
            {{ externalSystemStatusLabel(status) }}
          </Badge>
        </div>

        <p class="mt-5 max-w-3xl text-sm leading-relaxed opacity-80">
          {{ system.description }}
        </p>

        <div class="mt-6 grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
          <div>
            <span class="opacity-70">URL:</span>
            <div class="mt-0.5 break-all font-medium">{{ system.url }}</div>
          </div>
          <div>
            <span class="opacity-70">Tarikh Mula:</span>
            <div class="mt-0.5 font-medium">{{ formatExternalSystemDateTime(system.starts_at) }}</div>
          </div>
          <div>
            <span class="opacity-70">Tarikh Tamat:</span>
            <div class="mt-0.5 font-medium">{{ formatExternalSystemDateTime(system.ends_at) }}</div>
          </div>
          <div>
            <span class="opacity-70">E-mel Sokongan:</span>
            <div class="mt-0.5 font-medium">{{ system.contact_email ?? '-' }}</div>
          </div>
        </div>

        <div v-if="system.notes" class="mt-6 border-t border-foreground/10 pt-5">
          <div class="text-sm font-medium opacity-70">Nota</div>
          <p class="mt-2 text-sm leading-relaxed opacity-80">{{ system.notes }}</p>
        </div>

        <div class="mt-6 flex flex-wrap gap-3 border-t border-foreground/10 pt-5">
          <Button
            look="outline"
            variant="primary"
            :disabled="!isAccessible || launching"
            @click="handleOpen"
          >
            Buka Sistem
            <Lucide icon="ExternalLink" class="size-4" />
          </Button>
        </div>

        <AlertRoot v-if="!isAccessible" class="mt-4" look="outline" variant="pending">
          <Lucide class="mr-2 size-4 shrink-0" icon="Clock" />
          <AlertTitle>Sistem Tidak Tersedia</AlertTitle>
          <AlertDescription>
            Pautan ini hanya boleh dibuka semasa tempoh acara yang ditetapkan dan sistem berstatus
            aktif.
          </AlertDescription>
        </AlertRoot>
      </Box>
    </template>
  </div>
</template>
