<template>
  <div>
    <div class="page-header">
      <h1>Calibration Due</h1>
      <router-link to="/reports" class="btn btn-secondary">Back to Reports</router-link>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else>
      <div class="summary-row">
        <div v-for="b in bucketOrder" :key="b.key" class="summary-card" :style="cardStyle(b.color)">
          <span class="summary-count">{{ counts[b.key] || 0 }}</span>
          <span class="summary-label">{{ b.label }}</span>
        </div>
      </div>

      <template v-for="b in bucketOrder" :key="b.key">
      <div class="bucket card" v-if="(buckets[b.key] || []).length">
        <h3 class="bucket-title">
          <span class="dot" :style="{ background: b.color }"></span>
          {{ b.label }} ({{ (buckets[b.key] || []).length }})
        </h3>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Asset #</th>
                <th>Name</th>
                <th>Type</th>
                <th>Next Calibration</th>
                <th>Provider</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in buckets[b.key]" :key="row.assetid">
                <td>
                  <router-link :to="`/measuringtools/${row.measuringtool.measuringtoolid}`" class="asset-chip">
                    {{ row.assetnumber }}
                  </router-link>
                </td>
                <td>{{ row.name || '-' }}</td>
                <td>{{ row.measuringtool.measuringtooltypename || '-' }}</td>
                <td>{{ row.measuringtool.nextcalibrationdate ? formatDate(row.measuringtool.nextcalibrationdate) : '-' }}</td>
                <td>{{ row.measuringtool.calibrationprovider || '-' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      </template>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { measuringtoolsApi } from '@/api'

const loading = ref(true)
const counts = ref({})
const buckets = ref({})

const bucketOrder = [
  { key: 'overdue', label: 'Overdue', color: '#F44336' },
  { key: 'duesoon', label: 'Due Soon', color: '#FF9800' },
  { key: 'current', label: 'Current', color: '#4CAF50' },
  { key: 'unknown', label: 'Unknown', color: '#9E9E9E' },
]

function formatDate(d) { return new Date(d + 'T00:00:00').toLocaleDateString() }
function cardStyle(color) { return { borderTop: `3px solid ${color}` } }

onMounted(async () => {
  try {
    const response = await measuringtoolsApi.calibrationReport()
    counts.value = response.data.data.counts || {}
    buckets.value = response.data.data.buckets || {}
  } catch (err) {
    console.error('Error loading calibration report:', err)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.summary-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.summary-card {
  flex: 1; min-width: 140px; padding: 1rem 1.25rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 0.25rem;
}
.summary-count { font-size: 1.8rem; font-weight: 700; color: var(--text); }
.summary-label { font-size: 0.85rem; color: var(--text-light); }
.bucket { margin-bottom: 1.25rem; }
.bucket-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.asset-chip {
  display: inline-block; padding: 0.15rem 0.55rem;
  background: var(--bg); border-radius: 12px; font-size: 0.85rem; text-decoration: none; color: var(--text);
}
</style>
