<template>
  <div>
    <v-row>
      <v-col cols="12">
        <div class="d-flex align-center mb-4">
          <v-btn
            icon="mdi-arrow-left"
            variant="text"
            @click="$router.back()"
          />
          <h1 class="text-h4 ml-2">
            Federation Graph: {{ route.params.ref }}
          </h1>
        </div>
      </v-col>
    </v-row>

    <v-row v-if="loading">
      <v-col cols="12" class="text-center py-12">
        <v-progress-circular indeterminate color="primary" size="64" />
        <p class="mt-4">
          Loading federation graph...
        </p>
      </v-col>
    </v-row>

    <v-row v-else-if="supergraphData">
      <v-col cols="12">
        <v-card>
          <v-card-title>Subgraphs in Federation</v-card-title>
          <v-card-text>
            <v-list>
              <v-list-item
                v-for="subgraph in subgraphs"
                :key="subgraph.service"
                :title="subgraph.service"
                :subtitle="`URL: ${subgraph.url}`"
              >
                <template #prepend>
                  <v-icon icon="mdi-cube-outline" />
                </template>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col cols="12">
        <v-card>
          <v-card-title class="d-flex justify-space-between align-center">
            <span>Federation Schema (SDL)</span>
            <v-btn
              icon="mdi-content-copy"
              variant="text"
              size="small"
              @click="copySupergraph"
            />
          </v-card-title>
          <v-card-text>
            <pre class="sdl-viewer"><code>{{ supergraphData.sdl }}</code></pre>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row v-else>
      <v-col cols="12" class="text-center py-12">
        <v-icon icon="mdi-alert-circle" size="64" class="mb-4 text-warning" />
        <p class="text-h6">
          No federation graph available
        </p>
      </v-col>
    </v-row>

    <v-snackbar v-model="snackbar" :timeout="3000">
      {{ snackbarText }}
    </v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { useSupergraphQuery } from '~/graphql/generated'

const route = useRoute()
const loading = ref(true)
const snackbar = ref(false)
const snackbarText = ref('')

const { result, loading: queryLoading } = useSupergraphQuery(() => ({
  ref: route.params.ref as string,
  isAfter: null,
}))

const supergraphData = computed(() => result.value?.supergraph)
const subgraphs = computed(() => supergraphData.value?.subgraphs || [])

watch(queryLoading, (newLoading) => {
  loading.value = newLoading
})

const copySupergraph = async () => {
  try {
    await navigator.clipboard.writeText(supergraphData.value?.sdl || '')
    snackbarText.value = 'Supergraph SDL copied to clipboard'
    snackbar.value = true
  } catch (_err) {
    snackbarText.value = 'Failed to copy'
    snackbar.value = true
  }
}
</script>

<style scoped>
.sdl-viewer {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  overflow: auto;
  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  max-height: 60vh;
}
</style>
