<template>
  <div class="h-full w-full overflow-hidden flex flex-col">
    <div class="overflow-auto custom-scrollbar flex-1 relative">
      <table class="min-w-full divide-y divide-slate-700 text-sm">
        <thead class="bg-slate-800 sticky top-0 shadow">
          <tr>
            <th scope="col" class="px-3 py-2 text-left font-semibold text-slate-300">Time</th>
            <th scope="col" class="px-3 py-2 text-left font-semibold text-slate-300">Target</th>
            <th scope="col" class="px-3 py-2 text-left font-semibold text-slate-300">Event</th>
            <th scope="col" class="px-3 py-2 text-left font-semibold text-slate-300">Details</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-800 bg-slate-900">
          <tr v-for="(evt, idx) in events" :key="idx" :class="evt.color ? `text-${evt.color}-400` : 'text-slate-400'">
            <td class="px-3 py-1.5 whitespace-nowrap">{{ evt.ts_string }}</td>
            <td class="px-3 py-1.5 whitespace-nowrap">{{ evt.target || 'Default' }}</td>
            <td class="px-3 py-1.5 font-bold">{{ evt.evt_type || evt.label || 'EVENT' }}</td>
            <td class="px-3 py-1.5 truncate max-w-xs">{{ evt.details }}</td>
          </tr>
          
          <tr v-if="events.length === 0">
             <td colspan="4" class="px-3 py-4 text-center text-slate-500 italic">Waiting for events...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue';
import { subscribeToStream } from '../services/backend';

const props = defineProps({
    config: {
        type: Object,
        default: () => ({})
    }
});

const events = ref([]);
const MAX_EVENTS = 200;

const clearTrigger = inject('clearTrigger');
if (clearTrigger) {
    watch(clearTrigger, () => {
        events.value = [];
    });
}

function formatTime() {
    const d = new Date();
    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}.${d.getMilliseconds().toString().padStart(3, '0')}`;
}

subscribeToStream((payload) => {
    if (payload && payload.marker) {
        const m = payload.marker;
        // Construct a details string from leftover keys
        const skipKeys = ['ts', 'evt_type', 'label', 'color', '_stream_id'];
        const detailsObj = {};
        for (const k in m) {
            if (!skipKeys.includes(k)) {
                detailsObj[k] = m[k];
            }
        }
        
        events.value.unshift({
            ts_string: formatTime(), // Or compute from m.ts if it's a UNIX timestamp
            evt_type: m.evt_type,
            label: m.label,
            color: m.color,
            target: m._stream_id,
            details: Object.keys(detailsObj).length ? JSON.stringify(detailsObj) : ''
        });
        
        if (events.value.length > MAX_EVENTS) {
            events.value.pop();
        }
    }
});
</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #475569;
  border-radius: 10px;
}
</style>
