export type AccentId =
  | 'vermilion'
  | 'indigo'
  | 'emerald'
  | 'teal'
  | 'violet'
  | 'rose'
  | 'amber'
  | 'slate';

export type DensityId = 'comfortable' | 'compact';
export type RadiusId = 'default' | 'sharp' | 'round';
export type FontSizeId = 'sm' | 'md' | 'lg';

/** [light accent, light hover, light soft, dark accent, dark hover, dark soft] */
export const ACCENTS: Record<AccentId, [string, string, string, string, string, string]> = {
  vermilion: ['#E4572E', '#CF4723', '#FDECE6', '#FF7A4D', '#FF8F68', '#3A241C'],
  indigo: ['#4F46E5', '#4338CA', '#EEF0FF', '#818CF8', '#A5B4FC', '#22233F'],
  emerald: ['#0F9D6B', '#0B835A', '#E1F5EC', '#34D399', '#6EE7B7', '#12281F'],
  teal: ['#0E8F96', '#0B7A80', '#DFF4F5', '#2DD4BF', '#5EEAD4', '#10282A'],
  violet: ['#7C3AED', '#6D28D9', '#F0E8FE', '#A78BFA', '#C4B5FD', '#2A2140'],
  rose: ['#E11D48', '#BE123C', '#FEE6EC', '#FB7185', '#FDA4AF', '#3A1820'],
  amber: ['#D97706', '#B45309', '#FEF0D9', '#FBBF24', '#FCD34D', '#35260E'],
  slate: ['#334155', '#1E293B', '#E7EBF0', '#94A3B8', '#CBD5E1', '#222A35'],
};

export interface UiPrefs {
  accent: AccentId;
  density: DensityId;
  radius: RadiusId;
  fontSize: FontSizeId;
  highContrast: boolean;
  reduceMotion: boolean;
}

export const DEFAULT_UI_PREFS: UiPrefs = {
  accent: 'vermilion',
  density: 'comfortable',
  radius: 'default',
  fontSize: 'md',
  highContrast: false,
  reduceMotion: false,
};

export const UI_PREFS_KEY = 'zy-ui';

export function loadUiPrefs(): UiPrefs {
  if (typeof window === 'undefined') return DEFAULT_UI_PREFS;
  try {
    const raw = localStorage.getItem(UI_PREFS_KEY);
    if (!raw) return DEFAULT_UI_PREFS;
    return { ...DEFAULT_UI_PREFS, ...JSON.parse(raw) };
  } catch {
    return DEFAULT_UI_PREFS;
  }
}

export function saveUiPrefs(prefs: UiPrefs): void {
  try {
    localStorage.setItem(UI_PREFS_KEY, JSON.stringify(prefs));
  } catch {
    /* ignore */
  }
}

export function applyUiPrefs(prefs: UiPrefs, resolvedTheme: string): void {
  if (typeof document === 'undefined') return;
  const h = document.documentElement;
  const dark = resolvedTheme === 'dark' || resolvedTheme === 'midnight';
  const a = ACCENTS[prefs.accent] || ACCENTS.vermilion;
  const o = dark ? 3 : 0;
  const ac = a[o];
  const ach = a[o + 1];
  const acs = a[o + 2];
  const onac = dark ? '#141311' : '#ffffff';
  // v5 short names + Tailwind aliases
  h.style.setProperty('--ac', ac);
  h.style.setProperty('--ach', ach);
  h.style.setProperty('--acs', acs);
  h.style.setProperty('--onac', onac);
  h.style.setProperty('--accent', ac);
  h.style.setProperty('--accent-hover', ach);
  h.style.setProperty('--accent-soft', acs);
  h.style.setProperty('--on-accent', onac);
  h.dataset.den = prefs.density === 'compact' ? 'compact' : 'comfortable';
  h.dataset.rad = prefs.radius === 'default' ? 'default' : prefs.radius;
  h.dataset.fs = prefs.fontSize === 'md' ? 'md' : prefs.fontSize;
  h.dataset.hc = prefs.highContrast ? 'on' : 'off';
  h.dataset.rm = prefs.reduceMotion ? 'on' : 'off';
  h.classList.remove('dark', 'light');
}