<template>
  <div>
    <div class="page-header">
      <h2>{{ isEdit ? 'Edit USB Device' : 'Add USB Device' }}</h2>
    </div>

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

      <form v-else @submit.prevent="saveDevice">
        <div class="form-group">
          <label for="serialnumber">Serial Number *</label>
          <input
            id="serialnumber"
            v-model="form.serialnumber"
            type="text"
            class="form-control"
            required
            maxlength="100"
          />
        </div>

        <div class="form-group">
          <label for="displayname">Display Name *</label>
          <input
            id="displayname"
            v-model="form.displayname"
            type="text"
            class="form-control"
            required
            maxlength="100"
            placeholder="e.g., USB Flash Drive #1"
          />
        </div>

        <div class="form-group">
          <label for="label">Label</label>
          <input
            id="label"
            v-model="form.label"
            type="text"
            class="form-control"
            maxlength="100"
            placeholder="Physical label on device"
          />
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="usbtypeid">Device Type</label>
            <select
              id="usbtypeid"
              v-model="form.usbtypeid"
              class="form-control"
            >
              <option value="">-- Select Type --</option>
              <option
                v-for="type in types"
                :key="type.usbtypeid"
                :value="type.usbtypeid"
              >
                {{ type.typename }}
              </option>
            </select>
          </div>

          <div class="form-group">
            <label for="capacitygb">Capacity (GB)</label>
            <input
              id="capacitygb"
              v-model.number="form.capacitygb"
              type="number"
              class="form-control"
              min="0"
              step="1"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="vendorid">Vendor</label>
          <select
            id="vendorid"
            v-model="form.vendorid"
            class="form-control"
          >
            <option value="">-- Select Vendor --</option>
            <option
              v-for="vendor in vendors"
              :key="vendor.vendorid"
              :value="vendor.vendorid"
            >
              {{ vendor.vendorname }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label for="notes">Notes</label>
          <textarea
            id="notes"
            v-model="form.notes"
            class="form-control"
            rows="3"
          ></textarea>
        </div>

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

        <div class="form-actions">
          <button type="submit" class="btn btn-primary" :disabled="saving">
            {{ saving ? 'Saving...' : (isEdit ? 'Update Device' : 'Add Device') }}
          </button>
          <router-link to="/usb" class="btn btn-secondary">Cancel</router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usbApi, vendorsApi } from '@/api'
import { apiError } from '../../utils/apiError'

const route = useRoute()
const router = useRouter()

const isEdit = computed(() => !!route.params.id)

const loading = ref(true)
const saving = ref(false)
const error = ref('')

const types = ref([])
const vendors = ref([])

const form = ref({
  serialnumber: '',
  displayname: '',
  label: '',
  usbtypeid: '',
  capacitygb: null,
  vendorid: '',
  notes: ''
})

onMounted(async () => {
  try {
    // Load types and vendors
    const [typesRes, vendorsRes] = await Promise.all([
      usbApi.types.list(),
      vendorsApi.list({ perpage: 1000 })
    ])
    types.value = typesRes.data.data || []
    vendors.value = vendorsRes.data.data || []

    // Load device if editing
    if (isEdit.value) {
      const response = await usbApi.get(route.params.id)
      const device = response.data.data

      form.value = {
        serialnumber: device.serialnumber || '',
        displayname: device.displayname || '',
        label: device.label || '',
        usbtypeid: device.usbtypeid || '',
        capacitygb: device.capacitygb || null,
        vendorid: device.vendorid || '',
        notes: device.notes || ''
      }
    }
  } catch (err) {
    console.error('Error loading data:', err)
    error.value = 'Failed to load data'
  } finally {
    loading.value = false
  }
})

async function saveDevice() {
  error.value = ''
  saving.value = true

  try {
    const data = {
      serialnumber: form.value.serialnumber,
      displayname: form.value.displayname,
      label: form.value.label || null,
      usbtypeid: form.value.usbtypeid || null,
      capacitygb: form.value.capacitygb || null,
      vendorid: form.value.vendorid || null,
      notes: form.value.notes || null
    }

    if (isEdit.value) {
      await usbApi.update(route.params.id, data)
    } else {
      await usbApi.create(data)
    }

    router.push('/usb')
  } catch (err) {
    console.error('Error saving device:', err)
    error.value = apiError(err, 'Failed to save device')
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}
</style>
