<template>
  <WidgetShell title="Portfolio" icon="mdi-chart-box-outline" :loading="loading" :editing="editing" @refresh="load" @remove="$emit('remove')">
    <div class="stat-grid">
      <div class="stat"><div class="lbl">Assets</div><div class="val">{{ s.asset_count }}</div><div class="sub">{{ s.in_service_count }} in service</div></div>
      <div class="stat"><div class="lbl">Capitalized cost</div><div class="val">{{ currency(s.total_cost) }}</div></div>
      <div class="stat"><div class="lbl">Disposed</div><div class="val">{{ s.disposed_count }}</div><div class="sub">gain/loss tracked</div></div>
      <div class="stat"><div class="lbl">Open tasks</div><div class="val">{{ tasks }}</div><div class="sub">maintenance &amp; reviews</div></div>
    </div>
    <div v-if="error" class="quiet text-caption">{{ error }}</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 { loading: false, error: '', tasks: 0, s: { asset_count: 0, in_service_count: 0, total_cost: 0, disposed_count: 0 } }; },
  mounted() { this.load(); },
  methods: {
    currency,
    async load() {
      this.loading = true; this.error = '';
      try { const d = await (await apiRequest('/api/dashboard', this.token)).json(); this.s = d.stats; this.tasks = d.upcomingTasks.length; }
      catch (e) { this.error = e.message; } finally { this.loading = false; }
    }
  }
};
</script>
<style scoped>
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { border: 1px solid rgba(128,128,128,.18); border-radius: 8px; padding: 10px 12px; }
.lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; opacity: .65; }
.val { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.sub { font-size: .72rem; opacity: .6; }
</style>
