<template>
  <div class="page-wrapper">
    <div class="waiting-container">
      <h2>Container Status: {{ status }}</h2>
      <p v-if="status === 'ready'">
        Your container is ready! <a :href="openLink" target="_blank" rel="noopener">Open it</a>
      </p>
      <p v-else-if="status === 'running'">Waiting for services to be ready...</p>
      <p v-else-if="status === 'starting'">Starting container...</p>
      <p v-else-if="status === 'error'" class="error-text">{{ errorMessage }}</p>
    </div>
    <Spinner :loading="loading" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const name = String(route.query.name || '')
const handoff = typeof route.query.handoff === 'string' ? route.query.handoff : ''
const rawPath = typeof route.query.path === 'string' ? route.query.path : '/login'

function sanitizePath(p) {
  if (typeof p !== 'string') return '/login'
  if (p.startsWith('http://') || p.startsWith('https://')) return '/login'
  if (!p.startsWith('/')) return '/login'
  const allowed = new Set(['/', '/login', '/signin'])
  const pathOnly = p.split('?')[0]
  return allowed.has(pathOnly) ? p : '/login'
}
const safePath = sanitizePath(rawPath)

const loading = ref(true)
const status = ref('starting')
const ip = ref(null)
const interval = ref(null)
const errorMessage = ref(null)

const POLL_MS = 5000

const openLink = computed(() => (ip.value ? `http://${ip.value}` : '#'))

async function checkStatus () {
  try {
    const res = await $fetch(`${window.location.origin}/api/status?name=${encodeURIComponent(name)}`, {
      method: 'GET',
      cache: 'no-store'
    })

    status.value = res.status
    if (res.ip) ip.value = res.ip

    if (res.status === 'ready') {
      if (interval.value) clearInterval(interval.value)
      loading.value = false

      // Prefer bridge handoff if we have an id; otherwise, just open container root.
      if (handoff) {
        const bridge = new URL(`${window.location.origin}/api/handoff/post`)
        bridge.searchParams.set('name', name)
        bridge.searchParams.set('handoff', handoff)
        bridge.searchParams.set('path', safePath)
        // Replace to avoid creating a back entry with sensitive navigation
        window.location.replace(bridge.toString())
      } else if (ip.value) {
        window.location.replace(`http://${ip.value}`)
      } else {
        window.location.replace(`http://${window.location.host}`)
      }
    } else {
      loading.value = true
    }
  } catch (error) {
    loading.value = false
    status.value = 'error'
    errorMessage.value = error?.data?.message || 'Internal server error!'

    if (interval.value) clearInterval(interval.value)

    // Bounce back to app without leaking anything sensitive
    setTimeout(() => {
      router.replace(`/app/`)
    }, 5000)
  }
}

onMounted(() => {
  checkStatus()
  interval.value = setInterval(checkStatus, POLL_MS)
})

onUnmounted(() => {
  if (interval.value) clearInterval(interval.value)
})
</script>

<style scoped>
.waiting-container {
  max-width: 100%;
  width: 400px;
  margin: 5rem auto;
  padding: 2rem;
  border-radius: 8px;
  background: #f9fafb;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
}
.error-text { color: #b91c1c; }
</style> 