<template>
  <section class="content-grid">
    <v-card class="span-12 panel-pad">
      <div class="toolbar-row mb-4">
        <v-text-field v-model="localFilters.search" label="Search" hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px" @update:model-value="emitFilters" />
        <v-select v-model="localFilters.status" :items="statusItems" clearable label="Status" hide-details style="max-width: 180px" @update:model-value="emitFilters" />
        <v-spacer />
        <v-btn variant="tonal" prepend-icon="mdi-pencil-multiple" :disabled="!selectedAssetIds.length" @click="$emit('open-mass-edit')">Mass edit</v-btn>
        <v-btn variant="tonal" prepend-icon="mdi-upload" @click="$refs.importFile.click()">Import</v-btn>
        <input ref="importFile" hidden type="file" accept=".csv,.json,.xlsx,.xls,.xml" @change="$emit('import-assets', $event)" />
        <v-menu>
          <template #activator="{ props }">
            <v-btn v-bind="props" variant="tonal" prepend-icon="mdi-download">Export</v-btn>
          </template>
          <v-list density="compact">
            <v-list-item v-for="format in ['json', 'csv', 'xlsx', 'xml']" :key="format" :title="format.toUpperCase()" @click="$emit('export-assets', format)" />
          </v-list>
        </v-menu>
      </div>
      <div style="overflow-x:auto">
        <table class="asset-table">
          <thead>
            <tr>
              <th style="width:44px"><v-checkbox-btn :model-value="allSelected" @update:model-value="$emit('toggle-all', $event)" /></th>
              <th>Asset ID</th>
              <th>Description</th>
              <th>Entity</th>
              <th>Category</th>
              <th>Status</th>
              <th>Cost</th>
              <th>Service date</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="asset in assets" :key="asset.id">
              <td><v-checkbox-btn :model-value="selectedAssetIds.includes(asset.id)" @update:model-value="$emit('toggle-asset', asset.id)" /></td>
              <td class="font-weight-bold">{{ asset.asset_id }}</td>
              <td>{{ asset.description }}</td>
              <td>{{ asset.entity_name }}</td>
              <td>{{ asset.category }}</td>
              <td><span :class="['status-chip', `status-${asset.status}`]">{{ asset.status }}</span></td>
              <td>{{ currency(asset.acquisition_cost) }}</td>
              <td>{{ asset.in_service_date }}</td>
              <td class="text-right">
                <v-btn icon="mdi-pencil" size="small" variant="text" @click="$emit('edit-asset', asset)" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </v-card>
  </section>
</template>

<script>
export default {
  props: {
    allSelected: { type: Boolean, default: false },
    assets: { type: Array, required: true },
    assetFilters: { type: Object, required: true },
    currency: { type: Function, required: true },
    selectedAssetIds: { type: Array, required: true },
    statusItems: { type: Array, required: true }
  },
  emits: ['edit-asset', 'export-assets', 'filter-assets', 'import-assets', 'open-mass-edit', 'toggle-all', 'toggle-asset'],
  data() {
    return {
      localFilters: { ...this.assetFilters }
    };
  },
  watch: {
    assetFilters: {
      handler(value) {
        this.localFilters = { ...value };
      },
      deep: true
    }
  },
  methods: {
    emitFilters() {
      this.$emit('filter-assets', { ...this.localFilters });
    }
  }
};
</script>
