<template>
  <div class="debug-console">
    <div v-for="(entry, idx) in logs" :key="idx" :class="['log-entry', entry.type]">
      [{{ entry.type }}] {{ entry.message }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const logs = ref([]);

function stringify(args) {
  return args.map(arg => {
    if (typeof arg === 'object') {
      try { return JSON.stringify(arg); } catch { return String(arg); }
    }
    return String(arg);
  }).join(' ');
}

let original = {};

onMounted(() => {
  ['log', 'warn', 'error', 'info'].forEach(type => {
    // Save the original method
    original[type] = console[type];
    console[type] = function(...args) {
      logs.value.push({
        type,
        message: stringify(args)
      });
      // Optionally limit log length:
      if (logs.value.length > 200) logs.value.shift();
      original[type].apply(console, args);
    };
  });
});

onBeforeUnmount(() => {
  // Restore the original methods
  Object.keys(original).forEach(type => {
    if (original[type]) console[type] = original[type];
  });
});
</script>

<style scoped>
.debug-console {
  background: #1a1a1a;
  color: #0f0;
  font-family: monospace;
  font-size: 14px;
  padding: 10px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 5px;
  margin: 8px 0;
}
.log-entry { margin-bottom: 2px; }
.log-entry.warn { color: #ff0; }
.log-entry.error { color: #f55; }
.log-entry.info { color: #0cf; }
</style>