<template>
  <div class="space-y-6">
    <div v-if="auditLogs.length === 0" class="flex flex-col items-center justify-center py-20 bg-card/40 border border-border/50 rounded-3xl opacity-50">
      <History class="w-12 h-12 text-muted-foreground/20 mb-4" />
      <p class="text-sm text-muted-foreground">{{ t("admin.fields.noAuditLogs") }}</p>
    </div>

    <div v-else class="bg-card/30 border border-border/50 rounded-3xl overflow-hidden shadow-xl">
      <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
          <thead>
            <tr class="bg-muted/30 border-b border-border/50">
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.date") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.user") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.action") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.target") }}</th>
              <th class="p-4 text-[10px] font-bold uppercase tracking-wider">{{ t("admin.labels.details") }}</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-border/20">
            <tr v-for="log in auditLogs" :key="log.id" class="hover:bg-white/5 transition-colors">
              <td class="p-4 text-xs font-mono opacity-80 whitespace-nowrap">
                {{ formatDateTime(log.created_at) }}
              </td>
              <td class="p-4">
                <div class="flex flex-col">
                  <span class="text-xs font-bold">{{ log.user_email || 'System' }}</span>
                  <span class="text-[9px] text-muted-foreground font-mono opacity-50">#{{ log.user_id || '0' }}</span>
                </div>
              </td>
              <td class="p-4">
                <span :class="[
                  'px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-widest border',
                  log.action.includes('delete') ? 'bg-rose-500/10 text-rose-500 border-rose-500/20' : 
                  log.action.includes('create') ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20' :
                  'bg-blue-500/10 text-blue-500 border-blue-500/20'
                ]">
                  {{ log.action }}
                </span>
              </td>
              <td class="p-4 text-xs font-bold uppercase tracking-tighter opacity-70">
                {{ log.target_type }} <span class="text-[9px] font-mono opacity-50 ml-1">#{{ log.target_id }}</span>
                <span v-if="log.target_user_email" class="lowercase text-primary block mt-1 tracking-normal font-mono text-[10px]">{{ log.target_user_email }}</span>
                <span v-else-if="log.target_order_name" class="capitalize text-primary block mt-1 tracking-normal font-sans text-xs">{{ log.target_order_name }}</span>
              </td>
              <td class="p-4">
                <div class="text-[10px] text-muted-foreground leading-relaxed max-w-sm font-mono opacity-80 break-words">
                  {{ formatDetails(log.details) }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div v-if="total > 50" class="flex items-center justify-center gap-2 py-4">
       <button v-for="p in Math.ceil(total / 50)" :key="p" 
         @click="$emit('update-page', p)" 
         :class="['w-8 h-8 rounded-lg font-bold text-xs transition-all', currentPage === p ? 'bg-primary text-white shadow-glow' : 'bg-card border border-border/50 text-muted-foreground hover:border-primary/50']">
         {{ p }}
       </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { History } from "lucide-vue-next";

const { t } = useI18n();

defineProps<{
  auditLogs: any[];
  total: number;
  currentPage: number;
}>();

defineEmits(['update-page']);

const formatDateTime = (date: string) => {
  return new Date(date).toLocaleString();
};

const formatDetails = (details: any) => {
  if (!details) return '-';
  try {
    const data = typeof details === 'string' ? JSON.parse(details) : details;
    if (typeof data === 'object') {
      return Object.entries(data)
        .map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : v}`)
        .join(' | ');
    }
    return data;
  } catch (e) {
    return details;
  }
};
</script>
