export type DisplayMode = 'classic' | 'studio'

const STORAGE_KEY = 'aigen.displayMode'

function parseMode(raw: unknown): DisplayMode | null {
  const value = String(raw || '').trim().toLowerCase()
  return value === 'classic' || value === 'studio' ? value : null
}

function readStored(): DisplayMode {
  if (!import.meta.client) return 'studio'
  try {
    return parseMode(localStorage.getItem(STORAGE_KEY)) || 'studio'
  } catch {
    return 'studio'
  }
}

function writeStored(mode: DisplayMode) {
  if (!import.meta.client) return
  try {
    localStorage.setItem(STORAGE_KEY, mode)
  } catch { /* ignore quota / private mode */ }
}

/** Classic | Studio chrome skin. One Bench tree; layout only. */
export function useDisplayMode() {
  const route = useRoute()
  const displayMode = useState<DisplayMode>('aigen.displayMode', () => 'studio')
  const sessionOverride = useState<DisplayMode | null>('aigen.displayMode.session', () => null)
  const hydrated = useState('aigen.displayMode.hydrated', () => false)

  const resolved = computed<DisplayMode>(() => {
    const fromQuery = parseMode(route.query.display)
    if (fromQuery) return fromQuery
    if (sessionOverride.value) return sessionOverride.value
    return displayMode.value
  })

  function setDisplayMode(mode: DisplayMode, opts?: { persist?: boolean; session?: boolean }) {
    const persist = opts?.persist !== false
    if (opts?.session) sessionOverride.value = mode
    else sessionOverride.value = null
    displayMode.value = mode
    if (persist) writeStored(mode)
  }

  function hydrate() {
    if (hydrated.value) return
    hydrated.value = true
    const fromQuery = parseMode(route.query.display)
    if (fromQuery) {
      sessionOverride.value = fromQuery
      return
    }
    displayMode.value = readStored()
  }

  if (import.meta.client) {
    onMounted(hydrate)
    watch(
      () => route.query.display,
      (raw) => {
        const fromQuery = parseMode(raw)
        if (fromQuery) sessionOverride.value = fromQuery
        else if (sessionOverride.value && !parseMode(route.query.display)) {
          // Drop session override when query cleared; keep stored preference.
          sessionOverride.value = null
          displayMode.value = readStored()
        }
      }
    )
  }

  return {
    displayMode: resolved,
    storedDisplayMode: displayMode,
    setDisplayMode,
    isStudio: computed(() => resolved.value === 'studio'),
    isClassic: computed(() => resolved.value === 'classic')
  }
}