<template>
  <div class="cache-footer" v-if="showCacheInfo">
    <span class="cache-badge" :class="badgeClass">
      {{ cacheText }} | {{ (responseTimeMs || 0).toFixed(2) }}ms
    </span>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  cacheHit: {
    type: Boolean,
    default: false,
  },
  responseTimeMs: {
    type: Number,
    default: 0,
  },
  cacheSource: {
    type: String,
    default: null,
  },
});

// Show only when we have valid response time
const showCacheInfo = computed(() => {
  return props.responseTimeMs > 0;
});

// Text to display: "cached L1", "cached L2", or "db"
const cacheText = computed(() => {
  if (props.cacheHit && props.cacheSource) {
    return `cached ${props.cacheSource}`;
  } else if (props.cacheHit) {
    return "cached";
  }
  return "db";
});

// CSS class for styling based on cache status
const badgeClass = computed(() => {
  if (props.cacheHit) {
    return props.cacheSource === "L1" ? "cache-l1" : "cache-l2";
  }
  return "cache-db";
});
</script>

<style scoped>
.cache-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-xs) 0;
  margin-top: var(--space-sm);
  border-top: 1px solid var(--surface-border);
}

.cache-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm, 4px);
  font-size: 11px;
  font-weight: var(--font-medium);
  font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}

/* L1 Cache - Memory (fastest) */
.cache-badge.cache-l1 {
  background: var(--green-50);
  color: var(--green-700);
}

/* L2 Cache - SQLite */
.cache-badge.cache-l2 {
  background: var(--blue-50);
  color: var(--blue-700);
}

/* Database - Fresh query */
.cache-badge.cache-db {
  background: var(--surface-hover);
  color: var(--text-color-secondary);
}

/* Dark mode adjustments */
[data-theme="dark"] .cache-badge.cache-l1 {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green-400);
}

[data-theme="dark"] .cache-badge.cache-l2 {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue-400);
}

[data-theme="dark"] .cache-badge.cache-db {
  background: var(--surface-100);
  color: var(--text-color-secondary);
}

/* Respect system dark mode preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cache-badge.cache-l1 {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green-400);
  }

  :root:not([data-theme="light"]) .cache-badge.cache-l2 {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue-400);
  }

  :root:not([data-theme="light"]) .cache-badge.cache-db {
    background: var(--surface-100);
    color: var(--text-color-secondary);
  }
}
</style>
