<template>
  <Layout>
    <h2 class="page-title">Supervision Dashboard</h2>
    <p class="page-sub">Telecom &amp; Navigation Division · {{ formatDate(today) }}</p>

    <div class="cards section">
      <div class="card info"><div class="num">{{ cards.scheduled }}</div><div class="lbl">Scheduled / Assigned</div></div>
      <div class="card warn"><div class="num">{{ cards.inProgress }}</div><div class="lbl">In progress</div></div>
      <div class="card ok"><div class="num">{{ cards.completed }}</div><div class="lbl">Completed</div></div>
      <div class="card alert"><div class="num">{{ cards.overdue }}</div><div class="lbl">Overdue</div></div>
      <div class="card info"><div class="num">{{ cards.awaitingValidation }}</div><div class="lbl">Awaiting validation</div></div>
      <div class="card warn"><div class="num">{{ cards.needsRevision }}</div><div class="lbl">Needs revision</div></div>
      <div class="card warn"><div class="num">{{ cards.openFindings }}</div><div class="lbl">Open findings</div></div>
      <div class="card alert"><div class="num">{{ cards.criticalFindings }}</div><div class="lbl">Critical findings</div></div>
    </div>

    <div class="section panel">
      <div class="panel-head"><h3>Validation queue</h3></div>
      <table v-if="validationQueue.length">
        <thead><tr><th>Inspection</th><th>Type</th><th>Scheduled</th><th>Assigned</th><th>Status</th><th></th></tr></thead>
        <tbody>
          <tr v-for="i in validationQueue" :key="i.id" class="clickable" @click="open(i.id)">
            <td style="font-weight: 600">{{ i.title }}<br><small style="color:#64748b">{{ i.equipment?.name }}</small></td>
            <td style="text-transform: capitalize">{{ i.inspection_type }}</td>
            <td>{{ formatDate(i.scheduled_date) }}</td>
            <td>{{ i.assignee?.name || '—' }}</td>
            <td><span :class="badgeClass(i.status)">{{ i.status }}</span></td>
            <td><button class="btn-sm">Validate</button></td>
          </tr>
        </tbody>
      </table>
      <div v-else class="state"><div class="big">📭</div>Nothing awaiting validation.</div>
    </div>

    <div class="section panel">
      <div class="panel-head"><h3>Inspection status distribution</h3></div>
      <div style="padding:16px">
        <div v-for="(count, status) in statusCounts" :key="status" class="bar-row">
          <div class="bar-label">{{ status }}</div>
          <div class="bar-track">
            <div class="bar-fill" :style="{ width: (count / Math.max(1, ...Object.values(statusCounts))) * 100 + '%' }"></div>
          </div>
          <div class="bar-val">{{ count }}</div>
        </div>
      </div>
    </div>

    <div class="section panel">
      <div class="panel-head"><h3>Performance by technician</h3></div>
      <table>
        <thead><tr><th>Technician</th><th>Total</th><th>Completed</th><th>Overdue</th></tr></thead>
        <tbody>
          <tr v-for="t in byTech" :key="t.name">
            <td>{{ t.name }}</td>
            <td>{{ t.total }}</td>
            <td>{{ t.completed }}</td>
            <td>{{ t.overdue }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </Layout>
</template>

<script setup>
import { router } from '@inertiajs/vue3'
import Layout from '../../Shared/Layout.vue'
import { formatDate } from '../../helpers'

const props = defineProps({
  today: String,
  cards: Object,
  statusCounts: Object,
  validationQueue: Array,
  byTech: Array,
})

const open = (id) => {
  router.get(window.route('inspections.index'), { open: id })
}

const badgeClass = (status) => {
  const map = {
    'Scheduled': 'badge b-grey', 'Assigned': 'badge b-blue', 'In Progress': 'badge b-amber',
    'Awaiting Validation': 'badge b-purple', 'Needs Revision': 'badge b-red', 'Completed': 'badge b-green',
    'Overdue': 'badge b-red', 'Cancelled': 'badge b-grey', 'Rescheduled': 'badge b-grey'
  }
  return map[status] || 'badge b-grey'
}
</script>
