import { onBeforeUnmount, onMounted, reactive, ref } from "vue";

export interface LabEvent {
  id: number;
  message: string;
  time: string;
}

let instanceSequence = 0;
let eventSequence = 0;

export const labEvents = reactive<LabEvent[]>([]);

export function recordLabEvent(message: string) {
  labEvents.unshift({
    id: ++eventSequence,
    message,
    time: new Date().toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    }),
  });
  if (labEvents.length > 18) labEvents.length = 18;
}

/**
 * Give every Vue setup execution a visible identity. A scene-edge collapse
 * and a forward push both retain the ID. A committed back only unmounts the
 * entry being popped, then reveals the exact previous instance.
 */
export function useDemoInstance(label: string) {
  const instance = `${label.slice(0, 2).toUpperCase()}-${String(
    ++instanceSequence,
  ).padStart(2, "0")}`;
  const status = ref("created");
  recordLabEvent(`${instance} created`);

  onMounted(() => {
    status.value = "mounted";
    recordLabEvent(`${instance} mounted`);
  });
  onBeforeUnmount(() => {
    status.value = "unmounting";
    recordLabEvent(`${instance} unmounted`);
  });

  return { instance, status };
}