<template>
  <WidgetShell title="Asset lookup / scan" icon="mdi-barcode-scan" :loading="loading" :editing="editing" @refresh="() => {}" @remove="$emit('remove')">
    <v-text-field
      v-model="code"
      density="compact"
      placeholder="Scan or type an asset ID / barcode / serial"
      prepend-inner-icon="mdi-magnify"
      hide-details
      autofocus
      @keyup.enter="lookup"
    />
    <div v-if="asset" class="result mt-3">
      <div class="font-weight-bold">{{ asset.asset_id }} — {{ asset.description }}</div>
      <div class="kv">
        <span>Status</span><span><v-chip size="x-small" variant="tonal">{{ (asset.status || '').replace('_', ' ') }}</v-chip></span>
        <span>Category</span><span>{{ asset.category || '—' }}</span>
        <span>Cost</span><span>{{ currency(asset.acquisition_cost) }}</span>
        <span>Location</span><span>{{ asset.location || '—' }}</span>
      </div>
    </div>
    <div v-else-if="message" class="quiet text-body-2 mt-3">{{ message }}</div>
  </WidgetShell>
</template>
<script>
import WidgetShell from './WidgetShell.vue';
import { apiRequest } from '../../services/api';
import { currency } from '../../utils/format';
export default {
  components: { WidgetShell },
  props: { token: { type: String, required: true }, editing: { type: Boolean, default: false }, config: { type: Object, default: () => ({}) } },
  emits: ['remove'],
  data() { return { code: '', asset: null, message: '', loading: false }; },
  methods: {
    currency,
    async lookup() {
      const code = this.code.trim();
      if (!code) return;
      this.loading = true; this.asset = null; this.message = '';
      try { this.asset = (await (await apiRequest(`/api/assets/lookup?code=${encodeURIComponent(code)}`, this.token)).json()).asset || null; }
      catch (e) { this.message = e.message || `No asset matches "${code}".`; }
      finally { this.loading = false; }
    }
  }
};
</script>
<style scoped>
.result { border: 1px solid rgba(128,128,128,.2); border-radius: 8px; padding: 10px 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 6px; font-size: .85rem; }
.kv span:nth-child(odd) { opacity: .6; }
</style>
