import { useState, useEffect, useCallback } from 'react';

export type Accent = 'green' | 'ocean' | 'nebula' | 'cyber' | 'sunset' | 'crimson';

export const ACCENTS: { id: Accent; label: string; color: string }[] = [
  { id: 'green',   label: 'Green',   color: '#22e06a' },
  { id: 'ocean',   label: 'Ocean',   color: '#2f97ff' },
  { id: 'nebula',  label: 'Nebula',  color: '#a78bfa' },
  { id: 'cyber',   label: 'Cyber',   color: '#22e0d6' },
  { id: 'sunset',  label: 'Sunset',  color: '#ffae3b' },
  { id: 'crimson', label: 'Crimson', color: '#ff4d7d' },
];

const STORAGE_KEY = 'sz_accent';

function getInitial(): Accent {
  try {
    const saved = localStorage.getItem(STORAGE_KEY) as Accent | null;
    if (saved && ACCENTS.some(a => a.id === saved)) return saved;
  } catch { /* localStorage unavailable */ }
  return 'green';
}

function applyAccent(accent: Accent) {
  document.documentElement.setAttribute('data-accent', accent);
}

export function useAccent() {
  const [accent, setAccentState] = useState<Accent>(getInitial);

  useEffect(() => {
    applyAccent(accent);
    try { localStorage.setItem(STORAGE_KEY, accent); } catch { /* ignore */ }
  }, [accent]);

  const setAccent = useCallback((a: Accent) => setAccentState(a), []);

  return { accent, setAccent };
}