import { reactive, type InjectionKey, type Ref } from "vue";

export interface CompatibilityLabEvent {
  id: number;
  timestamp: string;
  source: string;
  hook: string;
  detail?: string;
}

export interface CompatibilityLabContext {
  source: string;
  routeLabel: Readonly<Ref<string>>;
}

export const demoAppValueKey: InjectionKey<string> = Symbol("demo-app-value");
export const compatibilityLabContextKey: InjectionKey<CompatibilityLabContext> =
  Symbol("compatibility-lab-context");

let eventSequence = 0;
const startedAt = performance.now();

export const compatibilityLab = reactive({
  events: [] as CompatibilityLabEvent[],
});

export function recordCompatibilityEvent(
  source: string,
  hook: string,
  detail?: string,
) {
  compatibilityLab.events.unshift({
    id: ++eventSequence,
    timestamp: `${(performance.now() - startedAt).toFixed(0)} ms`,
    source,
    hook,
    detail,
  });
  if (compatibilityLab.events.length > 120) compatibilityLab.events.splice(120);
}

export function clearCompatibilityEvents() {
  compatibilityLab.events.splice(0);
}