<template>
  <div class="page">
    <PageHeader :title="doc.title" :description="doc.description">
      <template #actions>
        <el-button @click="router.push('/ingress/keys')">{{ t('apiDocs.backToKeys') }}</el-button>
      </template>
    </PageHeader>

    <div class="page-form page-form--docs">
      <AppCard :title="t('apiDocs.authTitle')" padded>
        <p class="doc-lead">{{ t('apiDocs.authDesc') }}</p>
        <pre class="card-inset-block">{{ authExample }}</pre>
        <div class="kv-block u-mt-4">
          <p>
            <span class="label">{{ t('apiDocs.baseUrl') }}</span>
            <code>{{ baseURL }}</code>
          </p>
        </div>
      </AppCard>

      <AppCard :title="t('apiDocs.endpointsTitle')">
        <el-table :data="doc.endpoints" size="small">
          <el-table-column :label="t('apiDocs.method')" width="100">
            <template #default="{ row }">
              <el-tag :type="methodTagType(row.method)" size="small" class="method-tag">{{ row.method }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="path" :label="t('apiDocs.path')" min-width="220">
            <template #default="{ row }">
              <code class="inline-code">{{ row.path }}</code>
            </template>
          </el-table-column>
          <el-table-column prop="summary" :label="t('apiDocs.summary')" min-width="240" />
          <el-table-column :label="t('common.status')" width="110">
            <template #default="{ row }">
              <el-tag type="success" size="small">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <p v-if="doc.note" class="card-footer-hint form-hint">{{ doc.note }}</p>
      </AppCard>

      <AppCard :title="t('apiDocs.examplesTitle')" padded>
        <template v-for="(example, idx) in doc.examples" :key="idx">
          <div class="section-title">{{ example.title }}</div>
          <pre class="card-inset-block" :class="{ 'u-mb-4': idx < doc.examples.length - 1 }">{{ example.code }}</pre>
        </template>
      </AppCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import PageHeader from '@/components/PageHeader.vue'
import AppCard from '@/components/AppCard.vue'

const props = defineProps<{
  protocol: 'text' | 'image'
}>()

const { t, tm } = useI18n()
const router = useRouter()

const host = window.location.origin.replace(/\/$/, '')
const baseURL = `${host}/v1`
const authExample = `Authorization: Bearer sk-lum-<your-key>\n# or\nX-Api-Key: sk-lum-<your-key>`

interface EndpointRow {
  method: string
  path: string
  summary: string
  status: string
}

interface ExampleRow {
  title: string
  code: string
}

const doc = computed(() => {
  const key = props.protocol
  const section = tm(`apiDocs.${key}`) as {
    title: string
    description: string
    note: string
    endpointRows: EndpointRow[]
    exampleRows: ExampleRow[]
  }
  return {
    title: t(`apiDocs.${key}.title`),
    description: t(`apiDocs.${key}.description`),
    note: t(`apiDocs.${key}.note`),
    endpoints: section.endpointRows ?? [],
    examples: (section.exampleRows ?? []).map(row => ({
      title: row.title,
      code: row.code.replaceAll('{baseURL}', baseURL).replaceAll('{host}', host),
    })),
  }
})

function methodTagType(method: string) {
  switch (method.toUpperCase()) {
    case 'GET':
      return 'success'
    case 'POST':
      return 'primary'
    case 'PUT':
      return 'warning'
    case 'DELETE':
      return 'danger'
    default:
      return 'info'
  }
}
</script>
