<template>
  <WidgetShell title="Quick-add asset" icon="mdi-plus-box-outline" :loading="saving" :editing="editing" @refresh="() => {}" @remove="$emit('remove')">
    <v-text-field v-model="form.description" density="compact" label="Description *" hide-details class="mb-2" />
    <v-text-field v-model="form.category" density="compact" label="Category *" hide-details class="mb-2" />
    <div class="two">
      <v-text-field v-model.number="form.acquisition_cost" density="compact" type="number" prefix="$" label="Cost" hide-details />
      <v-text-field v-model="form.in_service_date" density="compact" type="date" label="In service" hide-details />
    </div>
    <v-btn color="primary" size="small" class="mt-3" :disabled="!form.description || !form.category" :loading="saving" prepend-icon="mdi-content-save" @click="save">Add asset</v-btn>
    <v-alert v-if="message" type="success" density="compact" class="mt-2">{{ message }}</v-alert>
    <v-alert v-if="error" type="error" density="compact" class="mt-2">{{ error }}</v-alert>
  </WidgetShell>
</template>
<script>
import WidgetShell from './WidgetShell.vue';
import { apiRequest } from '../../services/api';
function blank() { return { description: '', category: '', acquisition_cost: 0, in_service_date: new Date().toISOString().slice(0, 10) }; }
export default {
  components: { WidgetShell },
  props: { token: { type: String, required: true }, editing: { type: Boolean, default: false }, config: { type: Object, default: () => ({}) } },
  emits: ['remove'],
  data() { return { form: blank(), saving: false, message: '', error: '' }; },
  methods: {
    async save() {
      this.saving = true; this.message = ''; this.error = '';
      try {
        const body = { ...this.form, acquired_date: this.form.in_service_date };
        const asset = (await (await apiRequest('/api/assets', this.token, { method: 'POST', body: JSON.stringify(body) })).json()).asset;
        this.message = `Created ${asset.asset_id}.`;
        this.form = blank();
      } catch (e) { this.error = e.message; } finally { this.saving = false; }
    }
  }
};
</script>
<style scoped>
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
</style>
