import { reactive, watch } from 'vue';

const STORAGE_KEY = 'hermes_dev_flags';

interface DevFlags {
  showGrid: boolean;
  showDebugInfo: boolean;
  showHud: boolean;
}

const defaults: DevFlags = {
  showGrid: false,
  showDebugInfo: false,
  showHud: false,
};

function load(): DevFlags {
  try {
    const raw = sessionStorage.getItem(STORAGE_KEY);
    if (!raw) return { ...defaults };
    return { ...defaults, ...JSON.parse(raw) };
  } catch {
    return { ...defaults };
  }
}

const flags = reactive<DevFlags>(load());

watch(flags, (v) => {
  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(v));
}, { deep: true });

export function useDevFlags() {
  return flags;
}
