// ============ Theme (mode + accent) ============
const ACCENTS = {
  mint:   { bg:'#10b981', text:'#042f1c', dim:'rgba(16,185,129,.12)' },
  blue:   { bg:'#3b82f6', text:'#031836', dim:'rgba(59,130,246,.14)' },
  purple: { bg:'#8b5cf6', text:'#1a0f3d', dim:'rgba(139,92,246,.15)' },
  orange: { bg:'#f59e0b', text:'#3a2200', dim:'rgba(245,158,11,.15)' },
  pink:   { bg:'#ec4899', text:'#3d0a25', dim:'rgba(236,72,153,.15)' },
};

const resolveTheme = (mode) => {
  if (mode === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return mode;
};

const applyTheme = (mode, accent) => {
  const resolved = resolveTheme(mode);
  document.documentElement.setAttribute('data-theme', resolved);
  document.documentElement.setAttribute('data-accent', accent);
  const a = ACCENTS[accent] || ACCENTS.mint;
  document.documentElement.style.setProperty('--accent', a.bg);
  document.documentElement.style.setProperty('--accent-text', a.text);
  document.documentElement.style.setProperty('--accent-dim', a.dim);
};

const ThemeContext = React.createContext({ mode:'dark', setMode:()=>{}, accent:'mint', setAccent:()=>{} });

const ThemeProvider = ({ children }) => {
  const [mode, setModeRaw] = useState(() => { try { return localStorage.getItem('edgebook:theme') || 'system'; } catch { return 'system'; } });
  const [accent, setAccentRaw] = useState(() => { try { return localStorage.getItem('edgebook:accent') || 'mint'; } catch { return 'mint'; } });

  const setMode = (m) => { setModeRaw(m); try { localStorage.setItem('edgebook:theme', m); } catch {} };
  const setAccent = (a) => { setAccentRaw(a); try { localStorage.setItem('edgebook:accent', a); } catch {} };

  useEffect(() => { applyTheme(mode, accent); }, [mode, accent]);

  useEffect(() => {
    if (mode !== 'system') return;
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    const onChange = () => applyTheme('system', accent);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, [mode, accent]);

  return (
    <ThemeContext.Provider value={{ mode, setMode, accent, setAccent }}>
      {children}
    </ThemeContext.Provider>
  );
};
const useTheme = () => React.useContext(ThemeContext);

Object.assign(window, { ACCENTS, ThemeContext, ThemeProvider, useTheme });