<template>
  <section class="content-grid">
    <v-card class="metric span-3">
      <div class="metric-label">Assets</div>
      <div class="metric-value">{{ dashboard.stats.asset_count }}</div>
      <div class="metric-subtle">{{ dashboard.stats.in_service_count }} in service</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Capitalized cost</div>
      <div class="metric-value">{{ currency(dashboard.stats.total_cost) }}</div>
      <div class="metric-subtle">{{ dashboard.byCategory.length }} categories</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Disposed</div>
      <div class="metric-value">{{ dashboard.stats.disposed_count }}</div>
      <div class="metric-subtle">Tracked gain/loss ready</div>
    </v-card>
    <v-card class="metric span-3">
      <div class="metric-label">Open tasks</div>
      <div class="metric-value">{{ dashboard.upcomingTasks.length }}</div>
      <div class="metric-subtle">Maintenance and reviews</div>
    </v-card>

    <v-card class="span-7 panel-pad">
      <div class="toolbar-row mb-4">
        <h2 class="section-title">Category value</h2>
      </div>
      <div class="chart-box">
        <Bar :data="categoryChart" :options="chartOptions" />
      </div>
      <div class="mt-4" style="overflow-x:auto">
        <table class="asset-table">
          <thead>
            <tr>
              <th>Category</th>
              <th class="text-right">Assets</th>
              <th class="text-right">Value</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in dashboard.byCategory" :key="row.category">
              <td class="font-weight-bold">{{ row.category }}</td>
              <td class="text-right">{{ row.count }}</td>
              <td class="text-right">{{ currency(row.value) }}</td>
            </tr>
            <tr v-if="!dashboard.byCategory.length">
              <td colspan="3" class="quiet">No assets yet.</td>
            </tr>
          </tbody>
          <tfoot v-if="dashboard.byCategory.length">
            <tr>
              <td class="font-weight-bold">Total</td>
              <td class="text-right font-weight-bold">{{ totalAssets }}</td>
              <td class="text-right font-weight-bold">{{ currency(totalValue) }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </v-card>

    <v-card class="span-5 panel-pad">
      <div class="toolbar-row mb-4">
        <h2 class="section-title">Activity</h2>
      </div>
      <v-list lines="two" density="compact">
        <v-list-item v-for="log in dashboard.auditTrail" :key="log.id" prepend-icon="mdi-history">
          <v-list-item-title>{{ log.action }} {{ log.entity_type }}</v-list-item-title>
          <v-list-item-subtitle>{{ log.actor_name || 'System' }} · {{ shortDate(log.created_at) }}</v-list-item-subtitle>
        </v-list-item>
      </v-list>
    </v-card>
  </section>
</template>

<script>
import { Bar } from 'vue-chartjs';
import '../utils/charts';

export default {
  components: { Bar },
  props: {
    categoryChart: { type: Object, required: true },
    chartOptions: { type: Object, required: true },
    currency: { type: Function, required: true },
    dashboard: { type: Object, required: true },
    shortDate: { type: Function, required: true }
  },
  computed: {
    totalAssets() {
      return this.dashboard.byCategory.reduce((sum, row) => sum + Number(row.count || 0), 0);
    },
    totalValue() {
      return this.dashboard.byCategory.reduce((sum, row) => sum + Number(row.value || 0), 0);
    }
  }
};
</script>
