<script lang="ts" setup>
interface ActivityEntry {
  action: string
  timestamp: string
  details: string
}

interface Props {
  activities: ActivityEntry[]
}

defineProps<Props>()

function formatTimestamp(ts: string): string {
  return new Date(ts).toLocaleString()
}

function resolveActionIcon(action: string): string {
  const map: Record<string, string> = {
    boot: 'tabler-player-play',
    shutdown: 'tabler-player-stop',
    restart: 'tabler-refresh',
    poweroff: 'tabler-power',
    rebuild: 'tabler-reload',
    reset_password: 'tabler-key',
    snapshot_create: 'tabler-camera',
    snapshot_restore: 'tabler-history',
    snapshot_delete: 'tabler-trash',
    firewall_add: 'tabler-shield-plus',
    firewall_remove: 'tabler-shield-off',
    backup_create: 'tabler-database-export',
    backup_restore: 'tabler-database-import',
    rdns_update: 'tabler-arrows-exchange',
    settings_update: 'tabler-settings',
    provision: 'tabler-rocket',
    suspend: 'tabler-ban',
    unsuspend: 'tabler-circle-check',
  }
  return map[action] ?? 'tabler-activity'
}

function resolveActionColor(action: string): string {
  if (['boot', 'provision', 'unsuspend', 'snapshot_restore', 'backup_restore'].includes(action)) return 'success'
  if (['shutdown', 'poweroff', 'suspend', 'snapshot_delete', 'firewall_remove'].includes(action)) return 'error'
  if (['restart', 'rebuild', 'reset_password'].includes(action)) return 'warning'
  return 'primary'
}
</script>

<template>
  <div class="activity-log">
    <VTimeline
      v-if="activities.length > 0"
      density="compact"
      side="end"
      line-thickness="2"
    >
      <VTimelineItem
        v-for="(activity, index) in activities"
        :key="index"
        :dot-color="resolveActionColor(activity.action)"
        :icon="resolveActionIcon(activity.action)"
        size="small"
      >
        <div class="d-flex flex-wrap align-center justify-space-between gap-2">
          <div>
            <div class="text-body-1 font-weight-medium text-capitalize">
              {{ activity.action.replace(/_/g, ' ') }}
            </div>
            <div v-if="activity.details" class="text-body-2 text-medium-emphasis">
              {{ activity.details }}
            </div>
          </div>
          <div class="text-caption text-medium-emphasis">
            {{ formatTimestamp(activity.timestamp) }}
          </div>
        </div>
      </VTimelineItem>
    </VTimeline>

    <div v-else class="text-center pa-8 text-medium-emphasis">
      <VIcon icon="tabler-history" size="48" class="mb-2" />
      <div class="text-body-1">No activity recorded yet</div>
    </div>
  </div>
</template>
