<template>
  <div class="enforcement-reports">
    <div class="page-header">
      <h2>Enforcement Reports</h2>
    </div>
    <p class="setting-description">
      Latest GE-Enforce result reported by each PC. "Received" means the PC picked
      up the current published manifest; status shows self-heal and failures.
    </p>

    <div v-if="error" class="error-message">{{ error }}</div>

    <div class="filters">
      <input
        type="text"
        class="form-control"
        v-model="filterHost"
        placeholder="Filter hostname"
        @keyup.enter="load"
      />
      <input
        type="text"
        class="form-control"
        v-model="filterScope"
        placeholder="Filter PC type"
        @keyup.enter="load"
      />
      <button class="btn btn-primary" @click="load">Filter</button>
      <button class="btn btn-secondary" @click="clearFilters">Clear</button>
    </div>

    <div class="card">
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Host</th><th>PC type</th><th>Received</th><th>Version</th>
              <th>Status</th><th>Installed</th><th>Skipped</th><th>Failed</th>
              <th>Last check-in</th><th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="report in reports" :key="report.reportid">
              <td>{{ report.hostname }}</td>
              <td>{{ report.scopename }}</td>
              <td>
                <span class="badge" :class="report.receivedlatest ? 'badge-success' : 'badge-warning'">
                  {{ report.receivedlatest ? 'yes' : 'behind' }}
                </span>
              </td>
              <td class="muted">{{ report.appliedversion ?? '-' }} / {{ report.latestversion ?? '-' }}</td>
              <td><span class="badge" :class="statusClass(report.status)">{{ report.status }}</span></td>
              <td>{{ report.installed }}</td>
              <td class="muted">{{ report.skipped }}</td>
              <td :class="{ 'fail-count': report.failed }">{{ report.failed }}</td>
              <td class="muted">{{ formatDate(report.lastcheckin || report.receivedat) }}</td>
              <td class="actions">
                <button class="btn btn-sm btn-secondary" @click="openDetail(report.reportid)">Detail</button>
              </td>
            </tr>
            <tr v-if="!reports.length"><td colspan="10" class="empty">No reports yet.</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Detail modal -->
    <div v-if="detail" class="modal-overlay" @click.self="detail = null">
      <div class="modal modal-report">
        <div class="modal-header">
          <h3>{{ detail.hostname }} - {{ detail.scopename }}</h3>
          <button class="modal-close" @click="detail = null">x</button>
        </div>
        <div class="modal-body">
          <p class="setting-description">
            Applied v{{ detail.appliedversion ?? '-' }} of v{{ detail.latestversion ?? '-' }};
            status {{ detail.status }}
          </p>
          <div class="table-container">
            <table>
              <thead>
                <tr><th>Entry</th><th>Action</th><th>Self-heal</th><th>Exit</th><th>Message</th></tr>
              </thead>
              <tbody>
                <tr v-for="(result, index) in detail.results" :key="index">
                  <td>{{ result.entryname }}</td>
                  <td><span class="badge" :class="actionClass(result.action)">{{ result.action }}</span></td>
                  <td>{{ result.selfhealed ? 'yes' : '' }}</td>
                  <td class="muted">{{ result.exitcode ?? '' }}</td>
                  <td class="muted">{{ result.message }}</td>
                </tr>
                <tr v-if="!detail.results.length"><td colspan="5" class="empty">No per-entry detail.</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="detail = null">Close</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

const reports = ref([])
const detail = ref(null)
const error = ref('')
const filterHost = ref('')
const filterScope = ref('')

function payload(response) { return response.data.data }

async function load() {
  const params = {}
  if (filterHost.value) params.hostname = filterHost.value
  if (filterScope.value) params.scopename = filterScope.value
  try {
    reports.value = payload(await api.get('/geenforce/reports', { params }))
    error.value = ''
  } catch (e) { error.value = 'Failed to load reports' }
}
function clearFilters() { filterHost.value = ''; filterScope.value = ''; load() }
async function openDetail(reportid) {
  try {
    detail.value = payload(await api.get(`/geenforce/reports/${reportid}`))
  } catch (e) { error.value = 'Failed to load report detail' }
}

function statusClass(status) {
  return { ok: 'badge-success', selfhealed: 'badge-info', failed: 'badge-danger' }[status] || ''
}
function actionClass(action) {
  return { installed: 'badge-info', skipped: 'badge-success', failed: 'badge-danger',
    filtered: '' }[action] || ''
}
function formatDate(value) { return value ? new Date(value).toLocaleString() : '' }

load()
</script>

<style scoped>
.enforcement-reports { max-width: 1100px; }
.muted { color: var(--text-light); }
.fail-count { color: var(--danger); font-weight: 600; }
.empty { color: var(--text-light); text-align: center; padding: 1rem; }
.modal-report { max-width: 640px; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.modal-close:hover { color: var(--text); }
</style>
