<template>
  <div class="variable-help">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="category in variableCategories"
        :key="category.category"
        :title="category.category"
        :name="category.category"
      >
        <el-table :data="category.variables" stripe>
          <el-table-column prop="name" label="Variable" width="200">
            <template #default="{ row }">
              <code>{{ '{{' + row.name + '}}' }}</code>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="Type" width="100">
            <template #default="{ row }">
              <el-tag size="small">{{ row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="Description" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api'

const activeNames = ref([])
const variableCategories = ref([])

const loadVariables = async () => {
  try {
    const response = await api.get('/api/v1/template-variables/available')
    variableCategories.value = response.data.variables
    activeNames.value = [variableCategories.value[0]?.category]
  } catch (error) {
    console.error('Failed to load variables:', error)
  }
}

onMounted(() => {
  loadVariables()
})
</script>

<style scoped>
.variable-help {
  max-height: 500px;
  overflow-y: auto;
}

code {
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: #409eff;
}
</style>