<template>
  <div>
    <div class="page-header">
      <h2>Asset Type Colors</h2>
      <router-link to="/settings" class="btn btn-secondary">Back to Settings</router-link>
    </div>

    <div class="card">
      <p class="hint">
        Top-level asset categories are defined by their plugins, so you can set
        their color + description here (used for map markers/legend), but not add
        or remove them.
      </p>
      <div v-if="loading" class="muted">Loading...</div>
      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Asset Type</th>
                <th>Description</th>
                <th>Color</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="t in items" :key="t.assettypeid">
                <td><strong>{{ t.assettype }}</strong></td>
                <td class="cell-truncate" :title="t.description">{{ t.description || '-' }}</td>
                <td><span class="badge" :style="colorStyle(t.color)">{{ t.color || 'auto' }}</span></td>
                <td class="actions">
                  <button class="btn btn-secondary btn-sm" @click="openModal(t)">Edit</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </div>

    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header"><h3>Edit {{ form.assettype }}</h3></div>
        <form @submit.prevent="save">
          <div class="modal-body">
            <div class="form-group">
              <label>Description</label>
              <textarea v-model="form.description" class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label>Color <span class="hint">(map markers; blank = auto)</span></label>
              <ColorSwatchPicker v-model="form.color" />
            </div>
            <div v-if="error" class="error-message">{{ error }}</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
            <button type="submit" class="btn btn-primary" :disabled="saving">{{ saving ? 'Saving...' : 'Save' }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { assetsApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { apiError } from '../../utils/apiError'

const items = ref([])
const loading = ref(true)
const showModal = ref(false)
const saving = ref(false)
const error = ref('')
const form = ref({})

onMounted(loadData)

async function loadData() {
  loading.value = true
  try {
    const response = await assetsApi.types.list()
    items.value = response.data.data || []
  } catch (err) {
    console.error('Error loading asset types:', err)
  } finally {
    loading.value = false
  }
}

function openModal(t) {
  form.value = { assettypeid: t.assettypeid, assettype: t.assettype, description: t.description || '', color: t.color || '' }
  error.value = ''
  showModal.value = true
}

function closeModal() { showModal.value = false }

async function save() {
  error.value = ''
  saving.value = true
  try {
    await assetsApi.types.update(form.value.assettypeid, { description: form.value.description, color: form.value.color })
    closeModal()
    loadData()
  } catch (err) {
    error.value = apiError(err, 'Failed to save')
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.hint { color: var(--text-light); font-size: 0.9rem; margin: 0 0 14px; }
.muted { color: var(--text-light); }
</style>
