<template>
  <div>
    <div class="page-header">
      <h2>Asset Identifiers</h2>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          Enable or disable optional asset identifiers per asset type. When disabled
          for a type, the identifier is hidden from that type's forms and detail
          pages across the system.
        </p>

        <div class="table-container">
          <table class="identifier-matrix">
            <thead>
              <tr>
                <th>Identifier</th>
                <th v-for="col in assetTypeCols" :key="col.key">{{ col.label }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in identifierRows" :key="row.name">
                <td class="identifier-name">{{ row.label }}</td>
                <td v-for="col in assetTypeCols" :key="col.key">
                  <button
                    class="toggle-btn"
                    :class="{ active: matrixValue(row.name, col.key) }"
                    @click="toggleIdentifier(row.name, col.key)"
                    :disabled="saving"
                  >
                    <span class="toggle-slider"></span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useSystemSettings, identifierRows, assetTypeCols } from '../../composables/systemSettings'

const {
  saving, error, success,
  loadSettings, matrixValue, toggleIdentifier,
} = useSystemSettings()

onMounted(loadSettings)
</script>
