<template>
  <section class="audit-panel">
    <header>
      <h2>{{ t('task.audits') }}</h2>
      <p v-if="!items.length">
        {{ t('task.noAudits') }}
      </p>
    </header>

    <ol
      v-if="items.length"
      class="audit-list"
    >
      <li
        v-for="item in items"
        :key="item.audit_id"
      >
        <span class="audit-dot" />
        <div>
          <strong>{{ formatReservationAuditAction(t, item.action) }}</strong>
          <small>
            {{ formatReservationActorType(t, item.actor_type) }} / {{ item.actor_id }} · {{ formatReservationDateTime(item.occurred_at) }}
          </small>
          <p v-if="item.reason">
            {{ item.reason }}
          </p>
        </div>
      </li>
    </ol>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

import type { ReservationTaskAuditLogResult } from '@/types/reservation'
import { formatReservationActorType, formatReservationAuditAction } from '@/utils/reservationDisplay'
import { formatReservationDateTime } from '@/utils/reservationFormat'

defineProps<{
  items: ReservationTaskAuditLogResult[]
}>()

const { t } = useI18n()
</script>

<style scoped>
.audit-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-md);
  padding: 16px;
}

.audit-panel header {
  display: grid;
  gap: 4px;
}

.audit-panel h2,
.audit-panel p,
.audit-list {
  margin: 0;
}

.audit-panel h2 {
  color: var(--th-color-slate-900);
  font-size: 15px;
}

.audit-panel p {
  color: var(--th-color-slate-500);
  font-size: 12px;
  line-height: 1.5;
}

.audit-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.audit-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
}

.audit-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--th-color-blue-600);
}

.audit-list div {
  display: grid;
  gap: 3px;
}

.audit-list strong {
  color: var(--th-color-slate-900);
  font-size: 13px;
}

.audit-list small {
  color: var(--th-color-slate-500);
  font-size: 12px;
}
</style>
