/** Parent / teacher portal look & feel (localStorage + `MainLayout` data-* hooks). */

export type PortalDensity = 'comfortable' | 'compact'
export type PortalFontScale = 'sm' | 'normal' | 'large' | 'xl'
export type PortalFontFamily = 'default' | 'system' | 'readable' | 'modern'

export const PORTAL_ACCENT_VALUES = [
  'default',
  'ocean',
  'slate',
  'violet',
  'earth',
  'rose',
  'indigo',
  'sky',
  'crimson',
  'emerald',
] as const
export type PortalAccent = (typeof PORTAL_ACCENT_VALUES)[number]
/** `system` follows the device light/dark preference. */
export type PortalColorMode = 'light' | 'dark' | 'system'

export type PortalStylePrefs = {
  density: PortalDensity
  fontScale: PortalFontScale
  fontFamily: PortalFontFamily
  accent: PortalAccent
  colorMode: PortalColorMode
}

const STORAGE_DENSITY = 'alrahma_portal_density'
const STORAGE_FONT_SCALE = 'alrahma_portal_font_scale'
/** Legacy key: `normal` | `large` — migrated into `fontScale` */
const LEGACY_FONT_FLAG = 'alrahma_portal_font'
const STORAGE_FONT_FAMILY = 'alrahma_portal_font_family'
const STORAGE_ACCENT = 'alrahma_portal_accent'
const STORAGE_COLOR_MODE = 'alrahma_portal_color_mode'

function parseFontScale(raw: string | null): PortalFontScale {
  if (raw === 'sm' || raw === 'normal' || raw === 'large' || raw === 'xl') return raw
  return 'normal'
}

function parseFontFamily(raw: string | null): PortalFontFamily {
  if (raw === 'system' || raw === 'readable' || raw === 'modern') return raw
  return 'default'
}

function parseAccent(raw: string | null): PortalAccent {
  if (raw && (PORTAL_ACCENT_VALUES as readonly string[]).includes(raw)) return raw as PortalAccent
  return 'default'
}

function parseColorMode(raw: string | null): PortalColorMode {
  if (raw === 'dark' || raw === 'system') return raw
  return 'light'
}

export function readPortalStylePrefs(): PortalStylePrefs {
  const d = localStorage.getItem(STORAGE_DENSITY)
  let fontScale = parseFontScale(localStorage.getItem(STORAGE_FONT_SCALE))
  if (!localStorage.getItem(STORAGE_FONT_SCALE)) {
    const legacy = localStorage.getItem(LEGACY_FONT_FLAG)
    if (legacy === 'large') fontScale = 'large'
  }
  return {
    density: d === 'compact' ? 'compact' : 'comfortable',
    fontScale,
    fontFamily: parseFontFamily(localStorage.getItem(STORAGE_FONT_FAMILY)),
    accent: parseAccent(localStorage.getItem(STORAGE_ACCENT)),
    colorMode: parseColorMode(localStorage.getItem(STORAGE_COLOR_MODE)),
  }
}

export function writePortalStylePrefs(prefs: PortalStylePrefs): void {
  localStorage.setItem(STORAGE_DENSITY, prefs.density)
  localStorage.setItem(STORAGE_FONT_SCALE, prefs.fontScale)
  localStorage.setItem(STORAGE_FONT_FAMILY, prefs.fontFamily)
  localStorage.setItem(STORAGE_ACCENT, prefs.accent)
  localStorage.setItem(STORAGE_COLOR_MODE, prefs.colorMode)
  localStorage.removeItem(LEGACY_FONT_FLAG)
}

/**
 * Resolve stored `colorMode` to `light` | `dark`.
 * When `colorMode` is `system`, pass `osPrefersDark` from a `matchMedia` listener, or omit to read once.
 */
export function resolvePortalColorMode(
  prefs: PortalStylePrefs,
  osPrefersDark?: boolean,
): 'light' | 'dark' {
  if (prefs.colorMode === 'dark') return 'dark'
  if (prefs.colorMode === 'light') return 'light'
  if (typeof osPrefersDark === 'boolean') return osPrefersDark ? 'dark' : 'light'
  if (typeof window === 'undefined' || !window.matchMedia) return 'light'
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
