<template>
  <div class="synapse-panel">
    <div class="synapse-header">
      <h2 class="synapse-title">{{ t('settings.synapseTargetsTitle') }}</h2>
      <GnButton variant="primary" icon="ph ph-plus" @click="createModalOpen = true">
        {{ t('settings.synapseTargetAdd') }}
      </GnButton>
    </div>

    <p class="synapse-description">{{ t('settings.synapseTargetsDescription') }}</p>

    <div v-if="targetsStore.loading" class="synapse-loading">
      <GnLoader circle :label="t('settings.synapseTargetsLoading')" />
    </div>

    <GnTable
      v-else
      :columns="columns"
      :rows="targetsStore.targets"
      :empty-text="t('settings.synapseTargetsEmpty')"
    >
      <template #cell-created_at="{ row }">
        {{ formatDate(row.created_at) }}
      </template>
      <template #cell-actions="{ row }">
        <GnIconButton
          icon="ph ph-trash"
          :label="t('common.revoke')"
          @click="onRevoke(row.id, row.token_ref)"
        />
      </template>
    </GnTable>

    <CreateTargetModal
      :open="createModalOpen"
      :creating="targetsStore.creating"
      @close="createModalOpen = false"
      @submit="onCreate"
    />
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { locale, t } from '@/i18n/index.js'
import { useSynapseTargetsStore } from '@/stores/synapseTargets.js'
import { useConfirm } from '@/composables/useConfirm.js'
import { useToast } from 'gnexus-ui-kit/vue'
import { GnButton, GnIconButton, GnLoader, GnTable } from 'gnexus-ui-kit/vue'
import CreateTargetModal from './CreateTargetModal.vue'

const targetsStore = useSynapseTargetsStore()
const confirm = useConfirm()
const toast = useToast()

const createModalOpen = ref(false)

// Computed: a table built once would keep the language the panel opened in.
const columns = computed(() => [
  { key: 'token_ref', label: t('settings.synapseTargetColRef') },
  { key: 'created_at', label: t('col.created') },
  { key: 'actions', label: '' },
])

onMounted(() => {
  targetsStore.fetchTargets()
})

async function onCreate(tokenRef, secret) {
  try {
    await targetsStore.createTarget(tokenRef, secret)
    createModalOpen.value = false
    toast.success({ title: t('toast.synapseTargetAdded') })
  } catch (err) {
    toast.error({ title: t('toast.synapseTargetAddFailed'), text: err.message })
  }
}

async function onRevoke(id, tokenRef) {
  const ok = await confirm(t('confirm.revokeTarget', { target: tokenRef }))
  if (!ok) return
  try {
    await targetsStore.revokeTarget(id)
    toast.success({ title: t('toast.synapseTargetRevoked') })
  } catch (err) {
    toast.error({ title: t('toast.synapseTargetRevokeFailed'), text: err.message })
  }
}

function formatDate(iso) {
  if (!iso) return null
  const d = new Date(iso)
  return d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' })
}
</script>

<style scoped lang="scss">
@use 'kit-deps' as *;

.synapse-panel {
  margin-bottom: 24px;
}

.synapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.synapse-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--gn-color-text-medium);
}

.synapse-description {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--gn-color-text-medium);
}

.synapse-loading {
  padding: 24px;
  text-align: center;
}
</style>