<template>
  <div>
    <div class="page-header">
      <h2>PC Types</h2>
      <label class="show-inactive"><input type="checkbox" v-model="showInactive" /> Show inactive</label>
      <button class="btn btn-primary" @click="openModal()">+ Add PC Type</button>
    </div>

    <div class="card">
      <div v-if="loading" class="loading">Loading...</div>

      <template v-else>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>PC Type</th>
                <th>Description</th>
                <th>Color</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="pt in visiblePcTypes" :key="pt.computertypeid">
                <td>{{ pt.computertype }}</td>
                <td class="cell-truncate" :title="pt.description">{{ pt.description || '-' }}</td>
                <td>
                  <span class="badge" :style="colorStyle(pt.color)">{{ pt.color || 'auto' }}</span>
                </td>
                <td class="actions">
                  <span v-if="pt.isactive === false" class="badge badge-secondary" style="margin-right:6px;">inactive</span>
                  <button class="btn btn-secondary btn-sm" @click="openModal(pt)">Edit</button>
                  <button class="btn btn-danger btn-sm" @click="deleteType(pt)">Delete</button>
                </td>
              </tr>
              <tr v-if="visiblePcTypes.length === 0">
                <td colspan="4" style="text-align: center; color: var(--text-light);">
                  No PC types found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </div>

    <!-- Add/Edit Modal -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h3>{{ editing ? 'Edit PC Type' : 'Add PC Type' }}</h3>
        </div>
        <form @submit.prevent="save">
          <div class="modal-body">
            <div class="form-group">
              <label for="computertype">PC Type *</label>
              <input id="computertype" v-model="form.computertype" type="text" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="description">Description</label>
              <textarea id="description" 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 class="form-group">
              <label class="checkbox-label"><input type="checkbox" v-model="form.isactive" /> Active</label>
            </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, computed, onMounted } from 'vue'
import { computersApi } from '@/api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '@/composables/toast'
import { apiError } from '@/utils/apiError'
const toast = useToast()

const pcTypes = ref([])
const showInactive = ref(false)
const visiblePcTypes = computed(() => showInactive.value ? pcTypes.value : pcTypes.value.filter(x => x.isactive !== false))
const loading = ref(true)

const showModal = ref(false)
const editing = ref(null)
const saving = ref(false)
const error = ref('')

const form = ref({ computertype: '', description: '', color: '', isactive: true })

onMounted(() => loadData())

async function loadData() {
  loading.value = true
  try {
    const response = await computersApi.types.list({ perpage: 200, active: false })
    pcTypes.value = response.data.data || []
  } catch (err) {
    console.error('Error loading PC types:', err)
  } finally {
    loading.value = false
  }
}

function openModal(item = null) {
  editing.value = item
  form.value = item
    ? { computertype: item.computertype || '', description: item.description || '', color: item.color || '', isactive: item.isactive !== false }
    : { computertype: '', description: '', color: '', isactive: true }
  error.value = ''
  showModal.value = true
}

function closeModal() { showModal.value = false; editing.value = null }

async function deleteType(pt) {
  if (!confirm(`Delete PC type "${pt.computertype}"?`)) return
  try {
    await computersApi.types.remove(pt.computertypeid)
    loadData()
  } catch (err) {
    toast.error(apiError(err, 'Failed to delete'))
  }
}

async function save() {
  error.value = ''
  saving.value = true
  try {
    if (editing.value) {
      await computersApi.types.update(editing.value.computertypeid, form.value)
    } else {
      await computersApi.types.create(form.value)
    }
    closeModal()
    loadData()
  } catch (err) {
    error.value = apiError(err, 'Failed to save')
  } finally {
    saving.value = false
  }
}
</script>
