<template>
  <div class="report-table">
    <v-card>
      <v-card-title class="d-flex justify-space-between align-center">
        <span>Relatório de Acessos</span>
        <v-btn
          color="primary"
          prepend-icon="mdi-download"
          @click="$emit('export-data')"
          :disabled="!records.length"
        >
          Exportar
        </v-btn>
      </v-card-title>

      <v-card-text>
        <base-table
          :headers="headers"
          :items="records"
          :loading="loading"
          :items-per-page="10"
          :search="search"
        >
          <template #item.entryTime="{ item }">
            {{ formatDateTime(item.entryTime) }}
          </template>
          
          <template #item.exitTime="{ item }">
            {{ formatDateTime(item.exitTime) }}
          </template>

          <template #item.duration="{ item }">
            {{ calculateDuration(item.entryTime, item.exitTime) }}
          </template>
        </base-table>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import BaseTable from '../common/BaseTable.vue'

export default {
  name: 'ReportTable',
  components: {
    BaseTable
  },
  props: {
    records: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    search: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      headers: [
        { title: 'ID do Usuário', key: 'userId', sortable: true },
        { title: 'Nome', key: 'name', sortable: true },
        { title: 'Entrada', key: 'entryTime', sortable: true },
        { title: 'Saída', key: 'exitTime', sortable: true },
        { title: 'Duração', key: 'duration', sortable: true }
      ]
    }
  },
  methods: {
    formatDateTime(datetime) {
      if (!datetime) return '-'
      return new Date(datetime).toLocaleString('pt-BR')
    },
    calculateDuration(entry, exit) {
      if (!entry || !exit) return '-'
      const duration = new Date(exit) - new Date(entry)
      const hours = Math.floor(duration / (1000 * 60 * 60))
      const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
      return `${hours}h ${minutes}min`
    }
  },
  emits: ['export-data']
}
</script>