schemas-app/app/pages/settings.vue

<template>
  <div>
    <v-row>
      <v-col cols="12">
        <h1 class="text-h3 mb-4">Settings</h1>
        <p class="text-subtitle-1 text-grey mb-4">
          Manage API keys and organization settings
        </p>
      </v-col>
    </v-row>

    <v-row v-if="!auth0.isAuthenticated.value">
      <v-col cols="12">
        <v-alert type="info" variant="tonal">
          Please log in to manage settings.
        </v-alert>
      </v-col>
    </v-row>

    <v-row v-else-if="!selectedOrganization">
      <v-col cols="12">
        <v-alert type="info" variant="tonal">
          Please select an organization to manage API keys.
        </v-alert>
      </v-col>
    </v-row>

    <v-row v-else>
      <!-- Organizations Section -->
      <v-col cols="12">
        <v-card class="mb-4">
          <v-card-title class="d-flex justify-space-between align-center">
            <span>Organizations</span>
            <v-btn
              v-if="isAdmin"
              color="primary"
              prepend-icon="mdi-plus"
              @click="openAddOrgDialog"
            >
              Create Organization
            </v-btn>
          </v-card-title>
          <v-card-text>
            <v-list v-if="organizations.length > 0">
              <v-list-group
                v-for="org in organizations"
                :key="org.id"
                class="mb-2"
              >
                <template #activator="{ props }">
                  <v-list-item
                    v-bind="props"
                    :active="org.id === selectedOrganization?.id"
                    border
                  >
                    <template #prepend>
                      <v-icon icon="mdi-domain" class="mr-2" />
                    </template>
                    <v-list-item-title class="font-weight-bold">
                      {{ org.name }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      <v-chip size="small" class="mr-2" variant="tonal">
                        {{ org.apiKeys?.length || 0 }} API keys
                      </v-chip>
                      <v-chip size="small" variant="tonal">
                        {{ org.users?.length || 0 }} users
                      </v-chip>
                    </v-list-item-subtitle>
                    <template v-if="isAdmin" #append>
                      <v-btn
                        icon="mdi-delete"
                        variant="text"
                        color="error"
                        size="small"
                        @click.stop="openDeleteOrgDialog(org)"
                      />
                    </template>
                  </v-list-item>
                </template>

                <!-- Expandable content showing users -->
                <v-list-item>
                  <v-list-item-title class="text-subtitle-2 mb-2">
                    <v-icon icon="mdi-account-multiple" size="small" class="mr-1" />
                    Users
                  </v-list-item-title>
                  <v-list density="compact" class="ml-4">
                    <v-list-item
                      v-for="user in org.users"
                      :key="user.id"
                      class="text-caption"
                    >
                      <template #prepend>
                        <v-icon :icon="getUserProviderIcon(user.id)" size="small" class="mr-2" />
                      </template>
                      <v-list-item-title class="text-body-2">
                        <v-chip v-if="getUserProvider(user.id)" size="x-small" variant="tonal" class="mr-2">
                          {{ getUserProvider(user.id) }}
                        </v-chip>
                        {{ getUserId(user.id) }}
                      </v-list-item-title>
                      <v-list-item-subtitle class="text-caption">
                        <span class="text-grey">Full ID: {{ user.id }}</span>
                      </v-list-item-subtitle>
                    </v-list-item>
                    <v-list-item v-if="!org.users || org.users.length === 0">
                      <v-list-item-title class="text-caption text-grey">
                        No users
                      </v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-list-item>
              </v-list-group>
            </v-list>
            <v-alert v-else type="info" variant="tonal">
              <div class="d-flex flex-column align-center">
                <p>You don't belong to any organizations yet.</p>
                <p v-if="isAdmin" class="text-caption">Create one to get started.</p>
                <p v-else class="text-caption">Contact your administrator to get access to an organization.</p>
              </div>
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- API Keys Section -->
      <v-col cols="12">
        <v-card>
          <v-card-title class="d-flex justify-space-between align-center">
            <span>API Keys - {{ selectedOrganization.name }}</span>
            <v-btn
              color="primary"
              prepend-icon="mdi-plus"
              @click="openAddKeyDialog"
            >
              Add API Key
            </v-btn>
          </v-card-title>
          <v-card-text>
            <v-list v-if="selectedOrganization.apiKeys && selectedOrganization.apiKeys.length > 0">
              <v-list-item
                v-for="apiKey in selectedOrganization.apiKeys"
                :key="apiKey.id"
                class="mb-2"
                border
              >
                <template #prepend>
                  <v-icon icon="mdi-key" class="mr-2" />
                </template>
                <v-list-item-title class="font-weight-bold">
                  {{ apiKey.name }}
                </v-list-item-title>
                <v-list-item-subtitle>
                  <div class="mt-2">
                    <v-chip size="small" class="mr-2" variant="tonal">
                      {{ apiKey.refs?.length || 0 }} refs
                    </v-chip>
                    <v-chip
                      v-if="apiKey.read"
                      size="small"
                      class="mr-2"
                      color="blue"
                      variant="tonal"
                    >
                      Read
                    </v-chip>
                    <v-chip
                      v-if="apiKey.publish"
                      size="small"
                      color="green"
                      variant="tonal"
                    >
                      Publish
                    </v-chip>
                  </div>
                  <div v-if="apiKey.refs && apiKey.refs.length > 0" class="mt-2">
                    <strong>Refs:</strong> {{ apiKey.refs.join(', ') }}
                  </div>
                </v-list-item-subtitle>
                <template #append>
                  <v-btn
                    icon="mdi-delete"
                    variant="text"
                    color="error"
                    size="small"
                    @click.stop="openDeleteKeyDialog(apiKey)"
                  />
                </template>
              </v-list-item>
            </v-list>
            <v-alert v-else type="info" variant="tonal">
              No API keys yet. Create one to get started.
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- Create Organization Dialog -->
    <v-dialog v-model="addOrgDialog" max-width="500">
      <v-card>
        <v-card-title>Create Organization</v-card-title>
        <v-card-text>
          <v-text-field
            v-model="newOrgName"
            label="Organization Name"
            variant="outlined"
            :error-messages="orgNameError"
            hint="A unique name for your organization"
            persistent-hint
            @keyup.enter="createOrganization"
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="addOrgDialog = false">Cancel</v-btn>
          <v-btn
            color="primary"
            variant="flat"
            :loading="creatingOrg"
            :disabled="!newOrgName"
            @click="createOrganization"
          >
            Create
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Add API Key Dialog -->
    <v-dialog v-model="addKeyDialog" max-width="600">
      <v-card>
        <v-card-title>Create API Key</v-card-title>
        <v-card-text>
          <v-text-field
            v-model="newKeyName"
            label="Key Name"
            variant="outlined"
            :error-messages="keyNameError"
            class="mb-4"
            hint="A descriptive name for this API key"
            persistent-hint
          />

          <v-combobox
            v-model="newKeyRefs"
            label="Refs"
            variant="outlined"
            multiple
            chips
            :error-messages="refsError"
            class="mb-4"
            hint="Which refs this key can access (e.g., production, staging)"
            persistent-hint
          />

          <v-checkbox
            v-model="newKeyRead"
            label="Read Access"
            hint="Allow reading schemas and supergraphs"
            persistent-hint
          />

          <v-checkbox
            v-model="newKeyPublish"
            label="Publish Access"
            hint="Allow publishing/updating subgraph schemas"
            persistent-hint
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="addKeyDialog = false">Cancel</v-btn>
          <v-btn
            color="primary"
            variant="flat"
            :loading="creatingKey"
            :disabled="!canCreateKey"
            @click="createAPIKey"
          >
            Create Key
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Show API Key Dialog (only shown once after creation) -->
    <v-dialog v-model="showKeyDialog" max-width="600" persistent>
      <v-card>
        <v-card-title class="d-flex align-center">
          <v-icon icon="mdi-alert" color="warning" class="mr-2" />
          Save Your API Key
        </v-card-title>
        <v-card-text>
          <v-alert type="warning" variant="tonal" class="mb-4">
            This is the only time you'll see this key. Please copy it now and store it securely.
          </v-alert>

          <div class="mb-4">
            <strong>Key Name:</strong> {{ createdKey?.name }}
          </div>

          <v-text-field
            :model-value="createdKey?.key"
            label="API Key"
            variant="outlined"
            readonly
            class="mb-2"
          >
            <template #append-inner>
              <v-btn
                icon="mdi-content-copy"
                variant="text"
                size="small"
                @click="copyKey"
              />
            </template>
          </v-text-field>

          <div class="text-caption text-grey">
            Use this key in the X-API-Key header when making requests to the schema registry.
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="primary"
            variant="flat"
            @click="closeKeyDialog"
          >
            I've Saved the Key
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Delete Organization Confirmation Dialog -->
    <v-dialog v-model="deleteOrgDialog" max-width="500">
      <v-card>
        <v-card-title class="text-error">
          <v-icon icon="mdi-alert" color="error" class="mr-2" />
          Delete Organization
        </v-card-title>
        <v-card-text>
          <v-alert type="warning" variant="tonal" class="mb-4">
            This action cannot be undone. All API keys and data for this organization will be permanently removed.
          </v-alert>
          <p>Are you sure you want to delete <strong>{{ orgToDelete?.name }}</strong>?</p>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="deleteOrgDialog = false">Cancel</v-btn>
          <v-btn
            color="error"
            variant="flat"
            :loading="deletingOrg"
            @click="deleteOrganization"
          >
            Delete Organization
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Delete API Key Confirmation Dialog -->
    <v-dialog v-model="deleteKeyDialog" max-width="500">
      <v-card>
        <v-card-title class="text-error">
          <v-icon icon="mdi-alert" color="error" class="mr-2" />
          Delete API Key
        </v-card-title>
        <v-card-text>
          <v-alert type="warning" variant="tonal" class="mb-4">
            This action cannot be undone. Services using this key will lose access.
          </v-alert>
          <p>Are you sure you want to delete the API key <strong>{{ keyToDelete?.name }}</strong>?</p>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="deleteKeyDialog = false">Cancel</v-btn>
          <v-btn
            color="error"
            variant="flat"
            :loading="deletingKey"
            @click="deleteAPIKey"
          >
            Delete Key
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

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

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

import { useOrganizationSelector } from '~/composables/useOrganizationSelector'
import {
  useAddApiKeyMutation,
  useAddOrganizationMutation,
  useRemoveApiKeyMutation,
  useRemoveOrganizationMutation,
} from '~/graphql/generated'

const auth0 = useAuth0()
const { selectedOrganization, organizations, refetch, selectOrganization } = useOrganizationSelector()

// Check if user has admin role
const isAdmin = computed(() => {
  if (!auth0?.isAuthenticated?.value || !auth0?.user?.value) return false

  const roles = auth0.user.value['https://unbound.se/roles']
  return Array.isArray(roles) && roles.includes('admin')
})

// Create Organization Dialog
const addOrgDialog = ref(false)
const newOrgName = ref('')
const orgNameError = ref('')
const creatingOrg = ref(false)

// Add API Key Dialog
const addKeyDialog = ref(false)
const newKeyName = ref('')
const newKeyRefs = ref<string[]>([])
const newKeyRead = ref(true)
const newKeyPublish = ref(false)
const keyNameError = ref('')
const refsError = ref('')
const creatingKey = ref(false)

// Computed property for button state to ensure reactivity
const canCreateKey = computed(() => {
  return newKeyName.value.trim() !== '' && newKeyRefs.value.length > 0
})

// Show created key dialog
const showKeyDialog = ref(false)
const createdKey = ref<any>(null)

// Snackbar
const snackbar = ref(false)
const snackbarText = ref('')
const snackbarColor = ref('success')

// Delete Organization Dialog
const deleteOrgDialog = ref(false)
const orgToDelete = ref<any>(null)
const deletingOrg = ref(false)

// Delete API Key Dialog
const deleteKeyDialog = ref(false)
const keyToDelete = ref<any>(null)
const deletingKey = ref(false)

// Mutations
const { mutate: addAPIKeyMutation } = useAddApiKeyMutation({})
const { mutate: addOrganizationMutation } = useAddOrganizationMutation({})
const { mutate: removeAPIKeyMutation } = useRemoveApiKeyMutation({})
const { mutate: removeOrganizationMutation } = useRemoveOrganizationMutation({})

const openAddOrgDialog = () => {
  newOrgName.value = ''
  orgNameError.value = ''
  addOrgDialog.value = true
}

const createOrganization = async () => {
  if (!newOrgName.value) {
    orgNameError.value = 'Organization name is required'
    return
  }

  creatingOrg.value = true
  orgNameError.value = ''

  try {
    const result = await addOrganizationMutation({
      name: newOrgName.value,
    })

    if (!result?.data?.addOrganization) {
      throw new Error('Failed to create organization')
    }

    snackbarText.value = `Organization "${newOrgName.value}" created successfully!`
    snackbarColor.value = 'success'
    snackbar.value = true
    addOrgDialog.value = false
    newOrgName.value = ''

    // Refresh organizations and select the new one
    await refetch()
    selectOrganization(result.data.addOrganization.id)
  } catch (error: any) {
    orgNameError.value = error.message || 'Failed to create organization'
    snackbarText.value = 'Failed to create organization'
    snackbarColor.value = 'error'
    snackbar.value = true
  } finally {
    creatingOrg.value = false
  }
}

const openAddKeyDialog = () => {
  newKeyName.value = ''
  newKeyRefs.value = []
  newKeyRead.value = true
  newKeyPublish.value = false
  keyNameError.value = ''
  refsError.value = ''
  addKeyDialog.value = true
}

const createAPIKey = async () => {
  if (!newKeyName.value) {
    keyNameError.value = 'Key name is required'
    return
  }

  if (newKeyRefs.value.length === 0) {
    refsError.value = 'At least one ref is required'
    return
  }

  if (!selectedOrganization.value) {
    snackbarText.value = 'No organization selected'
    snackbarColor.value = 'error'
    snackbar.value = true
    return
  }

  creatingKey.value = true
  keyNameError.value = ''
  refsError.value = ''

  try {
    const result = await addAPIKeyMutation({
      input: {
        name: newKeyName.value,
        organizationId: selectedOrganization.value.id,
        refs: newKeyRefs.value,
        read: newKeyRead.value,
        publish: newKeyPublish.value,
      },
    })

    if (!result?.data?.addAPIKey) {
      throw new Error('Failed to create API key')
    }

    createdKey.value = result.data.addAPIKey
    addKeyDialog.value = false
    showKeyDialog.value = true

    // Refresh organizations to show new key
    await refetch()
  } catch (error: any) {
    keyNameError.value = error.message || 'Failed to create API key'
    snackbarText.value = 'Failed to create API key'
    snackbarColor.value = 'error'
    snackbar.value = true
  } finally {
    creatingKey.value = false
  }
}

const copyKey = async () => {
  try {
    await navigator.clipboard.writeText(createdKey.value?.key || '')
    snackbarText.value = 'API key copied to clipboard'
    snackbarColor.value = 'success'
    snackbar.value = true
  } catch (_err) {
    snackbarText.value = 'Failed to copy'
    snackbarColor.value = 'error'
    snackbar.value = true
  }
}

const closeKeyDialog = () => {
  showKeyDialog.value = false
  createdKey.value = null
}

// Helper functions to parse user IDs
const getUserProvider = (userId: string) => {
  if (!userId) return ''
  const parts = userId.split('|')
  if (parts.length === 2) {
    // Map provider names to more readable formats
    const providerMap: Record<string, string> = {
      'google-oauth2': 'Google',
      'auth0': 'Email/Password',
      'github': 'GitHub',
      'twitter': 'Twitter',
      'facebook': 'Facebook',
      'windowslive': 'Microsoft',
      'linkedin': 'LinkedIn',
    }
    return providerMap[parts[0]] || parts[0]
  }
  return ''
}

const getUserId = (userId: string) => {
  if (!userId) return ''
  const parts = userId.split('|')
  if (parts.length === 2) {
    return parts[1]
  }
  return userId
}

const getUserProviderIcon = (userId: string) => {
  if (!userId) return 'mdi-account'
  const parts = userId.split('|')
  if (parts.length === 2) {
    const iconMap: Record<string, string> = {
      'google-oauth2': 'mdi-google',
      'auth0': 'mdi-email',
      'github': 'mdi-github',
      'twitter': 'mdi-twitter',
      'facebook': 'mdi-facebook',
      'windowslive': 'mdi-microsoft',
      'linkedin': 'mdi-linkedin',
    }
    return iconMap[parts[0]] || 'mdi-account'
  }
  return 'mdi-account'
}

const openDeleteOrgDialog = (org: any) => {
  orgToDelete.value = org
  deleteOrgDialog.value = true
}

const deleteOrganization = async () => {
  if (!orgToDelete.value) return

  deletingOrg.value = true

  try {
    const result = await removeOrganizationMutation({
      organizationId: orgToDelete.value.id,
    })

    if (!result?.data?.removeOrganization) {
      throw new Error('Failed to delete organization')
    }

    snackbarText.value = `Organization "${orgToDelete.value.name}" deleted successfully`
    snackbarColor.value = 'success'
    snackbar.value = true
    deleteOrgDialog.value = false
    orgToDelete.value = null

    // Refresh organizations
    await refetch()

    // If deleted org was selected, select another one
    if (organizations.value.length > 0) {
      selectOrganization(organizations.value[0].id)
    }
  } catch (error: any) {
    snackbarText.value = error.message || 'Failed to delete organization'
    snackbarColor.value = 'error'
    snackbar.value = true
  } finally {
    deletingOrg.value = false
  }
}

const openDeleteKeyDialog = (apiKey: any) => {
  keyToDelete.value = apiKey
  deleteKeyDialog.value = true
}

const deleteAPIKey = async () => {
  if (!keyToDelete.value || !selectedOrganization.value) return

  deletingKey.value = true

  try {
    const result = await removeAPIKeyMutation({
      organizationId: selectedOrganization.value.id,
      keyName: keyToDelete.value.name,
    })

    if (!result?.data?.removeAPIKey) {
      throw new Error('Failed to delete API key')
    }

    snackbarText.value = `API key "${keyToDelete.value.name}" deleted successfully`
    snackbarColor.value = 'success'
    snackbar.value = true
    deleteKeyDialog.value = false
    keyToDelete.value = null

    // Refresh organizations
    await refetch()
  } catch (error: any) {
    snackbarText.value = error.message || 'Failed to delete API key'
    snackbarColor.value = 'error'
    snackbar.value = true
  } finally {
    deletingKey.value = false
  }
}
</script>