// Disposition de la vue IDE persistée en localStorage : largeurs des colonnes (desktop) et
// panneau actif (mobile). Refs réactives ; chaque changement est réécrit en localStorage.
import { ref, watch, type Ref } from 'vue';

export type MobilePanel = 'files' | 'editor' | 'diff' | 'terminal';

function persistedRef<T>(key: string, initial: T): Ref<T> {
  let start = initial;
  try {
    const raw = localStorage.getItem(key);
    if (raw != null) start = JSON.parse(raw) as T;
  } catch {
    /* localStorage indisponible / JSON corrompu : on garde le défaut */
  }
  const r = ref(start) as Ref<T>;
  watch(r, (v) => {
    try {
      localStorage.setItem(key, JSON.stringify(v));
    } catch {
      /* quota / mode privé : silencieux */
    }
  });
  return r;
}

export function useWorkspaceLayout() {
  // largeurs en px des colonnes latérales ; la colonne centrale (éditeur/diff) flexe.
  const leftWidth = persistedRef<number>('arb.ws.leftWidth', 280);
  const rightWidth = persistedRef<number>('arb.ws.rightWidth', 460);
  // `string` (et non MobilePanel) pour rester compatible avec le v-model de SegmentedControl.
  const mobilePanel = persistedRef<string>('arb.ws.mobilePanel', 'files');
  return { leftWidth, rightWidth, mobilePanel };
}